@fluentui/react-nav 9.3.23 → 9.4.0
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 +41 -2
- package/dist/index.d.ts +105 -13
- package/lib/AppItem.js +1 -1
- package/lib/AppItem.js.map +1 -1
- package/lib/AppItemStatic.js +1 -1
- package/lib/AppItemStatic.js.map +1 -1
- package/lib/Nav.js +2 -2
- package/lib/Nav.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavItem.js.map +1 -1
- package/lib/NavSubItem.js +1 -1
- package/lib/NavSubItem.js.map +1 -1
- package/lib/NavSubItemGroup.js +1 -1
- package/lib/NavSubItemGroup.js.map +1 -1
- package/lib/components/AppItem/AppItem.types.js +1 -3
- package/lib/components/AppItem/AppItem.types.js.map +1 -1
- package/lib/components/AppItem/index.js +1 -1
- package/lib/components/AppItem/index.js.map +1 -1
- package/lib/components/AppItem/useAppItem.js +18 -4
- package/lib/components/AppItem/useAppItem.js.map +1 -1
- package/lib/components/AppItem/useAppItemStyles.styles.js +2 -0
- package/lib/components/AppItem/useAppItemStyles.styles.js.map +1 -1
- package/lib/components/AppItem/useAppItemStyles.styles.raw.js +2 -0
- package/lib/components/AppItem/useAppItemStyles.styles.raw.js.map +1 -1
- package/lib/components/AppItemStatic/AppItemStatic.types.js +1 -3
- package/lib/components/AppItemStatic/AppItemStatic.types.js.map +1 -1
- package/lib/components/AppItemStatic/index.js +1 -1
- package/lib/components/AppItemStatic/index.js.map +1 -1
- package/lib/components/AppItemStatic/useAppItemStatic.js +9 -4
- package/lib/components/AppItemStatic/useAppItemStatic.js.map +1 -1
- package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.js +2 -0
- package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.js.map +1 -1
- package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.raw.js +2 -0
- package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.raw.js.map +1 -1
- package/lib/components/Hamburger/Hamburger.types.js.map +1 -1
- package/lib/components/Hamburger/useHamburgerStyles.styles.js +2 -0
- package/lib/components/Hamburger/useHamburgerStyles.styles.js.map +1 -1
- package/lib/components/Hamburger/useHamburgerStyles.styles.raw.js +2 -0
- package/lib/components/Hamburger/useHamburgerStyles.styles.raw.js.map +1 -1
- package/lib/components/Nav/Nav.types.js +1 -1
- package/lib/components/Nav/Nav.types.js.map +1 -1
- package/lib/components/Nav/index.js +1 -1
- package/lib/components/Nav/index.js.map +1 -1
- package/lib/components/Nav/useNav.js +17 -4
- package/lib/components/Nav/useNav.js.map +1 -1
- package/lib/components/Nav/useNavStyles.styles.js +1 -0
- package/lib/components/Nav/useNavStyles.styles.js.map +1 -1
- package/lib/components/Nav/useNavStyles.styles.raw.js +1 -0
- package/lib/components/Nav/useNavStyles.styles.raw.js.map +1 -1
- package/lib/components/NavCategory/NavCategory.types.js +3 -1
- package/lib/components/NavCategory/NavCategory.types.js.map +1 -1
- package/lib/components/NavCategory/renderNavCategory.js.map +1 -1
- package/lib/components/NavCategory/useNavCategory.js +0 -1
- package/lib/components/NavCategory/useNavCategory.js.map +1 -1
- package/lib/components/NavCategoryContext.js.map +1 -1
- package/lib/components/NavCategoryItem/NavCategoryItem.types.js +1 -1
- package/lib/components/NavCategoryItem/NavCategoryItem.types.js.map +1 -1
- package/lib/components/NavCategoryItem/index.js +1 -1
- package/lib/components/NavCategoryItem/index.js.map +1 -1
- package/lib/components/NavCategoryItem/useNavCategoryItem.js +34 -12
- package/lib/components/NavCategoryItem/useNavCategoryItem.js.map +1 -1
- package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js +3 -0
- package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js.map +1 -1
- package/lib/components/NavCategoryItem/useNavCategoryItem.styles.raw.js +3 -0
- package/lib/components/NavCategoryItem/useNavCategoryItem.styles.raw.js.map +1 -1
- package/lib/components/NavCategoryItemContext.js.map +1 -1
- package/lib/components/NavContext.js.map +1 -1
- package/lib/components/NavContext.types.js +1 -1
- package/lib/components/NavContext.types.js.map +1 -1
- package/lib/components/NavDivider/useNavDivider.js +0 -1
- package/lib/components/NavDivider/useNavDivider.js.map +1 -1
- package/lib/components/NavDivider/useNavDividerStyles.styles.js +2 -0
- package/lib/components/NavDivider/useNavDividerStyles.styles.js.map +1 -1
- package/lib/components/NavDivider/useNavDividerStyles.styles.raw.js +2 -0
- package/lib/components/NavDivider/useNavDividerStyles.styles.raw.js.map +1 -1
- package/lib/components/NavDrawer/NavDrawer.js.map +1 -1
- package/lib/components/NavDrawer/NavDrawer.types.js.map +1 -1
- package/lib/components/NavDrawer/useNavDrawer.js +0 -1
- package/lib/components/NavDrawer/useNavDrawer.js.map +1 -1
- package/lib/components/NavDrawer/useNavDrawerStyles.styles.js +1 -0
- package/lib/components/NavDrawer/useNavDrawerStyles.styles.js.map +1 -1
- package/lib/components/NavDrawer/useNavDrawerStyles.styles.raw.js +1 -0
- package/lib/components/NavDrawer/useNavDrawerStyles.styles.raw.js.map +1 -1
- package/lib/components/NavDrawerBody/useNavDrawerBody.js +0 -1
- package/lib/components/NavDrawerBody/useNavDrawerBody.js.map +1 -1
- package/lib/components/NavDrawerBody/useNavDrawerBodyStyles.styles.js +1 -0
- package/lib/components/NavDrawerBody/useNavDrawerBodyStyles.styles.js.map +1 -1
- package/lib/components/NavDrawerBody/useNavDrawerBodyStyles.styles.raw.js +1 -0
- package/lib/components/NavDrawerBody/useNavDrawerBodyStyles.styles.raw.js.map +1 -1
- package/lib/components/NavDrawerFooter/useNavDrawerFooter.js +0 -1
- package/lib/components/NavDrawerFooter/useNavDrawerFooter.js.map +1 -1
- package/lib/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.js +1 -0
- package/lib/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.js.map +1 -1
- package/lib/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.raw.js +1 -0
- package/lib/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.raw.js.map +1 -1
- package/lib/components/NavDrawerHeader/useNavDrawerHeader.js +0 -1
- package/lib/components/NavDrawerHeader/useNavDrawerHeader.js.map +1 -1
- package/lib/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.js +1 -0
- package/lib/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.js.map +1 -1
- package/lib/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.raw.js +1 -0
- package/lib/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.raw.js.map +1 -1
- package/lib/components/NavItem/NavItem.types.js +1 -3
- package/lib/components/NavItem/NavItem.types.js.map +1 -1
- package/lib/components/NavItem/index.js +1 -1
- package/lib/components/NavItem/index.js.map +1 -1
- package/lib/components/NavItem/useNavItem.js +16 -3
- package/lib/components/NavItem/useNavItem.js.map +1 -1
- package/lib/components/NavItem/useNavItemStyles.styles.js +2 -0
- package/lib/components/NavItem/useNavItemStyles.styles.js.map +1 -1
- package/lib/components/NavItem/useNavItemStyles.styles.raw.js +2 -0
- package/lib/components/NavItem/useNavItemStyles.styles.raw.js.map +1 -1
- package/lib/components/NavSectionHeader/useNavSectionHeader.js +0 -1
- package/lib/components/NavSectionHeader/useNavSectionHeader.js.map +1 -1
- package/lib/components/NavSectionHeader/useNavSectionHeaderStyles.styles.js +1 -0
- package/lib/components/NavSectionHeader/useNavSectionHeaderStyles.styles.js.map +1 -1
- package/lib/components/NavSectionHeader/useNavSectionHeaderStyles.styles.raw.js +1 -0
- package/lib/components/NavSectionHeader/useNavSectionHeaderStyles.styles.raw.js.map +1 -1
- package/lib/components/NavSubItem/NavSubItem.types.js +1 -3
- package/lib/components/NavSubItem/NavSubItem.types.js.map +1 -1
- package/lib/components/NavSubItem/index.js +1 -1
- package/lib/components/NavSubItem/index.js.map +1 -1
- package/lib/components/NavSubItem/useNavSubItem.js +16 -3
- package/lib/components/NavSubItem/useNavSubItem.js.map +1 -1
- package/lib/components/NavSubItem/useNavSubItemStyles.styles.js +1 -0
- package/lib/components/NavSubItem/useNavSubItemStyles.styles.js.map +1 -1
- package/lib/components/NavSubItem/useNavSubItemStyles.styles.raw.js +1 -0
- package/lib/components/NavSubItem/useNavSubItemStyles.styles.raw.js.map +1 -1
- package/lib/components/NavSubItemContext.js.map +1 -1
- package/lib/components/NavSubItemGroup/NavSubItemGroup.types.js +1 -3
- package/lib/components/NavSubItemGroup/NavSubItemGroup.types.js.map +1 -1
- package/lib/components/NavSubItemGroup/index.js +1 -1
- package/lib/components/NavSubItemGroup/index.js.map +1 -1
- package/lib/components/NavSubItemGroup/useNavSubItemGroup.js +25 -10
- package/lib/components/NavSubItemGroup/useNavSubItemGroup.js.map +1 -1
- package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js +1 -0
- package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map +1 -1
- package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js +1 -0
- package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/SplitNavItem/SplitNavItem.types.js.map +1 -1
- package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js +5 -0
- package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js.map +1 -1
- package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.raw.js +5 -0
- package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.raw.js.map +1 -1
- package/lib/components/useNavCategoryContextValues_unstable.js.map +1 -1
- package/lib/components/useNavCategoryItemContextValues_unstable.js.map +1 -1
- package/lib/components/useNavContextValues.js.map +1 -1
- package/lib/index.js +7 -7
- package/lib/index.js.map +1 -1
- package/lib-commonjs/AppItem.js +3 -0
- package/lib-commonjs/AppItem.js.map +1 -1
- package/lib-commonjs/AppItemStatic.js +3 -0
- package/lib-commonjs/AppItemStatic.js.map +1 -1
- package/lib-commonjs/Nav.js +6 -0
- package/lib-commonjs/Nav.js.map +1 -1
- package/lib-commonjs/NavItem.js +3 -0
- package/lib-commonjs/NavItem.js.map +1 -1
- package/lib-commonjs/NavSubItem.js +3 -0
- package/lib-commonjs/NavSubItem.js.map +1 -1
- package/lib-commonjs/NavSubItemGroup.js +3 -0
- package/lib-commonjs/NavSubItemGroup.js.map +1 -1
- package/lib-commonjs/components/AppItem/AppItem.types.js +1 -3
- package/lib-commonjs/components/AppItem/AppItem.types.js.map +1 -1
- package/lib-commonjs/components/AppItem/index.js +3 -0
- package/lib-commonjs/components/AppItem/index.js.map +1 -1
- package/lib-commonjs/components/AppItem/useAppItem.js +20 -8
- package/lib-commonjs/components/AppItem/useAppItem.js.map +1 -1
- package/lib-commonjs/components/AppItem/useAppItemStyles.styles.js +2 -0
- package/lib-commonjs/components/AppItem/useAppItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AppItem/useAppItemStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/AppItem/useAppItemStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/AppItemStatic/AppItemStatic.types.js +1 -3
- package/lib-commonjs/components/AppItemStatic/AppItemStatic.types.js.map +1 -1
- package/lib-commonjs/components/AppItemStatic/index.js +3 -0
- package/lib-commonjs/components/AppItemStatic/index.js.map +1 -1
- package/lib-commonjs/components/AppItemStatic/useAppItemStatic.js +20 -8
- package/lib-commonjs/components/AppItemStatic/useAppItemStatic.js.map +1 -1
- package/lib-commonjs/components/AppItemStatic/useAppItemStaticStyles.styles.js +2 -0
- package/lib-commonjs/components/AppItemStatic/useAppItemStaticStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AppItemStatic/useAppItemStaticStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/AppItemStatic/useAppItemStaticStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Hamburger/Hamburger.types.js.map +1 -1
- package/lib-commonjs/components/Hamburger/useHamburgerStyles.styles.js +2 -0
- package/lib-commonjs/components/Hamburger/useHamburgerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Hamburger/useHamburgerStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/Hamburger/useHamburgerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Nav/Nav.types.js +0 -2
- package/lib-commonjs/components/Nav/Nav.types.js.map +1 -1
- package/lib-commonjs/components/Nav/index.js +3 -0
- package/lib-commonjs/components/Nav/index.js.map +1 -1
- package/lib-commonjs/components/Nav/useNav.js +28 -7
- package/lib-commonjs/components/Nav/useNav.js.map +1 -1
- package/lib-commonjs/components/Nav/useNavStyles.styles.js +1 -0
- package/lib-commonjs/components/Nav/useNavStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Nav/useNavStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/Nav/useNavStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavCategory/NavCategory.types.js +3 -3
- package/lib-commonjs/components/NavCategory/NavCategory.types.js.map +1 -1
- package/lib-commonjs/components/NavCategory/renderNavCategory.js.map +1 -1
- package/lib-commonjs/components/NavCategory/useNavCategory.js +0 -2
- package/lib-commonjs/components/NavCategory/useNavCategory.js.map +1 -1
- package/lib-commonjs/components/NavCategoryContext.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItem/NavCategoryItem.types.js +1 -1
- package/lib-commonjs/components/NavCategoryItem/NavCategoryItem.types.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItem/index.js +3 -0
- package/lib-commonjs/components/NavCategoryItem/index.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js +40 -15
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.js +3 -0
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.raw.js +3 -0
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItemContext.js.map +1 -1
- package/lib-commonjs/components/NavContext.js.map +1 -1
- package/lib-commonjs/components/NavContext.types.js +0 -2
- package/lib-commonjs/components/NavContext.types.js.map +1 -1
- package/lib-commonjs/components/NavDivider/useNavDivider.js +0 -2
- package/lib-commonjs/components/NavDivider/useNavDivider.js.map +1 -1
- package/lib-commonjs/components/NavDivider/useNavDividerStyles.styles.js +2 -0
- package/lib-commonjs/components/NavDivider/useNavDividerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavDivider/useNavDividerStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/NavDivider/useNavDividerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavDrawer/NavDrawer.js.map +1 -1
- package/lib-commonjs/components/NavDrawer/NavDrawer.types.js.map +1 -1
- package/lib-commonjs/components/NavDrawer/useNavDrawer.js +0 -2
- package/lib-commonjs/components/NavDrawer/useNavDrawer.js.map +1 -1
- package/lib-commonjs/components/NavDrawer/useNavDrawerStyles.styles.js +1 -0
- package/lib-commonjs/components/NavDrawer/useNavDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavDrawer/useNavDrawerStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/NavDrawer/useNavDrawerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavDrawerBody/useNavDrawerBody.js +0 -2
- package/lib-commonjs/components/NavDrawerBody/useNavDrawerBody.js.map +1 -1
- package/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.js +1 -0
- package/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooter.js +0 -2
- package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooter.js.map +1 -1
- package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.js +1 -0
- package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeader.js +0 -2
- package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeader.js.map +1 -1
- package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.js +1 -0
- package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavItem/NavItem.types.js +1 -3
- package/lib-commonjs/components/NavItem/NavItem.types.js.map +1 -1
- package/lib-commonjs/components/NavItem/index.js +3 -0
- package/lib-commonjs/components/NavItem/index.js.map +1 -1
- package/lib-commonjs/components/NavItem/useNavItem.js +21 -6
- package/lib-commonjs/components/NavItem/useNavItem.js.map +1 -1
- package/lib-commonjs/components/NavItem/useNavItemStyles.styles.js +2 -0
- package/lib-commonjs/components/NavItem/useNavItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavItem/useNavItemStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/NavItem/useNavItemStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavSectionHeader/useNavSectionHeader.js +0 -2
- package/lib-commonjs/components/NavSectionHeader/useNavSectionHeader.js.map +1 -1
- package/lib-commonjs/components/NavSectionHeader/useNavSectionHeaderStyles.styles.js +1 -0
- package/lib-commonjs/components/NavSectionHeader/useNavSectionHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavSectionHeader/useNavSectionHeaderStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/NavSectionHeader/useNavSectionHeaderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavSubItem/NavSubItem.types.js +1 -3
- package/lib-commonjs/components/NavSubItem/NavSubItem.types.js.map +1 -1
- package/lib-commonjs/components/NavSubItem/index.js +3 -0
- package/lib-commonjs/components/NavSubItem/index.js.map +1 -1
- package/lib-commonjs/components/NavSubItem/useNavSubItem.js +21 -6
- package/lib-commonjs/components/NavSubItem/useNavSubItem.js.map +1 -1
- package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.js +1 -0
- package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/NavSubItemContext.js.map +1 -1
- package/lib-commonjs/components/NavSubItemGroup/NavSubItemGroup.types.js +1 -3
- package/lib-commonjs/components/NavSubItemGroup/NavSubItemGroup.types.js.map +1 -1
- package/lib-commonjs/components/NavSubItemGroup/index.js +3 -0
- package/lib-commonjs/components/NavSubItemGroup/index.js.map +1 -1
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroup.js +30 -14
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroup.js.map +1 -1
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js +1 -0
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/SplitNavItem/SplitNavItem.types.js.map +1 -1
- package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js +5 -0
- package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.raw.js +5 -0
- package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/useNavCategoryContextValues_unstable.js.map +1 -1
- package/lib-commonjs/components/useNavCategoryItemContextValues_unstable.js.map +1 -1
- package/lib-commonjs/components/useNavContextValues.js.map +1 -1
- package/lib-commonjs/index.js +21 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavItem/useNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport {\n useContentStyles,\n useIconStyles,\n useIndicatorStyles,\n useRootDefaultClassName,\n useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavItemSlots, NavItemState } from './NavItem.types';\nexport const navItemClassNames: SlotClassNames<NavItemSlots> = {\n root: 'fui-NavItem',\n icon: 'fui-NavItem__icon',\n};\n\n/**\n * Apply styling to the NavItem slots based on the state\n */\nexport const useNavItemStyles_unstable = (state: NavItemState): NavItemState => {\n 'use no memo';\n\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const iconStyles = useIconStyles();\n\n const { selected, density } = state;\n\n state.root.className = mergeClasses(\n navItemClassNames.root,\n rootDefaultClassName,\n density === 'small' && smallStyles.root,\n selected && indicatorStyles.base,\n selected && contentStyles.selected,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n navItemClassNames.icon,\n iconStyles.base,\n selected && iconStyles.selected,\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,uBAAuBP;IAC7B,MAAMQ,cAAcP;IACpB,MAAMQ,gBAAgBZ;IACtB,MAAMa,kBAAkBX;IACxB,MAAMY,aAAab;IAEnB,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;
|
|
1
|
+
{"version":3,"sources":["../src/components/NavItem/useNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport {\n useContentStyles,\n useIconStyles,\n useIndicatorStyles,\n useRootDefaultClassName,\n useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavItemSlots, NavItemState } from './NavItem.types';\nexport const navItemClassNames: SlotClassNames<NavItemSlots> = {\n root: 'fui-NavItem',\n icon: 'fui-NavItem__icon',\n};\n\n/**\n * Apply styling to the NavItem slots based on the state\n */\nexport const useNavItemStyles_unstable = (state: NavItemState): NavItemState => {\n 'use no memo';\n\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const iconStyles = useIconStyles();\n\n const { selected, density } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n navItemClassNames.root,\n rootDefaultClassName,\n density === 'small' && smallStyles.root,\n selected && indicatorStyles.base,\n selected && contentStyles.selected,\n state.root.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n navItemClassNames.icon,\n iconStyles.base,\n selected && iconStyles.selected,\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,uBAAuBP;IAC7B,MAAMQ,cAAcP;IACpB,MAAMQ,gBAAgBZ;IACtB,MAAMa,kBAAkBX;IACxB,MAAMY,aAAab;IAEnB,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAE9B,oDAAoD;IACpDA,MAAMH,IAAI,CAACW,SAAS,GAAGlB,aACrBM,kBAAkBC,IAAI,EACtBI,sBACAM,YAAY,WAAWL,YAAYL,IAAI,EACvCS,YAAYF,gBAAgBK,IAAI,EAChCH,YAAYH,cAAcG,QAAQ,EAClCN,MAAMH,IAAI,CAACW,SAAS;IAGtB,IAAIR,MAAMF,IAAI,EAAE;QACd,oDAAoD;QACpDE,MAAMF,IAAI,CAACU,SAAS,GAAGlB,aACrBM,kBAAkBE,IAAI,EACtBO,WAAWI,IAAI,EACfH,YAAYD,WAAWC,QAAQ,EAC/BN,MAAMF,IAAI,CAACU,SAAS;IAExB;IAEA,OAAOR;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderProps, NavSectionHeaderState } from './NavSectionHeader.types';\n\n/**\n * Create the state required to render NavSectionHeader.\n *\n * The returned state can be modified with hooks such as useNavSectionHeaderStyles_unstable,\n * before being passed to renderNavSectionHeader_unstable.\n *\n * @param props - props from this instance of NavSectionHeader\n * @param ref - reference to root HTMLDivElement of NavSectionHeader\n */\nexport const useNavSectionHeader_unstable = (\n props: NavSectionHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSectionHeaderState => {\n return {\n components: {\n root: 'h3',\n },\n root: slot.always(\n getIntrinsicElementProps('h3', {\n ref,\n ...props,\n }),\n { elementType: 'h3' },\n ),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeader.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderProps, NavSectionHeaderState } from './NavSectionHeader.types';\n\n/**\n * Create the state required to render NavSectionHeader.\n *\n * The returned state can be modified with hooks such as useNavSectionHeaderStyles_unstable,\n * before being passed to renderNavSectionHeader_unstable.\n *\n * @param props - props from this instance of NavSectionHeader\n * @param ref - reference to root HTMLDivElement of NavSectionHeader\n */\nexport const useNavSectionHeader_unstable = (\n props: NavSectionHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSectionHeaderState => {\n return {\n components: {\n root: 'h3',\n },\n root: slot.always(\n getIntrinsicElementProps('h3', {\n ref,\n ...props,\n }),\n { elementType: 'h3' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useNavSectionHeader_unstable","props","ref","components","root","always","elementType"],"mappings":"AACA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,MAAM;YAC7BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAK;IAExB;AACF,EAAE"}
|
|
@@ -31,6 +31,7 @@ export const useNavSectionHeaderStyles_unstable = state => {
|
|
|
31
31
|
'use no memo';
|
|
32
32
|
|
|
33
33
|
const styles = useStyles();
|
|
34
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
34
35
|
state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);
|
|
35
36
|
return state;
|
|
36
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useNavSectionHeaderStyles_unstable","state","styles","className"],"sources":["useNavSectionHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const navSectionHeaderClassNames = {\n root: 'fui-NavSectionHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n marginInlineStart: `10px`,\n marginBlock: '8px',\n ...typographyStyles.caption1Strong\n }\n});\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */ export const useNavSectionHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useNavSectionHeaderStyles_unstable","state","styles","className"],"sources":["useNavSectionHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const navSectionHeaderClassNames = {\n root: 'fui-NavSectionHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n marginInlineStart: `10px`,\n marginBlock: '8px',\n ...typographyStyles.caption1Strong\n }\n});\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */ export const useNavSectionHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1B;EACAY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGlB,YAAY,CAACE,0BAA0B,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACvG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -18,6 +18,7 @@ export const navSectionHeaderClassNames = {
|
|
|
18
18
|
*/ export const useNavSectionHeaderStyles_unstable = (state)=>{
|
|
19
19
|
'use no memo';
|
|
20
20
|
const styles = useStyles();
|
|
21
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
21
22
|
state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);
|
|
22
23
|
return state;
|
|
23
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {\n root: 'fui-NavSectionHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n marginInlineStart: `10px`,\n marginBlock: '8px',\n ...typographyStyles.caption1Strong,\n },\n});\n\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */\nexport const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState): NavSectionHeaderState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","marginInlineStart","marginBlock","caption1Strong","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGL,iBAAiBM,cAAc;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASN;
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {\n root: 'fui-NavSectionHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n marginInlineStart: `10px`,\n marginBlock: '8px',\n ...typographyStyles.caption1Strong,\n },\n});\n\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */\nexport const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState): NavSectionHeaderState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","marginInlineStart","marginBlock","caption1Strong","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGL,iBAAiBM,cAAc;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASN;IACf,oDAAoD;IACpDK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,2BAA2BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAEtG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.types.ts"],"sourcesContent":["import { NavItemValue } from '../NavContext.types';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavDensity } from '../Nav/Nav.types';\n\nexport type NavSubItemSlots = {\n root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n};\n\n/**\n * NavSubItem Props\n */\nexport type NavSubItemProps = ComponentProps<NavSubItemSlots> & {\n href?: string;\n /**\n * The value that identifies this NavSubItem when selected.\n */\n value: NavItemValue;\n};\n\n/**\n * State used in rendering NavSubItem\n */\nexport type NavSubItemState = ComponentState<NavSubItemSlots> &\n Pick<NavSubItemProps, 'value'> & {\n /**\n * If this NavSubItem is selected\n */\n selected: boolean;\n /**\n * The density of the NavItem\n *\n * @default 'medium'\n */\n density: NavDensity;\n };\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.types.ts"],"sourcesContent":["import type { NavItemValue } from '../NavContext.types';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { NavDensity } from '../Nav/Nav.types';\n\nexport type NavSubItemSlots = {\n root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n};\n\n/**\n * NavSubItem Props\n */\nexport type NavSubItemProps = ComponentProps<NavSubItemSlots> & {\n href?: string;\n /**\n * The value that identifies this NavSubItem when selected.\n */\n value: NavItemValue;\n};\n\nexport type NavSubItemBaseProps = NavSubItemProps;\n\n/**\n * State used in rendering NavSubItem\n */\nexport type NavSubItemState = ComponentState<NavSubItemSlots> &\n Pick<NavSubItemProps, 'value'> & {\n /**\n * If this NavSubItem is selected\n */\n selected: boolean;\n /**\n * The density of the NavItem\n *\n * @default 'medium'\n */\n density: NavDensity;\n };\n\nexport type NavSubItemBaseState = Omit<NavSubItemState, 'density'>;\n"],"names":[],"mappings":"AAwCA,WAAmE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { NavSubItem } from './NavSubItem';
|
|
2
2
|
export { renderNavSubItem_unstable } from './renderNavSubItem';
|
|
3
|
-
export { useNavSubItem_unstable } from './useNavSubItem';
|
|
3
|
+
export { useNavSubItem_unstable, useNavSubItemBase_unstable } from './useNavSubItem';
|
|
4
4
|
export { useNavSubItemStyles_unstable, navSubItemClassNames } from './useNavSubItemStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItem/index.ts"],"sourcesContent":["export { NavSubItem } from './NavSubItem';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItem/index.ts"],"sourcesContent":["export { NavSubItem } from './NavSubItem';\nexport type {\n NavSubItemSlots,\n NavSubItemProps,\n NavSubItemState,\n NavSubItemBaseProps,\n NavSubItemBaseState,\n} from './NavSubItem.types';\nexport { renderNavSubItem_unstable } from './renderNavSubItem';\nexport { useNavSubItem_unstable, useNavSubItemBase_unstable } from './useNavSubItem';\nexport { useNavSubItemStyles_unstable, navSubItemClassNames } from './useNavSubItemStyles.styles';\n"],"names":["NavSubItem","renderNavSubItem_unstable","useNavSubItem_unstable","useNavSubItemBase_unstable","useNavSubItemStyles_unstable","navSubItemClassNames"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAQ1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACrF,SAASC,4BAA4B,EAAEC,oBAAoB,QAAQ,+BAA+B"}
|
|
@@ -13,8 +13,22 @@ import { useNavCategoryContext_unstable } from '../NavCategoryContext';
|
|
|
13
13
|
* @param props - props from this instance of NavSubItem
|
|
14
14
|
* @param ref - reference to root HTMLButtonElement of NavSubItem
|
|
15
15
|
*/ export const useNavSubItem_unstable = (props, ref)=>{
|
|
16
|
+
const { density = 'medium' } = useNavContext_unstable();
|
|
17
|
+
const state = useNavSubItemBase_unstable(props, ref);
|
|
18
|
+
return {
|
|
19
|
+
...state,
|
|
20
|
+
density
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Base state used in rendering NavSubItem, excluding any design-related properties such as `density`.
|
|
25
|
+
*
|
|
26
|
+
* @param props - props from this instance of NavSubItem
|
|
27
|
+
* @param ref - reference to root HTMLButtonElement of NavSubItem
|
|
28
|
+
* @returns - The base state of NavSubItem
|
|
29
|
+
*/ export const useNavSubItemBase_unstable = (props, ref)=>{
|
|
16
30
|
const { onClick, value: subItemValue, as, href } = props;
|
|
17
|
-
const { selectedValue, onRegister, onUnregister, onSelect
|
|
31
|
+
const { selectedValue, onRegister, onUnregister, onSelect } = useNavContext_unstable();
|
|
18
32
|
const { value: parentCategoryValue } = useNavCategoryContext_unstable();
|
|
19
33
|
const rootElementType = as || (href ? 'a' : 'button');
|
|
20
34
|
const selected = selectedValue === subItemValue;
|
|
@@ -64,7 +78,6 @@ import { useNavCategoryContext_unstable } from '../NavCategoryContext';
|
|
|
64
78
|
},
|
|
65
79
|
root,
|
|
66
80
|
selected,
|
|
67
|
-
value: subItemValue
|
|
68
|
-
density
|
|
81
|
+
value: subItemValue
|
|
69
82
|
};
|
|
70
83
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItem/useNavSubItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavSubItemProps, NavSubItemState } from './NavSubItem.types';\n\n/**\n * Create the state required to render NavSubItem.\n *\n * The returned state can be modified with hooks such as useNavSubItemStyles_unstable,\n * before being passed to renderNavSubItem_unstable.\n *\n * @param props - props from this instance of NavSubItem\n * @param ref - reference to root HTMLButtonElement of NavSubItem\n */\nexport const useNavSubItem_unstable = (\n props: NavSubItemProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavSubItemState => {\n const { onClick, value: subItemValue, as, href } = props;\n\n const { selectedValue, onRegister, onUnregister, onSelect
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItem/useNavSubItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavSubItemBaseProps, NavSubItemBaseState, NavSubItemProps, NavSubItemState } from './NavSubItem.types';\n\n/**\n * Create the state required to render NavSubItem.\n *\n * The returned state can be modified with hooks such as useNavSubItemStyles_unstable,\n * before being passed to renderNavSubItem_unstable.\n *\n * @param props - props from this instance of NavSubItem\n * @param ref - reference to root HTMLButtonElement of NavSubItem\n */\nexport const useNavSubItem_unstable = (\n props: NavSubItemProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavSubItemState => {\n const { density = 'medium' } = useNavContext_unstable();\n const state = useNavSubItemBase_unstable(props, ref);\n\n return {\n ...state,\n density,\n };\n};\n\n/**\n * Base state used in rendering NavSubItem, excluding any design-related properties such as `density`.\n *\n * @param props - props from this instance of NavSubItem\n * @param ref - reference to root HTMLButtonElement of NavSubItem\n * @returns - The base state of NavSubItem\n */\nexport const useNavSubItemBase_unstable = (\n props: NavSubItemBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavSubItemBaseState => {\n const { onClick, value: subItemValue, as, href } = props;\n\n const { selectedValue, onRegister, onUnregister, onSelect } = useNavContext_unstable();\n\n const { value: parentCategoryValue } = useNavCategoryContext_unstable();\n\n const rootElementType = as || (href ? 'a' : 'button');\n\n const selected = selectedValue === subItemValue;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const onNavSubItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n onClick?.(event);\n\n if (!event.defaultPrevented && isHTMLElement(event.target)) {\n onSelect(event, { type: 'click', event, value: subItemValue, categoryValue: parentCategoryValue });\n }\n });\n\n const root = slot.always<ARIAButtonSlotProps<'a'>>(\n getIntrinsicElementProps(\n rootElementType,\n useARIAButtonProps(rootElementType, {\n 'aria-current': selected ? 'page' : 'false',\n ...props,\n }),\n ),\n {\n elementType: rootElementType,\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: rootElementType,\n },\n },\n );\n\n root.onClick = onNavSubItemClick;\n\n React.useEffect(() => {\n onRegister({\n value: subItemValue,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value: subItemValue, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, subItemValue]);\n\n return {\n components: {\n root: rootElementType,\n },\n root,\n selected,\n value: subItemValue,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavCategoryContext_unstable","useNavSubItem_unstable","props","ref","density","state","useNavSubItemBase_unstable","onClick","value","subItemValue","as","href","selectedValue","onRegister","onUnregister","onSelect","parentCategoryValue","rootElementType","selected","innerRef","useRef","onNavSubItemClick","event","defaultPrevented","target","type","categoryValue","root","always","elementType","defaultProps","useEffect","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5G,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,8BAA8B,QAAQ,wBAAwB;AAKvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAM,EAAEC,UAAU,QAAQ,EAAE,GAAGL;IAC/B,MAAMM,QAAQC,2BAA2BJ,OAAOC;IAEhD,OAAO;QACL,GAAGE,KAAK;QACRD;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAME,6BAA6B,CACxCJ,OACAC;IAEA,MAAM,EAAEI,OAAO,EAAEC,OAAOC,YAAY,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGT;IAEnD,MAAM,EAAEU,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAE,GAAGhB;IAE9D,MAAM,EAAES,OAAOQ,mBAAmB,EAAE,GAAGhB;IAEvC,MAAMiB,kBAAkBP,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAMO,WAAWN,kBAAkBH;IAEnC,MAAMU,WAAW1B,MAAM2B,MAAM,CAAc;IAE3C,MAAMC,oBAAyDzB,iBAAiB0B,CAAAA;QAC9Ef,oBAAAA,8BAAAA,QAAUe;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAI1B,cAAcyB,MAAME,MAAM,GAAG;YAC1DT,SAASO,OAAO;gBAAEG,MAAM;gBAASH;gBAAOd,OAAOC;gBAAciB,eAAeV;YAAoB;QAClG;IACF;IAEA,MAAMW,OAAOhC,KAAKiC,MAAM,CACtBlC,yBACEuB,iBACAnB,mBAAmBmB,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGhB,KAAK;IACV,KAEF;QACE2B,aAAaZ;QACba,cAAc;YACZ3B,KAAKA;YACLsB,MAAMR;QACR;IACF;IAGFU,KAAKpB,OAAO,GAAGc;IAEf5B,MAAMsC,SAAS,CAAC;QACdlB,WAAW;YACTL,OAAOC;YACPN,KAAKgB;QACP;QAEA,OAAO;YACLL,aAAa;gBAAEN,OAAOC;gBAAcN,KAAKgB;YAAS;QACpD;IACF,GAAG;QAACN;QAAYC;QAAcK;QAAUV;KAAa;IAErD,OAAO;QACLuB,YAAY;YACVL,MAAMV;QACR;QACAU;QACAT;QACAV,OAAOC;IACT;AACF,EAAE"}
|
|
@@ -37,6 +37,7 @@ export const useNavSubItemStyles_unstable = state => {
|
|
|
37
37
|
density
|
|
38
38
|
} = state;
|
|
39
39
|
const isSmallDensity = density === 'small';
|
|
40
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
40
41
|
state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
|
|
41
42
|
return state;
|
|
42
43
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px'\n },\n smallBase: {\n paddingInlineStart: '40px'\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n }\n }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n const { selected, density } = state;\n const isSmallDensity = density === 'small';\n state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnC,MAAMQ,cAAc,GAAGD,OAAO,KAAK,OAAO;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px'\n },\n smallBase: {\n paddingInlineStart: '40px'\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n }\n }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n const { selected, density } = state;\n const isSmallDensity = density === 'small';\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnC,MAAMQ,cAAc,GAAGD,OAAO,KAAK,OAAO;EAC1C;EACAP,KAAK,CAACT,IAAI,CAACkB,SAAS,GAAGzB,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEO,cAAc,IAAIN,WAAW,CAACX,IAAI,EAAEiB,cAAc,IAAIH,wBAAwB,CAACV,SAAS,EAAEU,wBAAwB,CAACZ,IAAI,EAAEa,QAAQ,IAAIF,eAAe,CAACX,IAAI,EAAEa,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEA,QAAQ,IAAID,wBAAwB,CAACT,iBAAiB,EAAEI,KAAK,CAACT,IAAI,CAACkB,SAAS,CAAC;EACjW,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -30,6 +30,7 @@ export const navSubItemClassNames = {
|
|
|
30
30
|
const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
|
|
31
31
|
const { selected, density } = state;
|
|
32
32
|
const isSmallDensity = density === 'small';
|
|
33
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
33
34
|
state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
|
|
34
35
|
return state;
|
|
35
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItem/useNavSubItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport {\n navItemTokens,\n useContentStyles,\n useIndicatorStyles,\n useRootDefaultClassName,\n useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemSlots, NavSubItemState } from './NavSubItem.types';\n\nexport const navSubItemClassNames: SlotClassNames<NavSubItemSlots> = {\n root: 'fui-NavSubItem',\n};\n/**\n * Styles for the content slot (children)\n */\nconst useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px',\n },\n smallBase: {\n paddingInlineStart: '40px',\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`,\n },\n },\n});\n\n/**\n * Apply styling to the NavSubItem slots based on the state\n */\nexport const useNavSubItemStyles_unstable = (state: NavSubItemState): NavSubItemState => {\n 'use no memo';\n\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n\n const { selected, density } = state;\n const isSmallDensity = density === 'small';\n\n state.root.className = mergeClasses(\n navSubItemClassNames.root,\n rootDefaultClassName,\n isSmallDensity && smallStyles.root,\n isSmallDensity && navSubItemSpecificStyles.smallBase,\n navSubItemSpecificStyles.base,\n selected && indicatorStyles.base,\n selected && contentStyles.selected,\n selected && navSubItemSpecificStyles.selectedIndicator,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","paddingInlineStart","smallBase","selectedIndicator","marginInlineStart","indicatorOffset","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAKnC,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AACF;;CAEC,GACD,MAAMC,8BAA8BT,WAAW;IAC7CU,MAAM;QACJC,oBAAoB;IACtB;IACAC,WAAW;QACTD,oBAAoB;IACtB;IACAE,mBAAmB;QACjB,WAAW;YACTC,mBAAmB,CAAC,CAAC,EAAEZ,cAAca,eAAe,GAAG,GAAG,EAAE,CAAC;QAC/D;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,uBAAuBb;IAC7B,MAAMc,cAAcb;IACpB,MAAMc,gBAAgBjB;IACtB,MAAMkB,kBAAkBjB;IACxB,MAAMkB,2BAA2Bb;IAEjC,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAC9B,MAAMQ,iBAAiBD,YAAY;
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItem/useNavSubItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport {\n navItemTokens,\n useContentStyles,\n useIndicatorStyles,\n useRootDefaultClassName,\n useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemSlots, NavSubItemState } from './NavSubItem.types';\n\nexport const navSubItemClassNames: SlotClassNames<NavSubItemSlots> = {\n root: 'fui-NavSubItem',\n};\n/**\n * Styles for the content slot (children)\n */\nconst useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px',\n },\n smallBase: {\n paddingInlineStart: '40px',\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`,\n },\n },\n});\n\n/**\n * Apply styling to the NavSubItem slots based on the state\n */\nexport const useNavSubItemStyles_unstable = (state: NavSubItemState): NavSubItemState => {\n 'use no memo';\n\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n\n const { selected, density } = state;\n const isSmallDensity = density === 'small';\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n navSubItemClassNames.root,\n rootDefaultClassName,\n isSmallDensity && smallStyles.root,\n isSmallDensity && navSubItemSpecificStyles.smallBase,\n navSubItemSpecificStyles.base,\n selected && indicatorStyles.base,\n selected && contentStyles.selected,\n selected && navSubItemSpecificStyles.selectedIndicator,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","paddingInlineStart","smallBase","selectedIndicator","marginInlineStart","indicatorOffset","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAKnC,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AACF;;CAEC,GACD,MAAMC,8BAA8BT,WAAW;IAC7CU,MAAM;QACJC,oBAAoB;IACtB;IACAC,WAAW;QACTD,oBAAoB;IACtB;IACAE,mBAAmB;QACjB,WAAW;YACTC,mBAAmB,CAAC,CAAC,EAAEZ,cAAca,eAAe,GAAG,GAAG,EAAE,CAAC;QAC/D;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,uBAAuBb;IAC7B,MAAMc,cAAcb;IACpB,MAAMc,gBAAgBjB;IACtB,MAAMkB,kBAAkBjB;IACxB,MAAMkB,2BAA2Bb;IAEjC,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAC9B,MAAMQ,iBAAiBD,YAAY;IAEnC,oDAAoD;IACpDP,MAAMT,IAAI,CAACkB,SAAS,GAAGzB,aACrBM,qBAAqBC,IAAI,EACzBU,sBACAO,kBAAkBN,YAAYX,IAAI,EAClCiB,kBAAkBH,yBAAyBV,SAAS,EACpDU,yBAAyBZ,IAAI,EAC7Ba,YAAYF,gBAAgBX,IAAI,EAChCa,YAAYH,cAAcG,QAAQ,EAClCA,YAAYD,yBAAyBT,iBAAiB,EACtDI,MAAMT,IAAI,CAACkB,SAAS;IAGtB,OAAOT;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItemContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NavItemValue } from './NavContext.types';\n\n// This context is analogous to AccordionItemContext\n\nexport type NavSubItemContextValue = {\n open: boolean;\n value: NavItemValue;\n};\n\nconst NavSubItemContext = React.createContext<NavSubItemContextValue | undefined>(\n undefined,\n) as React.Context<NavSubItemContextValue>;\n\nconst NavSubItemContextDefaultValue: NavSubItemContextValue = {\n open: false,\n value: '',\n};\n\nexport const { Provider: NavSubItemProvider } = NavSubItemContext;\n\nexport const useNavSubItemContext_unstable = (): NavSubItemContextValue => {\n return React.useContext(NavSubItemContext) ?? NavSubItemContextDefaultValue;\n};\n"],"names":["React","NavSubItemContext","createContext","undefined","NavSubItemContextDefaultValue","open","value","Provider","NavSubItemProvider","useNavSubItemContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,oBAAoBD,MAAME,aAAa,CAC3CC;AAGF,MAAMC,gCAAwD;IAC5DC,MAAM;IACNC,OAAO;AACT;AAEA,OAAO,MAAM,EAAEC,UAAUC,kBAAkB,EAAE,GAAGP,kBAAkB;AAElE,OAAO,MAAMQ,gCAAgC;QACpCT;IAAP,OAAOA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,gCAAjBD,+BAAAA,oBAAuCI;AAChD,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItemContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { NavItemValue } from './NavContext.types';\n\n// This context is analogous to AccordionItemContext\n\nexport type NavSubItemContextValue = {\n open: boolean;\n value: NavItemValue;\n};\n\nconst NavSubItemContext = React.createContext<NavSubItemContextValue | undefined>(\n undefined,\n) as React.Context<NavSubItemContextValue>;\n\nconst NavSubItemContextDefaultValue: NavSubItemContextValue = {\n open: false,\n value: '',\n};\n\nexport const { Provider: NavSubItemProvider } = NavSubItemContext;\n\nexport const useNavSubItemContext_unstable = (): NavSubItemContextValue => {\n return React.useContext(NavSubItemContext) ?? NavSubItemContextDefaultValue;\n};\n"],"names":["React","NavSubItemContext","createContext","undefined","NavSubItemContextDefaultValue","open","value","Provider","NavSubItemProvider","useNavSubItemContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,oBAAoBD,MAAME,aAAa,CAC3CC;AAGF,MAAMC,gCAAwD;IAC5DC,MAAM;IACNC,OAAO;AACT;AAEA,OAAO,MAAM,EAAEC,UAAUC,kBAAkB,EAAE,GAAGP,kBAAkB;AAElE,OAAO,MAAMQ,gCAAgC;QACpCT;IAAP,OAAOA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,gCAAjBD,+BAAAA,oBAAuCI;AAChD,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavDensity } from '../Nav/Nav.types';\n\n/**\n * Context value for NavSubItemGroup\n */\nexport type NavSubItemGroupCollapseMotionParams = {\n /**\n * The number of items in the NavSubItemGroup\n */\n items?: number;\n\n /**\n * The density of the NavItem\n */\n density?: NavDensity;\n};\n\nexport type NavSubItemGroupSlots = {\n /**\n * The root element\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Collapse motion slot\n */\n collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;\n};\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\n/**\n * State used in rendering NavSubItemGroup\n */\nexport type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { NavDensity } from '../Nav/Nav.types';\n\n/**\n * Context value for NavSubItemGroup\n */\nexport type NavSubItemGroupCollapseMotionParams = {\n /**\n * The number of items in the NavSubItemGroup\n */\n items?: number;\n\n /**\n * The density of the NavItem\n */\n density?: NavDensity;\n};\n\nexport type NavSubItemGroupSlots = {\n /**\n * The root element\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Collapse motion slot\n */\n collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;\n};\n\nexport type NavSubItemGroupBaseSlots = Omit<NavSubItemGroupSlots, 'collapseMotion'>;\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\nexport type NavSubItemGroupBaseProps = ComponentProps<NavSubItemGroupBaseSlots>;\n\n/**\n * State used in rendering NavSubItemGroup\n */\nexport type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n\nexport type NavSubItemGroupBaseState = ComponentState<NavSubItemGroupBaseSlots> & Pick<NavSubItemGroupState, 'open'>;\n"],"names":[],"mappings":"AAkDA,WAAqH"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { NavSubItemGroup } from './NavSubItemGroup';
|
|
2
2
|
export { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';
|
|
3
|
-
export { useNavSubItemGroup_unstable } from './useNavSubItemGroup';
|
|
3
|
+
export { useNavSubItemGroup_unstable, useNavSubItemGroupBase_unstable } from './useNavSubItemGroup';
|
|
4
4
|
export { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItemGroup/index.ts"],"sourcesContent":["export { NavSubItemGroup } from './NavSubItemGroup';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItemGroup/index.ts"],"sourcesContent":["export { NavSubItemGroup } from './NavSubItemGroup';\nexport type {\n NavSubItemGroupSlots,\n NavSubItemGroupProps,\n NavSubItemGroupState,\n NavSubItemGroupBaseSlots,\n NavSubItemGroupBaseProps,\n NavSubItemGroupBaseState,\n} from './NavSubItemGroup.types';\nexport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nexport { useNavSubItemGroup_unstable, useNavSubItemGroupBase_unstable } from './useNavSubItemGroup';\nexport { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';\n"],"names":["NavSubItemGroup","renderNavSubItemGroup_unstable","useNavSubItemGroup_unstable","useNavSubItemGroupBase_unstable","useNavSubItemGroupStyles_unstable","navSubItemGroupClassNames"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AASpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,EAAEC,+BAA+B,QAAQ,uBAAuB;AACpG,SAASC,iCAAiC,EAAEC,yBAAyB,QAAQ,oCAAoC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from 'react';
|
|
3
2
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
4
3
|
import { presenceMotionSlot } from '@fluentui/react-motion';
|
|
5
4
|
import { Collapse } from '@fluentui/react-motion-components-preview';
|
|
@@ -13,25 +12,41 @@ import { useNavCategoryContext_unstable } from '../NavCategoryContext';
|
|
|
13
12
|
* @param props - props from this instance of NavSubItemGroup
|
|
14
13
|
* @param ref - reference to root HTMLDivElement of NavSubItemGroup
|
|
15
14
|
*/ export const useNavSubItemGroup_unstable = (props, ref)=>{
|
|
15
|
+
const state = useNavSubItemGroupBase_unstable(props, ref);
|
|
16
|
+
return {
|
|
17
|
+
...state,
|
|
18
|
+
components: {
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
20
|
+
...state.components,
|
|
21
|
+
collapseMotion: Collapse
|
|
22
|
+
},
|
|
23
|
+
collapseMotion: presenceMotionSlot(props.collapseMotion, {
|
|
24
|
+
elementType: Collapse,
|
|
25
|
+
defaultProps: {
|
|
26
|
+
visible: state.open,
|
|
27
|
+
unmountOnExit: true
|
|
28
|
+
}
|
|
29
|
+
})
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* The base state used in rendering NavSubItemGroup, excluding any design-related properties such as motion props.
|
|
34
|
+
*
|
|
35
|
+
* @param props - props from this instance of NavSubItemGroup
|
|
36
|
+
* @param ref - reference to root HTMLDivElement of NavSubItemGroup
|
|
37
|
+
* @returns - The base state of NavSubItemGroup
|
|
38
|
+
*/ export const useNavSubItemGroupBase_unstable = (props, ref)=>{
|
|
16
39
|
const { open } = useNavCategoryContext_unstable();
|
|
17
40
|
return {
|
|
18
41
|
open,
|
|
19
42
|
components: {
|
|
20
|
-
root: 'div'
|
|
21
|
-
collapseMotion: Collapse
|
|
43
|
+
root: 'div'
|
|
22
44
|
},
|
|
23
45
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
24
46
|
...props,
|
|
25
47
|
ref
|
|
26
48
|
}), {
|
|
27
49
|
elementType: 'div'
|
|
28
|
-
}),
|
|
29
|
-
collapseMotion: presenceMotionSlot(props.collapseMotion, {
|
|
30
|
-
elementType: Collapse,
|
|
31
|
-
defaultProps: {
|
|
32
|
-
visible: open,
|
|
33
|
-
unmountOnExit: true
|
|
34
|
-
}
|
|
35
50
|
})
|
|
36
51
|
};
|
|
37
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\n\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\n\nimport type {\n NavSubItemGroupBaseProps,\n NavSubItemGroupBaseState,\n NavSubItemGroupProps,\n NavSubItemGroupState,\n} from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n props: NavSubItemGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n const state = useNavSubItemGroupBase_unstable(props, ref);\n\n return {\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n collapseMotion: Collapse,\n },\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: state.open,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * The base state used in rendering NavSubItemGroup, excluding any design-related properties such as motion props.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n * @returns - The base state of NavSubItemGroup\n */\nexport const useNavSubItemGroupBase_unstable = (\n props: NavSubItemGroupBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupBaseState => {\n const { open } = useNavCategoryContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","presenceMotionSlot","Collapse","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","state","useNavSubItemGroupBase_unstable","components","collapseMotion","elementType","defaultProps","visible","open","unmountOnExit","root","always"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,QAAQ,QAAQ,4CAA4C;AAQrE,SAASC,8BAA8B,QAAQ,wBAAwB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,QAAQC,gCAAgCH,OAAOC;IAErD,OAAO;QACL,GAAGC,KAAK;QACRE,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBC,gBAAgBR;QAClB;QACAQ,gBAAgBT,mBAAmBI,MAAMK,cAAc,EAAE;YACvDC,aAAaT;YACbU,cAAc;gBACZC,SAASN,MAAMO,IAAI;gBACnBC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMP,kCAAkC,CAC7CH,OACAC;IAEA,MAAM,EAAEQ,IAAI,EAAE,GAAGX;IAEjB,OAAO;QACLW;QACAL,YAAY;YACVO,MAAM;QACR;QAEAA,MAAMhB,KAAKiB,MAAM,CACflB,yBAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -27,6 +27,7 @@ export const useNavSubItemGroupStyles_unstable = state => {
|
|
|
27
27
|
'use no memo';
|
|
28
28
|
|
|
29
29
|
const styles = useStyles();
|
|
30
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
30
31
|
state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);
|
|
31
32
|
return state;
|
|
32
33
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bnnss6s","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n flexShrink: 0,\n transform: 'translateZ(0)',\n overflow: 'hidden'\n }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bnnss6s","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n flexShrink: 0,\n transform: 'translateZ(0)',\n overflow: 'hidden'\n }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1B;EACAS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGd,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -17,6 +17,7 @@ export const navSubItemGroupClassNames = {
|
|
|
17
17
|
*/ export const useNavSubItemGroupStyles_unstable = (state)=>{
|
|
18
18
|
'use no memo';
|
|
19
19
|
const styles = useStyles();
|
|
20
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
20
21
|
state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);
|
|
21
22
|
return state;
|
|
22
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n root: 'fui-NavSubItemGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n flexShrink: 0,\n transform: 'translateZ(0)',\n overflow: 'hidden',\n },\n});\n\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","flexShrink","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,YAAY;QACZC,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASN;
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n root: 'fui-NavSubItemGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n flexShrink: 0,\n transform: 'translateZ(0)',\n overflow: 'hidden',\n },\n});\n\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","flexShrink","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,YAAY;QACZC,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASN;IAEf,oDAAoD;IACpDK,MAAMN,IAAI,CAACQ,SAAS,GAAGV,aAAaC,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavItemProps } from '../NavItem/NavItem.types';\nimport { ButtonProps, MenuButtonProps, ToggleButtonProps } from '@fluentui/react-button';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\nimport { NavDensity } from '../Nav/Nav.types';\nimport { NavSubItemProps } from '../NavSubItem/NavSubItem.types';\n\nexport type SplitNavItemSlots = {\n /**\n * Root of the component, wrapping the children.\n */\n root: Slot<'div'>;\n\n /**\n * The NavItem Slot.\n * Will behave as a SubNavItem if it's in an a SubGroup.\n */\n navItem?: NonNullable<Slot<NavItemProps & NavSubItemProps>>;\n\n /**\n * Basic button slot.\n */\n actionButton?: Slot<ButtonProps>;\n\n /**\n * Toggle button slot\n */\n toggleButton?: Slot<ToggleButtonProps>;\n\n /**\n * Menu button slot to stuff more things in when the other two aren't enough.\n */\n menuButton?: Slot<MenuButtonProps>;\n\n /**\n * Tooltip for the action button.\n */\n actionButtonTooltip?: Slot<TooltipProps>;\n\n /**\n * Tooltip for the toggle button.\n */\n toggleButtonTooltip?: Slot<TooltipProps>;\n\n /**\n * Tooltip for the menu button.\n */\n menuButtonTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * SplitNavItem Props\n */\nexport type SplitNavItemProps = ComponentProps<SplitNavItemSlots>;\n\n/**\n * State used in rendering SplitNavItem\n */\nexport type SplitNavItemState = ComponentState<SplitNavItemSlots> & {\n /**\n * The density of the NavItem\n *\n * @default 'medium'\n */\n density: NavDensity;\n\n /**\n * A boolean that represents if the main item in the SplitNavItem is a SubNav item.\n * If false, it's a NavItem.\n */\n isSubNav: boolean;\n};\n"],"names":[],"mappings":"AAuDA;;CAEC,GACD,WAaE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { NavItemProps } from '../NavItem/NavItem.types';\nimport type { ButtonProps, MenuButtonProps, ToggleButtonProps } from '@fluentui/react-button';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\nimport type { NavDensity } from '../Nav/Nav.types';\nimport type { NavSubItemProps } from '../NavSubItem/NavSubItem.types';\n\nexport type SplitNavItemSlots = {\n /**\n * Root of the component, wrapping the children.\n */\n root: Slot<'div'>;\n\n /**\n * The NavItem Slot.\n * Will behave as a SubNavItem if it's in an a SubGroup.\n */\n navItem?: NonNullable<Slot<NavItemProps & NavSubItemProps>>;\n\n /**\n * Basic button slot.\n */\n actionButton?: Slot<ButtonProps>;\n\n /**\n * Toggle button slot\n */\n toggleButton?: Slot<ToggleButtonProps>;\n\n /**\n * Menu button slot to stuff more things in when the other two aren't enough.\n */\n menuButton?: Slot<MenuButtonProps>;\n\n /**\n * Tooltip for the action button.\n */\n actionButtonTooltip?: Slot<TooltipProps>;\n\n /**\n * Tooltip for the toggle button.\n */\n toggleButtonTooltip?: Slot<TooltipProps>;\n\n /**\n * Tooltip for the menu button.\n */\n menuButtonTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * SplitNavItem Props\n */\nexport type SplitNavItemProps = ComponentProps<SplitNavItemSlots>;\n\n/**\n * State used in rendering SplitNavItem\n */\nexport type SplitNavItemState = ComponentState<SplitNavItemSlots> & {\n /**\n * The density of the NavItem\n *\n * @default 'medium'\n */\n density: NavDensity;\n\n /**\n * A boolean that represents if the main item in the SplitNavItem is a SubNav item.\n * If false, it's a NavItem.\n */\n isSubNav: boolean;\n};\n"],"names":[],"mappings":"AAuDA;;CAEC,GACD,WAaE"}
|
|
@@ -118,17 +118,22 @@ export const useSplitNavItemStyles_unstable = state => {
|
|
|
118
118
|
|
|
119
119
|
const splitNavItemStyles = useSplitNaveItemStyles();
|
|
120
120
|
const sharedRootClassNames = useRootDefaultClassName();
|
|
121
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
121
122
|
state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
|
|
122
123
|
if (state.navItem) {
|
|
124
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
123
125
|
state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
|
|
124
126
|
}
|
|
125
127
|
if (state.actionButton) {
|
|
128
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
126
129
|
state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
|
|
127
130
|
}
|
|
128
131
|
if (state.toggleButton) {
|
|
132
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
129
133
|
state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
|
|
130
134
|
}
|
|
131
135
|
if (state.menuButton) {
|
|
136
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
132
137
|
state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
|
|
133
138
|
}
|
|
134
139
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","xwko9w","mcc9px","B02v5zz","i4x37a","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","baseLarge","hoverAction","abs64n","Bkecrkj","Bn62ygk","Cwk7ip","Bi2q7bf","Es3by","d","p","h","w","a","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const splitNavItemClassNames = {\n root: 'fui-SplitNavItem',\n navItem: 'fui-SplitNavItem__navItem',\n actionButton: 'fui-SplitNavItem__actionButton',\n toggleButton: 'fui-SplitNavItem__toggleButton',\n menuButton: 'fui-SplitNavItem__menuButton',\n /**\n * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n opacity: 1,\n pointerEvents: 'auto'\n }\n};\n/**\n * Styles for the root slot\n */ const useSplitNaveItemStyles = makeStyles({\n baseRoot: {\n display: 'flex',\n gap: 'unset',\n alignItems: 'stretch',\n padding: 'unset',\n textAlign: 'unset',\n backgroundColor: navItemTokens.backgroundColor,\n ...navItemTokens.transitionTokens,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n ...buttonHoverStyles\n },\n ':focus-within': buttonHoverStyles,\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed\n }\n },\n baseNavItem: {\n // styles that we want to disagree with the default on\n display: 'flex',\n textTransform: 'none',\n alignSelf: 'stretch',\n textAlign: 'left',\n position: 'relative',\n justifyContent: 'start',\n gap: tokens.spacingVerticalL,\n backgroundColor: 'transparent'\n },\n baseSecondary: {\n minWidth: '28px',\n paddingInlineEnd: '12px',\n paddingInlineStart: '5px',\n paddingBlockStart: '5px',\n alignItems: 'start'\n },\n baseMedium: {\n paddingBlockStart: '9px'\n },\n baseLarge: {\n paddingBlockStart: '12px'\n },\n hoverAction: {\n opacity: 0,\n pointerEvents: 'none',\n transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n willChange: 'opacity'\n }\n});\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */ export const useSplitNavItemStyles_unstable = (state)=>{\n 'use no memo';\n const splitNavItemStyles = useSplitNaveItemStyles();\n const sharedRootClassNames = useRootDefaultClassName();\n state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);\n if (state.navItem) {\n state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);\n }\n if (state.actionButton) {\n state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n }\n if (state.toggleButton) {\n state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n }\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,2BAA2B;AAClF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,OAAO,EAAE,2BAA2B;EACpCC,YAAY,EAAE,gCAAgC;EAC9CC,YAAY,EAAE,gCAAgC;EAC9CC,UAAU,EAAE,8BAA8B;EAC1C;AACJ;AACA;EAAMC,mBAAmB,EAAE,uCAAuC;EAC9DC,mBAAmB,EAAE,uCAAuC;EAC5DC,iBAAiB,EAAE;AACvB,CAAC;AACD;AACA;AACA;AACA,MAAM;EAAEL,YAAY;EAAEC,YAAY;EAAEC;AAAW,CAAC,GAAGL,sBAAsB;AACzE,MAAMS,iBAAiB,GAAG;EACtB,CAAC,MAAMN,YAAY,QAAQC,YAAY,QAAQC,UAAU,EAAE,GAAG;IAC1DK,OAAO,EAAE,CAAC;IACVC,aAAa,EAAE;EACnB;AACJ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGlB,QAAA;EAAAmB,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,WAAA;IAAArB,MAAA;IAAAsB,OAAA;IAAAC,MAAA;IAAAb,MAAA;IAAAc,MAAA;IAAAC,OAAA;IAAAxB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAQ,MAAA;EAAA;EAAAe,aAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA1B,OAAA;EAAA;EAAA2B,UAAA;IAAAD,MAAA;EAAA;EAAAE,SAAA;IAAAF,MAAA;EAAA;EAAAG,WAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAzB,OAAA;IAAAE,OAAA;IAAAD,OAAA;IAAAyB,OAAA;IAAAC,KAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAgDlC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,kBAAkB,GAAGjD,sBAAsB,CAAC,CAAC;EACnD,MAAMkD,oBAAoB,GAAG/D,uBAAuB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","xwko9w","mcc9px","B02v5zz","i4x37a","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","baseLarge","hoverAction","abs64n","Bkecrkj","Bn62ygk","Cwk7ip","Bi2q7bf","Es3by","d","p","h","w","a","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const splitNavItemClassNames = {\n root: 'fui-SplitNavItem',\n navItem: 'fui-SplitNavItem__navItem',\n actionButton: 'fui-SplitNavItem__actionButton',\n toggleButton: 'fui-SplitNavItem__toggleButton',\n menuButton: 'fui-SplitNavItem__menuButton',\n /**\n * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n opacity: 1,\n pointerEvents: 'auto'\n }\n};\n/**\n * Styles for the root slot\n */ const useSplitNaveItemStyles = makeStyles({\n baseRoot: {\n display: 'flex',\n gap: 'unset',\n alignItems: 'stretch',\n padding: 'unset',\n textAlign: 'unset',\n backgroundColor: navItemTokens.backgroundColor,\n ...navItemTokens.transitionTokens,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n ...buttonHoverStyles\n },\n ':focus-within': buttonHoverStyles,\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed\n }\n },\n baseNavItem: {\n // styles that we want to disagree with the default on\n display: 'flex',\n textTransform: 'none',\n alignSelf: 'stretch',\n textAlign: 'left',\n position: 'relative',\n justifyContent: 'start',\n gap: tokens.spacingVerticalL,\n backgroundColor: 'transparent'\n },\n baseSecondary: {\n minWidth: '28px',\n paddingInlineEnd: '12px',\n paddingInlineStart: '5px',\n paddingBlockStart: '5px',\n alignItems: 'start'\n },\n baseMedium: {\n paddingBlockStart: '9px'\n },\n baseLarge: {\n paddingBlockStart: '12px'\n },\n hoverAction: {\n opacity: 0,\n pointerEvents: 'none',\n transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n willChange: 'opacity'\n }\n});\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */ export const useSplitNavItemStyles_unstable = (state)=>{\n 'use no memo';\n const splitNavItemStyles = useSplitNaveItemStyles();\n const sharedRootClassNames = useRootDefaultClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);\n if (state.navItem) {\n // eslint-disable-next-line react-hooks/immutability\n state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);\n }\n if (state.actionButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n }\n if (state.toggleButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n }\n if (state.menuButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -82,17 +82,22 @@ const buttonHoverStyles = {
|
|
|
82
82
|
'use no memo';
|
|
83
83
|
const splitNavItemStyles = useSplitNaveItemStyles();
|
|
84
84
|
const sharedRootClassNames = useRootDefaultClassName();
|
|
85
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
85
86
|
state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
|
|
86
87
|
if (state.navItem) {
|
|
88
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
87
89
|
state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
|
|
88
90
|
}
|
|
89
91
|
if (state.actionButton) {
|
|
92
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
90
93
|
state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
|
|
91
94
|
}
|
|
92
95
|
if (state.toggleButton) {
|
|
96
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
93
97
|
state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
|
|
94
98
|
}
|
|
95
99
|
if (state.menuButton) {
|
|
100
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
96
101
|
state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
|
|
97
102
|
}
|
|
98
103
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\n\nimport type { SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots> = {\n root: 'fui-SplitNavItem',\n navItem: 'fui-SplitNavItem__navItem',\n actionButton: 'fui-SplitNavItem__actionButton',\n toggleButton: 'fui-SplitNavItem__toggleButton',\n menuButton: 'fui-SplitNavItem__menuButton',\n /**\n * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n */\n actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip',\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\n\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n opacity: 1,\n pointerEvents: 'auto',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useSplitNaveItemStyles = makeStyles({\n baseRoot: {\n display: 'flex',\n gap: 'unset',\n alignItems: 'stretch',\n padding: 'unset',\n textAlign: 'unset',\n backgroundColor: navItemTokens.backgroundColor,\n ...navItemTokens.transitionTokens,\n\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n ...buttonHoverStyles,\n },\n\n ':focus-within': buttonHoverStyles,\n\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed,\n },\n },\n baseNavItem: {\n // styles that we want to disagree with the default on\n display: 'flex',\n textTransform: 'none',\n alignSelf: 'stretch',\n textAlign: 'left',\n position: 'relative',\n justifyContent: 'start',\n gap: tokens.spacingVerticalL,\n backgroundColor: 'transparent',\n },\n baseSecondary: {\n minWidth: '28px',\n paddingInlineEnd: '12px',\n paddingInlineStart: '5px',\n paddingBlockStart: '5px',\n alignItems: 'start',\n },\n baseMedium: {\n paddingBlockStart: '9px',\n },\n\n baseLarge: {\n paddingBlockStart: '12px',\n },\n\n hoverAction: {\n opacity: 0,\n pointerEvents: 'none',\n transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n willChange: 'opacity',\n },\n});\n\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */\nexport const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitNavItemState => {\n 'use no memo';\n\n const splitNavItemStyles = useSplitNaveItemStyles();\n const sharedRootClassNames = useRootDefaultClassName();\n\n state.root.className = mergeClasses(\n splitNavItemClassNames.root,\n sharedRootClassNames,\n splitNavItemStyles.baseRoot,\n state.root.className,\n );\n\n if (state.navItem) {\n state.navItem.className = mergeClasses(\n splitNavItemClassNames.navItem,\n splitNavItemStyles.baseNavItem,\n state.navItem.className,\n );\n }\n\n if (state.actionButton) {\n state.actionButton.className = mergeClasses(\n splitNavItemClassNames.actionButton,\n splitNavItemStyles.baseSecondary,\n splitNavItemStyles.hoverAction,\n state.density === 'medium' && splitNavItemStyles.baseMedium,\n state.actionButton.className,\n );\n }\n\n if (state.toggleButton) {\n state.toggleButton.className = mergeClasses(\n splitNavItemClassNames.toggleButton,\n splitNavItemStyles.baseSecondary,\n splitNavItemStyles.hoverAction,\n state.density === 'medium' && splitNavItemStyles.baseMedium,\n state.toggleButton.className,\n );\n }\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitNavItemClassNames.menuButton,\n splitNavItemStyles.baseSecondary,\n splitNavItemStyles.hoverAction,\n state.density === 'medium' && splitNavItemStyles.baseMedium,\n state.menuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","display","gap","alignItems","padding","textAlign","backgroundColor","transitionTokens","backgroundColorHover","backgroundColorPressed","baseNavItem","textTransform","alignSelf","position","justifyContent","spacingVerticalL","baseSecondary","minWidth","paddingInlineEnd","paddingInlineStart","paddingBlockStart","baseMedium","baseLarge","hoverAction","transition","durationFast","curveEasyEase","willChange","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,YAAY,QAAQ,yBAAyB;AAGtD,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,4BAA4B;AAEnF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,cAAc;IACdC,YAAY;IACZ;;GAEC,GACDC,qBAAqB;IACrBC,qBAAqB;IACrBC,mBAAmB;AACrB,EAAE;AACF,6EAA6E;AAC7E,8EAA8E;AAC9E,kEAAkE;AAElE,MAAM,EAAEL,YAAY,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGL;AACnD,MAAMS,oBAAoB;IACxB,CAAC,CAAC,GAAG,EAAEN,aAAa,KAAK,EAAEC,aAAa,KAAK,EAAEC,YAAY,CAAC,EAAE;QAC5DK,SAAS;QACTC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,MAAMC,yBAAyBlB,WAAW;IACxCmB,UAAU;QACRC,SAAS;QACTC,KAAK;QACLC,YAAY;QACZC,SAAS;QACTC,WAAW;QACXC,iBAAiBrB,cAAcqB,eAAe;QAC9C,GAAGrB,cAAcsB,gBAAgB;QAEjC,UAAU;YACRD,iBAAiBrB,cAAcuB,oBAAoB;YACnD,GAAGZ,iBAAiB;QACtB;QAEA,iBAAiBA;QAEjB,WAAW;YACTU,iBAAiBrB,cAAcwB,sBAAsB;QACvD;IACF;IACAC,aAAa;QACX,sDAAsD;QACtDT,SAAS;QACTU,eAAe;QACfC,WAAW;QACXP,WAAW;QACXQ,UAAU;QACVC,gBAAgB;QAChBZ,KAAKnB,OAAOgC,gBAAgB;QAC5BT,iBAAiB;IACnB;IACAU,eAAe;QACbC,UAAU;QACVC,kBAAkB;QAClBC,oBAAoB;QACpBC,mBAAmB;QACnBjB,YAAY;IACd;IACAkB,YAAY;QACVD,mBAAmB;IACrB;IAEAE,WAAW;QACTF,mBAAmB;IACrB;IAEAG,aAAa;QACX1B,SAAS;QACTC,eAAe;QACf0B,YAAY,CAAC,QAAQ,EAAExC,aAAayC,YAAY,CAAC,GAAG,EAAEzC,aAAa0C,aAAa,EAAE;QAClFC,YAAY;IACd;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,qBAAqB/B;IAC3B,MAAMgC,uBAAuB7C;
|
|
1
|
+
{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\n\nimport type { SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots> = {\n root: 'fui-SplitNavItem',\n navItem: 'fui-SplitNavItem__navItem',\n actionButton: 'fui-SplitNavItem__actionButton',\n toggleButton: 'fui-SplitNavItem__toggleButton',\n menuButton: 'fui-SplitNavItem__menuButton',\n /**\n * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n */\n actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip',\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\n\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n opacity: 1,\n pointerEvents: 'auto',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useSplitNaveItemStyles = makeStyles({\n baseRoot: {\n display: 'flex',\n gap: 'unset',\n alignItems: 'stretch',\n padding: 'unset',\n textAlign: 'unset',\n backgroundColor: navItemTokens.backgroundColor,\n ...navItemTokens.transitionTokens,\n\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n ...buttonHoverStyles,\n },\n\n ':focus-within': buttonHoverStyles,\n\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed,\n },\n },\n baseNavItem: {\n // styles that we want to disagree with the default on\n display: 'flex',\n textTransform: 'none',\n alignSelf: 'stretch',\n textAlign: 'left',\n position: 'relative',\n justifyContent: 'start',\n gap: tokens.spacingVerticalL,\n backgroundColor: 'transparent',\n },\n baseSecondary: {\n minWidth: '28px',\n paddingInlineEnd: '12px',\n paddingInlineStart: '5px',\n paddingBlockStart: '5px',\n alignItems: 'start',\n },\n baseMedium: {\n paddingBlockStart: '9px',\n },\n\n baseLarge: {\n paddingBlockStart: '12px',\n },\n\n hoverAction: {\n opacity: 0,\n pointerEvents: 'none',\n transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n willChange: 'opacity',\n },\n});\n\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */\nexport const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitNavItemState => {\n 'use no memo';\n\n const splitNavItemStyles = useSplitNaveItemStyles();\n const sharedRootClassNames = useRootDefaultClassName();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n splitNavItemClassNames.root,\n sharedRootClassNames,\n splitNavItemStyles.baseRoot,\n state.root.className,\n );\n\n if (state.navItem) {\n // eslint-disable-next-line react-hooks/immutability\n state.navItem.className = mergeClasses(\n splitNavItemClassNames.navItem,\n splitNavItemStyles.baseNavItem,\n state.navItem.className,\n );\n }\n\n if (state.actionButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.actionButton.className = mergeClasses(\n splitNavItemClassNames.actionButton,\n splitNavItemStyles.baseSecondary,\n splitNavItemStyles.hoverAction,\n state.density === 'medium' && splitNavItemStyles.baseMedium,\n state.actionButton.className,\n );\n }\n\n if (state.toggleButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.toggleButton.className = mergeClasses(\n splitNavItemClassNames.toggleButton,\n splitNavItemStyles.baseSecondary,\n splitNavItemStyles.hoverAction,\n state.density === 'medium' && splitNavItemStyles.baseMedium,\n state.toggleButton.className,\n );\n }\n\n if (state.menuButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.menuButton.className = mergeClasses(\n splitNavItemClassNames.menuButton,\n splitNavItemStyles.baseSecondary,\n splitNavItemStyles.hoverAction,\n state.density === 'medium' && splitNavItemStyles.baseMedium,\n state.menuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","display","gap","alignItems","padding","textAlign","backgroundColor","transitionTokens","backgroundColorHover","backgroundColorPressed","baseNavItem","textTransform","alignSelf","position","justifyContent","spacingVerticalL","baseSecondary","minWidth","paddingInlineEnd","paddingInlineStart","paddingBlockStart","baseMedium","baseLarge","hoverAction","transition","durationFast","curveEasyEase","willChange","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/useNavCategoryContextValues_unstable.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NavCategoryState } from '../NavCategory';\nimport { NavCategoryContextValue, NavCategoryContextValues } from './NavCategoryContext';\n\nexport function useNavCategoryContextValues_unstable(state: NavCategoryState): NavCategoryContextValues {\n const { open, value } = state;\n const navCategory = React.useMemo<NavCategoryContextValue>(() => ({ open, value }), [open, value]);\n\n return { categoryValue: navCategory };\n}\n"],"names":["React","useNavCategoryContextValues_unstable","state","open","value","navCategory","useMemo","categoryValue"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAMG,cAAcL,MAAMM,OAAO,CAA0B,IAAO,CAAA;YAAEH;YAAMC;QAAM,CAAA,GAAI;QAACD;QAAMC;KAAM;IAEjG,OAAO;QAAEG,eAAeF;IAAY;AACtC"}
|
|
1
|
+
{"version":3,"sources":["../src/components/useNavCategoryContextValues_unstable.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { NavCategoryState } from '../NavCategory';\nimport type { NavCategoryContextValue, NavCategoryContextValues } from './NavCategoryContext';\n\nexport function useNavCategoryContextValues_unstable(state: NavCategoryState): NavCategoryContextValues {\n const { open, value } = state;\n const navCategory = React.useMemo<NavCategoryContextValue>(() => ({ open, value }), [open, value]);\n\n return { categoryValue: navCategory };\n}\n"],"names":["React","useNavCategoryContextValues_unstable","state","open","value","navCategory","useMemo","categoryValue"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAMG,cAAcL,MAAMM,OAAO,CAA0B,IAAO,CAAA;YAAEH;YAAMC;QAAM,CAAA,GAAI;QAACD;QAAMC;KAAM;IAEjG,OAAO;QAAEG,eAAeF;IAAY;AACtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/useNavCategoryItemContextValues_unstable.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NavCategoryItemContextValue } from './NavCategoryItemContext';\nimport { NavCategoryItemContextValues, NavCategoryItemState } from './NavCategoryItem/NavCategoryItem.types';\n\nexport function useNavCategoryItemContextValues_unstable(state: NavCategoryItemState): NavCategoryItemContextValues {\n const { open, value } = state;\n const navCategoryItem = React.useMemo<NavCategoryItemContextValue>(() => ({ open, value }), [open, value]);\n\n return { navCategoryItem };\n}\n"],"names":["React","useNavCategoryItemContextValues_unstable","state","open","value","navCategoryItem","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yCAAyCC,KAA2B;IAClF,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAMG,kBAAkBL,MAAMM,OAAO,CAA8B,IAAO,CAAA;YAAEH;YAAMC;QAAM,CAAA,GAAI;QAACD;QAAMC;KAAM;IAEzG,OAAO;QAAEC;IAAgB;AAC3B"}
|
|
1
|
+
{"version":3,"sources":["../src/components/useNavCategoryItemContextValues_unstable.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { NavCategoryItemContextValue } from './NavCategoryItemContext';\nimport type { NavCategoryItemContextValues, NavCategoryItemState } from './NavCategoryItem/NavCategoryItem.types';\n\nexport function useNavCategoryItemContextValues_unstable(state: NavCategoryItemState): NavCategoryItemContextValues {\n const { open, value } = state;\n const navCategoryItem = React.useMemo<NavCategoryItemContextValue>(() => ({ open, value }), [open, value]);\n\n return { navCategoryItem };\n}\n"],"names":["React","useNavCategoryItemContextValues_unstable","state","open","value","navCategoryItem","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yCAAyCC,KAA2B;IAClF,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAMG,kBAAkBL,MAAMM,OAAO,CAA8B,IAAO,CAAA;YAAEH;YAAMC;QAAM,CAAA,GAAI;QAACD;QAAMC;KAAM;IAEzG,OAAO;QAAEC;IAAgB;AAC3B"}
|