@sanity/ui 1.7.2 → 1.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/components/menu/__workshop__/index.ts

@@ -70,5 +70,10 @@ export default defineScope({
       title: 'MenuButton with on close',
       component: lazy(() => import('./onCloseMenuButton')),
     },
+    {
+      name: 'shouldFocus',
+      title: 'Menu with shouldFocus',
+      component: lazy(() => import('./shouldFocus')),
+    },
   ],
 })

package/src/components/menu/__workshop__/shouldFocus.tsx

@@ -0,0 +1,46 @@
+import {useSelect} from '@sanity/ui-workshop'
+import {Fragment, useCallback, useState} from 'react'
+import {Button, Flex, Popover} from '../../../primitives'
+import {LayerProvider} from '../../../utils'
+import {Menu} from '../menu'
+import {MenuDivider} from '../menuDivider'
+import {MenuItem} from '../menuItem'
+
+const ITEMS = [...Array(8).keys()].map((num) => ({
+  title: `Item ${num + 1}`,
+  divider: num === 3,
+}))
+
+const OPTIONS = {first: 'first', last: 'last'}
+
+export default function ShouldFocusStory() {
+  const shouldFocus = useSelect('Should focus', OPTIONS, 'first')
+
+  const [popoverOpen, setPopoverOpen] = useState<boolean>(false)
+  const handleToggleOpen = useCallback(() => setPopoverOpen((v) => !v), [])
+
+  return (
+    <LayerProvider>
+      <Flex align="center" justify="center" padding={4}>
+        <Popover
+          content={
+            <Menu shouldFocus={shouldFocus}>
+              {ITEMS.map((item) => {
+                return (
+                  <Fragment key={item.title}>
+                    <MenuItem text={item.title} />
+                    {item.divider && <MenuDivider />}
+                  </Fragment>
+                )
+              })}
+            </Menu>
+          }
+          open={popoverOpen}
+          portal
+        >
+          <Button text="Open menu" onClick={handleToggleOpen} />
+        </Popover>
+      </Flex>
+    </LayerProvider>
+  )
+}

package/src/components/menu/useMenuController.ts

@@ -173,9 +173,14 @@ export function useMenuController(props: {
   )
 
   const handleItemMouseLeave = useCallback(() => {
+    // Set the active index to -2 to deactivate all menu items
+    // when the user moves the mouse away from the menu item.
+    // We avoid using -1 because it would focus the first menu item,
+    // which would be incorrect when the user hovers over a gap
+    // between two menu items or a menu divider.
+    setActiveIndex(-2)
     rootElement?.focus()
-    setActiveIndex(-1)
-  }, [rootElement, setActiveIndex])
+  }, [setActiveIndex, rootElement])
 
   // Set focus on the currently active element
   useEffect(() => {