@fluentui/react-nav 9.1.3 → 9.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +39 -2
- package/dist/index.d.ts +28 -2
- package/lib/components/NavCategoryItem/NavCategoryItem.types.js.map +1 -1
- package/lib/components/NavCategoryItem/renderNavCategoryItem.js +13 -1
- package/lib/components/NavCategoryItem/renderNavCategoryItem.js.map +1 -1
- package/lib/components/NavCategoryItem/useNavCategoryItem.js +37 -3
- package/lib/components/NavCategoryItem/useNavCategoryItem.js.map +1 -1
- package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js +2 -1
- package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js.map +1 -1
- package/lib/components/NavSubItem/useNavSubItemStyles.styles.js +2 -1
- package/lib/components/NavSubItem/useNavSubItemStyles.styles.js.map +1 -1
- package/lib/components/NavSubItemGroup/NavSubItemGroup.types.js.map +1 -1
- package/lib/components/NavSubItemGroup/renderNavSubItemGroup.js +3 -3
- package/lib/components/NavSubItemGroup/renderNavSubItemGroup.js.map +1 -1
- package/lib/components/NavSubItemGroup/useNavSubItemGroup.js +50 -4
- package/lib/components/NavSubItemGroup/useNavSubItemGroup.js.map +1 -1
- package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js +11 -4
- package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map +1 -1
- package/lib/components/SplitNavItem/renderSplitNavItem.js +19 -12
- package/lib/components/SplitNavItem/renderSplitNavItem.js.map +1 -1
- package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js +41 -6
- package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js.map +1 -1
- package/lib/components/useNavContextValues.js +5 -3
- package/lib/components/useNavContextValues.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItem/NavCategoryItem.types.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItem/renderNavCategoryItem.js +13 -1
- package/lib-commonjs/components/NavCategoryItem/renderNavCategoryItem.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js +36 -2
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js.map +1 -1
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.js +2 -1
- package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.js.map +1 -1
- package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.js +2 -1
- package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/NavSubItemGroup/NavSubItemGroup.types.js.map +1 -1
- package/lib-commonjs/components/NavSubItemGroup/renderNavSubItemGroup.js +3 -3
- package/lib-commonjs/components/NavSubItemGroup/renderNavSubItemGroup.js.map +1 -1
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroup.js +50 -4
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroup.js.map +1 -1
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js +17 -4
- package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SplitNavItem/renderSplitNavItem.js +20 -12
- package/lib-commonjs/components/SplitNavItem/renderSplitNavItem.js.map +1 -1
- package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js +55 -5
- package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/useNavContextValues.js +5 -3
- package/lib-commonjs/components/useNavContextValues.js.map +1 -1
- package/package.json +11 -10
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
|
-
import { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';
|
|
3
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
import { motionTokens } from '@fluentui/react-motion';
|
|
4
|
+
import { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';
|
|
4
5
|
export const splitNavItemClassNames = {
|
|
5
6
|
root: 'fui-SplitNavItem',
|
|
6
7
|
navItem: 'fui-SplitNavItem__navItem',
|
|
@@ -17,6 +18,17 @@ export const splitNavItemClassNames = {
|
|
|
17
18
|
// Don't use makeResetStyles here because the sub components call it once and
|
|
18
19
|
// This links says that makeResetStyles should only be called once per element
|
|
19
20
|
// https://griffel.js.org/react/api/make-reset-styles/#limitations
|
|
21
|
+
const {
|
|
22
|
+
actionButton,
|
|
23
|
+
toggleButton,
|
|
24
|
+
menuButton
|
|
25
|
+
} = splitNavItemClassNames;
|
|
26
|
+
const buttonHoverStyles = {
|
|
27
|
+
[`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {
|
|
28
|
+
opacity: 1,
|
|
29
|
+
pointerEvents: 'auto'
|
|
30
|
+
}
|
|
31
|
+
};
|
|
20
32
|
/**
|
|
21
33
|
* Styles for the root slot
|
|
22
34
|
*/
|
|
@@ -38,6 +50,10 @@ const useSplitNaveItemStyles = /*#__PURE__*/__styles({
|
|
|
38
50
|
Bkqvd7p: "f1e9ux7i",
|
|
39
51
|
Bmy1vo4: "f1xfaukr",
|
|
40
52
|
Jwef8y: "f11oyicx",
|
|
53
|
+
xwko9w: "f8z0t4e",
|
|
54
|
+
mcc9px: "f9ueil3",
|
|
55
|
+
B02v5zz: "f1g2hb8n",
|
|
56
|
+
i4x37a: "fpq6je",
|
|
41
57
|
ecr2s2: "f9fof1w"
|
|
42
58
|
},
|
|
43
59
|
baseNavItem: {
|
|
@@ -61,6 +77,20 @@ const useSplitNaveItemStyles = /*#__PURE__*/__styles({
|
|
|
61
77
|
},
|
|
62
78
|
baseMedium: {
|
|
63
79
|
rjzwhg: "fjtod8q"
|
|
80
|
+
},
|
|
81
|
+
baseLarge: {
|
|
82
|
+
rjzwhg: "f16gijt3"
|
|
83
|
+
},
|
|
84
|
+
hoverAction: {
|
|
85
|
+
abs64n: "fk73vx1",
|
|
86
|
+
Bkecrkj: "f1aehjj5",
|
|
87
|
+
Bn62ygk: 0,
|
|
88
|
+
Cwk7ip: 0,
|
|
89
|
+
B3o57yi: 0,
|
|
90
|
+
Bmy1vo4: 0,
|
|
91
|
+
Bkqvd7p: 0,
|
|
92
|
+
Bi2q7bf: ["fr12795", "fcl876f"],
|
|
93
|
+
Es3by: "f1gqqdtu"
|
|
64
94
|
}
|
|
65
95
|
}, {
|
|
66
96
|
d: [".f22iagw{display:flex;}", [".fx80lhs{gap:unset;}", {
|
|
@@ -69,8 +99,13 @@ const useSplitNaveItemStyles = /*#__PURE__*/__styles({
|
|
|
69
99
|
p: -1
|
|
70
100
|
}], ".fgusgyc{text-align:unset;}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".fnsygzv{transition-duration:var(--durationFaster);}", ".f1e9ux7i{transition-timing-function:var(--curveLinear);}", ".f1xfaukr{transition-property:background;}", ".f1cxpek8{text-transform:none;}", ".f1ub7u0d{align-self:stretch;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f10pi13n{position:relative;}", ".f1s9ku6b{justify-content:start;}", [".f1u2hskj{gap:var(--spacingVerticalL);}", {
|
|
71
101
|
p: -1
|
|
72
|
-
}], ".f3rmtva{background-color:transparent;}", ".f107v6xj{min-width:28px;}", ".f1y335lp{-webkit-padding-end:12px;padding-inline-end:12px;}", ".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}", ".fibmr9j{padding-block-start:5px;}", ".f1s2louj{align-items:start;}", ".fjtod8q{padding-block-start:9px;}"
|
|
73
|
-
|
|
102
|
+
}], ".f3rmtva{background-color:transparent;}", ".f107v6xj{min-width:28px;}", ".f1y335lp{-webkit-padding-end:12px;padding-inline-end:12px;}", ".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}", ".fibmr9j{padding-block-start:5px;}", ".f1s2louj{align-items:start;}", ".fjtod8q{padding-block-start:9px;}", ".f16gijt3{padding-block-start:12px;}", ".fk73vx1{opacity:0;}", ".f1aehjj5{pointer-events:none;}", [".fr12795{transition:opacity 150ms cubic-bezier(0.33,0,0.67,1);}", {
|
|
103
|
+
p: -1
|
|
104
|
+
}], [".fcl876f{transition:opacity 150ms cubic-bezier(0.33, 0, 0.67, 1);}", {
|
|
105
|
+
p: -1
|
|
106
|
+
}], ".f1gqqdtu{will-change:opacity;}"],
|
|
107
|
+
h: [".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}", ".f8z0t4e:hover .fui-SplitNavItem__actionButton,.f8z0t4e:hover .fui-SplitNavItem__toggleButton,.f8z0t4e:hover .fui-SplitNavItem__menuButton{opacity:1;}", ".f9ueil3:hover .fui-SplitNavItem__actionButton,.f9ueil3:hover .fui-SplitNavItem__toggleButton,.f9ueil3:hover .fui-SplitNavItem__menuButton{pointer-events:auto;}"],
|
|
108
|
+
w: [".f1g2hb8n:focus-within .fui-SplitNavItem__actionButton,.f1g2hb8n:focus-within .fui-SplitNavItem__toggleButton,.f1g2hb8n:focus-within .fui-SplitNavItem__menuButton{opacity:1;}", ".fpq6je:focus-within .fui-SplitNavItem__actionButton,.fpq6je:focus-within .fui-SplitNavItem__toggleButton,.fpq6je:focus-within .fui-SplitNavItem__menuButton{pointer-events:auto;}"],
|
|
74
109
|
a: [".f9fof1w:active{background-color:var(--colorNeutralBackground4Pressed);}"]
|
|
75
110
|
});
|
|
76
111
|
/**
|
|
@@ -86,13 +121,13 @@ export const useSplitNavItemStyles_unstable = state => {
|
|
|
86
121
|
state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
|
|
87
122
|
}
|
|
88
123
|
if (state.actionButton) {
|
|
89
|
-
state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
|
|
124
|
+
state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
|
|
90
125
|
}
|
|
91
126
|
if (state.toggleButton) {
|
|
92
|
-
state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
|
|
127
|
+
state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
|
|
93
128
|
}
|
|
94
129
|
if (state.menuButton) {
|
|
95
|
-
state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
|
|
130
|
+
state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
|
|
96
131
|
}
|
|
97
132
|
return state;
|
|
98
133
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","xwko9w","mcc9px","B02v5zz","i4x37a","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","baseLarge","hoverAction","abs64n","Bkecrkj","Bn62ygk","Cwk7ip","Bi2q7bf","Es3by","d","p","h","w","a","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const splitNavItemClassNames = {\n root: 'fui-SplitNavItem',\n navItem: 'fui-SplitNavItem__navItem',\n actionButton: 'fui-SplitNavItem__actionButton',\n toggleButton: 'fui-SplitNavItem__toggleButton',\n menuButton: 'fui-SplitNavItem__menuButton',\n /**\n * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n opacity: 1,\n pointerEvents: 'auto'\n }\n};\n/**\n * Styles for the root slot\n */ const useSplitNaveItemStyles = makeStyles({\n baseRoot: {\n display: 'flex',\n gap: 'unset',\n alignItems: 'stretch',\n padding: 'unset',\n textAlign: 'unset',\n backgroundColor: navItemTokens.backgroundColor,\n ...navItemTokens.transitionTokens,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n ...buttonHoverStyles\n },\n ':focus-within': buttonHoverStyles,\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed\n }\n },\n baseNavItem: {\n // styles that we want to disagree with the default on\n display: 'flex',\n textTransform: 'none',\n alignSelf: 'stretch',\n textAlign: 'left',\n position: 'relative',\n justifyContent: 'start',\n gap: tokens.spacingVerticalL,\n backgroundColor: 'transparent'\n },\n baseSecondary: {\n minWidth: '28px',\n paddingInlineEnd: '12px',\n paddingInlineStart: '5px',\n paddingBlockStart: '5px',\n alignItems: 'start'\n },\n baseMedium: {\n paddingBlockStart: '9px'\n },\n baseLarge: {\n paddingBlockStart: '12px'\n },\n hoverAction: {\n opacity: 0,\n pointerEvents: 'none',\n transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n willChange: 'opacity'\n }\n});\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */ export const useSplitNavItemStyles_unstable = (state)=>{\n 'use no memo';\n const splitNavItemStyles = useSplitNaveItemStyles();\n const sharedRootClassNames = useRootDefaultClassName();\n state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);\n if (state.navItem) {\n state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);\n }\n if (state.actionButton) {\n state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n }\n if (state.toggleButton) {\n state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n }\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export function useNavContextValues_unstable(state) {
|
|
3
|
-
const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density } = state;
|
|
3
|
+
const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density, onNavItemSelect } = state;
|
|
4
4
|
const navContext = React.useMemo(()=>({
|
|
5
5
|
selectedValue,
|
|
6
6
|
selectedCategoryValue,
|
|
@@ -11,7 +11,8 @@ export function useNavContextValues_unstable(state) {
|
|
|
11
11
|
onRequestNavCategoryItemToggle,
|
|
12
12
|
openCategories,
|
|
13
13
|
multiple,
|
|
14
|
-
density
|
|
14
|
+
density,
|
|
15
|
+
onNavItemSelect
|
|
15
16
|
}), [
|
|
16
17
|
selectedValue,
|
|
17
18
|
selectedCategoryValue,
|
|
@@ -22,7 +23,8 @@ export function useNavContextValues_unstable(state) {
|
|
|
22
23
|
onRequestNavCategoryItemToggle,
|
|
23
24
|
openCategories,
|
|
24
25
|
multiple,
|
|
25
|
-
density
|
|
26
|
+
density,
|
|
27
|
+
onNavItemSelect
|
|
26
28
|
]);
|
|
27
29
|
return {
|
|
28
30
|
nav: navContext
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n const {\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n } = state;\n\n const navContext = React.useMemo<NavContextValue>(\n () => ({\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n }),\n [\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n ],\n );\n\n return { nav: navContext };\n}\n"],"names":["React","useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","navContext","useMemo","nav"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n const {\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n } = state;\n\n const navContext = React.useMemo<NavContextValue>(\n () => ({\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n }),\n [\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n ],\n );\n\n return { nav: navContext };\n}\n"],"names":["React","useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","onNavItemSelect","navContext","useMemo","nav"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,6BAA6BC,KAAe;IAC1D,MAAM,EACJC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,qBAAqB,EACrBC,8BAA8B,EAC9BC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,eAAe,EAChB,GAAGX;IAEJ,MAAMY,aAAad,MAAMe,OAAO,CAC9B,IAAO,CAAA;YACLZ;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEV;QACAC;QACAG;QACAF;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEG,KAAKF;IAAW;AAC3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.types.ts"],"sourcesContent":["import {
|
|
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":[],"rangeMappings":";;","mappings":"AAqCA;;CAEC"}
|
|
@@ -11,6 +11,18 @@ Object.defineProperty(exports, "renderNavCategoryItem_unstable", {
|
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
13
|
const _NavCategoryItemContext = require("../NavCategoryItemContext");
|
|
14
|
+
const getExpandIcon = (state)=>{
|
|
15
|
+
(0, _reactutilities.assertSlots)(state);
|
|
16
|
+
if (!state.expandIcon) {
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
if (!state.expandIconMotion) {
|
|
20
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {});
|
|
21
|
+
}
|
|
22
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIconMotion, {
|
|
23
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
|
|
24
|
+
});
|
|
25
|
+
};
|
|
14
26
|
const renderNavCategoryItem_unstable = (state, contextValues)=>{
|
|
15
27
|
(0, _reactutilities.assertSlots)(state);
|
|
16
28
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_NavCategoryItemContext.NavCategoryItemProvider, {
|
|
@@ -19,7 +31,7 @@ const renderNavCategoryItem_unstable = (state, contextValues)=>{
|
|
|
19
31
|
children: [
|
|
20
32
|
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
|
|
21
33
|
state.root.children,
|
|
22
|
-
|
|
34
|
+
getExpandIcon(state)
|
|
23
35
|
]
|
|
24
36
|
})
|
|
25
37
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavCategoryItem/renderNavCategoryItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavCategoryItemState, NavCategoryItemSlots, NavCategoryItemContextValues } from './NavCategoryItem.types';\nimport { NavCategoryItemProvider } from '../NavCategoryItemContext';\n\n/**\n * Render the final JSX of NavCategoryItem\n */\nexport const renderNavCategoryItem_unstable = (\n state: NavCategoryItemState,\n contextValues: NavCategoryItemContextValues,\n) => {\n assertSlots<NavCategoryItemSlots>(state);\n\n return (\n <NavCategoryItemProvider value={contextValues.navCategoryItem}>\n <state.root>\n {state.icon && <state.icon />}\n {state.root.children}\n {state
|
|
1
|
+
{"version":3,"sources":["../src/components/NavCategoryItem/renderNavCategoryItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavCategoryItemState, NavCategoryItemSlots, NavCategoryItemContextValues } from './NavCategoryItem.types';\nimport { NavCategoryItemProvider } from '../NavCategoryItemContext';\n\nconst getExpandIcon = (state: NavCategoryItemState) => {\n assertSlots<NavCategoryItemSlots>(state);\n\n if (!state.expandIcon) {\n return null;\n }\n\n if (!state.expandIconMotion) {\n return <state.expandIcon />;\n }\n\n return (\n <state.expandIconMotion>\n <state.expandIcon />\n </state.expandIconMotion>\n );\n};\n\n/**\n * Render the final JSX of NavCategoryItem\n */\nexport const renderNavCategoryItem_unstable = (\n state: NavCategoryItemState,\n contextValues: NavCategoryItemContextValues,\n) => {\n assertSlots<NavCategoryItemSlots>(state);\n\n return (\n <NavCategoryItemProvider value={contextValues.navCategoryItem}>\n <state.root>\n {state.icon && <state.icon />}\n {state.root.children}\n {getExpandIcon(state)}\n </state.root>\n </NavCategoryItemProvider>\n );\n};\n"],"names":["renderNavCategoryItem_unstable","getExpandIcon","state","assertSlots","expandIcon","expandIconMotion","_jsx","contextValues","NavCategoryItemProvider","value","navCategoryItem","_jsxs","root","icon","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BaA;;;eAAAA;;;4BA3Bb;gCAE4B;wCAEY;AAExC,MAAMC,gBAAgB,CAACC;IACrBC,IAAAA,2BAAAA,EAAkCD;IAElC,IAAI,CAACA,MAAME,UAAU,EAAE;QACrB,OAAO;IACT;IAEA,IAAI,CAACF,MAAMG,gBAAgB,EAAE;QAC3B,OAAA,WAAA,GAAOC,IAAAA,eAAA,EAACJ,MAAME,UAAU,EAAA,CAAA;IAC1B;IAEA,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACJ,MAAMG,gBAAgB,EAAA;kBACrB,WAAA,GAAAC,IAAAA,eAAA,EAACJ,MAAME,UAAU,EAAA,CAAA;;AAGvB;AAKO,MAAMJ,iCAAiC,CAC5CE,OACAK;IAEAJ,IAAAA,2BAAAA,EAAkCD;IAElC,OAAA,WAAA,GACEI,IAAAA,eAAA,EAACE,+CAAAA,EAAAA;QAAwBC,OAAOF,cAAcG,eAAe;kBAC3D,WAAA,GAAAC,IAAAA,gBAAA,EAACT,MAAMU,IAAI,EAAA;;gBACRV,MAAMW,IAAI,IAAA,WAAA,GAAIP,IAAAA,eAAA,EAACJ,MAAMW,IAAI,EAAA,CAAA;gBACzBX,MAAMU,IAAI,CAACE,QAAQ;gBACnBb,cAAcC;;;;AAIvB"}
|
|
@@ -12,8 +12,35 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _reacticons = require("@fluentui/react-icons");
|
|
15
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
15
16
|
const _NavCategoryContext = require("../NavCategoryContext");
|
|
16
17
|
const _NavContext = require("../NavContext");
|
|
18
|
+
const ExpandIconMotion = (0, _reactmotion.createPresenceComponent)(()=>{
|
|
19
|
+
const keyframes = [
|
|
20
|
+
{
|
|
21
|
+
transform: 'rotate(0deg) translate3D(0, 0, 0)'
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
transform: 'rotate(180deg) translate3D(0, 0, 0)'
|
|
25
|
+
}
|
|
26
|
+
];
|
|
27
|
+
const duration = _reactmotion.motionTokens.durationFast;
|
|
28
|
+
const easing = _reactmotion.motionTokens.curveEasyEase;
|
|
29
|
+
return {
|
|
30
|
+
enter: {
|
|
31
|
+
keyframes,
|
|
32
|
+
duration,
|
|
33
|
+
easing
|
|
34
|
+
},
|
|
35
|
+
exit: {
|
|
36
|
+
keyframes: [
|
|
37
|
+
...keyframes
|
|
38
|
+
].reverse(),
|
|
39
|
+
duration,
|
|
40
|
+
easing
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
});
|
|
17
44
|
const useNavCategoryItem_unstable = (props, ref)=>{
|
|
18
45
|
const { onClick, expandIcon, icon } = props;
|
|
19
46
|
const { open, value } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
|
|
@@ -35,7 +62,8 @@ const useNavCategoryItem_unstable = (props, ref)=>{
|
|
|
35
62
|
components: {
|
|
36
63
|
root: 'button',
|
|
37
64
|
icon: 'span',
|
|
38
|
-
expandIcon: 'span'
|
|
65
|
+
expandIcon: 'span',
|
|
66
|
+
expandIconMotion: ExpandIconMotion
|
|
39
67
|
},
|
|
40
68
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
|
|
41
69
|
ref,
|
|
@@ -48,11 +76,17 @@ const useNavCategoryItem_unstable = (props, ref)=>{
|
|
|
48
76
|
}),
|
|
49
77
|
expandIcon: _reactutilities.slot.always(expandIcon, {
|
|
50
78
|
defaultProps: {
|
|
51
|
-
children: /*#__PURE__*/ _react.createElement(_reacticons.
|
|
79
|
+
children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDown20Regular, null),
|
|
52
80
|
'aria-hidden': true
|
|
53
81
|
},
|
|
54
82
|
elementType: 'span'
|
|
55
83
|
}),
|
|
84
|
+
expandIconMotion: (0, _reactmotion.presenceMotionSlot)(props.expandIconMotion, {
|
|
85
|
+
elementType: ExpandIconMotion,
|
|
86
|
+
defaultProps: {
|
|
87
|
+
visible: open
|
|
88
|
+
}
|
|
89
|
+
}),
|
|
56
90
|
icon: _reactutilities.slot.optional(icon, {
|
|
57
91
|
elementType: 'span'
|
|
58
92
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\n\nconst ExpandIconMotion = createPresenceComponent(() => {\n const keyframes: Keyframe[] = [\n {\n transform: 'rotate(0deg) translate3D(0, 0, 0)',\n },\n {\n transform: 'rotate(180deg) translate3D(0, 0, 0)',\n },\n ];\n const duration = motionTokens.durationFast;\n const easing = motionTokens.curveEasyEase;\n\n return {\n enter: {\n keyframes,\n duration,\n easing,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing,\n },\n };\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n props: NavCategoryItemProps,\n ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n const { onClick, expandIcon, icon } = props;\n\n const { open, value } = useNavCategoryContext_unstable();\n\n const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n const onNavCategoryItemClick = useEventCallback(\n mergeCallbacks(onClick, event =>\n onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n ),\n );\n\n // don't fill the icon when it's open\n const selected = selectedCategoryValue === value && !open;\n // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n return {\n open,\n value,\n selected,\n components: {\n root: 'button',\n icon: 'span',\n expandIcon: 'span',\n expandIconMotion: ExpandIconMotion,\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n 'aria-current': validAriaCurrent,\n 'aria-expanded': open,\n ...props,\n onClick: onNavCategoryItemClick,\n }),\n { elementType: 'button' },\n ),\n expandIcon: slot.always(expandIcon, {\n defaultProps: {\n children: <ChevronDown20Regular />,\n 'aria-hidden': true,\n },\n elementType: 'span',\n }),\n expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n elementType: ExpandIconMotion,\n defaultProps: {\n visible: open,\n },\n }),\n icon: slot.optional(icon, {\n elementType: 'span',\n }),\n density,\n };\n};\n"],"names":["useNavCategoryItem_unstable","ExpandIconMotion","createPresenceComponent","keyframes","transform","duration","motionTokens","durationFast","easing","curveEasyEase","enter","exit","reverse","props","ref","onClick","expandIcon","icon","open","value","useNavCategoryContext_unstable","onRequestNavCategoryItemToggle","selectedCategoryValue","density","useNavContext_unstable","onNavCategoryItemClick","useEventCallback","mergeCallbacks","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","slot","always","getIntrinsicElementProps","elementType","defaultProps","children","React","createElement","ChevronDown20Regular","presenceMotionSlot","visible","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4CaA;;;eAAAA;;;;iEA5CU;gCAC0D;4BAC5C;6BACqC;oCAG3B;4BACR;AAEvC,MAAMC,mBAAmBC,IAAAA,oCAAAA,EAAwB;IAC/C,MAAMC,YAAwB;QAC5B;YACEC,WAAW;QACb;QACA;YACEA,WAAW;QACb;KACD;IACD,MAAMC,WAAWC,yBAAAA,CAAaC,YAAY;IAC1C,MAAMC,SAASF,yBAAAA,CAAaG,aAAa;IAEzC,OAAO;QACLC,OAAO;YACLP;YACAE;YACAG;QACF;QACAG,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCP;YACAG;QACF;IACF;AACF;AAWO,MAAMR,8BAA8B,CACzCa,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGC,IAAAA,kDAAAA;IAExB,MAAM,EAAEC,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGC,IAAAA,kCAAAA;IAEtF,MAAMC,yBAAyBC,IAAAA,gCAAAA,EAC7BC,IAAAA,8BAAAA,EAAeZ,SAASa,CAAAA,QACtBP,+BAA+BO,OAAO;YAAEC,MAAM;YAASD;YAAOT,OAAO;YAAIW,eAAeX;QAAM;IAIlG,qCAAqC;IACrC,MAAMY,WAAWT,0BAA0BH,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMc,mBAAqCD,YAAY,CAACb,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAY;QACAE,YAAY;YACVC,MAAM;YACNjB,MAAM;YACND,YAAY;YACZmB,kBAAkBlC;QACpB;QACAiC,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCxB;YACA,gBAAgBkB;YAChB,iBAAiBd;YACjB,GAAGL,KAAK;YACRE,SAASU;QACX,IACA;YAAEc,aAAa;QAAS;QAE1BvB,YAAYoB,oBAAAA,CAAKC,MAAM,CAACrB,YAAY;YAClCwB,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,gCAAAA,EAAAA;gBACX,eAAe;YACjB;YACAL,aAAa;QACf;QACAJ,kBAAkBU,IAAAA,+BAAAA,EAAmBhC,MAAMsB,gBAAgB,EAAE;YAC3DI,aAAatC;YACbuC,cAAc;gBACZM,SAAS5B;YACX;QACF;QACAD,MAAMmB,oBAAAA,CAAKW,QAAQ,CAAC9B,MAAM;YACxBsB,aAAa;QACf;QACAhB;IACF;AACF"}
|
|
@@ -24,7 +24,8 @@ const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
|
|
|
24
24
|
const navCategoryItemClassNames = {
|
|
25
25
|
root: 'fui-NavCategoryItem',
|
|
26
26
|
icon: 'fui-NavCategoryItem__icon',
|
|
27
|
-
expandIcon: 'fui-NavCategoryItem__expandIcon'
|
|
27
|
+
expandIcon: 'fui-NavCategoryItem__expandIcon',
|
|
28
|
+
expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'
|
|
28
29
|
};
|
|
29
30
|
const useExpandIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
30
31
|
base: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n root: 'fui-NavCategoryItem',\n icon: 'fui-NavCategoryItem__icon',\n expandIcon: 'fui-NavCategoryItem__expandIcon'\n};\nconst useExpandIconStyles = makeStyles({\n base: {\n marginInlineStart: 'auto',\n height: '20px'\n },\n open: {\n transform: 'rotate(90deg)'\n },\n selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n base: {\n width: '100%'\n }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const smallStyles = useSmallStyles();\n const defaultRootClassName = useRootDefaultClassName();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const iconStyles = useIconStyles();\n const expandIconStyles = useExpandIconStyles();\n const { selected, open, density } = state;\n state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);\n if (state.icon) {\n state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n }\n return state;\n};\n"],"names":["navCategoryItemClassNames","useNavCategoryItemStyles_unstable","useRootStyles","root","icon","expandIcon","useExpandIconStyles","__styles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","a9b677","state","rootStyles","smallStyles","useSmallStyles","defaultRootClassName","useRootDefaultClassName","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","iconStyles","useIconStyles","expandIconStyles","density","className","mergeClasses"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n root: 'fui-NavCategoryItem',\n icon: 'fui-NavCategoryItem__icon',\n expandIcon: 'fui-NavCategoryItem__expandIcon',\n expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'\n};\nconst useExpandIconStyles = makeStyles({\n base: {\n marginInlineStart: 'auto',\n height: '20px'\n },\n open: {\n transform: 'rotate(90deg)'\n },\n selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n base: {\n width: '100%'\n }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const smallStyles = useSmallStyles();\n const defaultRootClassName = useRootDefaultClassName();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const iconStyles = useIconStyles();\n const expandIconStyles = useExpandIconStyles();\n const { selected, open, density } = state;\n state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);\n if (state.icon) {\n state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n }\n return state;\n};\n"],"names":["navCategoryItemClassNames","useNavCategoryItemStyles_unstable","useRootStyles","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","__styles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","a9b677","state","rootStyles","smallStyles","useSmallStyles","defaultRootClassName","useRootDefaultClassName","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","iconStyles","useIconStyles","expandIconStyles","density","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,yBAAyB;eAAzBA;;IAyBIC,iCAAiC;eAAjCA;;IAPAC,aAAa;eAAbA;;;uBArBwB;uCAEoE;AACtG,MAAMF,4BAA4B;IACrCG,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACtB;AACA,MAAMC,sBAAmB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,MAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAYjB,MAAMjB,gBAAa,WAAA,GAAGM,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAW,QAAA;IAAA;AAAA,GAAA;IAAAD,GAAA;QAAA;KAAA;AAAA;AAOtB,MAAMlB,oCAAqCoB,CAAAA;IAClD;IACA,MAAMC,aAAapB;IACnB,MAAMqB,cAAcC,IAAAA,qCAAc;IAClC,MAAMC,uBAAuBC,IAAAA,8CAAuB;IACpD,MAAMC,gBAAgBC,IAAAA,uCAAgB;IACtC,MAAMC,kBAAkBC,IAAAA,yCAAkB;IAC1C,MAAMC,aAAaC,IAAAA,oCAAa;IAChC,MAAMC,mBAAmB1B;IACzB,MAAM,EAAEO,QAAQ,EAAEF,IAAI,EAAEsB,OAAAA,EAAS,GAAGb;IACpCA,MAAMlB,IAAI,CAACgC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,0BAA0BG,IAAI,EAAEsB,sBAAsBH,WAAWb,IAAI,EAAEyB,YAAY,WAAWX,YAAYpB,IAAI,EAAEW,YAAYF,SAAS,SAASiB,gBAAgBpB,IAAI,EAAEK,YAAYF,SAAS,SAASe,cAAcb,QAAQ,EAAEO,MAAMlB,IAAI,CAACgC,SAAS;IAClRd,MAAMhB,UAAU,CAAC8B,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,0BAA0BK,UAAU,EAAE4B,iBAAiBxB,IAAI,EAAEY,MAAMT,IAAI,IAAIqB,iBAAiBrB,IAAI,EAAES,MAAMhB,UAAU,CAAC8B,SAAS;IACtK,IAAId,MAAMjB,IAAI,EAAE;QACZiB,MAAMjB,IAAI,CAAC+B,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,0BAA0BI,IAAI,EAAE2B,WAAWtB,IAAI,EAAEK,YAAYiB,WAAWjB,QAAQ,EAAEO,MAAMjB,IAAI,CAAC+B,SAAS;IAC9I;IACA,OAAOd;AACX"}
|
|
@@ -48,6 +48,7 @@ const useNavSubItemStyles_unstable = (state)=>{
|
|
|
48
48
|
const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
|
|
49
49
|
const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
|
|
50
50
|
const { selected, density } = state;
|
|
51
|
-
|
|
51
|
+
const isSmallDensity = density === 'small';
|
|
52
|
+
state.root.className = (0, _react.mergeClasses)(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
|
|
52
53
|
return state;
|
|
53
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px'\n },\n smallBase: {\n paddingInlineStart: '40px'\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n }\n }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n const { selected, density } = state;\n state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName,
|
|
1
|
+
{"version":3,"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px'\n },\n smallBase: {\n paddingInlineStart: '40px'\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n }\n }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n const { selected, density } = state;\n const isSmallDensity = density === 'small';\n state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n return state;\n};\n"],"names":["navSubItemClassNames","useNavSubItemStyles_unstable","root","useNavSubItemSpecificStyles","__styles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","state","rootDefaultClassName","useRootDefaultClassName","smallStyles","useSmallStyles","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAoBIC,4BAA4B;eAA5BA;;;uBAtBwB;uCACoE;AACtG,MAAMD,uBAAuB;IAChCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,8BAA2B,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,SAAA;IAAA;IAAAC,WAAA;QAAAD,SAAA;IAAA;IAAAE,mBAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAe7B,MAAMT,+BAAgCU,CAAAA;IAC7C;IACA,MAAMC,uBAAuBC,IAAAA,8CAAuB;IACpD,MAAMC,cAAcC,IAAAA,qCAAc;IAClC,MAAMC,gBAAgBC,IAAAA,uCAAgB;IACtC,MAAMC,kBAAkBC,IAAAA,yCAAkB;IAC1C,MAAMC,2BAA2BjB;IACjC,MAAM,EAAEkB,QAAQ,EAAEC,OAAAA,EAAS,GAAGX;IAC9B,MAAMY,iBAAiBD,YAAY;IACnCX,MAAMT,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,qBAAqBE,IAAI,EAAEU,sBAAsBW,kBAAkBT,YAAYZ,IAAI,EAAEqB,kBAAkBH,yBAAyBb,SAAS,EAAEa,yBAAyBf,IAAI,EAAEgB,YAAYH,gBAAgBb,IAAI,EAAEgB,YAAYL,cAAcK,QAAQ,EAAEA,YAAYD,yBAAyBZ,iBAAiB,EAAEG,MAAMT,IAAI,CAACsB,SAAS;IAChW,OAAOb;AACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavSubItemGroupSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\n/**\n * State used in rendering NavSubItemGroup\n */\nexport type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavDensity } from '../Nav/Nav.types';\n\n/**\n * Context value for NavSubItemGroup\n */\nexport type NavSubItemGroupCollapseMotionParams = {\n /**\n * The number of items in the NavSubItemGroup\n */\n items?: number;\n\n /**\n * The density of the NavItem\n */\n density?: NavDensity;\n};\n\nexport type NavSubItemGroupSlots = {\n /**\n * The root element\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Collapse motion slot\n */\n collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;\n};\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\n/**\n * State used in rendering NavSubItemGroup\n */\nexport type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAoCA;;CAEC"}
|
|
@@ -12,7 +12,7 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
13
|
const renderNavSubItemGroup_unstable = (state)=>{
|
|
14
14
|
(0, _reactutilities.assertSlots)(state);
|
|
15
|
-
return state.
|
|
16
|
-
children: state.root
|
|
17
|
-
}) :
|
|
15
|
+
return state.collapseMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.collapseMotion, {
|
|
16
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
|
|
17
|
+
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItemGroup/renderNavSubItemGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';\n\n/**\n * Render the final JSX of NavSubItemGroup\n */\nexport const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState) => {\n assertSlots<NavSubItemGroupSlots>(state);\n\n return state.
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItemGroup/renderNavSubItemGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';\n\n/**\n * Render the final JSX of NavSubItemGroup\n */\nexport const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState) => {\n assertSlots<NavSubItemGroupSlots>(state);\n\n return state.collapseMotion ? (\n <state.collapseMotion>\n <state.root />\n </state.collapseMotion>\n ) : (\n <state.root />\n );\n};\n"],"names":["renderNavSubItemGroup_unstable","state","assertSlots","collapseMotion","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,iCAAiC,CAACC;IAC7CC,IAAAA,2BAAAA,EAAkCD;IAElC,OAAOA,MAAME,cAAc,GAAA,WAAA,GACzBC,IAAAA,eAAA,EAACH,MAAME,cAAc,EAAA;kBACnB,WAAA,GAAAC,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;uBAGbD,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;AAEf"}
|
|
@@ -11,22 +11,68 @@ Object.defineProperty(exports, "useNavSubItemGroup_unstable", {
|
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
14
15
|
const _NavCategoryContext = require("../NavCategoryContext");
|
|
16
|
+
const _NavContext = require("../NavContext");
|
|
17
|
+
const smallSize = 28; // 28px for small density
|
|
18
|
+
const largeSize = 40; // 40px for large density
|
|
19
|
+
const NavGroupMotion = (0, _reactmotion.createPresenceComponent)(({ items, density })=>{
|
|
20
|
+
const isSmallDensity = density === 'small';
|
|
21
|
+
const height = items ? isSmallDensity ? items * smallSize : items * largeSize : 0;
|
|
22
|
+
const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large
|
|
23
|
+
const keyframes = [
|
|
24
|
+
{
|
|
25
|
+
opacity: 0,
|
|
26
|
+
minHeight: 0,
|
|
27
|
+
height: 0
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
opacity: 1,
|
|
31
|
+
minHeight: `${height}px`,
|
|
32
|
+
height: `${height}px`
|
|
33
|
+
}
|
|
34
|
+
];
|
|
35
|
+
const baseDuration = _reactmotion.motionTokens.durationFast + (items || 0) * durationPerItem;
|
|
36
|
+
const maxDuration = _reactmotion.motionTokens.durationUltraSlow;
|
|
37
|
+
const duration = baseDuration > maxDuration ? maxDuration : baseDuration;
|
|
38
|
+
return {
|
|
39
|
+
enter: {
|
|
40
|
+
keyframes,
|
|
41
|
+
duration,
|
|
42
|
+
easing: _reactmotion.motionTokens.curveDecelerateMid
|
|
43
|
+
},
|
|
44
|
+
exit: {
|
|
45
|
+
keyframes: [
|
|
46
|
+
...keyframes
|
|
47
|
+
].reverse(),
|
|
48
|
+
duration,
|
|
49
|
+
easing: _reactmotion.motionTokens.curveAccelerateMin
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
});
|
|
15
53
|
const useNavSubItemGroup_unstable = (props, ref)=>{
|
|
16
54
|
const { open } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
|
|
17
|
-
|
|
18
|
-
// const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });
|
|
19
|
-
// const navigation = useAccordionContext_unstable(ctx => ctx.navigation);
|
|
55
|
+
const { density } = (0, _NavContext.useNavContext_unstable)();
|
|
20
56
|
return {
|
|
21
57
|
open,
|
|
22
58
|
components: {
|
|
23
|
-
root: 'div'
|
|
59
|
+
root: 'div',
|
|
60
|
+
collapseMotion: NavGroupMotion
|
|
24
61
|
},
|
|
25
62
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
26
63
|
...props,
|
|
27
64
|
ref
|
|
28
65
|
}), {
|
|
29
66
|
elementType: 'div'
|
|
67
|
+
}),
|
|
68
|
+
collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
|
|
69
|
+
elementType: NavGroupMotion,
|
|
70
|
+
defaultProps: {
|
|
71
|
+
visible: open,
|
|
72
|
+
unmountOnExit: true,
|
|
73
|
+
items: _react.Children.count(props.children),
|
|
74
|
+
density
|
|
75
|
+
}
|
|
30
76
|
})
|
|
31
77
|
};
|
|
32
78
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport
|
|
1
|
+
{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type {\n NavSubItemGroupCollapseMotionParams,\n NavSubItemGroupProps,\n NavSubItemGroupState,\n} from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\n\nconst smallSize = 28; // 28px for small density\nconst largeSize = 40; // 40px for large density\n\nconst NavGroupMotion = createPresenceComponent(({ items, density }: NavSubItemGroupCollapseMotionParams) => {\n const isSmallDensity = density === 'small';\n const height = items ? (isSmallDensity ? items * smallSize : items * largeSize) : 0;\n const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large\n const keyframes: Keyframe[] = [\n {\n opacity: 0,\n minHeight: 0,\n height: 0,\n },\n {\n opacity: 1,\n minHeight: `${height}px`,\n height: `${height}px`,\n },\n ];\n const baseDuration = motionTokens.durationFast + (items || 0) * durationPerItem;\n const maxDuration = motionTokens.durationUltraSlow;\n const duration = baseDuration > maxDuration ? maxDuration : baseDuration;\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n props: NavSubItemGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n const { open } = useNavCategoryContext_unstable();\n const { density } = useNavContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n collapseMotion: NavGroupMotion,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: NavGroupMotion,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n items: React.Children.count(props.children),\n density,\n },\n }),\n };\n};\n"],"names":["useNavSubItemGroup_unstable","smallSize","largeSize","NavGroupMotion","createPresenceComponent","items","density","isSmallDensity","height","durationPerItem","keyframes","opacity","minHeight","baseDuration","motionTokens","durationFast","maxDuration","durationUltraSlow","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","props","ref","open","useNavCategoryContext_unstable","useNavContext_unstable","components","root","collapseMotion","slot","always","getIntrinsicElementProps","elementType","presenceMotionSlot","defaultProps","visible","unmountOnExit","React","Children","count","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0DaA;;;eAAAA;;;;iEA1DU;gCACwB;6BAC2B;oCAO3B;4BACR;AAEvC,MAAMC,YAAY,IAAI,yBAAyB;AAC/C,MAAMC,YAAY,IAAI,yBAAyB;AAE/C,MAAMC,iBAAiBC,IAAAA,oCAAAA,EAAwB,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAuC;IACrG,MAAMC,iBAAiBD,YAAY;IACnC,MAAME,SAASH,QAASE,iBAAiBF,QAAQJ,YAAYI,QAAQH,YAAa;IAClF,MAAMO,kBAAkBF,iBAAiB,KAAK,IAAI,0CAA0C;IAC5F,MAAMG,YAAwB;QAC5B;YACEC,SAAS;YACTC,WAAW;YACXJ,QAAQ;QACV;QACA;YACEG,SAAS;YACTC,WAAW,CAAC,EAAEJ,OAAO,EAAE,CAAC;YACxBA,QAAQ,CAAC,EAAEA,OAAO,EAAE,CAAC;QACvB;KACD;IACD,MAAMK,eAAeC,yBAAAA,CAAaC,YAAY,GAAG,AAACV,CAAAA,SAAS,CAAA,IAAKI;IAChE,MAAMO,cAAcF,yBAAAA,CAAaG,iBAAiB;IAClD,MAAMC,WAAWL,eAAeG,cAAcA,cAAcH;IAE5D,OAAO;QACLM,OAAO;YACLT;YACAQ;YACAE,QAAQN,yBAAAA,CAAaO,kBAAkB;QACzC;QACAC,MAAM;YACJZ,WAAW;mBAAIA;aAAU,CAACa,OAAO;YACjCL;YACAE,QAAQN,yBAAAA,CAAaU,kBAAkB;QACzC;IACF;AACF;AAWO,MAAMxB,8BAA8B,CACzCyB,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGC,IAAAA,kDAAAA;IACjB,MAAM,EAAEtB,OAAO,EAAE,GAAGuB,IAAAA,kCAAAA;IAEpB,OAAO;QACLF;QACAG,YAAY;YACVC,MAAM;YACNC,gBAAgB7B;QAClB;QAEA4B,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,GAAGV,KAAK;YACRC;QACF,IACA;YAAEU,aAAa;QAAM;QAGvBJ,gBAAgBK,IAAAA,+BAAAA,EAAmBZ,MAAMO,cAAc,EAAE;YACvDI,aAAajC;YACbmC,cAAc;gBACZC,SAASZ;gBACTa,eAAe;gBACfnC,OAAOoC,OAAMC,QAAQ,CAACC,KAAK,CAAClB,MAAMmB,QAAQ;gBAC1CtC;YACF;QACF;IACF;AACF"}
|
|
@@ -23,13 +23,26 @@ const navSubItemGroupClassNames = {
|
|
|
23
23
|
/**
|
|
24
24
|
* Styles for the root slot
|
|
25
25
|
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
26
|
-
root: {
|
|
27
|
-
|
|
26
|
+
root: {
|
|
27
|
+
Bz10aip: "f1yj8dow",
|
|
28
|
+
B68tc82: 0,
|
|
29
|
+
Bmxbyg5: 0,
|
|
30
|
+
Bpg54ce: "f1a3p1vp"
|
|
31
|
+
}
|
|
32
|
+
}, {
|
|
33
|
+
d: [
|
|
34
|
+
".f1yj8dow{transform:translateZ(0);}",
|
|
35
|
+
[
|
|
36
|
+
".f1a3p1vp{overflow:hidden;}",
|
|
37
|
+
{
|
|
38
|
+
p: -1
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
]
|
|
42
|
+
});
|
|
28
43
|
const useNavSubItemGroupStyles_unstable = (state)=>{
|
|
29
44
|
'use no memo';
|
|
30
45
|
const styles = useStyles();
|
|
31
46
|
state.root.className = (0, _react.mergeClasses)(navSubItemGroupClassNames.root, styles.root, state.root.className);
|
|
32
|
-
// TODO Add class names to slots, for example:
|
|
33
|
-
// state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
|
|
34
47
|
return state;
|
|
35
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n
|
|
1
|
+
{"version":3,"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n transform: 'translateZ(0)',\n overflow: 'hidden'\n }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["navSubItemGroupClassNames","useNavSubItemGroupStyles_unstable","root","useStyles","__styles","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,yBAAyB;eAAzBA;;IAaIC,iCAAiC;eAAjCA;;;uBAdwB;AAClC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAQX,MAAMT,oCAAqCU,CAAAA;IAClD;IACA,MAAMC,SAAST;IACfQ,MAAMT,IAAI,CAACW,SAAS,GAAGC,IAAAA,mBAAY,EAACd,0BAA0BE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACrG,OAAOF;AACX"}
|
|
@@ -8,25 +8,33 @@ Object.defineProperty(exports, "renderSplitNavItem_unstable", {
|
|
|
8
8
|
return renderSplitNavItem_unstable;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
11
12
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
13
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
12
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
+
/**
|
|
16
|
+
* @internal
|
|
17
|
+
*
|
|
18
|
+
* Helper function to render button slots
|
|
19
|
+
*/ const renderButtonSlot = (Button, ButtonTooltip)=>{
|
|
20
|
+
if (!Button) {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
if (ButtonTooltip) {
|
|
24
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(ButtonTooltip, {
|
|
25
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Button, {})
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(Button, {});
|
|
29
|
+
};
|
|
13
30
|
const renderSplitNavItem_unstable = (state)=>{
|
|
14
31
|
(0, _reactutilities.assertSlots)(state);
|
|
15
32
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
|
|
16
33
|
children: [
|
|
17
34
|
state.navItem && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.navItem, {}),
|
|
18
|
-
state.actionButton
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
state.actionButton && !state.actionButtonTooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.actionButton, {}),
|
|
22
|
-
state.toggleButton && state.toggleButtonTooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.toggleButtonTooltip, {
|
|
23
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.toggleButton, {})
|
|
24
|
-
}),
|
|
25
|
-
state.toggleButton && !state.toggleButtonTooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.toggleButton, {}),
|
|
26
|
-
state.menuButton && state.menuButtonTooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.menuButtonTooltip, {
|
|
27
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.menuButton, {})
|
|
28
|
-
}),
|
|
29
|
-
state.menuButton && !state.menuButtonTooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.menuButton, {})
|
|
35
|
+
renderButtonSlot(state.actionButton, state.actionButtonTooltip),
|
|
36
|
+
renderButtonSlot(state.menuButton, state.menuButtonTooltip),
|
|
37
|
+
renderButtonSlot(state.toggleButton, state.toggleButtonTooltip)
|
|
30
38
|
]
|
|
31
39
|
});
|
|
32
40
|
};
|