New view picker (#4610)

* Implement new view picker

* Complete feature

* Fixes according to review

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -35,6 +35,7 @@ type DropdownProps = {
   dropdownPlacement?: Placement;
   dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number;
   dropdownOffset?: { x?: number; y?: number };
+  disableBlur?: boolean;
   onClickOutside?: () => void;
   onClose?: () => void;
   onOpen?: () => void;
@@ -50,6 +51,7 @@ export const Dropdown = ({
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
   dropdownOffset = { x: 0, y: 0 },
+  disableBlur = false,
   onClickOutside,
   onClose,
   onOpen,
@@ -109,7 +111,10 @@ export const Dropdown = ({
         {clickableComponent && (
           <div
             ref={refs.setReference}
-            onClick={toggleDropdown}
+            onClick={() => {
+              toggleDropdown();
+              onClickOutside?.();
+            }}
             className={className}
           >
             {clickableComponent}
@@ -123,6 +128,7 @@ export const Dropdown = ({
         )}
         {isDropdownOpen && (
           <DropdownMenu
+            disableBlur={disableBlur}
             width={dropdownMenuWidth ?? dropdownWidth}
             data-select-disable
             ref={refs.setFloating}

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx

@@ -9,7 +9,10 @@ const StyledDropdownMenu = styled.div<{
       ? 'none'
       : 'blur(12px) saturate(200%) contrast(50%) brightness(130%)'};
 
-  background: ${({ theme }) => theme.background.transparent.forBackdropFilter};
+  background: ${({ theme, disableBlur }) =>
+    disableBlur
+      ? theme.background.primary
+      : theme.background.transparent.secondary};
 
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx

@@ -11,14 +11,11 @@ const StyledHeader = styled.li`
   display: flex;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
 
   padding: ${({ theme }) => theme.spacing(1)};
 
   user-select: none;
-
-  &:hover {
-    background: ${({ theme }) => theme.background.transparent.light};
-  }
 `;
 
 const StyledChildrenWrapper = styled.span`
@@ -46,9 +43,10 @@ export const DropdownMenuHeader = ({
   testId,
 }: DropdownMenuHeaderProps) => {
   return (
-    <StyledHeader data-testid={testId} onClick={onClick}>
+    <StyledHeader data-testid={testId}>
       {StartIcon && (
         <LightIconButton
+          onClick={onClick}
           testId="dropdown-menu-header-end-icon"
           Icon={StartIcon}
           accent="tertiary"
@@ -58,6 +56,7 @@ export const DropdownMenuHeader = ({
       <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
       {EndIcon && (
         <StyledLightIconButton
+          onClick={onClick}
           testId="dropdown-menu-header-end-icon"
           Icon={EndIcon}
           accent="tertiary"

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx

@@ -30,12 +30,12 @@ const StyledInputContainer = styled.div`
 export const DropdownMenuInput = forwardRef<
   HTMLInputElement,
   InputHTMLAttributes<HTMLInputElement>
->(({ autoFocus, defaultValue, placeholder, onChange }, ref) => {
+>(({ autoFocus, value, placeholder, onChange }, ref) => {
   return (
     <StyledInputContainer>
       <StyledInput
         autoFocus={autoFocus}
-        defaultValue={defaultValue}
+        value={value}
         placeholder={placeholder}
         onChange={onChange}
         ref={ref}

packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -274,7 +274,7 @@ export const WithInput: Story = {
   args: {
     dropdownComponents: (
       <>
-        <DropdownMenuInput defaultValue="Lorem ipsum" autoFocus />
+        <DropdownMenuInput value="Lorem ipsum" autoFocus />
         <DropdownMenuSeparator />
         <DropdownMenuItemsContainer hasMaxHeight>
           {optionsMock.map(({ name }) => (

packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuInput.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof DropdownMenuInput> = {
   title: 'UI/Layout/Dropdown/DropdownMenuInput',
   component: DropdownMenuInput,
   decorators: [ComponentDecorator],
-  args: { defaultValue: 'Lorem ipsum' },
+  args: { value: 'Lorem ipsum' },
 };
 
 export default meta;