Refactor and fixes dropdown bugs (#8807)

Fixes https://github.com/twentyhq/twenty/issues/8788 Fixes https://github.com/twentyhq/twenty/issues/8793 Fixes https://github.com/twentyhq/twenty/issues/8791 Fixes https://github.com/twentyhq/twenty/issues/8890 Fixes https://github.com/twentyhq/twenty/issues/8893 - [x] Also : Icon buttons under dropdown are visible without blur : ![Capture d’écran du 2024-11-29 15-09-53](https://github.com/user-attachments/assets/f563333d-4e43-4ded-acc7-62e116004ed9) - [x] Also : <img width="237" alt="image" src="https://github.com/user-attachments/assets/e4c70936-beff-4481-89cb-0a32a36e0ee2"> - [x] Also : <img width="335" alt="image" src="https://github.com/user-attachments/assets/5be60395-6baf-49eb-8d40-197add049e20"> - [x] Also : <img width="287" alt="image" src="https://github.com/user-attachments/assets/a317561f-7986-4d70-a1c0-deee4f4e268a"> - Button create new without padding - Container is expanding - [x] Also : <img width="303" alt="image" src="https://github.com/user-attachments/assets/09f8a27f-91db-4191-acdc-aaaeedaf6da5"> - [x] Also : <img width="133" alt="image" src="https://github.com/user-attachments/assets/fe17b32e-f7a4-46c4-8040-239eaf8198e8"> Font is cut at bottom ? - [x] Also : <img width="385" alt="image" src="https://github.com/user-attachments/assets/7bab2092-2936-4112-a2ee-d32d6737e304"> The component should flip and not resize in this situation - [x] Also : <img width="244" alt="image" src="https://github.com/user-attachments/assets/5384f49a-71f9-4638-a60c-158cc8c83f81"> - [x] Also : ![image](https://github.com/user-attachments/assets/9cd1f43a-df59-401e-9a41-bdb8e93ebe58)
2024-12-06 15:27:48 +01:00
parent 14b7bcf262
commit a9cb20f317
87 changed files with 1201 additions and 1192 deletions
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@ -1,32 +1,26 @@
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import {
  autoUpdate,
  flip,
-  FloatingPortal,
  offset,
  Placement,
  size,
  useFloating,
 } from '@floating-ui/react';
-import { MouseEvent, ReactNode, useEffect, useRef } from 'react';
-import { flushSync } from 'react-dom';
+import { MouseEvent, ReactNode } from 'react';
 import { Keys } from 'react-hotkeys-hook';
-import { Key } from 'ts-key-enum';
-import { isDefined } from '~/utils/isDefined';

 import { useDropdown } from '../hooks/useDropdown';
-import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';

+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownUnmountEffect } from '@/ui/layout/dropdown/components/DropdownUnmountEffect';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponeInstanceContext';
 import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
-import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
-import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { DropdownMenu } from './DropdownMenu';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { flushSync } from 'react-dom';
+import { isDefined } from 'twenty-ui';
 import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';

 type DropdownProps = {
@ -62,24 +56,15 @@ export const Dropdown = ({
  dropdownStrategy = 'absolute',
  dropdownOffset = { x: 0, y: 0 },
  disableBlur = false,
-  usePortal = false,
  onClickOutside,
  onClose,
  onOpen,
 }: DropdownProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const {
-    isDropdownOpen,
-    toggleDropdown,
-    closeDropdown,
-    dropdownWidth,
-    setDropdownPlacement,
-  } = useDropdown(dropdownId);
+  const { isDropdownOpen, toggleDropdown } = useDropdown(dropdownId);

  const offsetMiddlewares = [];

-  const [dropdownMaxHeight, setDropdownMaxHeight] = useRecoilComponentStateV2(
+  const setDropdownMaxHeight = useSetRecoilComponentStateV2(
    dropdownMaxHeightComponentStateV2,
    dropdownId,
  );
@ -111,14 +96,6 @@ export const Dropdown = ({
    strategy: dropdownStrategy,
  });

-  useEffect(() => {
-    setDropdownPlacement(placement);
-  }, [placement, setDropdownPlacement]);
-
-  const handleHotkeyTriggered = () => {
-    toggleDropdown();
-  };
-
  const handleClickableComponentClick = (event: MouseEvent) => {
    event.stopPropagation();
    event.preventDefault();
@ -127,88 +104,41 @@ export const Dropdown = ({
    onClickOutside?.();
  };

-  useListenClickOutsideV2({
-    refs: [refs.floating, refs.domReference],
-    listenerId: dropdownId,
-    callback: () => {
-      onClickOutside?.();
-      if (isDropdownOpen) {
-        closeDropdown();
-      }
-    },
-  });
-
-  useInternalHotkeyScopeManagement({
-    dropdownScopeId: getScopeIdFromComponentId(dropdownId),
-    dropdownHotkeyScopeFromParent: dropdownHotkeyScope,
-  });
-
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
-      if (isDropdownOpen) {
-        closeDropdown();
-      }
-    },
-    dropdownHotkeyScope.scope,
-    [closeDropdown, isDropdownOpen],
-  );
-
-  const dropdownMenuStyles = {
-    ...floatingStyles,
-    maxHeight: dropdownMaxHeight,
-  };
-
  return (
    <DropdownComponentInstanceContext.Provider
      value={{ instanceId: dropdownId }}
    >
      <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
-        <div ref={containerRef} className={className}>
+        <>
          {clickableComponent && (
            <div
              ref={refs.setReference}
              onClick={handleClickableComponentClick}
-              className={className}
            >
              {clickableComponent}
            </div>
          )}
-          {hotkey && (
-            <HotkeyEffect
-              hotkey={hotkey}
-              onHotkeyTriggered={handleHotkeyTriggered}
-            />
-          )}
-          {isDropdownOpen && usePortal && (
-            <FloatingPortal>
-              <DropdownMenu
-                disableBlur={disableBlur}
-                width={dropdownMenuWidth ?? dropdownWidth}
-                data-select-disable
-                ref={refs.setFloating}
-                style={dropdownMenuStyles}
-              >
-                {dropdownComponents}
-              </DropdownMenu>
-            </FloatingPortal>
-          )}
-          {isDropdownOpen && !usePortal && (
-            <DropdownMenu
+          {isDropdownOpen && (
+            <DropdownContent
+              className={className}
+              floatingStyles={floatingStyles}
              disableBlur={disableBlur}
-              width={dropdownMenuWidth ?? dropdownWidth}
-              data-select-disable
-              ref={refs.setFloating}
-              style={dropdownMenuStyles}
-            >
-              {dropdownComponents}
-            </DropdownMenu>
+              dropdownMenuWidth={dropdownMenuWidth}
+              dropdownComponents={dropdownComponents}
+              dropdownId={dropdownId}
+              dropdownPlacement={placement ?? 'bottom-end'}
+              floatingUiRefs={refs}
+              hotkeyScope={dropdownHotkeyScope}
+              hotkey={hotkey}
+              onClickOutside={onClickOutside}
+              onHotkeyTriggered={toggleDropdown}
+            />
          )}
          <DropdownOnToggleEffect
            onDropdownClose={onClose}
            onDropdownOpen={onOpen}
          />
-        </div>
+        </>
      </DropdownScope>
      <DropdownUnmountEffect dropdownId={dropdownId} />
    </DropdownComponentInstanceContext.Provider>