@fluentui/react-menu 9.5.4 → 9.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/CHANGELOG.json +83 -1
  2. package/CHANGELOG.md +30 -2
  3. package/dist/index.d.ts +10 -22
  4. package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
  5. package/lib/components/MenuItem/useMenuItem.js +34 -42
  6. package/lib/components/MenuItem/useMenuItem.js.map +1 -1
  7. package/lib/components/MenuItem/useMenuItemStyles.js +2 -22
  8. package/lib/components/MenuItem/useMenuItemStyles.js.map +1 -1
  9. package/lib/components/MenuList/MenuList.types.js.map +1 -1
  10. package/lib/components/MenuList/useMenuList.js +3 -2
  11. package/lib/components/MenuList/useMenuList.js.map +1 -1
  12. package/lib-amd/components/MenuItem/MenuItem.types.js.map +1 -1
  13. package/lib-amd/components/MenuItem/useMenuItem.js +26 -31
  14. package/lib-amd/components/MenuItem/useMenuItem.js.map +1 -1
  15. package/lib-amd/components/MenuItem/useMenuItemStyles.js +1 -2
  16. package/lib-amd/components/MenuItem/useMenuItemStyles.js.map +1 -1
  17. package/lib-amd/components/MenuList/MenuList.types.js.map +1 -1
  18. package/lib-amd/components/MenuList/useMenuList.js +5 -4
  19. package/lib-amd/components/MenuList/useMenuList.js.map +1 -1
  20. package/lib-commonjs/components/MenuItem/useMenuItem.js +33 -41
  21. package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
  22. package/lib-commonjs/components/MenuItem/useMenuItemStyles.js +2 -22
  23. package/lib-commonjs/components/MenuItem/useMenuItemStyles.js.map +1 -1
  24. package/lib-commonjs/components/MenuList/useMenuList.js +3 -2
  25. package/lib-commonjs/components/MenuList/useMenuList.js.map +1 -1
  26. package/package.json +7 -7
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["useMenuList_unstable","props","ref","focusAttributes","react_tabster_1","circular","ignoreDefaultKeydown","Tab","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","react_context_selector_1","menuContext_2","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","react_utilities_1","state","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","role","triggerId","hasIcons","hasCheckmarks","exports","menuContext_1","context","contextValue","isUsingPropsAndContext","val"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuList/useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const setFocusByFirstCharacter = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n if (!innerRef.current) {\n return;\n }\n\n const menuItems = findAllFocusable(\n innerRef.current,\n (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n );\n\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n\n const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n const char = e.key.toLowerCase();\n\n const getIndexFirstChars = (start: number, firstChar: string) => {\n for (let i = start; i < firstChars.length; i++) {\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n },\n [findAllFocusable],\n );\n\n const [checkedValues, setCheckedValues] = useControllableState({\n state: hasMenuContext ? menuContext.checkedValues : props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n\n const handleCheckedValueChange = hasMenuContext ? menuContext.onCheckedValueChange : props.onCheckedValueChange;\n\n const toggleCheckbox = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n },\n );\n\n const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n const newCheckedItems = [value];\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props,\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox,\n };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n return {\n checkedValues,\n onCheckedValueChange,\n triggerId,\n hasIcons,\n hasCheckmarks,\n };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n props: MenuListProps,\n contextValue: ReturnType<typeof useMenuContextSelectors>,\n hasMenuContext: boolean,\n) => {\n let isUsingPropsAndContext = false;\n for (const val in contextValue) {\n if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n isUsingPropsAndContext = true;\n }\n }\n\n return hasMenuContext && isUsingPropsAndContext;\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["useMenuList_unstable","props","ref","focusAttributes","react_tabster_1","circular","ignoreDefaultKeydown","Tab","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","react_context_selector_1","menuContext_2","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","react_utilities_1","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","role","triggerId","hasIcons","hasCheckmarks","exports","menuContext_1","context","contextValue","isUsingPropsAndContext","val"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuList/useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const setFocusByFirstCharacter = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n if (!innerRef.current) {\n return;\n }\n\n const menuItems = findAllFocusable(\n innerRef.current,\n (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n );\n\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n\n const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n const char = e.key.toLowerCase();\n\n const getIndexFirstChars = (start: number, firstChar: string) => {\n for (let i = start; i < firstChars.length; i++) {\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n },\n [findAllFocusable],\n );\n\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n\n const handleCheckedValueChange =\n props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n const toggleCheckbox = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n },\n );\n\n const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n const newCheckedItems = [value];\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props,\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox,\n };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n return {\n checkedValues,\n onCheckedValueChange,\n triggerId,\n hasIcons,\n hasCheckmarks,\n };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n props: MenuListProps,\n contextValue: ReturnType<typeof useMenuContextSelectors>,\n hasMenuContext: boolean,\n) => {\n let isUsingPropsAndContext = false;\n for (const val in contextValue) {\n if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n isUsingPropsAndContext = true;\n }\n }\n\n return hasMenuContext && isUsingPropsAndContext;\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-menu",
3
- "version": "9.5.4",
3
+ "version": "9.6.1",
4
4
  "description": "Fluent UI menu component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -33,16 +33,16 @@
33
33
  "@fluentui/scripts": "*"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/react-aria": "^9.3.4",
36
+ "@fluentui/react-aria": "^9.3.5",
37
37
  "@fluentui/keyboard-keys": "^9.0.1",
38
- "@fluentui/react-context-selector": "^9.1.4",
38
+ "@fluentui/react-context-selector": "^9.1.5",
39
39
  "@fluentui/react-icons": "^2.0.175",
40
- "@fluentui/react-portal": "^9.0.15",
41
- "@fluentui/react-positioning": "^9.3.6",
40
+ "@fluentui/react-portal": "^9.1.0",
41
+ "@fluentui/react-positioning": "^9.3.7",
42
42
  "@fluentui/react-shared-contexts": "^9.1.4",
43
- "@fluentui/react-tabster": "^9.3.5",
43
+ "@fluentui/react-tabster": "^9.3.6",
44
44
  "@fluentui/react-theme": "^9.1.5",
45
- "@fluentui/react-utilities": "^9.3.1",
45
+ "@fluentui/react-utilities": "^9.4.0",
46
46
  "@griffel/react": "^1.5.2",
47
47
  "tslib": "^2.1.0"
48
48
  },