@fluentui/react-nav 9.3.12 → 9.3.14
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 -2
- package/lib/components/Hamburger/useHamburgerStyles.styles.js +21 -6
- package/lib/components/Hamburger/useHamburgerStyles.styles.js.map +1 -1
- package/lib/components/Hamburger/useHamburgerStyles.styles.raw.js +2 -2
- package/lib/components/Hamburger/useHamburgerStyles.styles.raw.js.map +1 -1
- package/lib/components/sharedNavStyles.styles.js +7 -7
- package/lib/components/sharedNavStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Hamburger/useHamburgerStyles.styles.js +23 -14
- package/lib-commonjs/components/Hamburger/useHamburgerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Hamburger/useHamburgerStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/Hamburger/useHamburgerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/sharedNavStyles.styles.js +7 -7
- package/lib-commonjs/components/sharedNavStyles.styles.js.map +1 -1
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,43 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-nav
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 11 Nov 2025 19:13:35 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.14)
|
|
8
|
+
|
|
9
|
+
Tue, 11 Nov 2025 19:13:35 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.13..@fluentui/react-nav_v9.3.14)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.17.6 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
16
|
+
- Bump @fluentui/react-button to v9.6.12 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v9.2.12 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
18
|
+
- Bump @fluentui/react-divider to v9.4.11 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
19
|
+
- Bump @fluentui/react-drawer to v9.10.9 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
20
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.3 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
21
|
+
- Bump @fluentui/react-motion to v9.11.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
22
|
+
- Bump @fluentui/react-motion-components-preview to v0.14.1 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
23
|
+
- Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
24
|
+
- Bump @fluentui/react-tabster to v9.26.10 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
25
|
+
- Bump @fluentui/react-tooltip to v9.8.11 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
27
|
+
|
|
28
|
+
## [9.3.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.13)
|
|
29
|
+
|
|
30
|
+
Thu, 06 Nov 2025 17:24:17 GMT
|
|
31
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.12..@fluentui/react-nav_v9.3.13)
|
|
32
|
+
|
|
33
|
+
### Patches
|
|
34
|
+
|
|
35
|
+
- Bump @fluentui/react-drawer to v9.10.8 ([PR #34705](https://github.com/microsoft/fluentui/pull/34705) by beachball)
|
|
36
|
+
- Bump @fluentui/react-motion-components-preview to v0.14.0 ([PR #34705](https://github.com/microsoft/fluentui/pull/34705) by beachball)
|
|
37
|
+
|
|
7
38
|
## [9.3.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.12)
|
|
8
39
|
|
|
9
|
-
Thu, 06 Nov 2025
|
|
40
|
+
Thu, 06 Nov 2025 15:01:23 GMT
|
|
10
41
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.11..@fluentui/react-nav_v9.3.12)
|
|
11
42
|
|
|
12
43
|
### Patches
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { __styles, mergeClasses
|
|
3
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
|
4
4
|
import { useButtonStyles_unstable } from '@fluentui/react-button';
|
|
5
5
|
import { navItemTokens } from '../sharedNavStyles.styles';
|
|
6
6
|
export const hamburgerClassNames = {
|
|
@@ -14,15 +14,30 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
14
14
|
root: {
|
|
15
15
|
w71qe1: "f1iuv45f",
|
|
16
16
|
De3pzq: "f1ctqxl6",
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
oivjwe:
|
|
20
|
-
|
|
17
|
+
Bgfg5da: 0,
|
|
18
|
+
B9xav0g: 0,
|
|
19
|
+
oivjwe: 0,
|
|
20
|
+
Bn0qgzm: 0,
|
|
21
|
+
B4g9neb: 0,
|
|
22
|
+
zhjwy3: 0,
|
|
23
|
+
wvpqe5: 0,
|
|
24
|
+
ibv6hh: 0,
|
|
25
|
+
u1mtju: 0,
|
|
26
|
+
h3c5rm: 0,
|
|
27
|
+
vrafjx: 0,
|
|
28
|
+
Bekrc4i: 0,
|
|
29
|
+
i8vvqc: 0,
|
|
30
|
+
g2u3we: 0,
|
|
31
|
+
icvyot: 0,
|
|
32
|
+
B4j52fo: 0,
|
|
33
|
+
irswps: "f3bhgqh",
|
|
21
34
|
Jwef8y: "f11oyicx",
|
|
22
35
|
ecr2s2: "f9fof1w"
|
|
23
36
|
}
|
|
24
37
|
}, {
|
|
25
|
-
d: [".f1iuv45f{text-decoration-line:none;}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".
|
|
38
|
+
d: [".f1iuv45f{text-decoration-line:none;}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", [".f3bhgqh{border:none;}", {
|
|
39
|
+
p: -2
|
|
40
|
+
}]],
|
|
26
41
|
h: [".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}"],
|
|
27
42
|
a: [".f9fof1w:active{background-color:var(--colorNeutralBackground4Pressed);}"]
|
|
28
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","
|
|
1
|
+
{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACbhC,wBAAwB,CAACgC,KAAK,CAAC;EAC/B,MAAMC,MAAM,GAAG5B,SAAS,CAAC,CAAC;EAC1B2B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,GAAGnC,YAAY,CAACG,mBAAmB,CAACC,IAAI,EAAE8B,MAAM,CAAC9B,IAAI,EAAE6B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,CAAC;EAChG,IAAIF,KAAK,CAAC5B,IAAI,EAAE;IACZ4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,GAAGnC,YAAY,CAACG,mBAAmB,CAACE,IAAI,EAAE4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,CAAC;EACvF;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { makeStyles, mergeClasses
|
|
2
|
+
import { makeStyles, mergeClasses } from '@griffel/react';
|
|
3
3
|
import { useButtonStyles_unstable } from '@fluentui/react-button';
|
|
4
4
|
import { navItemTokens } from '../sharedNavStyles.styles';
|
|
5
5
|
export const hamburgerClassNames = {
|
|
@@ -12,7 +12,7 @@ export const hamburgerClassNames = {
|
|
|
12
12
|
root: {
|
|
13
13
|
textDecorationLine: 'none',
|
|
14
14
|
backgroundColor: navItemTokens.backgroundColor,
|
|
15
|
-
|
|
15
|
+
border: 'none',
|
|
16
16
|
':hover': {
|
|
17
17
|
backgroundColor: navItemTokens.backgroundColorHover
|
|
18
18
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { ButtonSlots, 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;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAAsBC,wBAAwB,QAAQ,yBAAyB;AAG/E,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,MAAMC,sBAAmD;IAC9DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BK,MAAM;QACJG,oBAAoB;QACpBC,iBAAiBN,cAAcM,eAAe;QAC9CC,QAAQ;QACR,UAAU;YACRD,iBAAiBN,cAAcQ,oBAAoB;QACrD;QACA,WAAW;YACTF,iBAAiBN,cAAcS,sBAAsB;QACvD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEAZ,yBAAyBY;IACzB,MAAMC,SAASR;IAEfO,MAAMT,IAAI,CAACW,SAAS,GAAGf,aAAaG,oBAAoBC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE/F,IAAIF,MAAMR,IAAI,EAAE;QACdQ,MAAMR,IAAI,CAACU,SAAS,GAAGf,aAAaG,oBAAoBE,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IACpF;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -76,21 +76,21 @@ export const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
76
76
|
Bl18szs: 0,
|
|
77
77
|
Blrzh8d: "f3b9emi",
|
|
78
78
|
Bsft5z2: "f13zj6fq",
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
79
|
+
vikyaa: 0,
|
|
80
|
+
Brlscjf: 0,
|
|
81
|
+
vvp1qr: 0,
|
|
82
|
+
t65l24: "f1ak99p5",
|
|
83
|
+
rc3c53: "fmnu42u"
|
|
84
84
|
}
|
|
85
85
|
}, {
|
|
86
86
|
d: [".f1mdlcz9::after{position:absolute;}", ".fpil94b::after{animation-duration:var(--durationFaster);}", ".f90z1up::after{animation-fill-mode:both;}", ".f2ic3ny::after{animation-timing-function:var(--curveLinear);}", ".f1xz7mvd::after{animation-name:f1ayorr4;}", ".f3i5gj0::after{-webkit-margin-start:-16px;margin-inline-start:-16px;}", ".fi4v1pz::after{background-color:var(--colorCompoundBrandForeground1);}", ".f1tvrmnx::after{height:20px;}", ".f1p1ggug::after{width:4px;}", [".f3b9emi::after{border-radius:var(--borderRadiusCircular);}", {
|
|
87
87
|
p: -1
|
|
88
88
|
}], ".f13zj6fq::after{content:\"\";}"],
|
|
89
89
|
k: ["@keyframes f1ayorr4{0%{background:transparent;}100%{background:var(--colorCompoundBrandForeground1);}}"],
|
|
90
|
-
m: [["@media (forced-colors: active){.
|
|
90
|
+
m: [["@media (forced-colors: active){.f1ak99p5::after{outline:solid 2px var(--colorTransparentStroke);}}", {
|
|
91
91
|
p: -1,
|
|
92
92
|
m: "(forced-colors: active)"
|
|
93
|
-
}], ["@media (forced-colors: active){.
|
|
93
|
+
}], ["@media (forced-colors: active){.fmnu42u::after{outline-offset:-2px;}}", {
|
|
94
94
|
m: "(forced-colors: active)"
|
|
95
95
|
}]]
|
|
96
96
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","__resetStyles","__styles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","useSmallStyles","root","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useContentStyles","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useIndicatorStyles","base","E3zdtr","xr36ep","B67388b","Bitv4sc","Br128sd","rjyhj6","Bjyk6c5","Dlnsje","a2br6o","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","
|
|
1
|
+
{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","__resetStyles","__styles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","useSmallStyles","root","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useContentStyles","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useIndicatorStyles","base","E3zdtr","xr36ep","B67388b","Bitv4sc","Br128sd","rjyhj6","Bjyk6c5","Dlnsje","a2br6o","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","vikyaa","Brlscjf","vvp1qr","t65l24","rc3c53","k","m","useIconStyles","mc9l5x","zoa1oz","sshi5w","Bf4jedk","Bt984gj","Brf1p80","B68tc82","Bmxbyg5","Bpg54ce","B9gejnh","yr4pdu","Bvkmzld","mqdk8l","Gbjhqp","obb2bi","D0sxk3","Esdz9e","Bqil8sh","Bbom3er","djjtid","mz70lj","t6yez3","C9vb3z","ux3ctl","Ba906uv","hndn0g","cw2nnk","Bkztwl0","H8nmoi","ipgedg"],"sources":["sharedNavStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n// Styles shared by several nav components.\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background'\n }\n};\n/**\n * Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */ export const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`\n }\n});\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`\n }\n});\n/**\n * Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */ export const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong\n});\n/**\n * French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n */ export const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n background: 'transparent'\n },\n '100%': {\n background: tokens.colorCompoundBrandForeground1\n }\n },\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"'\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px'\n }\n }\n }\n});\n/**\n * Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */ export const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline'\n }\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent'\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected\n }\n }\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2\n },\n '100%': {\n opacity: 0,\n color: 'transparent'\n }\n }\n }\n }\n});\n"],"mappings":"AAAA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,aAAA,EAAAC,QAAA,QAA4C,gBAAgB;AAC5D;AACA,OAAO,MAAMC,aAAa,GAAG;EACzBC,kBAAkB,EAAE,GAAG;EACvBC,eAAe,EAAE,EAAE;EACnBC,cAAc,EAAE,CAAC;EACjBC,eAAe,EAAE,EAAE;EACnBC,eAAe,EAAET,MAAM,CAACU,uBAAuB;EAC/CC,oBAAoB,EAAEX,MAAM,CAACY,4BAA4B;EACzDC,sBAAsB,EAAEb,MAAM,CAACc,8BAA8B;EAC7DC,eAAe,EAAE;IACbC,iBAAiB,EAAEhB,MAAM,CAACiB,cAAc;IACxCC,iBAAiB,EAAE,MAAM;IACzBC,uBAAuB,EAAEnB,MAAM,CAACoB;EACpC,CAAC;EACDC,gBAAgB,EAAE;IACdC,kBAAkB,EAAEtB,MAAM,CAACiB,cAAc;IACzCM,wBAAwB,EAAEvB,MAAM,CAACoB,WAAW;IAC5CI,kBAAkB,EAAE;EACxB;AACJ,CAAC;AACD;AACA;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,gBAAGvB,aAAA,w5DA+B1C,CAAC;AACF,OAAO,MAAMwB,cAAc,gBAAGvB,QAAA;EAAAwB,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAI7B,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMC,gBAAgB,gBAAGhC,QAAA;EAAAiC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAP,CAAA;AAAA,CAEnC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMQ,kBAAkB,gBAAGtC,QAAA;EAAAuC,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA7B,CAAA;IAAAC,CAAA;EAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAA9B,CAAA;IAAA8B,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BrC,CAAC;AACF;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAG9D,QAAA;EAAAuC,IAAA;IAAAwB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAnD,QAAA;IAAAoD,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAT,MAAA;IAAAU,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA9D,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAA6B,CAAA;AAAA,CAgDhC,CAAC","ignoreList":[]}
|
|
@@ -29,16 +29,23 @@ const hamburgerClassNames = {
|
|
|
29
29
|
root: {
|
|
30
30
|
w71qe1: "f1iuv45f",
|
|
31
31
|
De3pzq: "f1ctqxl6",
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
wvpqe5:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
Bgfg5da: 0,
|
|
33
|
+
B9xav0g: 0,
|
|
34
|
+
oivjwe: 0,
|
|
35
|
+
Bn0qgzm: 0,
|
|
36
|
+
B4g9neb: 0,
|
|
37
|
+
zhjwy3: 0,
|
|
38
|
+
wvpqe5: 0,
|
|
39
|
+
ibv6hh: 0,
|
|
40
|
+
u1mtju: 0,
|
|
41
|
+
h3c5rm: 0,
|
|
42
|
+
vrafjx: 0,
|
|
43
|
+
Bekrc4i: 0,
|
|
44
|
+
i8vvqc: 0,
|
|
45
|
+
g2u3we: 0,
|
|
46
|
+
icvyot: 0,
|
|
47
|
+
B4j52fo: 0,
|
|
48
|
+
irswps: "f3bhgqh",
|
|
42
49
|
Jwef8y: "f11oyicx",
|
|
43
50
|
ecr2s2: "f9fof1w"
|
|
44
51
|
}
|
|
@@ -46,10 +53,12 @@ const hamburgerClassNames = {
|
|
|
46
53
|
d: [
|
|
47
54
|
".f1iuv45f{text-decoration-line:none;}",
|
|
48
55
|
".f1ctqxl6{background-color:var(--colorNeutralBackground4);}",
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
56
|
+
[
|
|
57
|
+
".f3bhgqh{border:none;}",
|
|
58
|
+
{
|
|
59
|
+
p: -2
|
|
60
|
+
}
|
|
61
|
+
]
|
|
53
62
|
],
|
|
54
63
|
h: [
|
|
55
64
|
".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useHamburgerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses
|
|
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,oCAAqCE,KAAK,IAAG;IACpD,aAAa;QACbhC,qCAAwB,EAACgC,KAAK,CAAC;IAC/B,MAAMC,MAAM,GAAG5B,SAAS,CAAC,CAAC;IAC1B2B,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;QACZ4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,OAAGnC,mBAAY,EAACG,mBAAmB,CAACE,IAAI,EAAE4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,CAAC;IACvF;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -30,7 +30,7 @@ const hamburgerClassNames = {
|
|
|
30
30
|
root: {
|
|
31
31
|
textDecorationLine: 'none',
|
|
32
32
|
backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColor,
|
|
33
|
-
|
|
33
|
+
border: 'none',
|
|
34
34
|
':hover': {
|
|
35
35
|
backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColorHover
|
|
36
36
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { ButtonSlots, 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;;;;;;;;;;;;IAQaI,mBAAAA;;;+BAyBAS;eAAAA;;;uBA/B4B,iBAAiB;6BACJ,yBAAyB;uCAGjD,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;IAEfO,MAAMT,IAAI,CAACW,SAAS,OAAGf,mBAAAA,EAAaG,oBAAoBC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE/F,IAAIF,MAAMR,IAAI,EAAE;QACdQ,MAAMR,IAAI,CAACU,SAAS,OAAGf,mBAAAA,EAAaG,oBAAoBE,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IACpF;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -116,11 +116,11 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
116
116
|
Bl18szs: 0,
|
|
117
117
|
Blrzh8d: "f3b9emi",
|
|
118
118
|
Bsft5z2: "f13zj6fq",
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
119
|
+
vikyaa: 0,
|
|
120
|
+
Brlscjf: 0,
|
|
121
|
+
vvp1qr: 0,
|
|
122
|
+
t65l24: "f1ak99p5",
|
|
123
|
+
rc3c53: "fmnu42u"
|
|
124
124
|
}
|
|
125
125
|
}, {
|
|
126
126
|
d: [
|
|
@@ -146,14 +146,14 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
146
146
|
],
|
|
147
147
|
m: [
|
|
148
148
|
[
|
|
149
|
-
"@media (forced-colors: active){.
|
|
149
|
+
"@media (forced-colors: active){.f1ak99p5::after{outline:solid 2px var(--colorTransparentStroke);}}",
|
|
150
150
|
{
|
|
151
151
|
p: -1,
|
|
152
152
|
m: "(forced-colors: active)"
|
|
153
153
|
}
|
|
154
154
|
],
|
|
155
155
|
[
|
|
156
|
-
"@media (forced-colors: active){.
|
|
156
|
+
"@media (forced-colors: active){.fmnu42u::after{outline-offset:-2px;}}",
|
|
157
157
|
{
|
|
158
158
|
m: "(forced-colors: active)"
|
|
159
159
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["sharedNavStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n// Styles shared by several nav components.\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background'\n }\n};\n/**\n * Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */ export const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`\n }\n});\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`\n }\n});\n/**\n * Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */ export const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong\n});\n/**\n * French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n */ export const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n background: 'transparent'\n },\n '100%': {\n background: tokens.colorCompoundBrandForeground1\n }\n },\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"'\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px'\n }\n }\n }\n});\n/**\n * Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */ export const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline'\n }\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent'\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected\n }\n }\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2\n },\n '100%': {\n opacity: 0,\n color: 'transparent'\n }\n }\n }\n }\n});\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","__resetStyles","__styles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","useSmallStyles","root","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useContentStyles","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useIndicatorStyles","base","E3zdtr","xr36ep","B67388b","Bitv4sc","Br128sd","rjyhj6","Bjyk6c5","Dlnsje","a2br6o","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","
|
|
1
|
+
{"version":3,"sources":["sharedNavStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n// Styles shared by several nav components.\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background'\n }\n};\n/**\n * Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */ export const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`\n }\n});\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`\n }\n});\n/**\n * Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */ export const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong\n});\n/**\n * French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n */ export const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n background: 'transparent'\n },\n '100%': {\n background: tokens.colorCompoundBrandForeground1\n }\n },\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"'\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px'\n }\n }\n }\n});\n/**\n * Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */ export const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline'\n }\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent'\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected\n }\n }\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2\n },\n '100%': {\n opacity: 0,\n color: 'transparent'\n }\n }\n }\n }\n});\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","__resetStyles","__styles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","useSmallStyles","root","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useContentStyles","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useIndicatorStyles","base","E3zdtr","xr36ep","B67388b","Bitv4sc","Br128sd","rjyhj6","Bjyk6c5","Dlnsje","a2br6o","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","vikyaa","Brlscjf","vvp1qr","t65l24","rc3c53","k","m","useIconStyles","mc9l5x","zoa1oz","sshi5w","Bf4jedk","Bt984gj","Brf1p80","B68tc82","Bmxbyg5","Bpg54ce","B9gejnh","yr4pdu","Bvkmzld","mqdk8l","Gbjhqp","obb2bi","D0sxk3","Esdz9e","Bqil8sh","Bbom3er","djjtid","mz70lj","t6yez3","C9vb3z","ux3ctl","Ba906uv","hndn0g","cw2nnk","Bkztwl0","H8nmoi","ipgedg"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-nav",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.14",
|
|
4
4
|
"description": "New fluentui react package",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,21 +18,21 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-aria": "^9.17.
|
|
22
|
-
"@fluentui/react-button": "^9.6.
|
|
23
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
24
|
-
"@fluentui/react-divider": "^9.4.
|
|
25
|
-
"@fluentui/react-drawer": "^9.10.
|
|
21
|
+
"@fluentui/react-aria": "^9.17.6",
|
|
22
|
+
"@fluentui/react-button": "^9.6.12",
|
|
23
|
+
"@fluentui/react-context-selector": "^9.2.12",
|
|
24
|
+
"@fluentui/react-divider": "^9.4.11",
|
|
25
|
+
"@fluentui/react-drawer": "^9.10.9",
|
|
26
26
|
"@fluentui/react-icons": "^2.0.245",
|
|
27
|
-
"@fluentui/react-jsx-runtime": "^9.3.
|
|
28
|
-
"@fluentui/react-motion": "^9.11.
|
|
29
|
-
"@fluentui/react-motion-components-preview": "^0.
|
|
30
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
31
|
-
"@fluentui/react-tabster": "^9.26.
|
|
27
|
+
"@fluentui/react-jsx-runtime": "^9.3.3",
|
|
28
|
+
"@fluentui/react-motion": "^9.11.4",
|
|
29
|
+
"@fluentui/react-motion-components-preview": "^0.14.1",
|
|
30
|
+
"@fluentui/react-shared-contexts": "^9.26.0",
|
|
31
|
+
"@fluentui/react-tabster": "^9.26.10",
|
|
32
32
|
"@fluentui/react-theme": "^9.2.0",
|
|
33
|
-
"@fluentui/react-tooltip": "^9.8.
|
|
34
|
-
"@fluentui/react-utilities": "^9.25.
|
|
35
|
-
"@griffel/react": "^1.5.
|
|
33
|
+
"@fluentui/react-tooltip": "^9.8.11",
|
|
34
|
+
"@fluentui/react-utilities": "^9.25.4",
|
|
35
|
+
"@griffel/react": "^1.5.32",
|
|
36
36
|
"@swc/helpers": "^0.5.1"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|