Feat/floating UI toolbar dropdown (#2027)

* toolbar opens where the button is

* udpated positioning of toolbar dropdown with flyout-ui

* fix: test

* Create good-carpets-drive.md

Co-authored-by: Ziad Beyens <[email protected]>

.changeset/good-carpets-drive.md

@@ -0,0 +1,6 @@
+---
+"@udecode/plate-ui-font": patch
+"@udecode/plate-ui-toolbar": patch
+---
+
+Feat/floating UI toolbar dropdown

examples/src/ToolbarButtons.tsx

@@ -19,10 +19,10 @@ import {
 import { AlignToolbarButtons } from './align/AlignToolbarButtons';
 import { BasicElementToolbarButtons } from './basic-elements/BasicElementToolbarButtons';
 import { BasicMarkToolbarButtons } from './basic-marks/BasicMarkToolbarButtons';
+import { ExcalidrawElementToolbarButton } from './excalidraw/ExcalidrawElementToolbarButton';
 import { IndentToolbarButtons } from './indent/IndentToolbarButtons';
 import { ListToolbarButtons } from './list/ListToolbarButtons';
 import { TableToolbarButtons } from './table/TableToolbarButtons';
-import { ExcalidrawElementToolbarButton  } from './excalidraw/ExcalidrawElementToolbarButton'
 
 export const ToolbarButtons = () => {
   const colorTooltip: TippyProps = { content: 'Text color' };

packages/ui/nodes/font/src/ColorPickerToolbarDropdown/ColorPickerToolbarDropdown.spec.tsx

@@ -101,7 +101,7 @@ describe('ColorPickerToolbarDropdown', () => {
       });
 
       it('should open the color picker', () => {
-        expect(screen.getByTestId('ColorPicker')).not.toBeVisible();
+        expect(() => screen.getByTestId('ColorPicker')).toThrowError();
 
         openToolbar();
 
@@ -125,8 +125,7 @@ describe('ColorPickerToolbarDropdown', () => {
           },
         ]);
 
-        const value = await screen.findByTestId('ColorPicker');
-        expect(value).not.toBeVisible();
+        expect(() => screen.getByTestId('ColorPicker')).toThrowError();
       });
 
       it(`should clear selected ${target}`, async () => {
@@ -147,8 +146,7 @@ describe('ColorPickerToolbarDropdown', () => {
           },
         ]);
 
-        const value = await screen.findByTestId('ColorPicker');
-        expect(value).not.toBeVisible();
+        expect(() => screen.getByTestId('ColorPicker')).toThrowError();
       });
     });
   };

packages/ui/toolbar/src/ToolbarDropdown/ToolbarDropdown.tsx

@@ -1,6 +1,7 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode } from 'react';
 import { css } from 'styled-components';
 import tw from 'twin.macro';
+import { useDropdownControls } from './useDropdownControls';
 
 type ToolbarDropdownProps = {
   control: ReactNode;
@@ -17,53 +18,33 @@ export const ToolbarDropdown = ({
   onOpen,
   onClose,
 }: ToolbarDropdownProps) => {
-  const [
-    referenceElement,
-    setReferenceElement,
-  ] = useState<HTMLDivElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null
-  );
-
-  useEffect(() => {
-    const listener = (ev: MouseEvent) => {
-      if (open) {
-        if (referenceElement && ev.composedPath().includes(referenceElement)) {
-          return;
-        }
-        if (popperElement && ev.composedPath().includes(popperElement)) {
-          return;
-        }
-
-        onClose?.(ev);
-      }
-    };
-    document.body.addEventListener('mousedown', listener);
-    return () => {
-      document.body.removeEventListener('mousedown', listener);
-    };
-  }, [onClose, open, popperElement, referenceElement]);
+  const { styles, reference, floating } = useDropdownControls({
+    open,
+    onClose,
+  });
 
   return (
     <>
-      <div ref={setReferenceElement} onMouseDown={onOpen}>
+      <div ref={reference} onMouseDown={onOpen}>
         {control}
       </div>
 
-      <div
-        ref={setPopperElement}
-        css={[
-          tw`absolute bg-white top-10`,
-          !open && tw`hidden`,
-          css`
-            border: 1px solid #ccc;
-            box-shadow: 0 1px 3px 0 #ccc;
-            z-index: 1;
-          `,
-        ]}
-      >
-        {children}
-      </div>
+      {open && (
+        <div
+          ref={floating}
+          css={[
+            tw` bg-white`,
+            css`
+              border: 1px solid #ccc;
+              box-shadow: 0 1px 3px 0 #ccc;
+              z-index: 1;
+            `,
+          ]}
+          style={styles}
+        >
+          {children}
+        </div>
+      )}
     </>
   );
 };

packages/ui/toolbar/src/ToolbarDropdown/useDropdownControls.ts

@@ -0,0 +1,65 @@
+import { useEffect } from 'react';
+import { ExtendedRefs, flip, useFloating } from '@udecode/plate-floating';
+
+type useDropdownControlsProps = {
+  open: boolean;
+  onClose?: (ev: MouseEvent) => void;
+};
+
+const closeAllExceptSelectedOneListener = ({
+  open,
+  onClose,
+  refs,
+}: useDropdownControlsProps & { refs: ExtendedRefs<HTMLElement> }) => (
+  ev: MouseEvent
+) => {
+  if (open) {
+    const target = ev.target as HTMLElement;
+    if (refs.reference.current?.contains(target)) {
+      return;
+    }
+    if (refs.floating.current?.contains(target)) {
+      return;
+    }
+
+    onClose?.(ev);
+  }
+};
+
+export const useDropdownControls = ({
+  open,
+  onClose,
+}: useDropdownControlsProps) => {
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    refs,
+  } = useFloating<HTMLElement>({
+    open,
+    strategy: 'fixed',
+    placement: 'bottom-start',
+    middleware: [flip()],
+  });
+
+  useEffect(() => {
+    const listener = closeAllExceptSelectedOneListener({ open, onClose, refs });
+    document.body.addEventListener('mousedown', listener);
+    return () => {
+      document.body.removeEventListener('mousedown', listener);
+    };
+  }, [onClose, open, refs]);
+
+  return {
+    styles: {
+      position: strategy,
+      top: y ?? 0,
+      left: x ?? 0,
+      width: 'max-content',
+    },
+    reference,
+    floating,
+  };
+};