fix(ui): update to floating-ui v2

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx

@@ -180,7 +180,7 @@ const AlertMenu: FC<{
     const rootRef = useRef<HTMLSpanElement | null>(null);
     useOnClickOutside(rootRef, hide, !isHidden);
 
-    const { x, y, reference, floating, strategy } = useFloating({
+    const { x, y, refs, strategy } = useFloating({
       placement: "bottom-start",
       middleware: [shift(), offset(5)],
     });
@@ -189,7 +189,7 @@ const AlertMenu: FC<{
       <span ref={rootRef}>
         <span
           className="components-label components-label-with-hover px-1 me-1 badge bg-secondary cursor-pointer"
-          ref={reference}
+          ref={refs.setReference}
           onClick={toggle}
           data-toggle="dropdown"
         >
@@ -209,7 +209,7 @@ const AlertMenu: FC<{
             afterClick={hide}
             x={x}
             y={y}
-            floating={floating}
+            floating={refs.setFloating}
             strategy={strategy}
           />
         </DropdownSlide>

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx

@@ -164,7 +164,7 @@ const GroupMenu: FC<{
   const rootRef = useRef<HTMLSpanElement | null>(null);
   useOnClickOutside(rootRef, hide, !isHidden);
 
-  const { x, y, reference, floating, strategy } = useFloating({
+  const { x, y, refs, strategy } = useFloating({
     placement: "bottom-start",
     middleware: [shift(), offset(5)],
   });
@@ -172,7 +172,7 @@ const GroupMenu: FC<{
   return (
     <span ref={rootRef}>
       <span
-        ref={reference}
+        ref={refs.setReference}
         onClick={toggle}
         className={`${
           themed ? "text-white with-click-light" : "text-muted"
@@ -189,7 +189,7 @@ const GroupMenu: FC<{
           afterClick={hide}
           x={x}
           y={y}
-          floating={floating}
+          floating={refs.setFloating}
           strategy={strategy}
         />
       </DropdownSlide>

ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx

@@ -142,7 +142,7 @@ const GridLabelSelect: FC<{
   const ref = useRef<HTMLDivElement | null>(null);
   useOnClickOutside(ref, hide, isVisible);
 
-  const { x, y, reference, floating, strategy } = useFloating({
+  const { x, y, refs, strategy } = useFloating({
     placement: "bottom",
     middleware: [shift(), offset(5)],
   });
@@ -150,7 +150,7 @@ const GridLabelSelect: FC<{
   return (
     <div ref={ref} className="components-label badge ps-1 pe-2">
       <span
-        ref={reference}
+        ref={refs.setReference}
         onClick={toggle}
         className="border-0 rounded-0 bg-inherit cursor-pointer px-1 py-0 components-grid-label-select-dropdown"
         data-toggle="dropdown"
@@ -165,7 +165,7 @@ const GridLabelSelect: FC<{
           onClose={toggle}
           x={x}
           y={y}
-          floating={floating}
+          floating={refs.setFloating}
           strategy={strategy}
         />
       </DropdownSlide>

ui/src/Components/NavBar/FilterInput/History.tsx

@@ -196,7 +196,7 @@ const History: FC<{
   const hide = useCallback(() => setIsVisible(false), []);
   const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]);
 
-  const { x, y, reference, floating, strategy } = useFloating({
+  const { x, y, refs, strategy } = useFloating({
     placement: "bottom-end",
     middleware: [
       shift(),
@@ -259,7 +259,7 @@ const History: FC<{
       className="input-group-text border-0 rounded-0 bg-inherit px-0"
     >
       <button
-        ref={reference}
+        ref={refs.setReference}
         onClick={toggle}
         className="btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon"
         type="button"
@@ -280,7 +280,7 @@ const History: FC<{
           afterClick={hide}
           x={x}
           y={y}
-          floating={floating}
+          floating={refs.setFloating}
           strategy={strategy}
           maxHeight={maxHeight}
         />

ui/src/Components/SilenceModal/Browser/MassDelete.tsx

@@ -105,7 +105,7 @@ export const SilenceDelete: FC<{
 }) => {
   const [maxHeight, setMaxHeight] = useState<number | null>(null);
 
-  const { x, y, reference, floating, strategy } = useFloating({
+  const { x, y, refs, strategy } = useFloating({
     placement: "bottom-end",
     middleware: [
       shift(),
@@ -149,14 +149,14 @@ export const SilenceDelete: FC<{
         <button
           type="button"
           className="btn btn-danger dropdown-toggle border-0"
-          ref={reference}
+          ref={refs.setReference}
           onClick={toggle}
         ></button>
         <DropdownSlide in={isOpen} unmountOnExit>
           <SilenceDeleteMenu
             x={x}
             y={y}
-            floating={floating}
+            floating={refs.setFloating}
             strategy={strategy}
             maxHeight={maxHeight}
             children={children}

ui/src/Components/TooltipWrapper/index.tsx

@@ -12,7 +12,7 @@ const TooltipWrapper: FC<{
   children: ReactNode;
   className?: string;
 }> = ({ title, children, className }) => {
-  const { x, y, reference, floating, strategy } = useFloating({
+  const { x, y, refs, strategy } = useFloating({
     placement: "top",
     middleware: [shift(), flip()],
   });
@@ -58,7 +58,7 @@ const TooltipWrapper: FC<{
         onTouchStart={supportsTouch ? showTooltip : undefined}
         onTouchCancel={supportsTouch ? hideTooltip : undefined}
         onTouchEnd={supportsTouch ? hideTooltip : undefined}
-        ref={reference}
+        ref={refs.setReference}
         className={`${className ? className : ""} tooltip-trigger`}
       >
         {children}
@@ -75,7 +75,7 @@ const TooltipWrapper: FC<{
             >
               <div
                 className="tooltip tooltip-inner"
-                ref={floating}
+                ref={refs.setFloating}
                 style={{
                   position: strategy,
                   top: y ?? "",