@sanity/ui 1.7.2 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -51,67 +51,67 @@
   "dependencies": {
     "@floating-ui/react-dom": "2.0.0",
     "@sanity/color": "^2.2.5",
-    "@sanity/icons": "^2.3.1",
+    "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
-    "framer-motion": "^10.12.16",
+    "framer-motion": "^10.13.1",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@commitlint/cli": "^17.6.5",
-    "@commitlint/config-conventional": "^17.6.5",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^2.3.2",
-    "@sanity/semantic-release-preset": "^4.1.1",
-    "@sanity/ui-workshop": "^1.2.1",
-    "@testing-library/dom": "^9.3.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@sanity/pkg-utils": "^2.3.6",
+    "@sanity/semantic-release-preset": "^4.1.2",
+    "@sanity/ui-workshop": "^1.2.7",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.2",
+    "@types/jest": "^29.5.3",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.2.9",
-    "@types/react-dom": "^18.2.4",
-    "@types/react-is": "^18.2.0",
+    "@types/node": "^20.4.4",
+    "@types/react": "^18.2.16",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-is": "^18.2.1",
     "@types/refractor": "^3.0.2",
     "@types/styled-components": "^5.1.26",
-    "@types/testing-library__jest-dom": "^5.14.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "commitizen": "^4.3.0",
-    "cypress": "^12.14.0",
-    "cypress-real-events": "^1.8.1",
+    "cypress": "^12.17.2",
+    "cypress-real-events": "^1.9.1",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.17.19",
+    "esbuild": "^0.18.16",
     "esbuild-register": "^3.4.2",
-    "eslint": "^8.42.0",
+    "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
     "jest-axe": "^7.0.1",
-    "jest-environment-jsdom": "^29.5.0",
-    "lint-staged": "^13.2.2",
+    "jest-environment-jsdom": "^29.6.1",
+    "lint-staged": "^13.2.3",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^5.0.1",
-    "semantic-release": "^21.0.3",
+    "semantic-release": "^21.0.7",
     "start-server-and-test": "^2.0.0",
     "styled-components": "^5.3.11",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "react": "^18",
@@ -146,7 +146,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "packageManager": "pnpm@8.2.0",
+  "packageManager": "pnpm@8.6.10",
   "publishConfig": {
     "access": "public"
   },

package/src/__workshop__/constants.ts

@@ -139,14 +139,14 @@ export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS = {
 }
 
 export const WORKSHOP_ICON_SYMBOL_OPTIONS: {[key: string]: IconSymbol | ''} = Object.keys(
-  icons
+  icons,
 ).reduce(
   (acc: {[key: string]: IconSymbol | ''}, key) => {
     acc[key] = key as IconSymbol
 
     return acc
   },
-  {'(none)': ''}
+  {'(none)': ''},
 )
 
 export const WORKSHOP_LABEL_FONT_SIZE_OPTIONS = {

package/src/components/autocomplete/__mocks__/apiStore.ts

@@ -4,7 +4,7 @@ export const countriesStore = {
   search(
     query: string,
     onResults: (results: {value: string}[]) => void,
-    onLoading: (flag: boolean) => void
+    onLoading: (flag: boolean) => void,
   ): {cancel: () => void} {
     const fakeDelay = 350 + Math.random() * 800
 
@@ -27,7 +27,7 @@ export const countriesStore = {
   fetchDocument(
     id: string,
     onResult: (value: {code: string; title: string} | null) => void,
-    onLoading: (flag: boolean) => void
+    onLoading: (flag: boolean) => void,
   ): {cancel: () => void} {
     const fakeDelay = 50 + Math.random() * 400
 

package/src/components/autocomplete/__workshop__/async.tsx

@@ -38,7 +38,7 @@ export default function AsyncStory() {
         doSearch(query)
       }
     },
-    [doSearch]
+    [doSearch],
   )
 
   const handleOpenButtonClick = useCallback(() => {
@@ -66,7 +66,7 @@ export default function AsyncStory() {
       fetchRef.current = countriesStore.fetchDocument(
         value,
         (data) => setOptionTitle(data?.title || null),
-        setLoadingCurrentRef
+        setLoadingCurrentRef,
       )
     } else {
       setOptionTitle(null)

package/src/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -82,7 +82,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
         onMouseEnter: () => void
         onMouseLeave: () => void
       },
-      popoverRef: React.Ref<HTMLDivElement>
+      popoverRef: React.Ref<HTMLDivElement>,
     ) => {
       const {hidden, inputElement, ...restProps} = popoverProps
 
@@ -103,7 +103,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
         />
       )
     },
-    []
+    [],
   )
 
   return (

package/src/components/autocomplete/__workshop__/custom.tsx

@@ -34,7 +34,7 @@ export default function CustomStory() {
         <Text size={fontSize}>{option.title}</Text>
       </Card>
     ),
-    [fontSize, padding, radius]
+    [fontSize, padding, radius],
   )
 
   const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {

package/src/components/autocomplete/__workshop__/fullscreen.tsx

@@ -42,7 +42,7 @@ export default function Fullscreen() {
 
   const relatedElements = useMemo(
     () => [closeSearchButtonElement].filter(Boolean) as HTMLElement[],
-    [closeSearchButtonElement]
+    [closeSearchButtonElement],
   )
 
   const search = useCallback((query: string | null) => {
@@ -59,7 +59,7 @@ export default function Fullscreen() {
       if (query !== null) search(query)
       setQuery(query)
     },
-    [search]
+    [search],
   )
 
   const handleOpen = useCallback(() => {
@@ -73,7 +73,7 @@ export default function Fullscreen() {
       setValue(v)
       pushToast({status: 'info', title: `Selected “${v}”`})
     },
-    [pushToast]
+    [pushToast],
   )
 
   const renderOption = useCallback((option: BaseAutocompleteOption) => {
@@ -88,7 +88,7 @@ export default function Fullscreen() {
         onMouseEnter: () => void
         onMouseLeave: () => void
       },
-      ref: React.Ref<HTMLDivElement>
+      ref: React.Ref<HTMLDivElement>,
     ) => {
       if (!props.hidden && error) {
         return (
@@ -142,7 +142,7 @@ export default function Fullscreen() {
         </Portal>
       )
     },
-    [error, loading, options, query]
+    [error, loading, options, query],
   )
 
   const renderValue = useCallback(() => {
@@ -165,7 +165,7 @@ export default function Fullscreen() {
       fetchRef.current = countriesStore.fetchDocument(
         value,
         (data) => setOptionTitle(data?.title || null),
-        setLoadingCurrentRef
+        setLoadingCurrentRef,
       )
     } else {
       setOptionTitle(null)

package/src/components/autocomplete/autocomplete.tsx

@@ -77,7 +77,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
       onMouseEnter: () => void
       onMouseLeave: () => void
     },
-    ref: Ref<HTMLDivElement>
+    ref: Ref<HTMLDivElement>,
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
@@ -91,7 +91,7 @@ const DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>
   option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
 
 const InnerAutocomplete = forwardRef(function InnerAutocomplete<
-  Option extends BaseAutocompleteOption
+  Option extends BaseAutocompleteOption,
 >(
   props: AutocompleteProps<Option> &
     Omit<
@@ -115,7 +115,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       | 'type'
       | 'value'
     >,
-  ref: Ref<HTMLInputElement>
+  ref: Ref<HTMLInputElement>,
 ) {
   const {
     border = true,
@@ -166,7 +166,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         </Text>
       </Card>
     ),
-    [fontSize, paddingProp]
+    [fontSize, paddingProp],
   )
 
   const renderOption =
@@ -194,11 +194,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const padding = useArrayProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
-    [options, value]
+    [options, value],
   )
   const filteredOptions = useMemo(
     () => options.filter((option) => (query ? filterOption(query, option) : true)),
-    [filterOption, options, query]
+    [filterOption, options, query],
   )
   const filteredOptionsLen = filteredOptions.length
   const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined
@@ -216,7 +216,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
         const elements: HTMLElement[] = (relatedElements || []).concat(
           rootElementRef.current ? [rootElementRef.current] : [],
-          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : []
+          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
         )
 
         let focusInside = false
@@ -238,7 +238,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         }
       }, 0)
     },
-    [onBlur, onQueryChange, relatedElements]
+    [onBlur, onQueryChange, relatedElements],
   )
 
   const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
@@ -268,7 +268,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       inputElementRef.current?.focus()
     },
-    [onChange, onSelect, onQueryChange]
+    [onChange, onSelect, onQueryChange],
   )
 
   const handleRootKeyDown = useCallback(
@@ -331,7 +331,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         return
       }
     },
-    [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]
+    [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],
   )
 
   const handleInputChange = useCallback(
@@ -342,7 +342,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       if (onQueryChange) onQueryChange(nextQuery)
     },
-    [onQueryChange]
+    [onQueryChange],
   )
 
   const handleInputFocus = useCallback(
@@ -353,7 +353,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         if (onFocus) onFocus(event)
       }
     },
-    [focused, onFocus]
+    [focused, onFocus],
   )
 
   const handlePopoverMouseEnter = useCallback(() => {
@@ -433,7 +433,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       inputElementRef.current = el
       forwardedRef.current = el
     },
-    [forwardedRef]
+    [forwardedRef],
   )
 
   const clearButton = useMemo(() => {
@@ -456,12 +456,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
         return v - 2
       }),
-    [padding]
+    [padding],
   )
   const openButtonPadding = useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding])
   const openButtonProps: AutocompleteOpenButtonProps = useMemo(
     () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),
-    [openButton]
+    [openButton],
   )
 
   const handleOpenClick = useCallback(
@@ -475,7 +475,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       _raf(() => inputElementRef.current?.focus())
     },
-    [currentOption, openButtonProps, renderValue, value]
+    [currentOption, openButtonProps, renderValue, value],
   )
 
   const openButtonNode = useMemo(
@@ -504,7 +504,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       openButtonPadding,
       openButtonProps,
       readOnly,
-    ]
+    ],
   )
 
   const inputValue = useMemo(() => {
@@ -560,7 +560,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         if (listFocused) inputElementRef.current?.focus()
       }
     },
-    [listFocused]
+    [listFocused],
   )
 
   const content = useMemo(() => {
@@ -630,7 +630,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
-        resultsPopoverElementRef
+        resultsPopoverElementRef,
       )
     }
 
@@ -709,5 +709,5 @@ export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocomplet
       | 'value'
     > & {
       ref?: Ref<HTMLInputElement>
-    }
+    },
 ) => ReactElement

package/src/components/autocomplete/autocompleteOption.tsx

@@ -26,7 +26,7 @@ export function AutocompleteOption(props: AutocompleteOptionProps): React.ReactE
         handleClick()
       }
     },
-    [handleClick]
+    [handleClick],
   )
 
   return (

package/src/components/autocomplete/autocompleteReducer.ts

@@ -5,7 +5,7 @@ import {AutocompleteMsg, AutocompleteState} from './types'
  */
 export function autocompleteReducer(
   state: AutocompleteState,
-  msg: AutocompleteMsg
+  msg: AutocompleteMsg,
 ): AutocompleteState {
   if (msg.type === 'input/change') {
     return {...state, activeValue: null, focused: true, query: msg.query}

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -17,7 +17,7 @@ export interface BreadcrumbsProps {
  */
 export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
-  ref: React.ForwardedRef<HTMLOListElement>
+  ref: React.ForwardedRef<HTMLOListElement>,
 ) {
   const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
   const space = useArrayProp(spaceRaw)
@@ -35,7 +35,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
       Children.toArray(children).filter((child) => {
         return isValidElement(child)
       }),
-    [children]
+    [children],
   )
 
   const items = useMemo(() => {

package/src/components/dialog/dialog.tsx

@@ -74,7 +74,7 @@ interface DialogCardProps extends ResponsiveWidthProps {
 function isTargetWithinScope(
   boundaryElement: HTMLElement | null,
   portalElement: HTMLElement | null,
-  target: Node
+  target: Node,
 ): boolean {
   if (!boundaryElement || !portalElement) return true
 
@@ -87,7 +87,7 @@ function isTargetWithinScope(
 const Root = styled(Layer)<ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps>(
   responsivePaddingStyle,
   dialogStyle,
-  responsiveDialogPositionStyle
+  responsiveDialogPositionStyle,
 )
 
 const DialogContainer = styled(Container)`
@@ -148,7 +148,7 @@ const DialogFooter = styled(Box)`
 
 const DialogCard = forwardRef(function DialogCard(
   props: DialogCardProps,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     __unstable_autoFocus: autoFocus,
@@ -208,8 +208,8 @@ const DialogCard = forwardRef(function DialogCard(
           onClose()
         }
       },
-      [boundaryElement, isTopLayer, onClose, portalElement]
-    )
+      [boundaryElement, isTopLayer, onClose, portalElement],
+    ),
   )
 
   useClickOutside(
@@ -226,9 +226,9 @@ const DialogCard = forwardRef(function DialogCard(
 
         onClickOutside()
       },
-      [boundaryElement, isTopLayer, onClickOutside, portalElement]
+      [boundaryElement, isTopLayer, onClickOutside, portalElement],
     ),
-    [rootElement]
+    [rootElement],
   )
 
   const setRef = useCallback(
@@ -236,7 +236,7 @@ const DialogCard = forwardRef(function DialogCard(
       setRootElement(el)
       forwardedRef.current = el
     },
-    [forwardedRef]
+    [forwardedRef],
   )
 
   const setContentRef = useCallback(
@@ -245,7 +245,7 @@ const DialogCard = forwardRef(function DialogCard(
       if (typeof contentRef === 'function') contentRef(el)
       else if (contentRef) contentRef.current = el
     },
-    [contentRef]
+    [contentRef],
   )
 
   return (
@@ -294,7 +294,7 @@ const DialogCard = forwardRef(function DialogCard(
  */
 export const Dialog = forwardRef(function Dialog(
   props: DialogProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'id' | 'width'>,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const dialog = useDialog()
   const theme = useTheme()
@@ -356,7 +356,7 @@ export const Dialog = forwardRef(function Dialog(
         focusedElementRef.current = event.target
       }
     },
-    [onFocus]
+    [onFocus],
   )
 
   const labelId = `${id}_label`

package/src/components/dialog/dialogProvider.tsx

@@ -25,7 +25,7 @@ export function DialogProvider(props: DialogProviderProps): React.ReactElement {
       position,
       zOffset,
     }),
-    [position, zOffset]
+    [position, zOffset],
   )
 
   return <DialogContext.Provider value={contextValue}>{children}</DialogContext.Provider>

package/src/components/dialog/styles.ts

@@ -29,7 +29,7 @@ export function dialogStyle({theme}: ThemeProps): CSSObject {
 }
 
 export function responsiveDialogPositionStyle(
-  props: ResponsiveDialogPositionStyleProps & ThemeProps
+  props: ResponsiveDialogPositionStyleProps & ThemeProps,
 ): CSSObject[] {
   const {theme} = props
   const {media} = theme.sanity

package/src/components/hotkeys/hotkeys.tsx

@@ -32,7 +32,7 @@ const Key = styled(KBD)`
  */
 export const Hotkeys = forwardRef(function Hotkeys(
   props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
-  ref: React.Ref<HTMLElement>
+  ref: React.Ref<HTMLElement>,
 ) {
   const {fontSize, keys, padding, radius, space: spaceProp = 1, ...restProps} = props
   const space = useArrayProp(spaceProp)

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

@@ -3,7 +3,7 @@ import {forwardRef} from 'react'
 
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
-  ref: React.ForwardedRef<HTMLAnchorElement>
+  ref: React.ForwardedRef<HTMLAnchorElement>,
 ): React.ReactElement {
   const {children, req, ...restProps} = props
 

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__/menuButton.tsx

@@ -24,7 +24,7 @@ export default function MenuButtonStory() {
       constrainSize: true,
       portal,
     }),
-    [portal]
+    [portal],
   )
 
   return (

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/menu.test.tsx

@@ -23,12 +23,12 @@ describe('components/menu', () => {
       function Root() {
         const handleItemMouseEnter = useCallback(
           (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          []
+          [],
         )
 
         const handleItemMouseLeave = useCallback(
           (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          []
+          [],
         )
 
         const value: MenuContextValue = useMemo(
@@ -43,7 +43,7 @@ describe('components/menu', () => {
             onMouseEnter: handleItemMouseEnter,
             onMouseLeave: handleItemMouseLeave,
           }),
-          [handleItemMouseEnter, handleItemMouseLeave]
+          [handleItemMouseEnter, handleItemMouseLeave],
         )
 
         return (