Chore: replace react-popper with floating-ui in time pickers (#82640)

* replace react-popper with floating-ui in RelativeTimeRangePicker

* replace react-popper with floating-ui in DateTimePicker

packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx

@@ -1,10 +1,10 @@
 import { css, cx } from '@emotion/css';
+import { autoUpdate, flip, shift, useFloating } from '@floating-ui/react';
 import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
 import { useOverlay } from '@react-aria/overlays';
 import React, { FormEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import Calendar from 'react-calendar';
-import { usePopper } from 'react-popper';
 import { useMedia } from 'react-use';
 
 import { dateTimeFormat, DateTime, dateTime, GrafanaTheme2, isDateTime } from '@grafana/data';
@@ -76,11 +76,24 @@ export const DateTimePicker = ({
   const isFullscreen = useMedia(`(min-width: ${theme.breakpoints.values.lg}px)`);
   const styles = useStyles2(getStyles);
 
-  const [markerElement, setMarkerElement] = useState<HTMLInputElement | null>();
-  const [selectorElement, setSelectorElement] = useState<HTMLDivElement | null>();
+  // the order of middleware is important!
+  // see https://floating-ui.com/docs/arrow#order
+  const middleware = [
+    flip({
+      // see https://floating-ui.com/docs/flip#combining-with-shift
+      crossAxis: false,
+      boundary: document.body,
+    }),
+    shift(),
+  ];
 
-  const popper = usePopper(markerElement, selectorElement, {
+  const { refs, floatingStyles } = useFloating({
+    open: isOpen,
     placement: 'bottom-start',
+    onOpenChange: setOpen,
+    middleware,
+    whileElementsMounted: autoUpdate,
+    strategy: 'fixed',
   });
 
   const onApply = useCallback(
@@ -107,7 +120,7 @@ export const DateTimePicker = ({
         isFullscreen={isFullscreen}
         onOpen={onOpen}
         label={label}
-        ref={setMarkerElement}
+        ref={refs.setReference}
         showSeconds={showSeconds}
       />
       {isOpen ? (
@@ -122,8 +135,8 @@ export const DateTimePicker = ({
                   onClose={() => setOpen(false)}
                   maxDate={maxDate}
                   minDate={minDate}
-                  ref={setSelectorElement}
-                  style={popper.styles.popper}
+                  ref={refs.setFloating}
+                  style={floatingStyles}
                   showSeconds={showSeconds}
                   disabledHours={disabledHours}
                   disabledMinutes={disabledMinutes}

packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx

@@ -1,9 +1,9 @@
 import { css, cx } from '@emotion/css';
+import { autoUpdate, flip, shift, useClick, useDismiss, useFloating, useInteractions } from '@floating-ui/react';
 import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
 import { useOverlay } from '@react-aria/overlays';
 import React, { FormEvent, useCallback, useRef, useState } from 'react';
-import { usePopper } from 'react-popper';
 
 import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data';
 
@@ -59,12 +59,31 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
   );
   const { dialogProps } = useDialog({}, ref);
 
-  const [markerElement, setMarkerElement] = useState<HTMLDivElement | null>(null);
-  const [selectorElement, setSelectorElement] = useState<HTMLDivElement | null>(null);
-  const popper = usePopper(markerElement, selectorElement, {
-    placement: 'auto-start',
+  // the order of middleware is important!
+  // see https://floating-ui.com/docs/arrow#order
+  const middleware = [
+    flip({
+      // see https://floating-ui.com/docs/flip#combining-with-shift
+      crossAxis: false,
+      boundary: document.body,
+    }),
+    shift(),
+  ];
+
+  const { context, refs, floatingStyles } = useFloating({
+    open: isOpen,
+    placement: 'bottom-start',
+    onOpenChange: setIsOpen,
+    middleware,
+    whileElementsMounted: autoUpdate,
+    strategy: 'fixed',
   });
 
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);
+
   const styles = useStyles2(getStyles(from.validation.errorMessage, to.validation.errorMessage));
 
   const onChangeTimeOption = (option: TimeOption) => {
@@ -109,8 +128,14 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
   };
 
   return (
-    <div className={styles.container} ref={setMarkerElement}>
-      <button className={styles.pickerInput} type="button" onClick={onOpen}>
+    <div className={styles.container}>
+      <button
+        ref={refs.setReference}
+        className={styles.pickerInput}
+        type="button"
+        onClick={onOpen}
+        {...getReferenceProps()}
+      >
         <span className={styles.clockIcon}>
           <Icon name="clock-nine" />
         </span>
@@ -126,12 +151,7 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
           <div role="presentation" className={styles.backdrop} {...underlayProps} />
           <FocusScope contain autoFocus restoreFocus>
             <div ref={ref} {...overlayProps} {...dialogProps}>
-              <div
-                className={styles.content}
-                ref={setSelectorElement}
-                style={popper.styles.popper}
-                {...popper.attributes}
-              >
+              <div className={styles.content} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
                 <div className={styles.body}>
                   <CustomScrollbar className={styles.leftSide} hideHorizontalTrack>
                     <TimeRangeList