chore: remove react popper (#798)

Closes: #794
zakodium-oss · Dec 5, 2024 · bb5a82d · bb5a82d
1 parent 67023c8
commit bb5a82d
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 122 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,6 @@
     "@blueprintjs/select": "^5.3.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@tanstack/react-query": "^5.61.5",
@@ -68,14 +67,14 @@
     "react-dropzone": "14.3.5",
     "react-icons": "^5.3.0",
     "react-inspector": "^6.0.2",
-    "react-popper": "^2.3.0",
     "tinycolor2": "^1.6.0",
     "ts-pattern": "^5.5.0",
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
     "@blueprintjs/core": "^5.16.0",
     "@blueprintjs/icons": "^5.15.0",
+    "@floating-ui/react": "^0.26.28",
     "@playwright/experimental-ct-react": "^1.49.0",
     "@playwright/test": "^1.49.0",
     "@storybook/addon-essentials": "^8.4.5",

diff --git a/src/app/panels/measurements/MeasurementColorPreview.tsx b/src/app/panels/measurements/MeasurementColorPreview.tsx
@@ -1,16 +1,28 @@
 import styled from '@emotion/styled';
-import { useRef } from 'react';
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
 
 import type { MeasurementKind } from '../../../app-data/index.js';
 import { useAppDispatch } from '../../../app-data/index.js';
+import type { ColorConfig } from '../../../components/index.js';
 import {
+  assert,
   ColorPicker,
   ColorPreview,
-  useModifiedPopper,
-  useOnClickOutside,
   useOnOff,
 } from '../../../components/index.js';
-import type { ColorConfig } from '../../../components/index.js';
 
 interface MeasurementColorPreviewProps {
   measurementId: string;
@@ -29,55 +41,74 @@ const ColorPreviewButton = styled.button`
 export function MeasurementColorPreview(props: MeasurementColorPreviewProps) {
   const { measurementId, kind, color } = props;
 
-  const dispatch = useAppDispatch();
+  assert(color.kind === 'fixed', 'Only fixed colors are supported');
 
-  const ref = useRef<HTMLDivElement | null>(null);
+  const dispatch = useAppDispatch();
   const [isOpened, , close, toggle] = useOnOff(false);
-  const { setReferenceElement, setPopperElement, popperProps } =
-    useModifiedPopper<HTMLButtonElement>({
-      placement: 'bottom-start',
-      offset: 6,
-    });
 
-  useOnClickOutside(ref, close);
+  const { context, refs, floatingStyles } = useFloating({
+    strategy: 'fixed',
+    placement: 'bottom-start',
+    open: isOpened,
+    whileElementsMounted: autoUpdate,
+    onOpenChange: (open: boolean, event?: Event) => {
+      if (!open && event) {
+        return close();
+      }
+    },
+    middleware: [offset(6), flip(), shift()],
+  });
+
+  const focus = useFocus(context);
+  const role = useRole(context);
+  const dismiss = useDismiss(context, { outsidePress: true });
+
+  const { getFloatingProps, getReferenceProps } = useInteractions([
+    focus,
+    role,
+    dismiss,
+  ]);
 
   return (
     <>
       <ColorPreviewButton
         type="button"
-        ref={setReferenceElement}
+        ref={refs.setReference}
         onClick={toggle}
+        {...getReferenceProps()}
       >
         <ColorPreview color={color} />
       </ColorPreviewButton>
       {isOpened && (
-        <div
-          ref={(div) => {
-            setPopperElement(div);
-            ref.current = div;
-          }}
-          {...popperProps}
-        >
-          {color.kind === 'fixed' ? (
-            <FixedColorPicker
-              color={color.color}
-              onChange={(newColor) =>
-                dispatch({
-                  type: 'CHANGE_MEASUREMENT_DISPLAY',
-                  payload: {
-                    display: {
-                      color: {
-                        kind: 'fixed',
-                        color: newColor,
+        <FloatingPortal>
+          <FloatingOverlay>
+            <FloatingFocusManager context={context}>
+              <div
+                style={floatingStyles}
+                ref={refs.setFloating}
+                {...getFloatingProps()}
+              >
+                <FixedColorPicker
+                  color={color.color}
+                  onChange={(newColor) =>
+                    dispatch({
+                      type: 'CHANGE_MEASUREMENT_DISPLAY',
+                      payload: {
+                        display: {
+                          color: {
+                            kind: 'fixed',
+                            color: newColor,
+                          },
+                        },
+                        measurement: { id: measurementId, kind },
                       },
-                    },
-                    measurement: { id: measurementId, kind },
-                  },
-                })
-              }
-            />
-          ) : null}
-        </div>
+                    })
+                  }
+                />
+              </div>
+            </FloatingFocusManager>
+          </FloatingOverlay>
+        </FloatingPortal>
       )}
     </>
   );

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
@@ -93,6 +93,7 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
         flex: item?.isOpen ? '1 1 1px' : 'none',
         display: 'flex',
         flexDirection: 'column',
+        isolation: 'isolate',
       }}
     >
       <div

diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts
@@ -1,6 +1,5 @@
 export * from './useDoubleClick.js';
 export * from './useHashSearchParams.js';
-export * from './useModifiedPopper.js';
 export * from './useOnClickOutside.js';
 export * from './useOnOff.js';
 export * from './useToggle.js';

diff --git a/src/components/hooks/useModifiedPopper.ts b/src/components/hooks/useModifiedPopper.ts
diff --git a/src/components/info-panel/InfoPanel.tsx b/src/components/info-panel/InfoPanel.tsx
@@ -55,7 +55,7 @@ const style = {
     transition: 'all 0.3s ease-in-out',
   }),
   button: css({
-    zIndex: 10,
+    zIndex: 1,
     position: 'sticky',
     height: 30,
     top: 0,

diff --git a/stories/app/measurements/measurement-color-preview.stories.tsx b/stories/app/measurements/measurement-color-preview.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MeasurementColorPreview } from '../../../src/app/index.js';
+import { AppStateProvider } from '../../../src/app-data/index.js';
+
+export default {
+  title: 'Measurements / Color Preview',
+  component: MeasurementColorPreview,
+} as Meta;
+
+type Story = StoryObj<typeof MeasurementColorPreview>;
+
+export const ColorPreview = {
+  args: {
+    measurementId: '1',
+    kind: 'ir',
+    color: {
+      kind: 'fixed',
+      color: 'blue',
+    },
+  },
+  decorators: (Story) => (
+    <AppStateProvider>
+      <Story />
+    </AppStateProvider>
+  ),
+} satisfies Story;