1880 Refactored Dropdown components (#1884)

* updated DropdownButton props

* refactoring in progress

* working but layout is wrong

* fixed bug

* wip on ColumnHeadWithDropdown

* fix bug

* fix bug

* remove unused styled component

* fix z-index bug

* add an optional argument to DropdownMenu to control the offset of the menu

* add an optional argument to DropdownMenu to control the offset of the menu

* modify files after PR comments

* clean the way the offset is handled

* fix lint

front/src/modules/pipeline/components/PipelineAddButton.tsx

@@ -2,17 +2,17 @@ import { CompanyProgressPicker } from '@/companies/components/CompanyProgressPic
 import { useCreateCompanyProgress } from '@/companies/hooks/useCreateCompanyProgress';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { IconButton } from '@/ui/button/components/IconButton';
-import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import { IconPlus } from '@/ui/icon/index';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
+import { ViewBarDropdownButton } from '@/ui/view-bar/components/ViewBarDropdownButton';
 
 export const PipelineAddButton = () => {
   const { enqueueSnackBar } = useSnackBar();
 
-  const { closeDropdownButton, toggleDropdownButton } = useDropdownButton({
+  const { closeDropdown, toggleDropdown } = useDropdown({
     dropdownId: 'add-pipeline-progress',
   });
 
@@ -47,28 +47,28 @@ export const PipelineAddButton = () => {
       console.error('There was a problem with the pipeline stage selection.');
       return;
     }
-    closeDropdownButton();
+    closeDropdown();
     createCompanyProgress(selectedCompany.id, selectedPipelineStageId);
   };
 
   return (
-    <DropdownButton
+    <ViewBarDropdownButton
       dropdownId="add-pipeline-progress"
-      buttonComponents={
+      buttonComponent={
         <IconButton
           Icon={IconPlus}
           size="medium"
           dataTestId="add-company-progress-button"
           accent="default"
           variant="secondary"
-          onClick={toggleDropdownButton}
+          onClick={toggleDropdown}
         />
       }
       dropdownComponents={
         <CompanyProgressPicker
           companyId={null}
           onSubmit={handleCompanySelected}
-          onCancel={closeDropdownButton}
+          onCancel={closeDropdown}
         />
       }
       hotkey={{

front/src/modules/ui/board/components/BoardOptionsDropdown.tsx

@@ -1,6 +1,6 @@
 import { useResetRecoilState } from 'recoil';
 
-import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
+import { ViewBarDropdownButton } from '@/ui/view-bar/components/ViewBarDropdownButton';
 import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 
 import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
@@ -23,8 +23,8 @@ export const BoardOptionsDropdown = ({
   const resetViewEditMode = useResetRecoilState(viewEditModeState);
 
   return (
-    <DropdownButton
+    <ViewBarDropdownButton
-      buttonComponents={<BoardOptionsDropdownButton />}
+      buttonComponent={<BoardOptionsDropdownButton />}
       dropdownComponents={
         <BoardOptionsDropdownContent
           customHotkeyScope={customHotkeyScope}

front/src/modules/ui/board/components/BoardOptionsDropdownButton.tsx

@@ -1,20 +1,20 @@
 import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 
 import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
 
 export const BoardOptionsDropdownButton = () => {
-  const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
+  const { isDropdownOpen, toggleDropdown } = useDropdown({
     dropdownId: BoardOptionsDropdownKey,
   });
 
   const handleClick = () => {
-    toggleDropdownButton();
+    toggleDropdown();
   };
 
   return (
     <StyledHeaderDropdownButton
-      isUnfolded={isDropdownButtonOpen}
+      isUnfolded={isDropdownOpen}
       onClick={handleClick}
     >
       Options

front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx

@@ -16,7 +16,7 @@ import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSe
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import {
   IconChevronLeft,
   IconLayoutKanban,
@@ -144,7 +144,7 @@ export const BoardOptionsDropdownContent = ({
 
   const { handleFieldVisibilityChange } = useBoardCardFields();
 
-  const { closeDropdownButton } = useDropdownButton({
+  const { closeDropdown } = useDropdown({
     dropdownId: BoardOptionsDropdownKey,
   });
 
@@ -152,7 +152,7 @@ export const BoardOptionsDropdownContent = ({
     Key.Escape,
     () => {
       resetViewEditMode();
-      closeDropdownButton();
+      closeDropdown();
     },
     customHotkeyScope.scope,
   );
@@ -163,7 +163,7 @@ export const BoardOptionsDropdownContent = ({
       handleStageSubmit();
       handleViewNameSubmit();
       resetViewEditMode();
-      closeDropdownButton();
+      closeDropdown();
     },
     customHotkeyScope.scope,
   );

front/src/modules/ui/data-table/components/ColumnHead.tsx

@@ -1,18 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-import { EntityTableHeaderOptions } from './EntityTableHeaderOptions';
+type ColumnHeadProps = {
-
-type OwnProps = {
   column: ColumnDefinition<FieldMetadata>;
-  isFirstColumn: boolean;
-  isLastColumn: boolean;
-  primaryColumnKey: string;
 };
 
 const StyledTitle = styled.div`
@@ -41,32 +35,17 @@ const StyledText = styled.span`
   white-space: nowrap;
 `;
 
-export const ColumnHead = ({
+export const ColumnHead = ({ column }: ColumnHeadProps) => {
-  column,
-  isFirstColumn,
-  isLastColumn,
-  primaryColumnKey,
-}: OwnProps) => {
   const theme = useTheme();
 
-  const { openDropdownButton } = useDropdownButton({
-    dropdownId: column.key + '-header',
-  });
-
   return (
     <>
-      <StyledTitle onClick={openDropdownButton}>
+      <StyledTitle>
         <StyledIcon>
           {column.Icon && <column.Icon size={theme.icon.size.md} />}
         </StyledIcon>
         <StyledText>{column.name}</StyledText>
       </StyledTitle>
-      <EntityTableHeaderOptions
-        column={column}
-        isFirstColumn={isFirstColumn}
-        isLastColumn={isLastColumn}
-        primaryColumnKey={primaryColumnKey}
-      />
     </>
   );
 };

front/src/modules/ui/data-table/components/ColumnHeadWithDropdown.tsx

@@ -0,0 +1,38 @@
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+
+import { ColumnDefinition } from '../types/ColumnDefinition';
+
+import { ColumnHead } from './ColumnHead';
+import { TableColumnDropdownMenu } from './TableColumnDropdownMenu';
+
+type ColumnHeadProps = {
+  column: ColumnDefinition<FieldMetadata>;
+  isFirstColumn: boolean;
+  isLastColumn: boolean;
+  primaryColumnKey: string;
+};
+
+export const ColumnHeadWithDropdown = ({
+  column,
+  isFirstColumn,
+  isLastColumn,
+  primaryColumnKey,
+}: ColumnHeadProps) => {
+  return (
+    <DropdownMenu
+      clickableComponent={<ColumnHead column={column} />}
+      dropdownId={column.key + '-header'}
+      dropdownComponents={
+        <TableColumnDropdownMenu
+          column={column}
+          isFirstColumn={isFirstColumn}
+          isLastColumn={isLastColumn}
+          primaryColumnKey={primaryColumnKey}
+        />
+      }
+      dropdownHotkeyScope={{ scope: column.key + '-header' }}
+      dropdownOffset={{ x: 0, y: -8 }}
+    />
+  );
+};

front/src/modules/ui/data-table/components/EntityTableHeader.tsx

@@ -17,7 +17,7 @@ import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumn
 import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
 import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
 
-import { ColumnHead } from './ColumnHead';
+import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
 import { EntityTableColumnMenu } from './EntityTableColumnMenu';
 import { SelectAllCheckbox } from './SelectAllCheckbox';
 
@@ -76,6 +76,11 @@ const StyledTableHead = styled.thead`
   cursor: pointer;
 `;
 
+const StyledColumnHeadContainer = styled.div`
+  position: relative;
+  z-index: 1;
+`;
+
 export const EntityTableHeader = () => {
   const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
     resizeFieldOffsetState,
@@ -183,12 +188,14 @@ export const EntityTableHeader = () => {
                 COLUMN_MIN_WIDTH,
               )}
             >
-              <ColumnHead
+              <StyledColumnHeadContainer>
-                column={column}
+                <ColumnHeadWithDropdown
-                isFirstColumn={index === 1}
+                  column={column}
-                isLastColumn={index === visibleTableColumns.length - 1}
+                  isFirstColumn={index === 1}
-                primaryColumnKey={primaryColumn.key}
+                  isLastColumn={index === visibleTableColumns.length - 1}
-              />
+                  primaryColumnKey={primaryColumn.key}
+                />
+              </StyledColumnHeadContainer>
 
               <StyledResizeHandler
                 className="cursor-col-resize"

front/src/modules/ui/data-table/components/EntityTableHeaderOptions.tsx

@@ -1,39 +0,0 @@
-import styled from '@emotion/styled';
-
-import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
-
-import {
-  EntityTableHeaderOptionsProps,
-  TableColumnDropdownMenu,
-} from './TableColumnDropdownMenu';
-
-const StyledDropdownContainer = styled.div`
-  left: 0px;
-  position: absolute;
-  top: 32px;
-  z-index: 1;
-`;
-
-export const EntityTableHeaderOptions = ({
-  isFirstColumn,
-  isLastColumn,
-  primaryColumnKey,
-  column,
-}: EntityTableHeaderOptionsProps) => {
-  return (
-    <StyledDropdownContainer>
-      <DropdownButton
-        dropdownId={column.key + '-header'}
-        dropdownComponents={
-          <TableColumnDropdownMenu
-            column={column}
-            isFirstColumn={isFirstColumn}
-            isLastColumn={isLastColumn}
-            primaryColumnKey={primaryColumnKey}
-          />
-        }
-        dropdownHotkeyScope={{ scope: column.key + '-header' }}
-      />
-    </StyledDropdownContainer>
-  );
-};

front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx

@@ -1,6 +1,6 @@
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
@@ -25,12 +25,12 @@ export const TableColumnDropdownMenu = ({
   const { handleColumnVisibilityChange, handleMoveTableColumn } =
     useTableColumns();
 
-  const { closeDropdownButton } = useDropdownButton({
+  const { closeDropdown } = useDropdown({
     dropdownId: ColumnHeadDropdownId,
   });
 
   const handleColumnMoveLeft = () => {
-    closeDropdownButton();
+    closeDropdown();
     if (isFirstColumn) {
       return;
     }
@@ -38,7 +38,7 @@ export const TableColumnDropdownMenu = ({
   };
 
   const handleColumnMoveRight = () => {
-    closeDropdownButton();
+    closeDropdown();
     if (isLastColumn) {
       return;
     }

front/src/modules/ui/data-table/options/components/TableOptionsDropdown.tsx

@@ -1,7 +1,7 @@
 import { useResetRecoilState } from 'recoil';
 
-import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { ViewBarDropdownButton } from '@/ui/view-bar/components/ViewBarDropdownButton';
 import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 
 import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
@@ -19,8 +19,8 @@ export const TableOptionsDropdown = ({
   const resetViewEditMode = useResetRecoilState(viewEditModeState);
 
   return (
-    <DropdownButton
+    <ViewBarDropdownButton
-      buttonComponents={<TableOptionsDropdownButton />}
+      buttonComponent={<TableOptionsDropdownButton />}
       dropdownHotkeyScope={customHotkeyScope}
       dropdownId={TableOptionsDropdownId}
       dropdownComponents={<TableOptionsDropdownContent />}

front/src/modules/ui/data-table/options/components/TableOptionsDropdownButton.tsx

@@ -1,16 +1,16 @@
 import { TableOptionsDropdownId } from '@/ui/data-table/constants/TableOptionsDropdownId';
 import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 
 export const TableOptionsDropdownButton = () => {
-  const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
+  const { isDropdownOpen, toggleDropdown } = useDropdown({
     dropdownId: TableOptionsDropdownId,
   });
 
   return (
     <StyledHeaderDropdownButton
-      isUnfolded={isDropdownButtonOpen}
+      isUnfolded={isDropdownOpen}
-      onClick={toggleDropdownButton}
+      onClick={toggleDropdown}
     >
       Options
     </StyledHeaderDropdownButton>

front/src/modules/ui/data-table/options/components/TableOptionsDropdownContent.tsx

@@ -9,7 +9,7 @@ import { DropdownMenuInputContainer } from '@/ui/dropdown/components/DropdownMen
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -37,7 +37,7 @@ export const TableOptionsDropdownContent = () => {
   const scopeId = useRecoilScopeId(TableRecoilScopeContext);
 
   const { onImport } = useContext(ViewBarContext);
-  const { closeDropdownButton } = useDropdownButton({
+  const { closeDropdown } = useDropdown({
     dropdownId: TableOptionsDropdownId,
   });
 
@@ -114,7 +114,7 @@ export const TableOptionsDropdownContent = () => {
     Key.Escape,
     () => {
       resetViewEditMode();
-      closeDropdownButton();
+      closeDropdown();
     },
     TableOptionsHotkeyScope.Dropdown,
   );
@@ -125,7 +125,7 @@ export const TableOptionsDropdownContent = () => {
       handleViewNameSubmit();
       resetMenu();
       resetViewEditMode();
-      closeDropdownButton();
+      closeDropdown();
     },
     TableOptionsHotkeyScope.Dropdown,
   );

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

@@ -8,13 +8,13 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
-import { useDropdownButton } from '../hooks/useDropdownButton';
+import { useDropdown } from '../hooks/useDropdown';
 import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';
 
 import { DropdownToggleEffect } from './DropdownToggleEffect';
 
-type OwnProps = {
+type DropdownMenuProps = {
-  buttonComponents?: JSX.Element | JSX.Element[];
+  clickableComponent?: JSX.Element | JSX.Element[];
   dropdownComponents: JSX.Element | JSX.Element[];
   dropdownId: string;
   hotkey?: {
@@ -23,36 +23,40 @@ type OwnProps = {
   };
   dropdownHotkeyScope: HotkeyScope;
   dropdownPlacement?: Placement;
+  dropdownOffset?: { x: number; y: number };
   onClickOutside?: () => void;
   onClose?: () => void;
   onOpen?: () => void;
 };
 
-export const DropdownButton = ({
+export const DropdownMenu = ({
-  buttonComponents,
+  clickableComponent,
   dropdownComponents,
   dropdownId,
   hotkey,
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
+  dropdownOffset = { x: 0, y: 0 },
   onClickOutside,
   onClose,
   onOpen,
-}: OwnProps) => {
+}: DropdownMenuProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const { isDropdownButtonOpen, toggleDropdownButton, closeDropdownButton } =
+  const { isDropdownOpen, toggleDropdown, closeDropdown } = useDropdown({
-    useDropdownButton({
+    dropdownId,
-      dropdownId,
+  });
-    });
 
   const { refs, floatingStyles } = useFloating({
     placement: dropdownPlacement,
-    middleware: [flip(), offset({ mainAxis: 8, crossAxis: 0 })],
+    middleware: [
+      flip(),
+      offset({ mainAxis: dropdownOffset.y, crossAxis: dropdownOffset.x }),
+    ],
   });
 
   const handleHotkeyTriggered = () => {
-    toggleDropdownButton();
+    toggleDropdown();
   };
 
   useListenClickOutside({
@@ -60,8 +64,8 @@ export const DropdownButton = ({
     callback: () => {
       onClickOutside?.();
 
-      if (isDropdownButtonOpen) {
+      if (isDropdownOpen) {
-        closeDropdownButton();
+        closeDropdown();
       }
     },
   });
@@ -74,24 +78,25 @@ export const DropdownButton = ({
   useScopedHotkeys(
     Key.Escape,
     () => {
-      closeDropdownButton();
+      closeDropdown();
     },
     dropdownHotkeyScope.scope,
-    [closeDropdownButton],
+    [closeDropdown],
   );
-
   return (
     <div ref={containerRef}>
+      {clickableComponent && (
+        <div ref={refs.setReference} onClick={toggleDropdown}>
+          {clickableComponent}
+        </div>
+      )}
       {hotkey && (
         <HotkeyEffect
           hotkey={hotkey}
           onHotkeyTriggered={handleHotkeyTriggered}
         />
       )}
-      {buttonComponents && (
+      {isDropdownOpen && (
-        <div ref={refs.setReference}>{buttonComponents}</div>
-      )}
-      {isDropdownButtonOpen && (
         <div data-select-disable ref={refs.setFloating} style={floatingStyles}>
           {dropdownComponents}
         </div>

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

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { useDropdownButton } from '../hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 
 export const DropdownToggleEffect = ({
   dropdownId,
@@ -11,15 +11,15 @@ export const DropdownToggleEffect = ({
   onDropdownClose?: () => void;
   onDropdownOpen?: () => void;
 }) => {
-  const { isDropdownButtonOpen } = useDropdownButton({ dropdownId });
+  const { isDropdownOpen } = useDropdown({ dropdownId });
 
   useEffect(() => {
-    if (isDropdownButtonOpen) {
+    if (isDropdownOpen) {
       onDropdownOpen?.();
     } else {
       onDropdownClose?.();
     }
-  }, [isDropdownButtonOpen, onDropdownClose, onDropdownOpen]);
+  }, [isDropdownOpen, onDropdownClose, onDropdownOpen]);
 
   return null;
 };

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

@@ -5,7 +5,7 @@ import { dropdownButtonHotkeyScopeScopedFamilyState } from '../states/dropdownBu
 import { isDropdownButtonOpenScopedFamilyState } from '../states/isDropdownButtonOpenScopedFamilyState';
 import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
 
-export const useDropdownButton = ({ dropdownId }: { dropdownId: string }) => {
+export const useDropdown = ({ dropdownId }: { dropdownId: string }) => {
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -49,9 +49,9 @@ export const useDropdownButton = ({ dropdownId }: { dropdownId: string }) => {
   };
 
   return {
-    isDropdownButtonOpen,
+    isDropdownOpen: isDropdownButtonOpen,
-    closeDropdownButton,
+    closeDropdown: closeDropdownButton,
-    toggleDropdownButton,
+    toggleDropdown: toggleDropdownButton,
-    openDropdownButton,
+    openDropdown: openDropdownButton,
   };
 };

front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -4,12 +4,12 @@ import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateAct
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { IconButton } from '@/ui/button/components/IconButton';
-import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { IconCheckbox, IconNotes, IconPlus } from '@/ui/icon/index';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+import { ViewBarDropdownButton } from '@/ui/view-bar/components/ViewBarDropdownButton';
 import { ActivityType } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
@@ -21,28 +21,28 @@ export const ShowPageAddButton = ({
 }: {
   entity: ActivityTargetableEntity;
 }) => {
-  const { closeDropdownButton, toggleDropdownButton } = useDropdownButton({
+  const { closeDropdown, toggleDropdown } = useDropdown({
     dropdownId: 'add-show-page',
   });
   const openCreateActivity = useOpenCreateActivityDrawer();
 
   const handleSelect = (type: ActivityType) => {
     openCreateActivity({ type, targetableEntities: [entity] });
-    closeDropdownButton();
+    closeDropdown();
   };
 
   return (
     <StyledContainer>
-      <DropdownButton
+      <ViewBarDropdownButton
         dropdownId="add-show-page"
-        buttonComponents={
+        buttonComponent={
           <IconButton
             Icon={IconPlus}
             size="medium"
             dataTestId="add-showpage-button"
             accent="default"
             variant="secondary"
-            onClick={toggleDropdownButton}
+            onClick={toggleDropdown}
           />
         }
         dropdownComponents={

front/src/modules/ui/view-bar/components/AddFilterFromDetailsButton.tsx

@@ -1,16 +1,16 @@
 import { LightButton } from '@/ui/button/components/LightButton';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { IconPlus } from '@/ui/icon';
 
 import { FilterDropdownId } from '../constants/FilterDropdownId';
 
 export const AddFilterFromDropdownButton = () => {
-  const { toggleDropdownButton } = useDropdownButton({
+  const { toggleDropdown } = useDropdown({
     dropdownId: FilterDropdownId,
   });
 
   const handleClick = () => {
-    toggleDropdownButton();
+    toggleDropdown();
   };
 
   return (

front/src/modules/ui/view-bar/components/MultipleFiltersButton.tsx

@@ -1,5 +1,5 @@
 import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { FilterDropdownId } from '../constants/FilterDropdownId';
@@ -12,7 +12,7 @@ import { selectedOperandInDropdownScopedState } from '../states/selectedOperandI
 export const MultipleFiltersButton = () => {
   const { ViewBarRecoilScopeContext } = useViewBarContext();
 
-  const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
+  const { isDropdownOpen, toggleDropdown } = useDropdown({
     dropdownId: FilterDropdownId,
   });
 
@@ -44,13 +44,13 @@ export const MultipleFiltersButton = () => {
   };
 
   const handleClick = () => {
-    toggleDropdownButton();
+    toggleDropdown();
     resetState();
   };
 
   return (
     <StyledHeaderDropdownButton
-      isUnfolded={isDropdownButtonOpen}
+      isUnfolded={isDropdownOpen}
       onClick={handleClick}
     >
       Filter

front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx

@@ -1,10 +1,10 @@
-import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { FilterDropdownId } from '../constants/FilterDropdownId';
 
 import { MultipleFiltersButton } from './MultipleFiltersButton';
 import { MultipleFiltersDropdownContent } from './MultipleFiltersDropdownContent';
+import { ViewBarDropdownButton } from './ViewBarDropdownButton';
 
 type MultipleFiltersDropdownButtonProps = {
   hotkeyScope: HotkeyScope;
@@ -14,9 +14,9 @@ export const MultipleFiltersDropdownButton = ({
   hotkeyScope,
 }: MultipleFiltersDropdownButtonProps) => {
   return (
-    <DropdownButton
+    <ViewBarDropdownButton
       dropdownId={FilterDropdownId}
-      buttonComponents={<MultipleFiltersButton />}
+      buttonComponent={<MultipleFiltersButton />}
       dropdownComponents={<MultipleFiltersDropdownContent />}
       dropdownHotkeyScope={hotkeyScope}
     />

front/src/modules/ui/view-bar/components/SortDropdownButton.tsx

@@ -2,12 +2,11 @@ import { useCallback, useState } from 'react';
 import { produce } from 'immer';
 
 import { LightButton } from '@/ui/button/components/LightButton';
-import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { IconChevronDown } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -20,6 +19,8 @@ import { sortsScopedState } from '../states/sortsScopedState';
 import { SortDefinition } from '../types/SortDefinition';
 import { SORT_DIRECTIONS, SortDirection } from '../types/SortDirection';
 
+import { ViewBarDropdownButton } from './ViewBarDropdownButton';
+
 export type SortDropdownButtonProps = {
   hotkeyScope: HotkeyScope;
   isPrimaryButton?: boolean;
@@ -53,17 +54,17 @@ export const SortDropdownButton = ({
 
   const isSortSelected = sorts.length > 0;
 
-  const { toggleDropdownButton } = useDropdownButton({
+  const { toggleDropdown } = useDropdown({
     dropdownId: SortDropdownId,
   });
 
   const handleButtonClick = () => {
-    toggleDropdownButton();
+    toggleDropdown();
     resetState();
   };
 
   const handleAddSort = (selectedSortDefinition: SortDefinition) => {
-    toggleDropdownButton();
+    toggleDropdown();
 
     setSorts(
       produce(sorts, (existingSortsDraft) => {
@@ -90,10 +91,10 @@ export const SortDropdownButton = ({
   };
 
   return (
-    <DropdownButton
+    <ViewBarDropdownButton
       dropdownId={SortDropdownId}
       dropdownHotkeyScope={hotkeyScope}
-      buttonComponents={
+      buttonComponent={
         <LightButton
           title="Sort"
           active={isSortSelected}
@@ -140,6 +141,6 @@ export const SortDropdownButton = ({
         </StyledDropdownMenu>
       }
       onClose={handleDropdownButtonClose}
-    ></DropdownButton>
+    ></ViewBarDropdownButton>
   );
 };

front/src/modules/ui/view-bar/components/ViewBar.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { TopBar } from '@/ui/top-bar/TopBar';
 
 import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
@@ -23,7 +23,7 @@ export const ViewBar = ({
   optionsDropdownButton,
   optionsDropdownKey,
 }: ViewBarProps) => {
-  const { openDropdownButton: openOptionsDropdownButton } = useDropdownButton({
+  const { openDropdown: openOptionsDropdownButton } = useDropdown({
     dropdownId: optionsDropdownKey,
   });
 

front/src/modules/ui/view-bar/components/ViewBarDropdownButton.tsx

@@ -0,0 +1,47 @@
+import { Keys } from 'react-hotkeys-hook';
+import { Placement } from '@floating-ui/react';
+
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+
+type DropdownButtonProps = {
+  buttonComponent: JSX.Element | JSX.Element[];
+  dropdownComponents: JSX.Element | JSX.Element[];
+  dropdownId: string;
+  hotkey?: {
+    key: Keys;
+    scope: string;
+  };
+  dropdownHotkeyScope: HotkeyScope;
+  dropdownPlacement?: Placement;
+  onClickOutside?: () => void;
+  onClose?: () => void;
+  onOpen?: () => void;
+};
+
+export const ViewBarDropdownButton = ({
+  buttonComponent,
+  dropdownComponents,
+  dropdownId,
+  hotkey,
+  dropdownHotkeyScope,
+  dropdownPlacement = 'bottom-end',
+  onClickOutside,
+  onClose,
+  onOpen,
+}: DropdownButtonProps) => {
+  return (
+    <DropdownMenu
+      clickableComponent={buttonComponent}
+      dropdownComponents={dropdownComponents}
+      dropdownId={dropdownId}
+      hotkey={hotkey}
+      dropdownHotkeyScope={dropdownHotkeyScope}
+      dropdownOffset={{ x: 0, y: 8 }}
+      dropdownPlacement={dropdownPlacement}
+      onClickOutside={onClickOutside}
+      onClose={onClose}
+      onOpen={onOpen}
+    />
+  );
+};

front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx

@@ -8,12 +8,11 @@ import {
   useSetRecoilState,
 } from 'recoil';
 
-import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { StyledDropdownButtonContainer } from '@/ui/dropdown/components/StyledDropdownButtonContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import {
   IconChevronDown,
   IconList,
@@ -42,6 +41,8 @@ import { ViewsDropdownId } from '../constants/ViewsDropdownId';
 import { ViewBarContext } from '../contexts/ViewBarContext';
 import { useRemoveView } from '../hooks/useRemoveView';
 
+import { ViewBarDropdownButton } from './ViewBarDropdownButton';
+
 const StyledBoldDropdownMenuItemsContainer = styled(
   StyledDropdownMenuItemsContainer,
 )`
@@ -105,10 +106,9 @@ export const ViewsDropdownButton = ({
     entityCountInCurrentViewState as RecoilValueReadOnly<number>,
   );
 
-  const { isDropdownButtonOpen, closeDropdownButton, toggleDropdownButton } =
+  const { isDropdownOpen, closeDropdown } = useDropdown({
-    useDropdownButton({
+    dropdownId: ViewsDropdownId,
-      dropdownId: ViewsDropdownId,
+  });
-    });
 
   const setViewEditMode = useSetRecoilState(viewEditModeState);
 
@@ -127,15 +127,15 @@ export const ViewsDropdownButton = ({
         set(filtersScopedState(recoilScopeId), savedFilters);
         set(sortsScopedState(recoilScopeId), savedSorts);
         set(currentViewIdScopedState(recoilScopeId), viewId);
-        closeDropdownButton();
+        closeDropdown();
       },
-    [onViewSelect, recoilScopeId, closeDropdownButton],
+    [onViewSelect, recoilScopeId, closeDropdown],
   );
 
   const handleAddViewButtonClick = () => {
     setViewEditMode({ mode: 'create', viewId: undefined });
     onViewEditModeChange?.();
-    closeDropdownButton();
+    closeDropdown();
   };
 
   const handleEditViewButtonClick = (
@@ -145,7 +145,7 @@ export const ViewsDropdownButton = ({
     event.stopPropagation();
     setViewEditMode({ mode: 'edit', viewId });
     onViewEditModeChange?.();
-    closeDropdownButton();
+    closeDropdown();
   };
 
   const { removeView } = useRemoveView();
@@ -157,22 +157,15 @@ export const ViewsDropdownButton = ({
     event.stopPropagation();
 
     await removeView(viewId);
-    closeDropdownButton();
+    closeDropdown();
-  };
-
-  const handleViewButtonClick = () => {
-    toggleDropdownButton();
   };
 
   return (
-    <DropdownButton
+    <ViewBarDropdownButton
       dropdownId={ViewsDropdownId}
       dropdownHotkeyScope={hotkeyScope}
-      buttonComponents={
+      buttonComponent={
-        <StyledDropdownButtonContainer
+        <StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>
-          isUnfolded={isDropdownButtonOpen}
-          onClick={handleViewButtonClick}
-        >
           <StyledViewIcon size={theme.icon.size.md} />
           <StyledViewName>
             {currentView?.name || defaultViewName}