@fluentui/react-menu 9.19.0 → 9.19.2
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.
- package/CHANGELOG.md +35 -2
- package/lib/Menu.js.map +1 -1
- package/lib/MenuDivider.js.map +1 -1
- package/lib/MenuGroup.js.map +1 -1
- package/lib/MenuGroupHeader.js.map +1 -1
- package/lib/MenuItem.js.map +1 -1
- package/lib/MenuItemCheckbox.js.map +1 -1
- package/lib/MenuItemLink.js.map +1 -1
- package/lib/MenuItemRadio.js.map +1 -1
- package/lib/MenuItemSwitch.js.map +1 -1
- package/lib/MenuList.js.map +1 -1
- package/lib/MenuPopover.js.map +1 -1
- package/lib/MenuSplitGroup.js.map +1 -1
- package/lib/MenuTrigger.js.map +1 -1
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/Menu/index.js.map +1 -1
- package/lib/components/Menu/renderMenu.js.map +1 -1
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib/components/MenuDivider/MenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/MenuDivider.types.js.map +1 -1
- package/lib/components/MenuDivider/index.js.map +1 -1
- package/lib/components/MenuDivider/renderMenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuGroup/MenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/MenuGroup.types.js.map +1 -1
- package/lib/components/MenuGroup/index.js.map +1 -1
- package/lib/components/MenuGroup/renderMenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroupContextValues.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuGroupHeader/MenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/MenuGroupHeader.types.js.map +1 -1
- package/lib/components/MenuGroupHeader/index.js.map +1 -1
- package/lib/components/MenuGroupHeader/renderMenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib/components/MenuItem/index.js.map +1 -1
- package/lib/components/MenuItem/renderMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useCharacterSearch.js.map +1 -1
- package/lib/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemCheckbox/MenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/MenuItemCheckbox.types.js.map +1 -1
- package/lib/components/MenuItemCheckbox/index.js.map +1 -1
- package/lib/components/MenuItemCheckbox/renderMenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemLink/MenuItemLink.js.map +1 -1
- package/lib/components/MenuItemLink/MenuItemLink.types.js.map +1 -1
- package/lib/components/MenuItemLink/index.js.map +1 -1
- package/lib/components/MenuItemLink/renderMenuItemLink.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemRadio/MenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/MenuItemRadio.types.js.map +1 -1
- package/lib/components/MenuItemRadio/index.js.map +1 -1
- package/lib/components/MenuItemRadio/renderMenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemSwitch/MenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/MenuItemSwitch.types.js.map +1 -1
- package/lib/components/MenuItemSwitch/index.js.map +1 -1
- package/lib/components/MenuItemSwitch/renderMenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuList/MenuList.js.map +1 -1
- package/lib/components/MenuList/MenuList.types.js.map +1 -1
- package/lib/components/MenuList/index.js.map +1 -1
- package/lib/components/MenuList/renderMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuListContextValues.js.map +1 -1
- package/lib/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuPopover/MenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/MenuPopover.types.js.map +1 -1
- package/lib/components/MenuPopover/index.js.map +1 -1
- package/lib/components/MenuPopover/renderMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuSplitGroup/MenuSplitGroup.js.map +1 -1
- package/lib/components/MenuSplitGroup/MenuSplitGroup.types.js.map +1 -1
- package/lib/components/MenuSplitGroup/index.js.map +1 -1
- package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js.map +1 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroupContextValues.js.map +1 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib/components/MenuTrigger/index.js.map +1 -1
- package/lib/components/MenuTrigger/renderMenuTrigger.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/components/index.js.map +1 -1
- package/lib/contexts/menuContext.js.map +1 -1
- package/lib/contexts/menuGroupContext.js.map +1 -1
- package/lib/contexts/menuListContext.js.map +1 -1
- package/lib/contexts/menuSplitGroupContext.js.map +1 -1
- package/lib/contexts/menuTriggerContext.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/selectable/index.js.map +1 -1
- package/lib/selectable/types.js.map +1 -1
- package/lib/selectable/useCheckmarkStyles.styles.raw.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/useIsSubmenu.js.map +1 -1
- package/lib/utils/useOnMenuEnter.js.map +1 -1
- package/lib/utils/useOnMenuSafeZoneTimeout.js.map +1 -1
- package/lib-commonjs/Menu.js.map +1 -1
- package/lib-commonjs/MenuDivider.js.map +1 -1
- package/lib-commonjs/MenuGroup.js.map +1 -1
- package/lib-commonjs/MenuGroupHeader.js.map +1 -1
- package/lib-commonjs/MenuItem.js.map +1 -1
- package/lib-commonjs/MenuItemCheckbox.js.map +1 -1
- package/lib-commonjs/MenuItemLink.js.map +1 -1
- package/lib-commonjs/MenuItemRadio.js.map +1 -1
- package/lib-commonjs/MenuItemSwitch.js.map +1 -1
- package/lib-commonjs/MenuList.js.map +1 -1
- package/lib-commonjs/MenuPopover.js.map +1 -1
- package/lib-commonjs/MenuSplitGroup.js.map +1 -1
- package/lib-commonjs/MenuTrigger.js.map +1 -1
- package/lib-commonjs/components/Menu/Menu.js.map +1 -1
- package/lib-commonjs/components/Menu/Menu.types.js.map +1 -1
- package/lib-commonjs/components/Menu/index.js.map +1 -1
- package/lib-commonjs/components/Menu/renderMenu.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/MenuDivider.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/MenuDivider.types.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/index.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/renderMenuDivider.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDivider.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/MenuGroup.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/MenuGroup.types.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/index.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/renderMenuGroup.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroup.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.types.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/index.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/renderMenuGroupHeader.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItem/MenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib-commonjs/components/MenuItem/index.js.map +1 -1
- package/lib-commonjs/components/MenuItem/renderMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useCharacterSearch.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.types.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/index.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/renderMenuItemCheckbox.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/MenuItemLink.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/MenuItemLink.types.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/index.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/renderMenuItemLink.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/MenuItemRadio.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/MenuItemRadio.types.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/index.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/renderMenuItemRadio.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/MenuItemSwitch.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/MenuItemSwitch.types.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/index.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/renderMenuItemSwitch.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuList/MenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/MenuList.types.js.map +1 -1
- package/lib-commonjs/components/MenuList/index.js.map +1 -1
- package/lib-commonjs/components/MenuList/renderMenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/MenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/MenuPopover.types.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/index.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/renderMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/MenuSplitGroup.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/MenuSplitGroup.types.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/index.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/renderMenuSplitGroup.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/index.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/renderMenuTrigger.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/components/index.js.map +1 -1
- package/lib-commonjs/contexts/menuContext.js.map +1 -1
- package/lib-commonjs/contexts/menuGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/menuListContext.js.map +1 -1
- package/lib-commonjs/contexts/menuSplitGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/menuTriggerContext.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/selectable/index.js.map +1 -1
- package/lib-commonjs/selectable/types.js.map +1 -1
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.js.map +1 -1
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/useIsSubmenu.js.map +1 -1
- package/lib-commonjs/utils/useOnMenuEnter.js.map +1 -1
- package/lib-commonjs/utils/useOnMenuSafeZoneTimeout.js.map +1 -1
- package/package.json +10 -10
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuList/useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getIntrinsicElementProps,\n slot,\n} from '@fluentui/react-utilities';\nimport {\n useArrowNavigationGroup,\n useFocusFinders,\n TabsterMoveFocusEventName,\n type TabsterMoveFocusEvent,\n} from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 { findAllFocusable } = useFocusFinders();\n const { targetDocument } = useFluent();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n const focusAttributes = useArrowNavigationGroup({ circular: true });\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 React.useEffect(() => {\n const element = innerRef.current;\n\n if (hasMenuContext && targetDocument && element) {\n const onTabsterMoveFocus = (e: TabsterMoveFocusEvent) => {\n const nextElement = e.detail.next;\n\n if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {\n // Preventing Tabster from handling Tab press, useMenuPopover will handle it.\n e.preventDefault();\n }\n };\n\n targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n\n return () => {\n targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n };\n }\n }, [innerRef, targetDocument, hasMenuContext]);\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: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props,\n }),\n { elementType: 'div' },\n ),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n hasMenuContext,\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"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useFocusFinders","TabsterMoveFocusEventName","useFluent_unstable","useFluent","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","targetDocument","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","usingPropsAndMenuContext","console","warn","innerRef","useRef","useEffect","element","current","onTabsterMoveFocus","e","nextElement","detail","next","contains","activeElement","preventDefault","addEventListener","removeEventListener","setFocusByFirstCharacter","useCallback","itemEl","acceptedRoles","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","always","role","triggerId","elementType","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
1
|
+
{"version":3,"sources":["../src/components/MenuList/useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getIntrinsicElementProps,\n slot,\n} from '@fluentui/react-utilities';\nimport {\n useArrowNavigationGroup,\n useFocusFinders,\n TabsterMoveFocusEventName,\n type TabsterMoveFocusEvent,\n} from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 { findAllFocusable } = useFocusFinders();\n const { targetDocument } = useFluent();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n const focusAttributes = useArrowNavigationGroup({ circular: true });\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 React.useEffect(() => {\n const element = innerRef.current;\n\n if (hasMenuContext && targetDocument && element) {\n const onTabsterMoveFocus = (e: TabsterMoveFocusEvent) => {\n const nextElement = e.detail.next;\n\n if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {\n // Preventing Tabster from handling Tab press, useMenuPopover will handle it.\n e.preventDefault();\n }\n };\n\n targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n\n return () => {\n targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n };\n }\n }, [innerRef, targetDocument, hasMenuContext]);\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: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props,\n }),\n { elementType: 'div' },\n ),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n hasMenuContext,\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"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useFocusFinders","TabsterMoveFocusEventName","useFluent_unstable","useFluent","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","targetDocument","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","usingPropsAndMenuContext","console","warn","innerRef","useRef","useEffect","element","current","onTabsterMoveFocus","e","nextElement","detail","next","contains","activeElement","preventDefault","addEventListener","removeEventListener","setFocusByFirstCharacter","useCallback","itemEl","acceptedRoles","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","always","role","triggerId","elementType","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuList/useMenuListContextValues.ts"],"sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const menuList = {\n checkedValues,\n hasCheckmarks,\n hasIcons,\n selectRadio,\n setFocusByFirstCharacter,\n toggleCheckbox,\n };\n\n return { menuList };\n}\n"],"names":["useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuList/useMenuListContextValues.ts"],"sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const menuList = {\n checkedValues,\n hasCheckmarks,\n hasIcons,\n selectRadio,\n setFocusByFirstCharacter,\n toggleCheckbox,\n };\n\n return { menuList };\n}\n"],"names":["useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList"],"mappings":"AAEA,OAAO,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAE,GAAGN;IAE1G,mGAAmG;IACnG,MAAMO,WAAW;QACfN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAS;AACpB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '2px',\n },\n hasMenuContext: {\n height: '100%',\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuListClassNames.root,\n styles.root,\n state.hasMenuContext && styles.hasMenuContext,\n state.root.className,\n );\n return state;\n};\n"],"names":["mergeClasses","makeStyles","menuListClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuListStyles_unstable","state","styles","className"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '2px',\n },\n hasMenuContext: {\n height: '100%',\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuListClassNames.root,\n styles.root,\n state.hasMenuContext && styles.hasMenuContext,\n state.root.className,\n );\n return state;\n};\n"],"names":["mergeClasses","makeStyles","menuListClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuListStyles_unstable","state","styles","className"],"mappings":"AACA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYH,WAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGb,aACrBE,mBAAmBC,IAAI,EACvBS,OAAOT,IAAI,EACXQ,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAC7CG,MAAMR,IAAI,CAACU,SAAS;IAEtB,OAAOF;AACT,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n const state = useMenuPopover_unstable(props, ref);\n\n useMenuPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state);\n\n return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","useCustomStyleHook_unstable","MenuPopover","forwardRef","props","ref","state","displayName"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n const state = useMenuPopover_unstable(props, ref);\n\n useMenuPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state);\n\n return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","useCustomStyleHook_unstable","MenuPopover","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAC9E,SAASC,0BAA0B,QAAQ,sBAAsB;AAGjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CN,8BAA8BO;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAON,2BAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuPopoverSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n * This option is disregarded for submenus\n */\n inline: boolean;\n\n safeZone?: React.ReactElement | null;\n };\n"],"names":["React"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuPopoverSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n * This option is disregarded for submenus\n */\n inline: boolean;\n\n safeZone?: React.ReactElement | null;\n };\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuPopover/index.ts"],"sourcesContent":["export { MenuPopover } from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nexport { renderMenuPopover_unstable } from './renderMenuPopover';\nexport { useMenuPopover_unstable } from './useMenuPopover';\nexport { menuPopoverClassNames, useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\n"],"names":["MenuPopover","renderMenuPopover_unstable","useMenuPopover_unstable","menuPopoverClassNames","useMenuPopoverStyles_unstable"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuPopover/index.ts"],"sourcesContent":["export { MenuPopover } from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nexport { renderMenuPopover_unstable } from './renderMenuPopover';\nexport { useMenuPopover_unstable } from './useMenuPopover';\nexport { menuPopoverClassNames, useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\n"],"names":["MenuPopover","renderMenuPopover_unstable","useMenuPopover_unstable","menuPopoverClassNames","useMenuPopoverStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n assertSlots<MenuPopoverSlots>(state);\n\n if (state.inline) {\n return (\n <>\n <state.root />\n {state.safeZone}\n </>\n );\n }\n\n return (\n <Portal mountNode={state.mountNode}>\n <state.root />\n {state.safeZone}\n </Portal>\n );\n};\n"],"names":["assertSlots","Portal","renderMenuPopover_unstable","state","inline","root","safeZone","mountNode"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n assertSlots<MenuPopoverSlots>(state);\n\n if (state.inline) {\n return (\n <>\n <state.root />\n {state.safeZone}\n </>\n );\n }\n\n return (\n <Portal mountNode={state.mountNode}>\n <state.root />\n {state.safeZone}\n </Portal>\n );\n};\n"],"names":["assertSlots","Portal","renderMenuPopover_unstable","state","inline","root","safeZone","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCH,YAA8BG;IAE9B,IAAIA,MAAMC,MAAM,EAAE;QAChB,qBACE;;8BACE,KAACD,MAAME,IAAI;gBACVF,MAAMG,QAAQ;;;IAGrB;IAEA,qBACE,MAACL;QAAOM,WAAWJ,MAAMI,SAAS;;0BAChC,KAACJ,MAAME,IAAI;YACVF,MAAMG,QAAQ;;;AAGrB,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n 'use no memo';\n\n const safeZone = useMenuContext_unstable(context => context.safeZone);\n const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n\n const isSubmenu = useIsSubmenu();\n const canDispatchCustomEventRef = React.useRef(true);\n const restoreFocusSourceAttributes = useRestoreFocusSource();\n const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n\n const { dir } = useFluent();\n const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n // use DOM listener since react events propagate up the react tree\n // no need to do `contains` logic as menus are all positioned in different portals\n const mouseOverListenerCallbackRef = React.useCallback(\n (node: HTMLElement) => {\n if (node) {\n // Dispatches the custom menu mouse enter event with throttling\n // Needs to trigger on mouseover to support keyboard + mouse together\n // i.e. keyboard opens submenus while cursor is still on the parent\n node.addEventListener('mouseover', e => {\n if (canDispatchCustomEventRef.current) {\n canDispatchCustomEventRef.current = false;\n dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n setThrottleTimeout(() => {\n canDispatchCustomEventRef.current = true;\n }, 250);\n }\n });\n }\n },\n [popoverRef, setThrottleTimeout],\n );\n\n React.useEffect(() => {\n return () => clearThrottleTimeout();\n }, [clearThrottleTimeout]);\n\n const inline = useMenuContext_unstable(context => context.inline) ?? false;\n const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n const rootProps = slot.always(\n getIntrinsicElementProps('div', {\n role: 'presentation',\n ...restoreFocusSourceAttributes,\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n );\n const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover || isSubmenu) {\n setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n }\n onMouseEnterOriginal?.(event);\n });\n rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n const key = event.key;\n if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n if (open && popoverRef.current?.contains(event.target as HTMLElement) && !event.isDefaultPrevented()) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n }\n if (key === Tab) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n if (!isSubmenu) {\n triggerRef.current?.focus();\n }\n }\n onKeyDownOriginal?.(event);\n });\n\n return {\n inline,\n mountNode,\n safeZone,\n components: { root: 'div' },\n root: rootProps,\n };\n};\n"],"names":["ArrowLeft","Tab","ArrowRight","Escape","useFluent_unstable","useFluent","useRestoreFocusSource","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useTimeout","React","useMenuContext_unstable","dispatchMenuEnterEvent","useIsSubmenu","useMenuPopover_unstable","props","ref","safeZone","context","popoverRef","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","canDispatchCustomEventRef","useRef","restoreFocusSourceAttributes","setThrottleTimeout","clearThrottleTimeout","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","useEffect","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","isDefaultPrevented","preventDefault","focus","components","root"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n 'use no memo';\n\n const safeZone = useMenuContext_unstable(context => context.safeZone);\n const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n\n const isSubmenu = useIsSubmenu();\n const canDispatchCustomEventRef = React.useRef(true);\n const restoreFocusSourceAttributes = useRestoreFocusSource();\n const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n\n const { dir } = useFluent();\n const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n // use DOM listener since react events propagate up the react tree\n // no need to do `contains` logic as menus are all positioned in different portals\n const mouseOverListenerCallbackRef = React.useCallback(\n (node: HTMLElement) => {\n if (node) {\n // Dispatches the custom menu mouse enter event with throttling\n // Needs to trigger on mouseover to support keyboard + mouse together\n // i.e. keyboard opens submenus while cursor is still on the parent\n node.addEventListener('mouseover', e => {\n if (canDispatchCustomEventRef.current) {\n canDispatchCustomEventRef.current = false;\n dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n setThrottleTimeout(() => {\n canDispatchCustomEventRef.current = true;\n }, 250);\n }\n });\n }\n },\n [popoverRef, setThrottleTimeout],\n );\n\n React.useEffect(() => {\n return () => clearThrottleTimeout();\n }, [clearThrottleTimeout]);\n\n const inline = useMenuContext_unstable(context => context.inline) ?? false;\n const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n const rootProps = slot.always(\n getIntrinsicElementProps('div', {\n role: 'presentation',\n ...restoreFocusSourceAttributes,\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n );\n const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover || isSubmenu) {\n setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n }\n onMouseEnterOriginal?.(event);\n });\n rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n const key = event.key;\n if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n if (open && popoverRef.current?.contains(event.target as HTMLElement) && !event.isDefaultPrevented()) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n }\n if (key === Tab) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n if (!isSubmenu) {\n triggerRef.current?.focus();\n }\n }\n onKeyDownOriginal?.(event);\n });\n\n return {\n inline,\n mountNode,\n safeZone,\n components: { root: 'div' },\n root: rootProps,\n };\n};\n"],"names":["ArrowLeft","Tab","ArrowRight","Escape","useFluent_unstable","useFluent","useRestoreFocusSource","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useTimeout","React","useMenuContext_unstable","dispatchMenuEnterEvent","useIsSubmenu","useMenuPopover_unstable","props","ref","safeZone","context","popoverRef","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","canDispatchCustomEventRef","useRef","restoreFocusSourceAttributes","setThrottleTimeout","clearThrottleTimeout","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","useEffect","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","isDefaultPrevented","preventDefault","focus","components","root"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createSlideStyles } from '@fluentui/react-positioning';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n ...createSlideStyles(10),\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","typographyStyles","createSlideStyles","menuPopoverClassNames","root","useStyles","borderRadius","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","body1","useMenuPopoverStyles_unstable","state","styles","className"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createSlideStyles } from '@fluentui/react-positioning';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n ...createSlideStyles(10),\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","typographyStyles","createSlideStyles","menuPopoverClassNames","root","useStyles","borderRadius","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","body1","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAGjE,SAASC,iBAAiB,QAAQ,8BAA8B;AAEhE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,cAAcN,OAAOO,kBAAkB;QACvCC,iBAAiBR,OAAOS,uBAAuB;QAC/CC,OAAOV,OAAOW,uBAAuB;QACrCC,WAAW;QACXC,UAAU;QACVC,UAAU;QACVC,WAAW;QACXC,OAAO;QACPC,WAAW,GAAGjB,OAAOkB,QAAQ,EAAE;QAC/BC,SAAS;QACTC,QAAQ,CAAC,UAAU,EAAEpB,OAAOqB,sBAAsB,EAAE;QACpD,GAAGpB,iBAAiBqB,KAAK;QACzB,GAAGpB,kBAAkB,GAAG;IAC1B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMqB,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASpB;IACfmB,MAAMpB,IAAI,CAACsB,SAAS,GAAG5B,aAAaK,sBAAsBC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACjG,OAAOF;AACT,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMenuSplitGroupContextValues } from './useMenuSplitGroupContextValues';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n const state = useMenuSplitGroup_unstable(props, ref);\n\n useMenuSplitGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(state);\n\n return renderMenuSplitGroup_unstable(state, useMenuSplitGroupContextValues(state));\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyleHook_unstable","useMenuSplitGroupContextValues","MenuSplitGroup","forwardRef","props","ref","state","displayName"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMenuSplitGroupContextValues } from './useMenuSplitGroupContextValues';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n const state = useMenuSplitGroup_unstable(props, ref);\n\n useMenuSplitGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(state);\n\n return renderMenuSplitGroup_unstable(state, useMenuSplitGroupContextValues(state));\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyleHook_unstable","useMenuSplitGroupContextValues","MenuSplitGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,mCAAmC;AAElF;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IAEjCN,4BAA4B,oCAAoCM;IAEhE,OAAOR,8BAA8BQ,OAAOL,+BAA+BK;AAC7E,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuSplitGroupContextValue } from '../../contexts/menuSplitGroupContext';\n\nexport type MenuSplitGroupSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuSplitGroupContextValues = {\n menuSplitGroup: MenuSplitGroupContextValue;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> &\n Pick<MenuSplitGroupContextValue, 'setMultiline'>;\n"],"names":[],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuSplitGroupContextValue } from '../../contexts/menuSplitGroupContext';\n\nexport type MenuSplitGroupSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuSplitGroupContextValues = {\n menuSplitGroup: MenuSplitGroupContextValue;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> &\n Pick<MenuSplitGroupContextValue, 'setMultiline'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WACmD"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/index.ts"],"sourcesContent":["export { MenuSplitGroup } from './MenuSplitGroup';\nexport type { MenuSplitGroupProps, MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nexport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nexport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nexport { menuSplitGroupClassNames, useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';\n"],"names":["MenuSplitGroup","renderMenuSplitGroup_unstable","useMenuSplitGroup_unstable","menuSplitGroupClassNames","useMenuSplitGroupStyles_unstable"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/index.ts"],"sourcesContent":["export { MenuSplitGroup } from './MenuSplitGroup';\nexport type { MenuSplitGroupProps, MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nexport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nexport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nexport { menuSplitGroupClassNames, useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';\n"],"names":["MenuSplitGroup","renderMenuSplitGroup_unstable","useMenuSplitGroup_unstable","menuSplitGroupClassNames","useMenuSplitGroupStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots, MenuSplitGroupContextValues } from './MenuSplitGroup.types';\nimport { menuSplitGroupContextDefaultValue, MenuSplitGroupContextProvider } from '../../contexts/menuSplitGroupContext';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState, contexts?: MenuSplitGroupContextValues) => {\n assertSlots<MenuSplitGroupSlots>(state);\n\n return (\n <MenuSplitGroupContextProvider value={contexts?.menuSplitGroup ?? menuSplitGroupContextDefaultValue}>\n <state.root />\n </MenuSplitGroupContextProvider>\n );\n};\n"],"names":["assertSlots","menuSplitGroupContextDefaultValue","MenuSplitGroupContextProvider","renderMenuSplitGroup_unstable","state","contexts","value","menuSplitGroup","root"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots, MenuSplitGroupContextValues } from './MenuSplitGroup.types';\nimport { menuSplitGroupContextDefaultValue, MenuSplitGroupContextProvider } from '../../contexts/menuSplitGroupContext';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState, contexts?: MenuSplitGroupContextValues) => {\n assertSlots<MenuSplitGroupSlots>(state);\n\n return (\n <MenuSplitGroupContextProvider value={contexts?.menuSplitGroup ?? menuSplitGroupContextDefaultValue}>\n <state.root />\n </MenuSplitGroupContextProvider>\n );\n};\n"],"names":["assertSlots","menuSplitGroupContextDefaultValue","MenuSplitGroupContextProvider","renderMenuSplitGroup_unstable","state","contexts","value","menuSplitGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,iCAAiC,EAAEC,6BAA6B,QAAQ,uCAAuC;AAExH;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,OAA4BC;IACxEL,YAAiCI;QAGOC;IADxC,qBACE,KAACH;QAA8BI,OAAOD,CAAAA,2BAAAA,qBAAAA,+BAAAA,SAAUE,cAAc,cAAxBF,sCAAAA,2BAA4BJ;kBAChE,cAAA,KAACG,MAAMI,IAAI;;AAGjB,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { menuSplitGroupMultilineAttr } from './useMenuSplitGroupStyles.styles';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n props: MenuSplitGroupProps,\n ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n const innerRef = React.useRef<HTMLDivElement>();\n const { dir, targetDocument } = useFluent();\n\n const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n const { multilineRef, setMultiline } = useHandleMultilineMenuItem();\n\n const onKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n const activeElement = targetDocument?.activeElement;\n if (!activeElement) {\n return;\n }\n\n if (!innerRef.current?.contains(activeElement)) {\n return;\n }\n\n if (e.key === nextArrowKey) {\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n next?.focus();\n }\n\n if (e.key === prevArrowKey) {\n const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n },\n [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n );\n\n return {\n components: {\n root: 'div',\n },\n setMultiline,\n root: slot.always(\n getIntrinsicElementProps('div', {\n role: 'group',\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef, multilineRef) as React.Ref<HTMLDivElement>,\n onKeyDown,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n\n/**\n * Creates a callback that lets a multiline menu item child set an attribute on this component\n * Children can mount before parents so we need to store the value and apply it when the parent is mounted\n */\nconst useHandleMultilineMenuItem = () => {\n const [handle] = React.useState(() => {\n let isMultiline = false;\n let multilineNode: HTMLElement | null = null;\n\n function applyAttr() {\n multilineNode?.toggleAttribute(menuSplitGroupMultilineAttr, isMultiline);\n }\n\n return {\n multilineRef: (node: HTMLDivElement | null) => {\n if (node) {\n multilineNode = node;\n applyAttr();\n } else {\n multilineNode = null;\n }\n },\n setMultiline: (value: boolean) => {\n isMultiline = value;\n applyAttr();\n },\n };\n });\n\n return handle;\n};\n"],"names":["React","getIntrinsicElementProps","getRTLSafeKey","useMergedRefs","slot","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","menuSplitGroupMultilineAttr","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","multilineRef","setMultiline","useHandleMultilineMenuItem","onKeyDown","useCallback","e","activeElement","current","contains","key","next","container","focus","prev","components","root","always","role","elementType","handle","useState","isMultiline","multilineNode","applyAttr","toggleAttribute","node","value"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { menuSplitGroupMultilineAttr } from './useMenuSplitGroupStyles.styles';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n props: MenuSplitGroupProps,\n ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n const innerRef = React.useRef<HTMLDivElement>();\n const { dir, targetDocument } = useFluent();\n\n const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n const { multilineRef, setMultiline } = useHandleMultilineMenuItem();\n\n const onKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n const activeElement = targetDocument?.activeElement;\n if (!activeElement) {\n return;\n }\n\n if (!innerRef.current?.contains(activeElement)) {\n return;\n }\n\n if (e.key === nextArrowKey) {\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n next?.focus();\n }\n\n if (e.key === prevArrowKey) {\n const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n },\n [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n );\n\n return {\n components: {\n root: 'div',\n },\n setMultiline,\n root: slot.always(\n getIntrinsicElementProps('div', {\n role: 'group',\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef, multilineRef) as React.Ref<HTMLDivElement>,\n onKeyDown,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n\n/**\n * Creates a callback that lets a multiline menu item child set an attribute on this component\n * Children can mount before parents so we need to store the value and apply it when the parent is mounted\n */\nconst useHandleMultilineMenuItem = () => {\n const [handle] = React.useState(() => {\n let isMultiline = false;\n let multilineNode: HTMLElement | null = null;\n\n function applyAttr() {\n multilineNode?.toggleAttribute(menuSplitGroupMultilineAttr, isMultiline);\n }\n\n return {\n multilineRef: (node: HTMLDivElement | null) => {\n if (node) {\n multilineNode = node;\n applyAttr();\n } else {\n multilineNode = null;\n }\n },\n setMultiline: (value: boolean) => {\n isMultiline = value;\n applyAttr();\n },\n };\n });\n\n return handle;\n};\n"],"names":["React","getIntrinsicElementProps","getRTLSafeKey","useMergedRefs","slot","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","menuSplitGroupMultilineAttr","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","multilineRef","setMultiline","useHandleMultilineMenuItem","onKeyDown","useCallback","e","activeElement","current","contains","key","next","container","focus","prev","components","root","always","role","elementType","handle","useState","isMultiline","multilineNode","applyAttr","toggleAttribute","node","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACzG,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,UAAU,EAAEC,SAAS,QAAQ,0BAA0B;AAChE,SAASC,2BAA2B,QAAQ,mCAAmC;AAE/E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,WAAWd,MAAMe,MAAM;IAC7B,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,GAAGV;IAEhC,MAAMW,eAAehB,cAAcM,YAAYQ;IAC/C,MAAMG,eAAejB,cAAcO,WAAWO;IAE9C,MAAM,EAAEI,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGhB;IACjD,MAAM,EAAEiB,YAAY,EAAEC,YAAY,EAAE,GAAGC;IAEvC,MAAMC,YAAYzB,MAAM0B,WAAW,CACjC,CAACC;YAMMb;QALL,MAAMc,gBAAgBX,2BAAAA,qCAAAA,eAAgBW,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF;QAEA,IAAI,GAACd,oBAAAA,SAASe,OAAO,cAAhBf,wCAAAA,kBAAkBgB,QAAQ,CAACF,iBAAgB;YAC9C;QACF;QAEA,IAAID,EAAEI,GAAG,KAAKb,cAAc;YAC1B,MAAMc,OAAOZ,kBAAkBQ,eAA8B;gBAAEK,WAAWnB,SAASe,OAAO;YAAC;YAC3FG,iBAAAA,2BAAAA,KAAME,KAAK;QACb;QAEA,IAAIP,EAAEI,GAAG,KAAKZ,cAAc;YAC1B,MAAMgB,OAAOd,kBAAkBO,eAA8B;gBAAEK,WAAWnB,SAASe,OAAO;YAAC;YAC3FM,iBAAAA,2BAAAA,KAAMD,KAAK;QACb;IACF,GACA;QAACd;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAd;QACAc,MAAMjC,KAAKkC,MAAM,CACfrC,yBAAyB,OAAO;YAC9BsC,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F1B,KAAKV,cAAcU,KAAKC,UAAUQ;YAClCG;YACA,GAAGb,KAAK;QACV,IACA;YAAE4B,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;;CAGC,GACD,MAAMhB,6BAA6B;IACjC,MAAM,CAACiB,OAAO,GAAGzC,MAAM0C,QAAQ,CAAC;QAC9B,IAAIC,cAAc;QAClB,IAAIC,gBAAoC;QAExC,SAASC;YACPD,0BAAAA,oCAAAA,cAAeE,eAAe,CAACpC,6BAA6BiC;QAC9D;QAEA,OAAO;YACLrB,cAAc,CAACyB;gBACb,IAAIA,MAAM;oBACRH,gBAAgBG;oBAChBF;gBACF,OAAO;oBACLD,gBAAgB;gBAClB;YACF;YACArB,cAAc,CAACyB;gBACbL,cAAcK;gBACdH;YACF;QACF;IACF;IAEA,OAAOJ;AACT"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { MenuSplitGroupContextValues, MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const useMenuSplitGroupContextValues = (state: MenuSplitGroupState): MenuSplitGroupContextValues => {\n 'use no memo';\n\n return React.useMemo(() => {\n return {\n menuSplitGroup: {\n setMultiline: state.setMultiline,\n },\n };\n }, [state.setMultiline]);\n};\n"],"names":["React","useMenuSplitGroupContextValues","state","useMemo","menuSplitGroup","setMultiline"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { MenuSplitGroupContextValues, MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const useMenuSplitGroupContextValues = (state: MenuSplitGroupState): MenuSplitGroupContextValues => {\n 'use no memo';\n\n return React.useMemo(() => {\n return {\n menuSplitGroup: {\n setMultiline: state.setMultiline,\n },\n };\n }, [state.setMultiline]);\n};\n"],"names":["React","useMenuSplitGroupContextValues","state","useMemo","menuSplitGroup","setMultiline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,OAAOF,MAAMG,OAAO,CAAC;QACnB,OAAO;YACLC,gBAAgB;gBACdC,cAAcH,MAAMG,YAAY;YAClC;QACF;IACF,GAAG;QAACH,MAAMG,YAAY;KAAC;AACzB,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */\nconst useStyles = makeStyles({\n root: {\n [`[${menuSplitGroupMultilineAttr}]`]: {\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n alignSelf: 'center',\n },\n },\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flex: 1,\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '20px',\n backgroundColor: tokens.colorNeutralStroke1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","alignSelf","display","flex","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","content","width","strokeWidthThin","height","backgroundColor","colorNeutralStroke1","useMenuSplitGroupStyles_unstable","state","styles","className"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */\nconst useStyles = makeStyles({\n root: {\n [`[${menuSplitGroupMultilineAttr}]`]: {\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n alignSelf: 'center',\n },\n },\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flex: 1,\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '20px',\n backgroundColor: tokens.colorNeutralStroke1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","alignSelf","display","flex","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","content","width","strokeWidthThin","height","backgroundColor","colorNeutralStroke1","useMenuSplitGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,kBAAkB,QAAQ,uCAAuC;AAI1E,OAAO,MAAMC,8BAA8B,iBAAiB;AAE5D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AACF;;;CAGC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJ,CAAC,CAAC,CAAC,EAAEF,4BAA4B,CAAC,CAAC,CAAC,EAAE;YACpC,CAAC,CAAC,KAAK,EAAED,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;gBAClDE,WAAW;YACb;QACF;QACAC,SAAS;QACT,CAAC,CAAC,KAAK,EAAEN,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDI,MAAM;QACR;QACA,CAAC,CAAC,KAAK,EAAEP,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDK,qBAAqB;YACrBC,wBAAwB;YACxBC,aAAa;YACb,YAAY;gBACVC,SAAS;gBACTC,OAAOb,OAAOc,eAAe;gBAC7BC,QAAQ;gBACRC,iBAAiBhB,OAAOiB,mBAAmB;YAC7C;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGtB,aAAaI,yBAAyBC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IACpG,OAAOF;AACT,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger_unstable } from './useMenuTrigger';\nimport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> = props => {\n const state = useMenuTrigger_unstable(props);\n\n return renderMenuTrigger_unstable(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(MenuTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","useMenuTrigger_unstable","renderMenuTrigger_unstable","MenuTrigger","props","state","displayName","isFluentTriggerComponent"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger_unstable } from './useMenuTrigger';\nimport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> = props => {\n const state = useMenuTrigger_unstable(props);\n\n return renderMenuTrigger_unstable(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(MenuTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","useMenuTrigger_unstable","renderMenuTrigger_unstable","MenuTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AAIjE;;;CAGC,GACD,OAAO,MAAMC,cAA0CC,CAAAA;IACrD,MAAMC,QAAQJ,wBAAwBG;IAEtC,OAAOF,2BAA2BG;AACpC,EAAE;AAEFF,YAAYG,WAAW,GAAG;AAC1B,6FAA6F;AAC5FH,YAAuCI,wBAAwB,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.types.ts"],"sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {\n /**\n * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n * @default false\n */\n disableButtonEnhancement?: boolean;\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n Type,\n Props & {\n 'aria-haspopup'?: 'menu';\n 'aria-expanded'?: boolean;\n id: string;\n ref: React.Ref<never>;\n /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseMove: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n /* eslint-enable @nx/workspace-consistent-callback-type */\n }\n>;\n\nexport type MenuTriggerState = {\n children: React.ReactElement | null;\n isSubmenu: boolean;\n};\n"],"names":["React"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.types.ts"],"sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {\n /**\n * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n * @default false\n */\n disableButtonEnhancement?: boolean;\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n Type,\n Props & {\n 'aria-haspopup'?: 'menu';\n 'aria-expanded'?: boolean;\n id: string;\n ref: React.Ref<never>;\n /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseMove: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n /* eslint-enable @nx/workspace-consistent-callback-type */\n }\n>;\n\nexport type MenuTriggerState = {\n children: React.ReactElement | null;\n isSubmenu: boolean;\n};\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/index.ts"],"sourcesContent":["export { MenuTrigger } from './MenuTrigger';\nexport type { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nexport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nexport { useMenuTrigger_unstable } from './useMenuTrigger';\n"],"names":["MenuTrigger","renderMenuTrigger_unstable","useMenuTrigger_unstable"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/index.ts"],"sourcesContent":["export { MenuTrigger } from './MenuTrigger';\nexport type { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nexport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nexport { useMenuTrigger_unstable } from './useMenuTrigger';\n"],"names":["MenuTrigger","renderMenuTrigger_unstable","useMenuTrigger_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/renderMenuTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger_unstable = (\n state: MenuTriggerState,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n return <MenuTriggerContextProvider value={state.isSubmenu}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"names":["React","MenuTriggerContextProvider","renderMenuTrigger_unstable","state","value","isSubmenu","children"],"
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/renderMenuTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger_unstable = (\n state: MenuTriggerState,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n return <MenuTriggerContextProvider value={state.isSubmenu}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"names":["React","MenuTriggerContextProvider","renderMenuTrigger_unstable","state","value","isSubmenu","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,oCAAoC;AAG/E;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC;IAGA,qBAAO,oBAACF;QAA2BG,OAAOD,MAAME,SAAS;OAAGF,MAAMG,QAAQ;AAC5E,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["import { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n const { children, disableButtonEnhancement = false } = props;\n\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n const isSubmenu = useIsSubmenu();\n\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, menuPopoverRef]);\n\n const openedWithKeyboardRef = React.useRef(false);\n const openedViaSafeZoneRef = React.useRef(false);\n const hasMouseMovedRef = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\n\n // Heads up!\n //\n // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n // but the cursor is already over the menu trigger.\n const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n useEventCallback(() => {\n if (isSubmenu) {\n openedViaSafeZoneRef.current = true;\n }\n }),\n );\n\n const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n if (openOnContext) {\n event.preventDefault();\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n }\n };\n\n const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (!openOnContext) {\n setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n openedWithKeyboardRef.current = false;\n }\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n const key = event.key;\n\n if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n if (key === Escape && !isSubmenu) {\n setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n // if menu is already open, can't rely on effects to focus\n if (open && key === OpenArrowKey && isSubmenu) {\n focusFirst();\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (openOnHover) {\n if (hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n } else if (openedViaSafeZoneRef.current) {\n setOpen(event, { open: true, keyboard: false, ignoreHoverDelay: true, type: 'menuTriggerMouseEnter', event });\n openedViaSafeZoneRef.current = false;\n }\n }\n };\n\n // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n // First time open the mouse using mousemove and then continue with mouseenter\n // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && !hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMovedRef.current = true;\n }\n };\n\n const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover) {\n setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n }\n };\n\n const contextMenuProps = {\n id: triggerId,\n ...child?.props,\n ref: useMergedRefs(triggerRef, child?.ref, safeZoneHandlerRef),\n onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n };\n\n const triggerChildProps = {\n 'aria-haspopup': 'menu',\n 'aria-expanded': !open && !isSubmenu ? undefined : open,\n ...contextMenuProps,\n onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n triggerChildProps,\n );\n\n return {\n isSubmenu,\n children: applyTriggerPropsToChildren(\n children,\n openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n const isDisabled = (el: HTMLElement) =>\n el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n if (isHTMLElement(event.target) && isDisabled(event.target)) {\n return true;\n }\n\n return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useARIAButtonProps","ArrowRight","ArrowLeft","Escape","ArrowDown","useFluent_unstable","useFluent","useFocusFinders","applyTriggerPropsToChildren","getTriggerChild","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","React","useMenuContext_unstable","useIsSubmenu","useOnMenuSafeZoneTimeout","noop","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","openedViaSafeZoneRef","hasMouseMovedRef","dir","OpenArrowKey","child","safeZoneHandlerRef","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseOver","ignoreHoverDelay","onMouseMove","onMouseLeave","contextMenuProps","id","ref","onMouseEnter","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["import { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n const { children, disableButtonEnhancement = false } = props;\n\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n const isSubmenu = useIsSubmenu();\n\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, menuPopoverRef]);\n\n const openedWithKeyboardRef = React.useRef(false);\n const openedViaSafeZoneRef = React.useRef(false);\n const hasMouseMovedRef = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\n\n // Heads up!\n //\n // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n // but the cursor is already over the menu trigger.\n const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n useEventCallback(() => {\n if (isSubmenu) {\n openedViaSafeZoneRef.current = true;\n }\n }),\n );\n\n const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n if (openOnContext) {\n event.preventDefault();\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n }\n };\n\n const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (!openOnContext) {\n setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n openedWithKeyboardRef.current = false;\n }\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n const key = event.key;\n\n if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n if (key === Escape && !isSubmenu) {\n setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n // if menu is already open, can't rely on effects to focus\n if (open && key === OpenArrowKey && isSubmenu) {\n focusFirst();\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (openOnHover) {\n if (hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n } else if (openedViaSafeZoneRef.current) {\n setOpen(event, { open: true, keyboard: false, ignoreHoverDelay: true, type: 'menuTriggerMouseEnter', event });\n openedViaSafeZoneRef.current = false;\n }\n }\n };\n\n // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n // First time open the mouse using mousemove and then continue with mouseenter\n // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && !hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMovedRef.current = true;\n }\n };\n\n const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover) {\n setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n }\n };\n\n const contextMenuProps = {\n id: triggerId,\n ...child?.props,\n ref: useMergedRefs(triggerRef, child?.ref, safeZoneHandlerRef),\n onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n };\n\n const triggerChildProps = {\n 'aria-haspopup': 'menu',\n 'aria-expanded': !open && !isSubmenu ? undefined : open,\n ...contextMenuProps,\n onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n triggerChildProps,\n );\n\n return {\n isSubmenu,\n children: applyTriggerPropsToChildren(\n children,\n openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n const isDisabled = (el: HTMLElement) =>\n el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n if (isHTMLElement(event.target) && isDisabled(event.target)) {\n return true;\n }\n\n return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useARIAButtonProps","ArrowRight","ArrowLeft","Escape","ArrowDown","useFluent_unstable","useFluent","useFocusFinders","applyTriggerPropsToChildren","getTriggerChild","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","React","useMenuContext_unstable","useIsSubmenu","useOnMenuSafeZoneTimeout","noop","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","openedViaSafeZoneRef","hasMouseMovedRef","dir","OpenArrowKey","child","safeZoneHandlerRef","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseOver","ignoreHoverDelay","onMouseMove","onMouseLeave","contextMenuProps","id","ref","onMouseEnter","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/index.ts"],"sourcesContent":["export type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem/index';\nexport {\n MenuItem,\n menuItemClassNames,\n renderMenuItem_unstable,\n useMenuItemStyles_unstable,\n useMenuItem_unstable,\n} from './MenuItem/index';\nexport type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './MenuList/index';\nexport {\n MenuList,\n menuListClassNames,\n renderMenuList_unstable,\n useMenuListContextValues_unstable,\n useMenuListStyles_unstable,\n useMenuList_unstable,\n} from './MenuList/index';\n"],"names":["MenuItem","menuItemClassNames","renderMenuItem_unstable","useMenuItemStyles_unstable","useMenuItem_unstable","MenuList","menuListClassNames","renderMenuList_unstable","useMenuListContextValues_unstable","useMenuListStyles_unstable","useMenuList_unstable"],"
|
1
|
+
{"version":3,"sources":["../src/components/index.ts"],"sourcesContent":["export type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem/index';\nexport {\n MenuItem,\n menuItemClassNames,\n renderMenuItem_unstable,\n useMenuItemStyles_unstable,\n useMenuItem_unstable,\n} from './MenuItem/index';\nexport type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './MenuList/index';\nexport {\n MenuList,\n menuListClassNames,\n renderMenuList_unstable,\n useMenuListContextValues_unstable,\n useMenuListStyles_unstable,\n useMenuList_unstable,\n} from './MenuList/index';\n"],"names":["MenuItem","menuItemClassNames","renderMenuItem_unstable","useMenuItemStyles_unstable","useMenuItem_unstable","MenuList","menuListClassNames","renderMenuList_unstable","useMenuListContextValues_unstable","useMenuListStyles_unstable","useMenuList_unstable"],"mappings":"AACA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,mBAAmB;AAW1B,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,iCAAiC,EACjCC,0BAA0B,EAC1BC,oBAAoB,QACf,mBAAmB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/contexts/menuContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n open: false,\n setOpen: () => false,\n checkedValues: {},\n onCheckedValueChange: () => null,\n isSubmenu: false,\n triggerRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n menuPopoverRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n mountNode: null,\n triggerId: '',\n openOnContext: false,\n openOnHover: false,\n hasIcons: false,\n hasCheckmarks: false,\n inline: false,\n persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n MenuState,\n | 'openOnHover'\n | 'openOnContext'\n | 'triggerRef'\n | 'menuPopoverRef'\n | 'setOpen'\n | 'isSubmenu'\n | 'mountNode'\n | 'triggerId'\n | 'hasIcons'\n | 'hasCheckmarks'\n | 'persistOnItemClick'\n | 'inline'\n | 'checkedValues'\n | 'onCheckedValueChange'\n | 'safeZone'\n> & {\n open: boolean;\n triggerId: string;\n /**\n * Default values to be checked on mount\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","MenuContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","mountNode","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","ctx"],"
|
1
|
+
{"version":3,"sources":["../src/contexts/menuContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n open: false,\n setOpen: () => false,\n checkedValues: {},\n onCheckedValueChange: () => null,\n isSubmenu: false,\n triggerRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n menuPopoverRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n mountNode: null,\n triggerId: '',\n openOnContext: false,\n openOnHover: false,\n hasIcons: false,\n hasCheckmarks: false,\n inline: false,\n persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n MenuState,\n | 'openOnHover'\n | 'openOnContext'\n | 'triggerRef'\n | 'menuPopoverRef'\n | 'setOpen'\n | 'isSubmenu'\n | 'mountNode'\n | 'triggerId'\n | 'hasIcons'\n | 'hasCheckmarks'\n | 'persistOnItemClick'\n | 'inline'\n | 'checkedValues'\n | 'onCheckedValueChange'\n | 'safeZone'\n> & {\n open: boolean;\n triggerId: string;\n /**\n * Default values to be checked on mount\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","MenuContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","mountNode","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,cAAyCF,cACpDG,WAC6B;AAE/B,MAAMC,0BAA4C;IAChDC,MAAM;IACNC,SAAS,IAAM;IACfC,eAAe,CAAC;IAChBC,sBAAsB,IAAM;IAC5BC,WAAW;IACXC,YAAY;QAAEC,SAAS;IAAK;IAC5BC,gBAAgB;QAAED,SAAS;IAAK;IAChCE,WAAW;IACXC,WAAW;IACXC,eAAe;IACfC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,QAAQ;IACRC,oBAAoB;AACtB;AAmCA,OAAO,MAAMC,eAAenB,YAAYoB,QAAQ,CAAC;AAEjD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCvB,mBAAmBC,aAAa,CAACuB,MAAMrB,uBAAuB,GAAKoB,SAASC,MAAM"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/contexts/menuGroupContext.ts"],"sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue | undefined>(\n undefined,\n) as React.Context<MenuGroupContextValue>;\n\nconst menuGroupContextDefaultValue: MenuGroupContextValue = {\n headerId: '',\n};\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport type MenuGroupContextValue = {\n /**\n * Element id applied to the `MenuGroupHeader` component\n */\n headerId: string;\n};\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext_unstable = () => React.useContext(MenuGroupContext) ?? menuGroupContextDefaultValue;\n"],"names":["React","MenuGroupContext","createContext","undefined","menuGroupContextDefaultValue","headerId","MenuGroupContextProvider","Provider","useMenuGroupContext_unstable","useContext"],"
|
1
|
+
{"version":3,"sources":["../src/contexts/menuGroupContext.ts"],"sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue | undefined>(\n undefined,\n) as React.Context<MenuGroupContextValue>;\n\nconst menuGroupContextDefaultValue: MenuGroupContextValue = {\n headerId: '',\n};\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport type MenuGroupContextValue = {\n /**\n * Element id applied to the `MenuGroupHeader` component\n */\n headerId: string;\n};\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext_unstable = () => React.useContext(MenuGroupContext) ?? menuGroupContextDefaultValue;\n"],"names":["React","MenuGroupContext","createContext","undefined","menuGroupContextDefaultValue","headerId","MenuGroupContextProvider","Provider","useMenuGroupContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,mBAAmBD,MAAME,aAAa,CAC1CC;AAGF,MAAMC,+BAAsD;IAC1DC,UAAU;AACZ;AAaA,OAAO,MAAMC,2BAA2BL,iBAAiBM,QAAQ,CAAC;AAClE,OAAO,MAAMC,+BAA+B;QAAMR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,+BAAjBD,+BAAAA,oBAAsCI;EAA6B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/contexts/menuListContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuCheckedValueChangeData, MenuCheckedValueChangeEvent, MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue | undefined>(\n undefined,\n) as Context<MenuListContextValue>;\n\nconst menuListContextDefaultValue: MenuListContextValue = {\n checkedValues: {},\n setFocusByFirstCharacter: () => null,\n toggleCheckbox: () => null,\n selectRadio: () => null,\n hasIcons: false,\n hasCheckmarks: false,\n};\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'hasIcons' | 'hasCheckmarks'> & {\n setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n toggleCheckbox?: SelectableHandler;\n selectRadio?: SelectableHandler;\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n *\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n useContextSelector(MenuListContext, (ctx = menuListContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","MenuListContext","undefined","menuListContextDefaultValue","checkedValues","setFocusByFirstCharacter","toggleCheckbox","selectRadio","hasIcons","hasCheckmarks","MenuListProvider","Provider","useMenuListContext_unstable","selector","ctx"],"
|
1
|
+
{"version":3,"sources":["../src/contexts/menuListContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuCheckedValueChangeData, MenuCheckedValueChangeEvent, MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue | undefined>(\n undefined,\n) as Context<MenuListContextValue>;\n\nconst menuListContextDefaultValue: MenuListContextValue = {\n checkedValues: {},\n setFocusByFirstCharacter: () => null,\n toggleCheckbox: () => null,\n selectRadio: () => null,\n hasIcons: false,\n hasCheckmarks: false,\n};\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'hasIcons' | 'hasCheckmarks'> & {\n setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n toggleCheckbox?: SelectableHandler;\n selectRadio?: SelectableHandler;\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n *\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n useContextSelector(MenuListContext, (ctx = menuListContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","MenuListContext","undefined","menuListContextDefaultValue","checkedValues","setFocusByFirstCharacter","toggleCheckbox","selectRadio","hasIcons","hasCheckmarks","MenuListProvider","Provider","useMenuListContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAKrF,OAAO,MAAMC,kBAAiDF,cAC5DG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,eAAe,CAAC;IAChBC,0BAA0B,IAAM;IAChCC,gBAAgB,IAAM;IACtBC,aAAa,IAAM;IACnBC,UAAU;IACVC,eAAe;AACjB;AAqBA,OAAO,MAAMC,mBAAmBT,gBAAgBU,QAAQ,CAAC;AAEzD,OAAO,MAAMC,8BAA8B,CAAKC,WAC9Cb,mBAAmBC,iBAAiB,CAACa,MAAMX,2BAA2B,GAAKU,SAASC,MAAM"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/contexts/menuSplitGroupContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MenuSplitGroupContextValue = {\n setMultiline: (multiline: boolean) => void;\n};\n\n/**\n * Context used communicate with a child menu item that it is a trigger for a submenu\n */\nconst MenuSplitGroupContext = React.createContext<MenuSplitGroupContextValue | undefined>(\n undefined,\n) as React.Context<MenuSplitGroupContextValue>;\n\nexport const menuSplitGroupContextDefaultValue = {\n setMultiline: () => null,\n};\n\nexport const MenuSplitGroupContextProvider = MenuSplitGroupContext.Provider;\nexport const useMenuSplitGroupContext_unstable = () =>\n React.useContext(MenuSplitGroupContext) ?? menuSplitGroupContextDefaultValue;\n\nexport const useIsInMenuSplitGroup = () => {\n const context = useMenuSplitGroupContext_unstable();\n return context !== menuSplitGroupContextDefaultValue;\n};\n"],"names":["React","MenuSplitGroupContext","createContext","undefined","menuSplitGroupContextDefaultValue","setMultiline","MenuSplitGroupContextProvider","Provider","useMenuSplitGroupContext_unstable","useContext","useIsInMenuSplitGroup","context"],"
|
1
|
+
{"version":3,"sources":["../src/contexts/menuSplitGroupContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MenuSplitGroupContextValue = {\n setMultiline: (multiline: boolean) => void;\n};\n\n/**\n * Context used communicate with a child menu item that it is a trigger for a submenu\n */\nconst MenuSplitGroupContext = React.createContext<MenuSplitGroupContextValue | undefined>(\n undefined,\n) as React.Context<MenuSplitGroupContextValue>;\n\nexport const menuSplitGroupContextDefaultValue = {\n setMultiline: () => null,\n};\n\nexport const MenuSplitGroupContextProvider = MenuSplitGroupContext.Provider;\nexport const useMenuSplitGroupContext_unstable = () =>\n React.useContext(MenuSplitGroupContext) ?? menuSplitGroupContextDefaultValue;\n\nexport const useIsInMenuSplitGroup = () => {\n const context = useMenuSplitGroupContext_unstable();\n return context !== menuSplitGroupContextDefaultValue;\n};\n"],"names":["React","MenuSplitGroupContext","createContext","undefined","menuSplitGroupContextDefaultValue","setMultiline","MenuSplitGroupContextProvider","Provider","useMenuSplitGroupContext_unstable","useContext","useIsInMenuSplitGroup","context"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAM/B;;CAEC,GACD,MAAMC,wBAAwBD,MAAME,aAAa,CAC/CC;AAGF,OAAO,MAAMC,oCAAoC;IAC/CC,cAAc,IAAM;AACtB,EAAE;AAEF,OAAO,MAAMC,gCAAgCL,sBAAsBM,QAAQ,CAAC;AAC5E,OAAO,MAAMC,oCAAoC;QAC/CR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,oCAAjBD,+BAAAA,oBAA2CI;EAAkC;AAE/E,OAAO,MAAMM,wBAAwB;IACnC,MAAMC,UAAUH;IAChB,OAAOG,YAAYP;AACrB,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/contexts/menuTriggerContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Context used communicate with a child menu item that it is a trigger for a submenu\n */\nconst MenuTriggerContext = React.createContext<boolean | undefined>(undefined) as React.Context<boolean>;\n\nconst menuTriggerContextDefaultValue = false;\n\nexport const MenuTriggerContextProvider = MenuTriggerContext.Provider;\nexport const useMenuTriggerContext_unstable = () =>\n React.useContext(MenuTriggerContext) ?? menuTriggerContextDefaultValue;\n"],"names":["React","MenuTriggerContext","createContext","undefined","menuTriggerContextDefaultValue","MenuTriggerContextProvider","Provider","useMenuTriggerContext_unstable","useContext"],"
|
1
|
+
{"version":3,"sources":["../src/contexts/menuTriggerContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Context used communicate with a child menu item that it is a trigger for a submenu\n */\nconst MenuTriggerContext = React.createContext<boolean | undefined>(undefined) as React.Context<boolean>;\n\nconst menuTriggerContextDefaultValue = false;\n\nexport const MenuTriggerContextProvider = MenuTriggerContext.Provider;\nexport const useMenuTriggerContext_unstable = () =>\n React.useContext(MenuTriggerContext) ?? menuTriggerContextDefaultValue;\n"],"names":["React","MenuTriggerContext","createContext","undefined","menuTriggerContextDefaultValue","MenuTriggerContextProvider","Provider","useMenuTriggerContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B;;CAEC,GACD,MAAMC,qBAAqBD,MAAME,aAAa,CAAsBC;AAEpE,MAAMC,iCAAiC;AAEvC,OAAO,MAAMC,6BAA6BJ,mBAAmBK,QAAQ,CAAC;AACtE,OAAO,MAAMC,iCAAiC;QAC5CP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,iCAAjBD,+BAAAA,oBAAwCI;EAA+B"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { MenuProvider, useMenuContext_unstable } from './contexts/menuContext';\nexport type { MenuContextValue } from './contexts/menuContext';\nexport { MenuTriggerContextProvider, useMenuTriggerContext_unstable } from './contexts/menuTriggerContext';\nexport { MenuGroupContextProvider, useMenuGroupContext_unstable } from './contexts/menuGroupContext';\nexport type { MenuGroupContextValue } from './contexts/menuGroupContext';\nexport { MenuListProvider, useMenuListContext_unstable } from './contexts/menuListContext';\nexport type { MenuListContextValue } from './contexts/menuListContext';\n\nexport { Menu, renderMenu_unstable, useMenuContextValues_unstable, useMenu_unstable } from './Menu';\nexport type {\n MenuContextValues,\n MenuOpenChangeData,\n MenuOpenEvent,\n // MenuOpenEvents is deprecated but removing it would be a breaking change\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n MenuOpenEvents,\n MenuProps,\n MenuSlots,\n MenuState,\n} from './Menu';\nexport {\n MenuDivider,\n menuDividerClassNames,\n renderMenuDivider_unstable,\n useMenuDividerStyles_unstable,\n useMenuDivider_unstable,\n} from './MenuDivider';\nexport type { MenuDividerProps, MenuDividerSlots, MenuDividerState } from './MenuDivider';\nexport {\n MenuGroup,\n menuGroupClassNames,\n renderMenuGroup_unstable,\n useMenuGroupContextValues_unstable,\n useMenuGroupStyles_unstable,\n useMenuGroup_unstable,\n} from './MenuGroup';\nexport type { MenuGroupContextValues, MenuGroupProps, MenuGroupSlots, MenuGroupState } from './MenuGroup';\nexport {\n MenuGroupHeader,\n menuGroupHeaderClassNames,\n renderMenuGroupHeader_unstable,\n useMenuGroupHeaderStyles_unstable,\n useMenuGroupHeader_unstable,\n} from './MenuGroupHeader';\nexport type { MenuGroupHeaderProps, MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader';\nexport {\n MenuItem,\n menuItemClassNames,\n renderMenuItem_unstable,\n useMenuItemStyles_unstable,\n useMenuItem_unstable,\n} from './MenuItem';\nexport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem';\nexport {\n MenuItemCheckbox,\n menuItemCheckboxClassNames,\n renderMenuItemCheckbox_unstable,\n useMenuItemCheckboxStyles_unstable,\n useMenuItemCheckbox_unstable,\n} from './MenuItemCheckbox';\nexport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox';\nexport {\n MenuItemRadio,\n menuItemRadioClassNames,\n renderMenuItemRadio_unstable,\n useMenuItemRadioStyles_unstable,\n useMenuItemRadio_unstable,\n} from './MenuItemRadio';\nexport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio';\nexport {\n MenuList,\n menuListClassNames,\n renderMenuList_unstable,\n useMenuListContextValues_unstable,\n useMenuListStyles_unstable,\n useMenuList_unstable,\n} from './MenuList';\nexport type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // UninitializedMenuListState is deprecated but removing it would be a breaking change\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './MenuList';\nexport {\n MenuPopover,\n menuPopoverClassNames,\n renderMenuPopover_unstable,\n useMenuPopoverStyles_unstable,\n useMenuPopover_unstable,\n} from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover';\nexport {\n MenuSplitGroup,\n menuSplitGroupClassNames,\n renderMenuSplitGroup_unstable,\n useMenuSplitGroupStyles_unstable,\n useMenuSplitGroup_unstable,\n} from './MenuSplitGroup';\nexport type { MenuSplitGroupProps, MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup';\nexport { MenuTrigger, renderMenuTrigger_unstable, useMenuTrigger_unstable } from './MenuTrigger';\nexport type { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger';\n\nexport { useCheckmarkStyles_unstable } from './selectable/index';\nexport type { MenuItemSelectableProps, MenuItemSelectableState, SelectableHandler } from './selectable/index';\n\nexport {\n MenuItemLink,\n menuItemLinkClassNames,\n renderMenuItemLink_unstable,\n useMenuItemLinkStyles_unstable,\n useMenuItemLink_unstable,\n} from './MenuItemLink';\nexport type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink';\n\nexport { MENU_ENTER_EVENT, dispatchMenuEnterEvent, useOnMenuMouseEnter } from './utils';\nexport {\n MenuItemSwitch,\n useMenuItemSwitch_unstable,\n useMenuItemSwitchStyles_unstable,\n renderMenuItemSwitch_unstable,\n menuItemSwitchClassNames,\n} from './MenuItemSwitch';\n\nexport type { MenuItemSwitchProps, MenuItemSwitchState, MenuItemSwitchSlots } from './MenuItemSwitch';\n"],"names":["MenuProvider","useMenuContext_unstable","MenuTriggerContextProvider","useMenuTriggerContext_unstable","MenuGroupContextProvider","useMenuGroupContext_unstable","MenuListProvider","useMenuListContext_unstable","Menu","renderMenu_unstable","useMenuContextValues_unstable","useMenu_unstable","MenuDivider","menuDividerClassNames","renderMenuDivider_unstable","useMenuDividerStyles_unstable","useMenuDivider_unstable","MenuGroup","menuGroupClassNames","renderMenuGroup_unstable","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useMenuGroup_unstable","MenuGroupHeader","menuGroupHeaderClassNames","renderMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","useMenuGroupHeader_unstable","MenuItem","menuItemClassNames","renderMenuItem_unstable","useMenuItemStyles_unstable","useMenuItem_unstable","MenuItemCheckbox","menuItemCheckboxClassNames","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useMenuItemCheckbox_unstable","MenuItemRadio","menuItemRadioClassNames","renderMenuItemRadio_unstable","useMenuItemRadioStyles_unstable","useMenuItemRadio_unstable","MenuList","menuListClassNames","renderMenuList_unstable","useMenuListContextValues_unstable","useMenuListStyles_unstable","useMenuList_unstable","MenuPopover","menuPopoverClassNames","renderMenuPopover_unstable","useMenuPopoverStyles_unstable","useMenuPopover_unstable","MenuSplitGroup","menuSplitGroupClassNames","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useMenuSplitGroup_unstable","MenuTrigger","renderMenuTrigger_unstable","useMenuTrigger_unstable","useCheckmarkStyles_unstable","MenuItemLink","menuItemLinkClassNames","renderMenuItemLink_unstable","useMenuItemLinkStyles_unstable","useMenuItemLink_unstable","MENU_ENTER_EVENT","dispatchMenuEnterEvent","useOnMenuMouseEnter","MenuItemSwitch","useMenuItemSwitch_unstable","useMenuItemSwitchStyles_unstable","renderMenuItemSwitch_unstable","menuItemSwitchClassNames"],"
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { MenuProvider, useMenuContext_unstable } from './contexts/menuContext';\nexport type { MenuContextValue } from './contexts/menuContext';\nexport { MenuTriggerContextProvider, useMenuTriggerContext_unstable } from './contexts/menuTriggerContext';\nexport { MenuGroupContextProvider, useMenuGroupContext_unstable } from './contexts/menuGroupContext';\nexport type { MenuGroupContextValue } from './contexts/menuGroupContext';\nexport { MenuListProvider, useMenuListContext_unstable } from './contexts/menuListContext';\nexport type { MenuListContextValue } from './contexts/menuListContext';\n\nexport { Menu, renderMenu_unstable, useMenuContextValues_unstable, useMenu_unstable } from './Menu';\nexport type {\n MenuContextValues,\n MenuOpenChangeData,\n MenuOpenEvent,\n // MenuOpenEvents is deprecated but removing it would be a breaking change\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n MenuOpenEvents,\n MenuProps,\n MenuSlots,\n MenuState,\n} from './Menu';\nexport {\n MenuDivider,\n menuDividerClassNames,\n renderMenuDivider_unstable,\n useMenuDividerStyles_unstable,\n useMenuDivider_unstable,\n} from './MenuDivider';\nexport type { MenuDividerProps, MenuDividerSlots, MenuDividerState } from './MenuDivider';\nexport {\n MenuGroup,\n menuGroupClassNames,\n renderMenuGroup_unstable,\n useMenuGroupContextValues_unstable,\n useMenuGroupStyles_unstable,\n useMenuGroup_unstable,\n} from './MenuGroup';\nexport type { MenuGroupContextValues, MenuGroupProps, MenuGroupSlots, MenuGroupState } from './MenuGroup';\nexport {\n MenuGroupHeader,\n menuGroupHeaderClassNames,\n renderMenuGroupHeader_unstable,\n useMenuGroupHeaderStyles_unstable,\n useMenuGroupHeader_unstable,\n} from './MenuGroupHeader';\nexport type { MenuGroupHeaderProps, MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader';\nexport {\n MenuItem,\n menuItemClassNames,\n renderMenuItem_unstable,\n useMenuItemStyles_unstable,\n useMenuItem_unstable,\n} from './MenuItem';\nexport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem';\nexport {\n MenuItemCheckbox,\n menuItemCheckboxClassNames,\n renderMenuItemCheckbox_unstable,\n useMenuItemCheckboxStyles_unstable,\n useMenuItemCheckbox_unstable,\n} from './MenuItemCheckbox';\nexport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox';\nexport {\n MenuItemRadio,\n menuItemRadioClassNames,\n renderMenuItemRadio_unstable,\n useMenuItemRadioStyles_unstable,\n useMenuItemRadio_unstable,\n} from './MenuItemRadio';\nexport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio';\nexport {\n MenuList,\n menuListClassNames,\n renderMenuList_unstable,\n useMenuListContextValues_unstable,\n useMenuListStyles_unstable,\n useMenuList_unstable,\n} from './MenuList';\nexport type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // UninitializedMenuListState is deprecated but removing it would be a breaking change\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './MenuList';\nexport {\n MenuPopover,\n menuPopoverClassNames,\n renderMenuPopover_unstable,\n useMenuPopoverStyles_unstable,\n useMenuPopover_unstable,\n} from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover';\nexport {\n MenuSplitGroup,\n menuSplitGroupClassNames,\n renderMenuSplitGroup_unstable,\n useMenuSplitGroupStyles_unstable,\n useMenuSplitGroup_unstable,\n} from './MenuSplitGroup';\nexport type { MenuSplitGroupProps, MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup';\nexport { MenuTrigger, renderMenuTrigger_unstable, useMenuTrigger_unstable } from './MenuTrigger';\nexport type { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger';\n\nexport { useCheckmarkStyles_unstable } from './selectable/index';\nexport type { MenuItemSelectableProps, MenuItemSelectableState, SelectableHandler } from './selectable/index';\n\nexport {\n MenuItemLink,\n menuItemLinkClassNames,\n renderMenuItemLink_unstable,\n useMenuItemLinkStyles_unstable,\n useMenuItemLink_unstable,\n} from './MenuItemLink';\nexport type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink';\n\nexport { MENU_ENTER_EVENT, dispatchMenuEnterEvent, useOnMenuMouseEnter } from './utils';\nexport {\n MenuItemSwitch,\n useMenuItemSwitch_unstable,\n useMenuItemSwitchStyles_unstable,\n renderMenuItemSwitch_unstable,\n menuItemSwitchClassNames,\n} from './MenuItemSwitch';\n\nexport type { MenuItemSwitchProps, MenuItemSwitchState, MenuItemSwitchSlots } from './MenuItemSwitch';\n"],"names":["MenuProvider","useMenuContext_unstable","MenuTriggerContextProvider","useMenuTriggerContext_unstable","MenuGroupContextProvider","useMenuGroupContext_unstable","MenuListProvider","useMenuListContext_unstable","Menu","renderMenu_unstable","useMenuContextValues_unstable","useMenu_unstable","MenuDivider","menuDividerClassNames","renderMenuDivider_unstable","useMenuDividerStyles_unstable","useMenuDivider_unstable","MenuGroup","menuGroupClassNames","renderMenuGroup_unstable","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useMenuGroup_unstable","MenuGroupHeader","menuGroupHeaderClassNames","renderMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","useMenuGroupHeader_unstable","MenuItem","menuItemClassNames","renderMenuItem_unstable","useMenuItemStyles_unstable","useMenuItem_unstable","MenuItemCheckbox","menuItemCheckboxClassNames","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useMenuItemCheckbox_unstable","MenuItemRadio","menuItemRadioClassNames","renderMenuItemRadio_unstable","useMenuItemRadioStyles_unstable","useMenuItemRadio_unstable","MenuList","menuListClassNames","renderMenuList_unstable","useMenuListContextValues_unstable","useMenuListStyles_unstable","useMenuList_unstable","MenuPopover","menuPopoverClassNames","renderMenuPopover_unstable","useMenuPopoverStyles_unstable","useMenuPopover_unstable","MenuSplitGroup","menuSplitGroupClassNames","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useMenuSplitGroup_unstable","MenuTrigger","renderMenuTrigger_unstable","useMenuTrigger_unstable","useCheckmarkStyles_unstable","MenuItemLink","menuItemLinkClassNames","renderMenuItemLink_unstable","useMenuItemLinkStyles_unstable","useMenuItemLink_unstable","MENU_ENTER_EVENT","dispatchMenuEnterEvent","useOnMenuMouseEnter","MenuItemSwitch","useMenuItemSwitch_unstable","useMenuItemSwitchStyles_unstable","renderMenuItemSwitch_unstable","menuItemSwitchClassNames"],"mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAE/E,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,gCAAgC;AAC3G,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,8BAA8B;AAErG,SAASC,gBAAgB,EAAEC,2BAA2B,QAAQ,6BAA6B;AAG3F,SAASC,IAAI,EAAEC,mBAAmB,EAAEC,6BAA6B,EAAEC,gBAAgB,QAAQ,SAAS;AAYpG,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAErB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAE3B,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAEpB,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,+BAA+B,EAC/BC,kCAAkC,EAClCC,4BAA4B,QACvB,qBAAqB;AAE5B,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,iCAAiC,EACjCC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAYpB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SAASC,WAAW,EAAEC,0BAA0B,EAAEC,uBAAuB,QAAQ,gBAAgB;AAGjG,SAASC,2BAA2B,QAAQ,qBAAqB;AAGjE,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SAASC,gBAAgB,EAAEC,sBAAsB,EAAEC,mBAAmB,QAAQ,UAAU;AACxF,SACEC,cAAc,EACdC,0BAA0B,EAC1BC,gCAAgC,EAChCC,6BAA6B,EAC7BC,wBAAwB,QACnB,mBAAmB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/selectable/index.ts"],"sourcesContent":["export { useCheckmarkStyles_unstable } from './useCheckmarkStyles.styles';\nexport type { MenuItemSelectableProps, MenuItemSelectableState, SelectableHandler } from './types';\n"],"names":["useCheckmarkStyles_unstable"],"
|
1
|
+
{"version":3,"sources":["../src/selectable/index.ts"],"sourcesContent":["export { useCheckmarkStyles_unstable } from './useCheckmarkStyles.styles';\nexport type { MenuItemSelectableProps, MenuItemSelectableState, SelectableHandler } from './types';\n"],"names":["useCheckmarkStyles_unstable"],"mappings":"AAAA,SAASA,2BAA2B,QAAQ,8BAA8B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/selectable/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n */\n name: string;\n\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n */\n value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n /**\n * Selectable is checked\n */\n checked: boolean;\n};\n"],"names":["React"],"
|
1
|
+
{"version":3,"sources":["../src/selectable/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n */\n name: string;\n\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n */\n value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n /**\n * Selectable is checked\n */\n checked: boolean;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/selectable/useCheckmarkStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemState } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n root: {\n width: '16px',\n height: '16px',\n visibility: 'hidden',\n flexShrink: 0,\n },\n rootChecked: {\n visibility: 'visible',\n flexShrink: 0,\n },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles_unstable = (state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>) => {\n 'use no memo';\n\n const styles = useStyles();\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n styles.root,\n state.checked && styles.rootChecked,\n state.checkmark.className,\n );\n }\n};\n"],"names":["mergeClasses","makeStyles","useStyles","root","width","height","visibility","flexShrink","rootChecked","useCheckmarkStyles_unstable","state","styles","checkmark","className","checked"],"
|
1
|
+
{"version":3,"sources":["../src/selectable/useCheckmarkStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemState } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n root: {\n width: '16px',\n height: '16px',\n visibility: 'hidden',\n flexShrink: 0,\n },\n rootChecked: {\n visibility: 'visible',\n flexShrink: 0,\n },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles_unstable = (state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>) => {\n 'use no memo';\n\n const styles = useStyles();\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n styles.root,\n state.checked && styles.rootChecked,\n state.checkmark.className,\n );\n }\n};\n"],"names":["mergeClasses","makeStyles","useStyles","root","width","height","visibility","flexShrink","rootChecked","useCheckmarkStyles_unstable","state","styles","checkmark","className","checked"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,MAAMC,YAAYD,WAAW;IAC3BE,MAAM;QACJC,OAAO;QACPC,QAAQ;QACRC,YAAY;QACZC,YAAY;IACd;IACAC,aAAa;QACXF,YAAY;QACZC,YAAY;IACd;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAME,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,SAAST;IACf,IAAIQ,MAAME,SAAS,EAAE;QACnBF,MAAME,SAAS,CAACC,SAAS,GAAGb,aAC1BW,OAAOR,IAAI,EACXO,MAAMI,OAAO,IAAIH,OAAOH,WAAW,EACnCE,MAAME,SAAS,CAACC,SAAS;IAE7B;AACF,EAAE"}
|