Removed last old DropdownButton (#1573)

* Removed last old DropdownButton

* Update front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Fix CI

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
Co-authored-by: Thaïs <guigon.thais@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/dropdown/components/DropdownButton.tsx

@@ -1,16 +1,13 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Keys } from 'react-hotkeys-hook';
 import { flip, offset, Placement, useFloating } from '@floating-ui/react';
 
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
-import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 import { HotkeyEffect } from '../../utilities/hotkey/components/HotkeyEffect';
 import { useDropdownButton } from '../hooks/useDropdownButton';
-import { dropdownButtonCustomHotkeyScopeScopedFamilyState } from '../states/dropdownButtonCustomHotkeyScopeScopedFamilyState';
-import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
+import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';
 
 type OwnProps = {
   buttonComponents: JSX.Element | JSX.Element[];
@@ -57,22 +54,10 @@ export function DropdownButton({
     },
   });
 
-  const [dropdownButtonCustomHotkeyScope, setDropdownButtonCustomHotkeyScope] =
-    useRecoilScopedFamilyState(
-      dropdownButtonCustomHotkeyScopeScopedFamilyState,
-      dropdownId,
-      DropdownRecoilScopeContext,
-    );
-
-  useEffect(() => {
-    if (!isDeeplyEqual(dropdownButtonCustomHotkeyScope, dropdownHotkeyScope)) {
-      setDropdownButtonCustomHotkeyScope(dropdownHotkeyScope);
-    }
-  }, [
+  useInternalHotkeyScopeManagement({
+    dropdownId,
     dropdownHotkeyScope,
-    dropdownButtonCustomHotkeyScope,
-    setDropdownButtonCustomHotkeyScope,
-  ]);
+  });
 
   return (
     <div ref={containerRef}>

front/src/modules/ui/dropdown/components/DropdownMenuContainer.tsx

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, useRef } from 'react';
+import styled from '@emotion/styled';
+
+import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+
+const StyledDropdownMenuContainer = styled.ul<{
+  anchor: 'left' | 'right';
+}>`
+  padding: 0;
+  position: absolute;
+  ${({ anchor }) => {
+    if (anchor === 'right') return 'right: 0';
+  }};
+  top: 14px;
+`;
+
+export type DropdownMenuContainerProps = {
+  anchor?: 'left' | 'right';
+  children: React.ReactNode;
+  onClose?: () => void;
+  width?: `${string}px` | 'auto' | number;
+} & HTMLAttributes<HTMLUListElement>;
+
+export function DropdownMenuContainer({
+  anchor = 'right',
+  children,
+  onClose,
+  width,
+  ...props
+}: DropdownMenuContainerProps) {
+  const dropdownRef = useRef(null);
+
+  useListenClickOutside({
+    refs: [dropdownRef],
+    callback: () => {
+      onClose?.();
+    },
+  });
+
+  return (
+    <StyledDropdownMenuContainer data-select-disable {...props} anchor={anchor}>
+      <StyledDropdownMenu ref={dropdownRef} width={width}>
+        {children}
+      </StyledDropdownMenu>
+    </StyledDropdownMenuContainer>
+  );
+}

front/src/modules/ui/dropdown/components/StyledDropdownButtonContainer.tsx

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+
+type StyledDropdownButtonProps = {
+  isUnfolded: boolean;
+  isActive?: boolean;
+};
+
+export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
+  align-items: center;
+  background: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ isActive, theme, color }) =>
+    color ?? (isActive ? theme.color.blue : 'none')};
+  cursor: pointer;
+  display: flex;
+  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
+
+  padding: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+
+  padding-right: ${({ theme }) => theme.spacing(2)};
+  user-select: none;
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+`;

front/src/modules/ui/dropdown/hooks/useDropdownButton.ts

@@ -1,7 +1,7 @@
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
 
-import { dropdownButtonCustomHotkeyScopeScopedFamilyState } from '../states/dropdownButtonCustomHotkeyScopeScopedFamilyState';
+import { dropdownButtonHotkeyScopeScopedFamilyState } from '../states/dropdownButtonHotkeyScopeScopedFamilyState';
 import { isDropdownButtonOpenScopedFamilyState } from '../states/isDropdownButtonOpenScopedFamilyState';
 import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
 
@@ -18,8 +18,8 @@ export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
       DropdownRecoilScopeContext,
     );
 
-  const [dropdownButtonCustomHotkeyScope] = useRecoilScopedFamilyState(
-    dropdownButtonCustomHotkeyScopeScopedFamilyState,
+  const [dropdownButtonHotkeyScope] = useRecoilScopedFamilyState(
+    dropdownButtonHotkeyScopeScopedFamilyState,
     dropdownId,
     DropdownRecoilScopeContext,
   );
@@ -32,10 +32,10 @@ export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
   function openDropdownButton() {
     setIsDropdownButtonOpen(true);
 
-    if (dropdownButtonCustomHotkeyScope) {
+    if (dropdownButtonHotkeyScope) {
       setHotkeyScopeAndMemorizePreviousScope(
-        dropdownButtonCustomHotkeyScope.scope,
-        dropdownButtonCustomHotkeyScope.customScopes,
+        dropdownButtonHotkeyScope.scope,
+        dropdownButtonHotkeyScope.customScopes,
       );
     }
   }

front/src/modules/ui/dropdown/hooks/useInternalHotkeyScopeManagement.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+import { dropdownButtonHotkeyScopeScopedFamilyState } from '../states/dropdownButtonHotkeyScopeScopedFamilyState';
+import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
+
+export const useInternalHotkeyScopeManagement = ({
+  dropdownId,
+  dropdownHotkeyScope,
+}: {
+  dropdownId: string;
+  dropdownHotkeyScope?: HotkeyScope;
+}) => {
+  const [dropdownButtonHotkeyScope, setDropdownButtonHotkeyScope] =
+    useRecoilScopedFamilyState(
+      dropdownButtonHotkeyScopeScopedFamilyState,
+      dropdownId,
+      DropdownRecoilScopeContext,
+    );
+
+  useEffect(() => {
+    if (!isDeeplyEqual(dropdownButtonHotkeyScope, dropdownHotkeyScope)) {
+      setDropdownButtonHotkeyScope(dropdownHotkeyScope);
+    }
+  }, [
+    dropdownHotkeyScope,
+    dropdownButtonHotkeyScope,
+    setDropdownButtonHotkeyScope,
+  ]);
+};

front/src/modules/ui/dropdown/states/dropdownButtonHotkeyScopeScopedFamilyState.ts

@@ -2,10 +2,10 @@ import { atomFamily } from 'recoil';
 
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
-export const dropdownButtonCustomHotkeyScopeScopedFamilyState = atomFamily<
+export const dropdownButtonHotkeyScopeScopedFamilyState = atomFamily<
   HotkeyScope | null | undefined,
   string
 >({
-  key: 'dropdownButtonCustomHotkeyScopeScopedState',
+  key: 'dropdownButtonHotkeyScopeScopedFamilyState',
   default: null,
 });