workj

atelier-saulx · Sep 6, 2024 · ea503e7 · ea503e7
1 parent a5caca6
commit ea503e7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -130,8 +130,8 @@ function MenuInner({ children, onOpenChange }: MenuRootProps) {
     activeIndex,
     nested: nested,
     onNavigate: setActiveIndex,
-    focusItemOnOpen: false,
     virtual: true,
+    focusItemOnOpen: true,
   })
 
   const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
@@ -261,7 +261,6 @@ function MenuItems({ children }: MenuItemsProps) {
                     elementsRef.current?.[activeIndex]
                   ) {
                     elementsRef.current[activeIndex].click()
-                    setOpen(false)
                   }
                 }
               },
@@ -286,16 +285,18 @@ function MenuItems({ children }: MenuItemsProps) {
 }
 
 type MenuItemProps = {
-  children: string
+  children: string | ReactNode
   leadIcon?: IconProps['variant']
   trailIcon?: IconProps['variant']
   onClick?: () => void
   color?: 'neutral' | 'red'
+  indentContent?: boolean
 }
 
 function MenuItem({
   children,
   leadIcon,
+  indentContent = false,
   trailIcon,
   onClick,
   color = 'neutral',
@@ -342,7 +343,14 @@ function MenuItem({
         }),
       }}
     >
-      {leadIcon && <Icon variant={leadIcon} />}
+      {indentContent ? (
+        <div style={{ height: 24, width: 24 }}>
+          {leadIcon && <Icon variant={leadIcon} />}
+        </div>
+      ) : (
+        <>{leadIcon && <Icon variant={leadIcon} />}</>
+      )}
+
       <Text variant="display-medium" color="inherit">
         {children}
       </Text>
@@ -366,7 +374,6 @@ function MenuToggleItem({
 }: MenuToggleItemProps) {
   const { getItemProps, activeIndex } = useContext(MenuContext)
   const item = useListItem()
-  const tree = useFloatingTree()
 
   return (
     <button
@@ -377,7 +384,6 @@ function MenuToggleItem({
           if (disabled) return
 
           onChange?.()
-          tree?.events.emit('click')
         },
       })}
       type="button"

diff --git a/src/components/SelectInput/index.tsx b/src/components/SelectInput/index.tsx
@@ -143,14 +143,15 @@ function SelectInput({
             return true
           })
           .map((option) => (
-            <Menu.ToggleItem
-              value={value === option.value}
-              onChange={() => {
+            <Menu.Item
+              indentContent
+              leadIcon={value === option.value ? 'checkmark' : undefined}
+              onClick={() => {
                 onChange(option.value)
               }}
             >
               {option.label}
-            </Menu.ToggleItem>
+            </Menu.Item>
           ))}
       </Menu.Items>
     </Menu>