@fluentui/react-nav 9.3.24 → 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 +33 -13
- package/dist/index.d.ts +93 -1
- 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 -3
- 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 -3
- 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/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 -3
- 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/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/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/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/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/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/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/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/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 -9
- 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/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/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 -6
- 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 -6
- 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/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 +1 -3
- 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/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/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/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/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/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/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/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/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 -12
- 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/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/index.js +21 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAppItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemClassNames = {\n root: 'fui-AppItem',\n icon: 'fui-AppItem__icon'\n};\n/**\n * Styles for the root slot\n */ export const useAppItemStyles = makeStyles({\n root: {\n marginInline: '4px',\n width: 'revert',\n alignItems: 'center',\n gap: '10px',\n marginInlineStart: '-6px',\n marginInlineEnd: '0px',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,\n ...typographyStyles.subtitle2\n },\n small: {\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} 14px`,\n gap: '14px'\n },\n absentIconRootAdjustment: {\n paddingInlineStart: '16px'\n }\n});\n/**\n * Apply styling to the AppItem slots based on the state\n */ export const useAppItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const iconStyles = useIconStyles();\n const appItemSpecificStyles = useAppItemStyles();\n const { density, icon } = state;\n state.root.className = mergeClasses(rootDefaultClassName, appItemClassNames.root, appItemSpecificStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(appItemClassNames.icon, iconStyles.base, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","useIconStyles","useRootDefaultClassName","appItemClassNames","root","icon","useAppItemStyles","Bokbzmb","Jyy4pa","B1u1w3b","a9b677","Bt984gj","i8kkvl","Belr9w4","rmohyg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","absentIconRootAdjustment","B1hrpyx","d","p","useAppItemStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","density","className","base"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICM,iBAAiB;;;oBAMG;;;6BAqBS
|
|
1
|
+
{"version":3,"sources":["useAppItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemClassNames = {\n root: 'fui-AppItem',\n icon: 'fui-AppItem__icon'\n};\n/**\n * Styles for the root slot\n */ export const useAppItemStyles = makeStyles({\n root: {\n marginInline: '4px',\n width: 'revert',\n alignItems: 'center',\n gap: '10px',\n marginInlineStart: '-6px',\n marginInlineEnd: '0px',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,\n ...typographyStyles.subtitle2\n },\n small: {\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} 14px`,\n gap: '14px'\n },\n absentIconRootAdjustment: {\n paddingInlineStart: '16px'\n }\n});\n/**\n * Apply styling to the AppItem slots based on the state\n */ export const useAppItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const iconStyles = useIconStyles();\n const appItemSpecificStyles = useAppItemStyles();\n const { density, icon } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(rootDefaultClassName, appItemClassNames.root, appItemSpecificStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(appItemClassNames.icon, iconStyles.base, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","useIconStyles","useRootDefaultClassName","appItemClassNames","root","icon","useAppItemStyles","Bokbzmb","Jyy4pa","B1u1w3b","a9b677","Bt984gj","i8kkvl","Belr9w4","rmohyg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","absentIconRootAdjustment","B1hrpyx","d","p","useAppItemStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","density","className","base"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICM,iBAAiB;;;oBAMG;;;6BAqBS;eAAzB0B;;;uBA9BwB,gBAAgB;uCAEF,2BAA2B;AAC3E,0BAA0B;IAC7BzB,IAAI,EAAE,aAAa;IACnBC,IAAI,EAAE;AACV,CAAC;AAGU,MAAMC,mBAAgB,WAAA,OAAGT,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAP,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAW,wBAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAkBnC,CAAC;AAGS,mCAAmCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,oBAAoB,OAAG7B,8CAAuB,CAAC,CAAC;IACtD,MAAM8B,UAAU,OAAG/B,oCAAa,CAAC,CAAC;IAClC,MAAMgC,qBAAqB,GAAG3B,gBAAgB,CAAC,CAAC;IAChD,MAAM,EAAE4B,OAAO,EAAE7B,IAAAA,EAAM,GAAGyB,KAAK;IAC/B,oDAAA;IACAA,KAAK,CAAC1B,IAAI,CAAC+B,SAAS,GAAGrC,uBAAY,EAACiC,oBAAoB,EAAE5B,iBAAiB,CAACC,IAAI,EAAE6B,qBAAqB,CAAC7B,IAAI,EAAE8B,OAAO,KAAK,OAAO,IAAID,qBAAqB,CAACT,KAAK,EAAE,CAACnB,IAAI,IAAI4B,qBAAqB,CAACR,wBAAwB,EAAEK,KAAK,CAAC1B,IAAI,CAAC+B,SAAS,CAAC;IAChP,IAAIL,KAAK,CAACzB,IAAI,EAAE;QACZ,oDAAA;QACAyB,KAAK,CAACzB,IAAI,CAAC8B,SAAS,OAAGrC,mBAAY,EAACK,iBAAiB,CAACE,IAAI,EAAE2B,UAAU,CAACI,IAAI,EAAEN,KAAK,CAACzB,IAAI,CAAC8B,SAAS,CAAC;IACtG;IACA,OAAOL,KAAK;AAChB,CAAC"}
|
|
@@ -52,8 +52,10 @@ const useAppItemStyles_unstable = (state)=>{
|
|
|
52
52
|
const iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
|
|
53
53
|
const appItemSpecificStyles = useAppItemStyles();
|
|
54
54
|
const { density, icon } = state;
|
|
55
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
55
56
|
state.root.className = (0, _react.mergeClasses)(rootDefaultClassName, appItemClassNames.root, appItemSpecificStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);
|
|
56
57
|
if (state.icon) {
|
|
58
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
57
59
|
state.icon.className = (0, _react.mergeClasses)(appItemClassNames.icon, iconStyles.base, state.icon.className);
|
|
58
60
|
}
|
|
59
61
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AppItem/useAppItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemSlots, AppItemState } from './AppItem.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemClassNames: SlotClassNames<AppItemSlots> = {\n root: 'fui-AppItem',\n icon: 'fui-AppItem__icon',\n};\n\n/**\n * Styles for the root slot\n */\nexport const useAppItemStyles = makeStyles({\n root: {\n marginInline: '4px',\n width: 'revert',\n alignItems: 'center',\n gap: '10px',\n marginInlineStart: '-6px',\n marginInlineEnd: '0px',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,\n ...typographyStyles.subtitle2,\n },\n small: {\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} 14px`,\n gap: '14px',\n },\n absentIconRootAdjustment: {\n paddingInlineStart: '16px',\n },\n});\n\n/**\n * Apply styling to the AppItem slots based on the state\n */\nexport const useAppItemStyles_unstable = (state: AppItemState): AppItemState => {\n 'use no memo';\n\n const rootDefaultClassName = useRootDefaultClassName();\n const iconStyles = useIconStyles();\n const appItemSpecificStyles = useAppItemStyles();\n\n const { density, icon } = state;\n\n state.root.className = mergeClasses(\n rootDefaultClassName,\n appItemClassNames.root,\n appItemSpecificStyles.root,\n density === 'small' && appItemSpecificStyles.small,\n !icon && appItemSpecificStyles.absentIconRootAdjustment,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(appItemClassNames.icon, iconStyles.base, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","useIconStyles","useRootDefaultClassName","appItemClassNames","root","icon","useAppItemStyles","marginInline","width","alignItems","gap","marginInlineStart","marginInlineEnd","padding","spacingVerticalS","spacingHorizontalS","spacingHorizontalMNudge","subtitle2","small","absentIconRootAdjustment","paddingInlineStart","useAppItemStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","density","className","base"],"mappings":"AAAA;;;;;;;;;;;;IAQaM,iBAAAA;;;oBAQAG;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/AppItem/useAppItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemSlots, AppItemState } from './AppItem.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemClassNames: SlotClassNames<AppItemSlots> = {\n root: 'fui-AppItem',\n icon: 'fui-AppItem__icon',\n};\n\n/**\n * Styles for the root slot\n */\nexport const useAppItemStyles = makeStyles({\n root: {\n marginInline: '4px',\n width: 'revert',\n alignItems: 'center',\n gap: '10px',\n marginInlineStart: '-6px',\n marginInlineEnd: '0px',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,\n ...typographyStyles.subtitle2,\n },\n small: {\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} 14px`,\n gap: '14px',\n },\n absentIconRootAdjustment: {\n paddingInlineStart: '16px',\n },\n});\n\n/**\n * Apply styling to the AppItem slots based on the state\n */\nexport const useAppItemStyles_unstable = (state: AppItemState): AppItemState => {\n 'use no memo';\n\n const rootDefaultClassName = useRootDefaultClassName();\n const iconStyles = useIconStyles();\n const appItemSpecificStyles = useAppItemStyles();\n\n const { density, icon } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n rootDefaultClassName,\n appItemClassNames.root,\n appItemSpecificStyles.root,\n density === 'small' && appItemSpecificStyles.small,\n !icon && appItemSpecificStyles.absentIconRootAdjustment,\n state.root.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(appItemClassNames.icon, iconStyles.base, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","useIconStyles","useRootDefaultClassName","appItemClassNames","root","icon","useAppItemStyles","marginInline","width","alignItems","gap","marginInlineStart","marginInlineEnd","padding","spacingVerticalS","spacingHorizontalS","spacingHorizontalMNudge","subtitle2","small","absentIconRootAdjustment","paddingInlineStart","useAppItemStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","density","className","base"],"mappings":"AAAA;;;;;;;;;;;;IAQaM,iBAAAA;;;oBAQAG;;;IAuBAe,yBAAAA;;;;uBArC4B,iBAAiB;4BAGjB,wBAAwB;uCACV,4BAA4B;AAE5E,0BAAwD;IAC7DjB,MAAM;IACNC,MAAM;AACR,EAAE;AAKK,MAAMC,uBAAmBT,iBAAAA,EAAW;IACzCO,MAAM;QACJG,cAAc;QACdC,OAAO;QACPC,YAAY;QACZC,KAAK;QACLC,mBAAmB;QACnBC,iBAAiB;QACjBC,SAAS,GAAGd,kBAAAA,CAAOe,gBAAgB,CAAC,CAAC,EAAEf,kBAAAA,CAAOgB,kBAAkB,CAAC,CAAC,EAAEhB,kBAAAA,CAAOe,gBAAgB,CAAC,CAAC,EAAEf,kBAAAA,CAAOiB,uBAAuB,EAAE;QAC/H,GAAGhB,4BAAAA,CAAiBiB,SAAS;IAC/B;IACAC,OAAO;QACLL,SAAS,GAAGd,kBAAAA,CAAOe,gBAAgB,CAAC,CAAC,EAAEf,kBAAAA,CAAOgB,kBAAkB,CAAC,CAAC,EAAEhB,kBAAAA,CAAOe,gBAAgB,CAAC,KAAK,CAAC;QAClGJ,KAAK;IACP;IACAS,0BAA0B;QACxBC,oBAAoB;IACtB;AACF,GAAG;AAKI,kCAAkC,CAACE;IACxC;IAEA,MAAMC,2BAAuBrB,8CAAAA;IAC7B,MAAMsB,iBAAavB,oCAAAA;IACnB,MAAMwB,wBAAwBnB;IAE9B,MAAM,EAAEoB,OAAO,EAAErB,IAAI,EAAE,GAAGiB;IAE1B,oDAAoD;IACpDA,MAAMlB,IAAI,CAACuB,SAAS,OAAG7B,mBAAAA,EACrByB,sBACApB,kBAAkBC,IAAI,EACtBqB,sBAAsBrB,IAAI,EAC1BsB,YAAY,WAAWD,sBAAsBP,KAAK,EAClD,CAACb,QAAQoB,sBAAsBN,wBAAwB,EACvDG,MAAMlB,IAAI,CAACuB,SAAS;IAGtB,IAAIL,MAAMjB,IAAI,EAAE;QACd,oDAAoD;QACpDiB,MAAMjB,IAAI,CAACsB,SAAS,OAAG7B,mBAAAA,EAAaK,kBAAkBE,IAAI,EAAEmB,WAAWI,IAAI,EAAEN,MAAMjB,IAAI,CAACsB,SAAS;IACnG;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AppItemStatic/AppItemStatic.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { NavDensity } from '../Nav/Nav.types';\n\nexport type AppItemStaticSlots = {\n /**\n * The root element of the AppItemStatic.\n */\n root: Slot<'div'>;\n /**\n * Icon that renders before the content.\n */\n icon?: Slot<'span'>;\n};\n\n/**\n * AppItemStatic Props\n */\nexport type AppItemStaticProps = ComponentProps<AppItemStaticSlots
|
|
1
|
+
{"version":3,"sources":["../src/components/AppItemStatic/AppItemStatic.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { NavDensity } from '../Nav/Nav.types';\n\nexport type AppItemStaticSlots = {\n /**\n * The root element of the AppItemStatic.\n */\n root: Slot<'div'>;\n /**\n * Icon that renders before the content.\n */\n icon?: Slot<'span'>;\n};\n\n/**\n * AppItemStatic Props\n */\nexport type AppItemStaticProps = ComponentProps<AppItemStaticSlots>;\n\nexport type AppItemStaticBaseProps = AppItemStaticProps;\n\n/**\n * State used in rendering AppItemStatic\n */\nexport type AppItemStaticState = ComponentState<AppItemStaticSlots> & {\n /**\n * The density of the Nav\n *\n * @default 'medium'\n */\n density: NavDensity;\n};\n\nexport type AppItemStaticBaseState = Omit<AppItemStaticState, 'density'>;\n"],"names":[],"mappings":""}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderAppItemStatic_unstable: function() {
|
|
19
19
|
return _renderAppItemStatic.renderAppItemStatic_unstable;
|
|
20
20
|
},
|
|
21
|
+
useAppItemStaticBase_unstable: function() {
|
|
22
|
+
return _useAppItemStatic.useAppItemStaticBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useAppItemStaticStyles_unstable: function() {
|
|
22
25
|
return _useAppItemStaticStylesstyles.useAppItemStaticStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AppItemStatic/index.ts"],"sourcesContent":["export { AppItemStatic } from './AppItemStatic';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/AppItemStatic/index.ts"],"sourcesContent":["export { AppItemStatic } from './AppItemStatic';\nexport type {\n AppItemStaticProps,\n AppItemStaticSlots,\n AppItemStaticState,\n AppItemStaticBaseProps,\n AppItemStaticBaseState,\n} from './AppItemStatic.types';\nexport { renderAppItemStatic_unstable } from './renderAppItemStatic';\nexport { useAppItemStatic_unstable, useAppItemStaticBase_unstable } from './useAppItemStatic';\nexport { appItemStaticClassNames, useAppItemStaticStyles_unstable } from './useAppItemStaticStyles.styles';\n"],"names":["AppItemStatic","renderAppItemStatic_unstable","useAppItemStatic_unstable","useAppItemStaticBase_unstable","appItemStaticClassNames","useAppItemStaticStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAUbI,qDAAuB;;;eAFvBH,iDAA4B;;;eACDE,+CAA6B;;;eAC/BE,6DAA+B;;;eADxDH,2CAAyB;;;+BATJ,kBAAkB;qCAQH,wBAAwB;kCACI,qBAAqB;8CACrB,kCAAkC"}
|
|
@@ -3,17 +3,32 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useAppItemStaticBase_unstable: function() {
|
|
14
|
+
return useAppItemStaticBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useAppItemStatic_unstable: function() {
|
|
9
17
|
return useAppItemStatic_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
12
20
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
21
|
const _NavContext = require("../NavContext");
|
|
14
22
|
const useAppItemStatic_unstable = (props, ref)=>{
|
|
15
|
-
const { icon } = props;
|
|
16
23
|
const { density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
|
|
24
|
+
const state = useAppItemStaticBase_unstable(props, ref);
|
|
25
|
+
return {
|
|
26
|
+
...state,
|
|
27
|
+
density
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
const useAppItemStaticBase_unstable = (props, ref)=>{
|
|
31
|
+
const { icon } = props;
|
|
17
32
|
return {
|
|
18
33
|
components: {
|
|
19
34
|
root: 'div',
|
|
@@ -27,7 +42,6 @@ const useAppItemStatic_unstable = (props, ref)=>{
|
|
|
27
42
|
}),
|
|
28
43
|
icon: _reactutilities.slot.optional(icon, {
|
|
29
44
|
elementType: 'span'
|
|
30
|
-
})
|
|
31
|
-
density
|
|
45
|
+
})
|
|
32
46
|
};
|
|
33
47
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStatic.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStatic.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n AppItemStaticBaseProps,\n AppItemStaticBaseState,\n AppItemStaticProps,\n AppItemStaticState,\n} from './AppItemStatic.types';\nimport { useNavContext_unstable } from '../NavContext';\n\n/**\n * Create the state required to render AppItemStatic.\n *\n * The returned state can be modified with hooks such as useAppItemStaticStyles_unstable,\n * before being passed to renderAppItemStatic_unstable.\n *\n * @param props - props from this instance of AppItemStatic\n * @param ref - reference to root HTMLDivElement of AppItemStatic\n */\nexport const useAppItemStatic_unstable = (\n props: AppItemStaticProps,\n ref: React.Ref<HTMLDivElement>,\n): AppItemStaticState => {\n const { density = 'medium' } = useNavContext_unstable();\n const state = useAppItemStaticBase_unstable(props, ref);\n\n return {\n ...state,\n density,\n };\n};\n\nexport const useAppItemStaticBase_unstable = (\n props: AppItemStaticBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): AppItemStaticBaseState => {\n const { icon } = props;\n\n return {\n components: {\n root: 'div',\n icon: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(icon, {\n elementType: 'span',\n }),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useNavContext_unstable","useAppItemStatic_unstable","props","ref","density","state","useAppItemStaticBase_unstable","icon","components","root","always","elementType","optional"],"mappings":"AAAA;;;;;;;;;;;;iCAkCaQ;eAAAA;;6BAbAL;;;;gCAlBkC,4BAA4B;4BAOpC,gBAAgB;AAWhD,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,UAAU,QAAQ,EAAE,OAAGJ,kCAAAA;IAC/B,MAAMK,QAAQC,8BAA8BJ,OAAOC;IAEnD,OAAO;QACL,GAAGE,KAAK;QACRD;IACF;AACF,EAAE;AAEK,sCAAsC,CAC3CF,OACAC;IAEA,MAAM,EAAEI,IAAI,EAAE,GAAGL;IAEjB,OAAO;QACLM,YAAY;YACVC,MAAM;YACNF,MAAM;QACR;QACAE,MAAMV,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBJ,MAAMR,oBAAAA,CAAKa,QAAQ,CAACL,MAAM;YACxBI,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -48,8 +48,10 @@ const useAppItemStaticStyles_unstable = (state)=>{
|
|
|
48
48
|
const appItemSpecificStyles = (0, _useAppItemStylesstyles.useAppItemStyles)();
|
|
49
49
|
const appItemStaticStyles = useAppItemStaticStyles();
|
|
50
50
|
const { density, icon } = state;
|
|
51
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
51
52
|
state.root.className = (0, _react.mergeClasses)(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);
|
|
52
53
|
if (state.icon) {
|
|
54
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
53
55
|
state.icon.className = (0, _react.mergeClasses)(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);
|
|
54
56
|
}
|
|
55
57
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAppItemStaticStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemStaticClassNames = {\n root: 'fui-AppItemStatic',\n icon: 'fui-AppItemStatic__icon'\n};\nconst useAppItemStaticStyles = makeStyles({\n root: {\n cursor: 'default',\n ':hover': {\n backgroundColor: 'unset'\n },\n ':active': {\n backgroundColor: 'unset'\n }\n }\n});\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */ export const useAppItemStaticStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const iconStyles = useIconStyles();\n const appItemSpecificStyles = useAppItemStyles();\n const appItemStaticStyles = useAppItemStaticStyles();\n const { density, icon } = state;\n state.root.className = mergeClasses(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","Bceei9c","Jwef8y","ecr2s2","d","h","a","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,uBAAuB;;;
|
|
1
|
+
{"version":3,"sources":["useAppItemStaticStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemStaticClassNames = {\n root: 'fui-AppItemStatic',\n icon: 'fui-AppItemStatic__icon'\n};\nconst useAppItemStaticStyles = makeStyles({\n root: {\n cursor: 'default',\n ':hover': {\n backgroundColor: 'unset'\n },\n ':active': {\n backgroundColor: 'unset'\n }\n }\n});\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */ export const useAppItemStaticStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const iconStyles = useIconStyles();\n const appItemSpecificStyles = useAppItemStyles();\n const appItemStaticStyles = useAppItemStaticStyles();\n const { density, icon } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","Bceei9c","Jwef8y","ecr2s2","d","h","a","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,uBAAuB;;;IAiBnBU,+BAA+B;;;;uBApBP,gBAAgB;wCACxB,oCAAoC;uCACd,2BAA2B;AAC3E,gCAAgC;IACnCT,IAAI,EAAE,mBAAmB;IACzBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,sBAAsB,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAU9B,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,oBAAoB,OAAGb,8CAAuB,CAAC,CAAC;IACtD,MAAMc,UAAU,OAAGf,oCAAa,CAAC,CAAC;IAClC,MAAMgB,qBAAqB,OAAGjB,wCAAgB,CAAC,CAAC;IAChD,MAAMkB,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;IACpD,MAAM,EAAEa,OAAO,EAAEd,IAAAA,EAAM,GAAGS,KAAK;IAC/B,oDAAA;IACAA,KAAK,CAACV,IAAI,CAACgB,SAAS,OAAGrB,mBAAY,EAACgB,oBAAoB,EAAEZ,uBAAuB,CAACC,IAAI,EAAEa,qBAAqB,CAACb,IAAI,EAAEc,mBAAmB,CAACd,IAAI,EAAEe,OAAO,KAAK,OAAO,IAAIF,qBAAqB,CAACI,KAAK,EAAE,CAAChB,IAAI,IAAIY,qBAAqB,CAACK,wBAAwB,EAAER,KAAK,CAACV,IAAI,CAACgB,SAAS,CAAC;IAChR,IAAIN,KAAK,CAACT,IAAI,EAAE;QACZ,oDAAA;QACAS,KAAK,CAACT,IAAI,CAACe,SAAS,OAAGrB,mBAAY,EAACI,uBAAuB,CAACE,IAAI,EAAEW,UAAU,CAACO,IAAI,EAAET,KAAK,CAACT,IAAI,CAACe,SAAS,CAAC;IAC5G;IACA,OAAON,KAAK;AAChB,CAAC"}
|
|
@@ -42,8 +42,10 @@ const useAppItemStaticStyles_unstable = (state)=>{
|
|
|
42
42
|
const appItemSpecificStyles = (0, _useAppItemStylesstyles.useAppItemStyles)();
|
|
43
43
|
const appItemStaticStyles = useAppItemStaticStyles();
|
|
44
44
|
const { density, icon } = state;
|
|
45
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
45
46
|
state.root.className = (0, _react.mergeClasses)(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);
|
|
46
47
|
if (state.icon) {
|
|
48
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
47
49
|
state.icon.className = (0, _react.mergeClasses)(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);
|
|
48
50
|
}
|
|
49
51
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStaticStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemStaticSlots, AppItemStaticState } from './AppItemStatic.types';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemStaticClassNames: SlotClassNames<AppItemStaticSlots> = {\n root: 'fui-AppItemStatic',\n icon: 'fui-AppItemStatic__icon',\n};\n\nconst useAppItemStaticStyles = makeStyles({\n root: {\n cursor: 'default',\n ':hover': {\n backgroundColor: 'unset',\n },\n ':active': {\n backgroundColor: 'unset',\n },\n },\n});\n\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */\nexport const useAppItemStaticStyles_unstable = (state: AppItemStaticState): AppItemStaticState => {\n 'use no memo';\n\n const rootDefaultClassName = useRootDefaultClassName();\n const iconStyles = useIconStyles();\n const appItemSpecificStyles = useAppItemStyles();\n const appItemStaticStyles = useAppItemStaticStyles();\n\n const { density, icon } = state;\n\n state.root.className = mergeClasses(\n rootDefaultClassName,\n appItemStaticClassNames.root,\n appItemSpecificStyles.root,\n appItemStaticStyles.root,\n density === 'small' && appItemSpecificStyles.small,\n !icon && appItemSpecificStyles.absentIconRootAdjustment,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","cursor","backgroundColor","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,uBAAAA;;;mCAoBAM;eAAAA;;;uBA1B4B,iBAAiB;wCAGzB,qCAAqC;uCACf,4BAA4B;AAE5E,gCAAoE;IACzEL,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,qBAAAA,EAAW;IACxCM,MAAM;QACJG,QAAQ;QACR,UAAU;YACRC,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAMC,2BAAuBT,8CAAAA;IAC7B,MAAMU,iBAAaX,oCAAAA;IACnB,MAAMY,wBAAwBb,4CAAAA;IAC9B,MAAMc,sBAAsBR;IAE5B,MAAM,EAAES,OAAO,EAAEV,IAAI,EAAE,GAAGK;
|
|
1
|
+
{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStaticStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemStaticSlots, AppItemStaticState } from './AppItemStatic.types';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemStaticClassNames: SlotClassNames<AppItemStaticSlots> = {\n root: 'fui-AppItemStatic',\n icon: 'fui-AppItemStatic__icon',\n};\n\nconst useAppItemStaticStyles = makeStyles({\n root: {\n cursor: 'default',\n ':hover': {\n backgroundColor: 'unset',\n },\n ':active': {\n backgroundColor: 'unset',\n },\n },\n});\n\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */\nexport const useAppItemStaticStyles_unstable = (state: AppItemStaticState): AppItemStaticState => {\n 'use no memo';\n\n const rootDefaultClassName = useRootDefaultClassName();\n const iconStyles = useIconStyles();\n const appItemSpecificStyles = useAppItemStyles();\n const appItemStaticStyles = useAppItemStaticStyles();\n\n const { density, icon } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n rootDefaultClassName,\n appItemStaticClassNames.root,\n appItemSpecificStyles.root,\n appItemStaticStyles.root,\n density === 'small' && appItemSpecificStyles.small,\n !icon && appItemSpecificStyles.absentIconRootAdjustment,\n state.root.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","cursor","backgroundColor","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,uBAAAA;;;mCAoBAM;eAAAA;;;uBA1B4B,iBAAiB;wCAGzB,qCAAqC;uCACf,4BAA4B;AAE5E,gCAAoE;IACzEL,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,qBAAAA,EAAW;IACxCM,MAAM;QACJG,QAAQ;QACR,UAAU;YACRC,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAMC,2BAAuBT,8CAAAA;IAC7B,MAAMU,iBAAaX,oCAAAA;IACnB,MAAMY,wBAAwBb,4CAAAA;IAC9B,MAAMc,sBAAsBR;IAE5B,MAAM,EAAES,OAAO,EAAEV,IAAI,EAAE,GAAGK;IAE1B,oDAAoD;IACpDA,MAAMN,IAAI,CAACY,SAAS,OAAGjB,mBAAAA,EACrBY,sBACAR,wBAAwBC,IAAI,EAC5BS,sBAAsBT,IAAI,EAC1BU,oBAAoBV,IAAI,EACxBW,YAAY,WAAWF,sBAAsBI,KAAK,EAClD,CAACZ,QAAQQ,sBAAsBK,wBAAwB,EACvDR,MAAMN,IAAI,CAACY,SAAS;IAGtB,IAAIN,MAAML,IAAI,EAAE;QACd,oDAAoD;QACpDK,MAAML,IAAI,CAACW,SAAS,OAAGjB,mBAAAA,EAAaI,wBAAwBE,IAAI,EAAEO,WAAWO,IAAI,EAAET,MAAML,IAAI,CAACW,SAAS;IACzG;IAEA,OAAON;AACT,EAAE"}
|
|
@@ -71,8 +71,10 @@ const useHamburgerStyles_unstable = (state)=>{
|
|
|
71
71
|
'use no memo';
|
|
72
72
|
(0, _reactbutton.useButtonStyles_unstable)(state);
|
|
73
73
|
const styles = useStyles();
|
|
74
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
74
75
|
state.root.className = (0, _react.mergeClasses)(hamburgerClassNames.root, styles.root, state.root.className);
|
|
75
76
|
if (state.icon) {
|
|
77
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
76
78
|
state.icon.className = (0, _react.mergeClasses)(hamburgerClassNames.icon, state.icon.className);
|
|
77
79
|
}
|
|
78
80
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useHamburgerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const hamburgerClassNames = {\n root: 'fui-Hamburger',\n icon: 'fui-Hamburger__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n textDecorationLine: 'none',\n backgroundColor: navItemTokens.backgroundColor,\n border: 'none',\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed\n }\n }\n});\n/**\n * Apply styling to the Hamburger slots based on the state\n */ export const useHamburgerStyles_unstable = (state)=>{\n 'use no memo';\n useButtonStyles_unstable(state);\n const styles = useStyles();\n state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","w71qe1","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Jwef8y","ecr2s2","d","p","h","a","useHamburgerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,mBAAmB;;;IAqBf6B,2BAA2B;;;;uBAxBH,gBAAgB;6BAChB,wBAAwB;AAE1D,4BAA4B;IAC/B5B,IAAI,EAAE,eAAe;IACrBC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,
|
|
1
|
+
{"version":3,"sources":["useHamburgerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const hamburgerClassNames = {\n root: 'fui-Hamburger',\n icon: 'fui-Hamburger__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n textDecorationLine: 'none',\n backgroundColor: navItemTokens.backgroundColor,\n border: 'none',\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed\n }\n }\n});\n/**\n * Apply styling to the Hamburger slots based on the state\n */ export const useHamburgerStyles_unstable = (state)=>{\n 'use no memo';\n useButtonStyles_unstable(state);\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","w71qe1","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Jwef8y","ecr2s2","d","p","h","a","useHamburgerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,mBAAmB;;;IAqBf6B,2BAA2B;;;;uBAxBH,gBAAgB;6BAChB,wBAAwB;AAE1D,4BAA4B;IAC/B5B,IAAI,EAAE,eAAe;IACrBC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,qCAAqCE,KAAK,IAAG;IACpD,aAAa;QACbhC,qCAAwB,EAACgC,KAAK,CAAC;IAC/B,MAAMC,MAAM,GAAG5B,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACA2B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,OAAGnC,mBAAY,EAACG,mBAAmB,CAACC,IAAI,EAAE8B,MAAM,CAAC9B,IAAI,EAAE6B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,CAAC;IAChG,IAAIF,KAAK,CAAC5B,IAAI,EAAE;QACZ,oDAAA;QACA4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,OAAGnC,mBAAY,EAACG,mBAAmB,CAACE,IAAI,EAAE4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,CAAC;IACvF;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -43,8 +43,10 @@ const useHamburgerStyles_unstable = (state)=>{
|
|
|
43
43
|
'use no memo';
|
|
44
44
|
(0, _reactbutton.useButtonStyles_unstable)(state);
|
|
45
45
|
const styles = useStyles();
|
|
46
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
46
47
|
state.root.className = (0, _react.mergeClasses)(hamburgerClassNames.root, styles.root, state.root.className);
|
|
47
48
|
if (state.icon) {
|
|
49
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
48
50
|
state.icon.className = (0, _react.mergeClasses)(hamburgerClassNames.icon, state.icon.className);
|
|
49
51
|
}
|
|
50
52
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ButtonSlots } from '@fluentui/react-button';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { HamburgerState } from './Hamburger.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const hamburgerClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Hamburger',\n icon: 'fui-Hamburger__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n textDecorationLine: 'none',\n backgroundColor: navItemTokens.backgroundColor,\n border: 'none',\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n },\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed,\n },\n },\n});\n\n/**\n * Apply styling to the Hamburger slots based on the state\n */\nexport const useHamburgerStyles_unstable = (state: HamburgerState): HamburgerState => {\n 'use no memo';\n\n useButtonStyles_unstable(state);\n const styles = useStyles();\n\n state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","textDecorationLine","backgroundColor","border","backgroundColorHover","backgroundColorPressed","useHamburgerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaI,mBAAAA;;;+BAyBAS;eAAAA;;;uBAhC4B,iBAAiB;6BAEjB,yBAAyB;uCAGpC,4BAA4B;AAEnD,4BAAyD;IAC9DR,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BK,MAAM;QACJG,oBAAoB;QACpBC,iBAAiBN,oCAAAA,CAAcM,eAAe;QAC9CC,QAAQ;QACR,UAAU;YACRD,iBAAiBN,oCAAAA,CAAcQ,oBAAoB;QACrD;QACA,WAAW;YACTF,iBAAiBN,oCAAAA,CAAcS,sBAAsB;QACvD;IACF;AACF;AAKO,oCAAoC,CAACE;IAC1C;QAEAZ,qCAAAA,EAAyBY;IACzB,MAAMC,SAASR;
|
|
1
|
+
{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ButtonSlots } from '@fluentui/react-button';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { HamburgerState } from './Hamburger.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const hamburgerClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Hamburger',\n icon: 'fui-Hamburger__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n textDecorationLine: 'none',\n backgroundColor: navItemTokens.backgroundColor,\n border: 'none',\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n },\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed,\n },\n },\n});\n\n/**\n * Apply styling to the Hamburger slots based on the state\n */\nexport const useHamburgerStyles_unstable = (state: HamburgerState): HamburgerState => {\n 'use no memo';\n\n useButtonStyles_unstable(state);\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","textDecorationLine","backgroundColor","border","backgroundColorHover","backgroundColorPressed","useHamburgerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaI,mBAAAA;;;+BAyBAS;eAAAA;;;uBAhC4B,iBAAiB;6BAEjB,yBAAyB;uCAGpC,4BAA4B;AAEnD,4BAAyD;IAC9DR,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BK,MAAM;QACJG,oBAAoB;QACpBC,iBAAiBN,oCAAAA,CAAcM,eAAe;QAC9CC,QAAQ;QACR,UAAU;YACRD,iBAAiBN,oCAAAA,CAAcQ,oBAAoB;QACrD;QACA,WAAW;YACTF,iBAAiBN,oCAAAA,CAAcS,sBAAsB;QACvD;IACF;AACF;AAKO,oCAAoC,CAACE;IAC1C;QAEAZ,qCAAAA,EAAyBY;IACzB,MAAMC,SAASR;IAEf,oDAAoD;IACpDO,MAAMT,IAAI,CAACW,SAAS,OAAGf,mBAAAA,EAAaG,oBAAoBC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE/F,IAAIF,MAAMR,IAAI,EAAE;QACd,oDAAoD;QACpDQ,MAAMR,IAAI,CAACU,SAAS,OAAGf,mBAAAA,EAAaG,oBAAoBE,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IACpF;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Nav/Nav.types.ts"],"sourcesContent":["import type * as React from 'react';\n\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { NavContextValue, NavItemValue } from '../NavContext.types';\n\nexport type NavSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\n/***\n * Indicates the vertical density of the Nav content.\n * This does not affect horizontal spacing.\n */\nexport type NavDensity = 'small' | 'medium';\n\n/**\n * Nav Props\n */\nexport type NavProps = ComponentProps<NavSlots> & {\n /**\n * The value of the navItem to be selected by default.\n * Typically useful when the selectedValue is uncontrolled.\n * Mutually exclusive with selectedValue.\n * Empty string indicates no selection.\n */\n defaultSelectedValue?: NavItemValue;\n\n /**\n * The value of the navCategory to be selected by default.\n * Typically useful when the selectedValue is uncontrolled.\n * Mutually exclusive with selectedValue.\n * Empty string indicates no selection.\n */\n defaultSelectedCategoryValue?: NavItemValue;\n\n /**\n * Set of categories that are opened by default.\n * Typically useful when the openCategories is uncontrolled.\n */\n defaultOpenCategories?: NavItemValue[];\n\n /**\n * Controls the open categories.\n * For use in controlled scenarios.\n */\n openCategories?: NavItemValue[];\n\n /**\n * Raised when a navItem is selected.\n * If the navItem is child of a category, the categoryValue will be provided\n */\n onNavItemSelect?: EventHandler<OnNavItemSelectData>;\n\n /**\n * The value of the currently selected navItem.\n * Mutually exclusive with defaultSelectedValue.\n * @default undefined\n */\n selectedValue?: NavItemValue;\n\n /**\n * Indicates a category that has a selected child\n * Will show the category as selected if it is closed.\n * @default undefined\n */\n selectedCategoryValue?: NavItemValue;\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n * @default true, indicating that multiple categories can be open at the same time.\n */\n multiple?: boolean;\n\n /**\n * Callback raised when a NavCategoryItem is toggled.\n */\n onNavCategoryItemToggle?: EventHandler<OnNavItemSelectData>;\n\n /**\n * The vertical density of the Nav and it's children\n * @default 'medium'\n */\n density?: NavDensity;\n};\n\nexport type OnNavItemSelectData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n /**\n * The value of the selected navItem.\n * In the case of a category selection, this will be the value of the selected category.\n */\n value: NavItemValue;\n\n /**\n * The parent value of the selected navSubItem\n * Null if not a child of a category\n */\n categoryValue?: NavItemValue;\n};\n\n/**\n * State used in rendering Nav\n */\nexport type NavState = ComponentState<NavSlots> & NavContextValue;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/Nav/Nav.types.ts"],"sourcesContent":["import type * as React from 'react';\n\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { NavContextValue, NavItemValue } from '../NavContext.types';\n\nexport type NavSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\n/***\n * Indicates the vertical density of the Nav content.\n * This does not affect horizontal spacing.\n */\nexport type NavDensity = 'small' | 'medium';\n\n/**\n * Nav Props\n */\nexport type NavProps = ComponentProps<NavSlots> & {\n /**\n * The value of the navItem to be selected by default.\n * Typically useful when the selectedValue is uncontrolled.\n * Mutually exclusive with selectedValue.\n * Empty string indicates no selection.\n */\n defaultSelectedValue?: NavItemValue;\n\n /**\n * The value of the navCategory to be selected by default.\n * Typically useful when the selectedValue is uncontrolled.\n * Mutually exclusive with selectedValue.\n * Empty string indicates no selection.\n */\n defaultSelectedCategoryValue?: NavItemValue;\n\n /**\n * Set of categories that are opened by default.\n * Typically useful when the openCategories is uncontrolled.\n */\n defaultOpenCategories?: NavItemValue[];\n\n /**\n * Controls the open categories.\n * For use in controlled scenarios.\n */\n openCategories?: NavItemValue[];\n\n /**\n * Raised when a navItem is selected.\n * If the navItem is child of a category, the categoryValue will be provided\n */\n onNavItemSelect?: EventHandler<OnNavItemSelectData>;\n\n /**\n * The value of the currently selected navItem.\n * Mutually exclusive with defaultSelectedValue.\n * @default undefined\n */\n selectedValue?: NavItemValue;\n\n /**\n * Indicates a category that has a selected child\n * Will show the category as selected if it is closed.\n * @default undefined\n */\n selectedCategoryValue?: NavItemValue;\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n * @default true, indicating that multiple categories can be open at the same time.\n */\n multiple?: boolean;\n\n /**\n * Callback raised when a NavCategoryItem is toggled.\n */\n onNavCategoryItemToggle?: EventHandler<OnNavItemSelectData>;\n\n /**\n * The vertical density of the Nav and it's children\n * @default 'medium'\n */\n density?: NavDensity;\n};\n\nexport type NavBaseProps = Omit<NavProps, 'density'>;\n\nexport type OnNavItemSelectData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n /**\n * The value of the selected navItem.\n * In the case of a category selection, this will be the value of the selected category.\n */\n value: NavItemValue;\n\n /**\n * The parent value of the selected navSubItem\n * Null if not a child of a category\n */\n categoryValue?: NavItemValue;\n};\n\n/**\n * State used in rendering Nav\n */\nexport type NavState = ComponentState<NavSlots> & NavContextValue;\n\nexport type NavBaseState = Omit<NavState, 'density' | 'tabbable'>;\n"],"names":[],"mappings":""}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderNav_unstable: function() {
|
|
19
19
|
return _renderNav.renderNav_unstable;
|
|
20
20
|
},
|
|
21
|
+
useNavBase_unstable: function() {
|
|
22
|
+
return _useNav.useNavBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useNavStyles_unstable: function() {
|
|
22
25
|
return _useNavStylesstyles.useNavStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Nav/index.ts"],"sourcesContent":["export { Nav } from './Nav';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/Nav/index.ts"],"sourcesContent":["export { Nav } from './Nav';\nexport type {\n NavSlots,\n NavProps,\n OnNavItemSelectData,\n NavState,\n NavDensity,\n NavBaseProps,\n NavBaseState,\n} from './Nav.types';\nexport { renderNav_unstable } from './renderNav';\nexport { useNav_unstable, useNavBase_unstable } from './useNav';\nexport { useNavStyles_unstable, navClassNames } from './useNavStyles.styles';\n"],"names":["Nav","renderNav_unstable","useNav_unstable","useNavBase_unstable","useNavStyles_unstable","navClassNames"],"mappings":";;;;;;;;;;;;eAASA,QAAG;;;eAYoBK,iCAAa;;;eAFpCJ,6BAAkB;;;eACDE,2BAAmB;;;eACpCC,yCAAqB;;;eADrBF,uBAAe;;;qBAXJ,QAAQ;2BAUO,cAAc;wBACI,WAAW;oCACX,wBAAwB"}
|
|
@@ -3,9 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useNavBase_unstable: function() {
|
|
14
|
+
return useNavBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useNav_unstable: function() {
|
|
9
17
|
return useNav_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
@@ -48,7 +56,16 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
48
56
|
];
|
|
49
57
|
};
|
|
50
58
|
const useNav_unstable = (props, ref)=>{
|
|
51
|
-
const {
|
|
59
|
+
const { density = 'medium' } = props;
|
|
60
|
+
const state = useNavBase_unstable(props, ref);
|
|
61
|
+
return {
|
|
62
|
+
...state,
|
|
63
|
+
density,
|
|
64
|
+
tabbable: false
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
const useNavBase_unstable = (props, ref)=>{
|
|
68
|
+
const { onNavItemSelect, onNavCategoryItemToggle, multiple = true, openCategories: controlledOpenCategoryItems, selectedCategoryValue: controlledSelectedCategoryValue, selectedValue: controlledSelectedValue, defaultOpenCategories, defaultSelectedValue, defaultSelectedCategoryValue } = props;
|
|
52
69
|
const innerRef = _react.useRef(null);
|
|
53
70
|
const [openCategories, setOpenCategories] = (0, _reactutilities.useControllableState)({
|
|
54
71
|
state: controlledOpenCategoryItems,
|
|
@@ -76,12 +93,18 @@ const useNav_unstable = (props, ref)=>{
|
|
|
76
93
|
const previousSelectedValue = _react.useRef(undefined);
|
|
77
94
|
const currentSelectedCategoryValue = _react.useRef(undefined);
|
|
78
95
|
const previousSelectedCategoryValue = _react.useRef(undefined);
|
|
96
|
+
// eslint-disable-next-line react-hooks/refs
|
|
79
97
|
if (currentSelectedValue.current !== selectedValue) {
|
|
98
|
+
// eslint-disable-next-line react-hooks/refs
|
|
80
99
|
previousSelectedValue.current = currentSelectedValue.current;
|
|
100
|
+
// eslint-disable-next-line react-hooks/refs
|
|
81
101
|
currentSelectedValue.current = selectedValue;
|
|
82
102
|
}
|
|
103
|
+
// eslint-disable-next-line react-hooks/refs
|
|
83
104
|
if (currentSelectedCategoryValue.current !== selectedCategoryValue) {
|
|
105
|
+
// eslint-disable-next-line react-hooks/refs
|
|
84
106
|
previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;
|
|
107
|
+
// eslint-disable-next-line react-hooks/refs
|
|
85
108
|
currentSelectedCategoryValue.current = selectedCategoryValue;
|
|
86
109
|
}
|
|
87
110
|
// used for NavItems and NavSubItems
|
|
@@ -132,8 +155,6 @@ const useNav_unstable = (props, ref)=>{
|
|
|
132
155
|
onSelect,
|
|
133
156
|
getRegisteredNavItems,
|
|
134
157
|
onRequestNavCategoryItemToggle,
|
|
135
|
-
multiple
|
|
136
|
-
density,
|
|
137
|
-
tabbable: false
|
|
158
|
+
multiple
|
|
138
159
|
};
|
|
139
160
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { EventHandler } from '@fluentui/react-utilities';\nimport {\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport type { NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n defaultOpenCategories,\n multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n if (defaultOpenCategories !== undefined) {\n if (Array.isArray(defaultOpenCategories)) {\n return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n }\n return [defaultOpenCategories];\n }\n return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n return previousOpenItems.filter(i => i !== value);\n } else {\n return [...previousOpenItems, value];\n }\n }\n\n return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n const {\n onNavItemSelect,\n onNavCategoryItemToggle,\n multiple = true,\n density = 'medium',\n openCategories: controlledOpenCategoryItems,\n selectedCategoryValue: controlledSelectedCategoryValue,\n selectedValue: controlledSelectedValue,\n defaultOpenCategories,\n defaultSelectedValue,\n defaultSelectedCategoryValue,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const [openCategories, setOpenCategories] = useControllableState({\n state: controlledOpenCategoryItems,\n defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n initialState: [],\n });\n\n const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n state: controlledSelectedCategoryValue,\n defaultState: defaultSelectedCategoryValue,\n initialState: undefined,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: controlledSelectedValue,\n defaultState: defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the navItem list re-renders.\n // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n // renders for navItems that have not changed.\n const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n if (currentSelectedValue.current !== selectedValue) {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }\n\n if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n currentSelectedCategoryValue.current = selectedCategoryValue;\n }\n\n // used for NavItems and NavSubItems\n const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n setSelectedValue(data.value);\n setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n onNavItemSelect?.(event, data);\n });\n\n // used for NavCategoryItems\n const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n if (data.categoryValue !== undefined) {\n const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n onNavCategoryItemToggle?.(event, data);\n setOpenCategories(nextOpenCategories);\n }\n });\n\n const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n const onRegister = React.useCallback((data: NavItemRegisterData) => {\n registeredNavItems.current[JSON.stringify(data.value)] = data;\n }, []);\n\n const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n delete registeredNavItems.current[JSON.stringify(data.value)];\n }, []);\n\n const getRegisteredNavItems = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n selectedCategoryValue: currentSelectedCategoryValue.current,\n previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n registeredNavItems: registeredNavItems.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n openCategories,\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n multiple,\n density,\n tabbable: false,\n };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","onNavItemSelect","onNavCategoryItemToggle","density","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","state","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType","tabbable"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { EventHandler } from '@fluentui/react-utilities';\nimport {\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport type { NavBaseProps, NavBaseState, NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n defaultOpenCategories,\n multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n if (defaultOpenCategories !== undefined) {\n if (Array.isArray(defaultOpenCategories)) {\n return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n }\n return [defaultOpenCategories];\n }\n return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n return previousOpenItems.filter(i => i !== value);\n } else {\n return [...previousOpenItems, value];\n }\n }\n\n return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n const { density = 'medium' } = props;\n\n const state = useNavBase_unstable(props, ref);\n\n return {\n ...state,\n density,\n tabbable: false,\n };\n};\n\nexport const useNavBase_unstable = (props: NavBaseProps, ref: React.Ref<HTMLDivElement>): NavBaseState => {\n const {\n onNavItemSelect,\n onNavCategoryItemToggle,\n multiple = true,\n openCategories: controlledOpenCategoryItems,\n selectedCategoryValue: controlledSelectedCategoryValue,\n selectedValue: controlledSelectedValue,\n defaultOpenCategories,\n defaultSelectedValue,\n defaultSelectedCategoryValue,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const [openCategories, setOpenCategories] = useControllableState({\n state: controlledOpenCategoryItems,\n defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n initialState: [],\n });\n\n const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n state: controlledSelectedCategoryValue,\n defaultState: defaultSelectedCategoryValue,\n initialState: undefined,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: controlledSelectedValue,\n defaultState: defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the navItem list re-renders.\n // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n // renders for navItems that have not changed.\n const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n // eslint-disable-next-line react-hooks/refs\n if (currentSelectedValue.current !== selectedValue) {\n // eslint-disable-next-line react-hooks/refs\n previousSelectedValue.current = currentSelectedValue.current;\n // eslint-disable-next-line react-hooks/refs\n currentSelectedValue.current = selectedValue;\n }\n\n // eslint-disable-next-line react-hooks/refs\n if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n // eslint-disable-next-line react-hooks/refs\n previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n // eslint-disable-next-line react-hooks/refs\n currentSelectedCategoryValue.current = selectedCategoryValue;\n }\n\n // used for NavItems and NavSubItems\n const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n setSelectedValue(data.value);\n setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n onNavItemSelect?.(event, data);\n });\n\n // used for NavCategoryItems\n const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n if (data.categoryValue !== undefined) {\n const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n onNavCategoryItemToggle?.(event, data);\n setOpenCategories(nextOpenCategories);\n }\n });\n\n const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n const onRegister = React.useCallback((data: NavItemRegisterData) => {\n registeredNavItems.current[JSON.stringify(data.value)] = data;\n }, []);\n\n const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n delete registeredNavItems.current[JSON.stringify(data.value)];\n }, []);\n\n const getRegisteredNavItems = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n selectedCategoryValue: currentSelectedCategoryValue.current,\n previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n registeredNavItems: registeredNavItems.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n openCategories,\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n multiple,\n };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","density","state","useNavBase_unstable","tabbable","onNavItemSelect","onNavCategoryItemToggle","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType"],"mappings":"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"}
|
|
@@ -37,6 +37,7 @@ const navClassNames = {
|
|
|
37
37
|
const useNavStyles_unstable = (state)=>{
|
|
38
38
|
'use no memo';
|
|
39
39
|
const styles = useStyles();
|
|
40
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
40
41
|
state.root.className = (0, _react.mergeClasses)(navClassNames.root, styles.root, state.root.className);
|
|
41
42
|
// TODO Add class names to slots, for example:
|
|
42
43
|
// state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navClassNames = {\n root: 'fui-Nav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column'\n }\n});\n/**\n * Apply styling to the Nav slots based on the state\n */ export const useNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n // TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","navClassNames","root","useStyles","mc9l5x","Beiy3e4","d","useNavStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,aAAa;;;IAaTM,qBAAqB;;;;uBAdG,gBAAgB;AAClD,sBAAsB;IACzBL,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAKrB,CAAC;AAGS,+BAA+BE,KAAK,IAAG;IAC9C,aAAa;IACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"sources":["useNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navClassNames = {\n root: 'fui-Nav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column'\n }\n});\n/**\n * Apply styling to the Nav slots based on the state\n */ export const useNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n // TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","navClassNames","root","useStyles","mc9l5x","Beiy3e4","d","useNavStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,aAAa;;;IAaTM,qBAAqB;;;;uBAdG,gBAAgB;AAClD,sBAAsB;IACzBL,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAKrB,CAAC;AAGS,+BAA+BE,KAAK,IAAG;IAC9C,aAAa;IACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAK,KAAK,CAACN,IAAI,CAACQ,SAAS,OAAGV,mBAAY,EAACC,aAAa,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;IAC1F,8CAAA;IACA,gFAAA;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -32,6 +32,7 @@ const navClassNames = {
|
|
|
32
32
|
const useNavStyles_unstable = (state)=>{
|
|
33
33
|
'use no memo';
|
|
34
34
|
const styles = useStyles();
|
|
35
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
35
36
|
state.root.className = (0, _react.mergeClasses)(navClassNames.root, styles.root, state.root.className);
|
|
36
37
|
// TODO Add class names to slots, for example:
|
|
37
38
|
// state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Nav/useNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSlots, NavState } from './Nav.types';\n\nexport const navClassNames: SlotClassNames<NavSlots> = {\n root: 'fui-Nav',\n // TODO: add class names for all slots on NavSlots.\n // Should be of the form `<slotName>: 'fui-Nav__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the Nav slots based on the state\n */\nexport const useNavStyles_unstable = (state: NavState): NavState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n\n // TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navClassNames","root","useStyles","display","flexDirection","useNavStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,aAAAA;;;yBAqBAK;eAAAA;;;uBAzB4B,iBAAiB;AAInD,sBAAgD;IACrDJ,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,eAAe;IACjB;AAGF;AAKO,8BAA8B,CAACE;IACpC;IAEA,MAAMC,SAASL;
|
|
1
|
+
{"version":3,"sources":["../src/components/Nav/useNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSlots, NavState } from './Nav.types';\n\nexport const navClassNames: SlotClassNames<NavSlots> = {\n root: 'fui-Nav',\n // TODO: add class names for all slots on NavSlots.\n // Should be of the form `<slotName>: 'fui-Nav__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the Nav slots based on the state\n */\nexport const useNavStyles_unstable = (state: NavState): NavState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n\n // TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navClassNames","root","useStyles","display","flexDirection","useNavStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,aAAAA;;;yBAqBAK;eAAAA;;;uBAzB4B,iBAAiB;AAInD,sBAAgD;IACrDJ,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,eAAe;IACjB;AAGF;AAKO,8BAA8B,CAACE;IACpC;IAEA,MAAMC,SAASL;IACf,oDAAoD;IACpDI,MAAML,IAAI,CAACO,SAAS,OAAGT,mBAAAA,EAAaC,cAAcC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEzF,8CAA8C;IAC9C,gFAAgF;IAEhF,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.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';\nimport type { NavCategoryItemContextValue } from '../NavCategoryItemContext';\n\nexport type NavCategoryItemContextValues = {\n navCategoryItem: NavCategoryItemContextValue;\n};\n\nexport type NavCategoryItemSlots = {\n /**\n * The root element\n */\n root: NonNullable<Slot<'button'>>;\n\n /**\n * Icon that renders before the content.\n * Should be specific to each Category\n */\n icon?: Slot<'span'>;\n\n /**\n * Expand icon slot rendered after the content to indicate an open and closed state.\n */\n expandIcon: NonNullable<Slot<'span'>>;\n\n /**\n * Expand icon motion slot.\n */\n expandIconMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * navCategoryItem Props\n */\nexport type NavCategoryItemProps = ComponentProps<Partial<NavCategoryItemSlots>>;\n\n/**\n * State used in rendering NavCategoryItem\n */\nexport type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &\n NavCategoryItemContextValue & {\n /**\n * If this navCategoryItem 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/NavCategoryItem/NavCategoryItem.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';\nimport type { NavCategoryItemContextValue } from '../NavCategoryItemContext';\n\nexport type NavCategoryItemContextValues = {\n navCategoryItem: NavCategoryItemContextValue;\n};\n\nexport type NavCategoryItemSlots = {\n /**\n * The root element\n */\n root: NonNullable<Slot<'button'>>;\n\n /**\n * Icon that renders before the content.\n * Should be specific to each Category\n */\n icon?: Slot<'span'>;\n\n /**\n * Expand icon slot rendered after the content to indicate an open and closed state.\n */\n expandIcon: NonNullable<Slot<'span'>>;\n\n /**\n * Expand icon motion slot.\n */\n expandIconMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * Base slots for NavCategoryItem, excluding design/animation-specific slots.\n */\nexport type NavCategoryItemBaseSlots = Omit<NavCategoryItemSlots, 'expandIconMotion'>;\n\n/**\n * navCategoryItem Props\n */\nexport type NavCategoryItemProps = ComponentProps<Partial<NavCategoryItemSlots>>;\n\n/**\n * Base NavCategoryItemProps, excluding design/animation-specific props.\n */\nexport type NavCategoryItemBaseProps = ComponentProps<Partial<NavCategoryItemBaseSlots>>;\n\n/**\n * State used in rendering NavCategoryItem\n */\nexport type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &\n NavCategoryItemContextValue & {\n /**\n * If this navCategoryItem is selected\n */\n selected: boolean;\n /**\n * The density of the NavItem\n *\n * @default 'medium'\n */\n density: NavDensity;\n };\n\n/**\n * State used in rendering NavCategoryItem, excluding design/animation-specific state.\n */\nexport type NavCategoryItemBaseState = ComponentState<NavCategoryItemBaseSlots> &\n Pick<NavCategoryItemState, 'open' | 'value' | 'selected'>;\n"],"names":[],"mappings":"AAgEA;;CAEC,GACD,WAC4D"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderNavCategoryItem_unstable: function() {
|
|
19
19
|
return _renderNavCategoryItem.renderNavCategoryItem_unstable;
|
|
20
20
|
},
|
|
21
|
+
useNavCategoryItemBase_unstable: function() {
|
|
22
|
+
return _useNavCategoryItem.useNavCategoryItemBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useNavCategoryItemStyles_unstable: function() {
|
|
22
25
|
return _useNavCategoryItemstyles.useNavCategoryItemStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavCategoryItem/index.ts"],"sourcesContent":["export { NavCategoryItem } from './NavCategoryItem';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/NavCategoryItem/index.ts"],"sourcesContent":["export { NavCategoryItem } from './NavCategoryItem';\nexport type {\n NavCategoryItemSlots,\n NavCategoryItemProps,\n NavCategoryItemState,\n NavCategoryItemBaseProps,\n NavCategoryItemBaseSlots,\n NavCategoryItemBaseState,\n} from './NavCategoryItem.types';\nexport { renderNavCategoryItem_unstable } from './renderNavCategoryItem';\nexport { useNavCategoryItem_unstable, useNavCategoryItemBase_unstable } from './useNavCategoryItem';\nexport { useNavCategoryItemStyles_unstable, navCategoryItemClassNames } from './useNavCategoryItem.styles';\n"],"names":["NavCategoryItem","renderNavCategoryItem_unstable","useNavCategoryItem_unstable","useNavCategoryItemBase_unstable","useNavCategoryItemStyles_unstable","navCategoryItemClassNames"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAWoBK,mDAAyB;;;eAF5DJ,qDAA8B;;;eACDE,mDAA+B;;;eAC5DC,2DAAiC;;;eADjCF,+CAA2B;;;iCAVJ,oBAAoB;uCASL,0BAA0B;oCACI,uBAAuB;0CACvB,8BAA8B"}
|