@fluentui/react-nav 0.0.0-nightly-20250623-0406.1 → 0.0.0-nightly-20250625-0407.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +28 -17
  2. package/lib/components/NavCategoryItem/useNavCategoryItem.js.map +1 -1
  3. package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js +41 -6
  4. package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js.map +1 -1
  5. package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js.map +1 -1
  6. package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js +55 -5
  7. package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js.map +1 -1
  8. package/package.json +15 -14
package/CHANGELOG.md CHANGED
@@ -1,30 +1,41 @@
1
1
  # Change Log - @fluentui/react-nav
2
2
 
3
- This log was last generated on Mon, 23 Jun 2025 04:22:52 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 25 Jun 2025 04:22:42 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250623-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v0.0.0-nightly-20250623-0406.1)
7
+ ## [0.0.0-nightly-20250625-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v0.0.0-nightly-20250625-0407.1)
8
8
 
9
- Mon, 23 Jun 2025 04:22:52 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.2..@fluentui/react-nav_v0.0.0-nightly-20250623-0406.1)
9
+ Wed, 25 Jun 2025 04:22:42 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.3..@fluentui/react-nav_v0.0.0-nightly-20250625-0407.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-aria to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
16
- - Bump @fluentui/react-button to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
17
- - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
18
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
19
- - Bump @fluentui/react-divider to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
20
- - Bump @fluentui/react-drawer to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
21
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
22
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
23
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
24
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
25
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
26
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
27
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250623-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ee2e9d992268a2db2c1100fb60ef008ce6815bed) by beachball)
15
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
16
+ - Bump @fluentui/react-button to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
17
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
18
+ - Bump @fluentui/react-divider to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
19
+ - Bump @fluentui/react-drawer to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
20
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
21
+ - Bump @fluentui/react-motion to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
22
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
23
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
24
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
25
+ - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
26
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
27
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
28
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250625-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6387e2f47278405dd849803e69fd04e3237fdb13) by beachball)
29
+
30
+ ## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.3)
31
+
32
+ Mon, 23 Jun 2025 15:49:48 GMT
33
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.2..@fluentui/react-nav_v9.1.3)
34
+
35
+ ### Patches
36
+
37
+ - Bump @fluentui/react-tooltip to v9.7.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
38
+ - Bump @fluentui/react-drawer to v9.8.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
28
39
 
29
40
  ## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.2)
30
41
 
package/lib/components/NavCategoryItem/useNavCategoryItem.js.map CHANGED
@@ -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 { ChevronRight20Regular } from '@fluentui/react-icons';\nimport { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\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 },\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: <ChevronRight20Regular />,\n 'aria-hidden': true,\n },\n elementType: 'span',\n }),\n icon: slot.optional(icon, {\n elementType: 'span',\n }),\n density,\n };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronRight20Regular","useNavCategoryContext_unstable","useNavContext_unstable","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","always","elementType","defaultProps","children","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAExB,MAAM,EAAEU,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGX;IAEtF,MAAMY,yBAAyBf,iBAC7BF,eAAeS,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;QACd;QACAc,MAAMvB,KAAKwB,MAAM,CACf1B,yBAAyB,UAAU;YACjCS;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAES,aAAa;QAAS;QAE1BhB,YAAYT,KAAKwB,MAAM,CAACf,YAAY;YAClCiB,cAAc;gBACZC,wBAAU,oBAACzB;gBACX,eAAe;YACjB;YACAuB,aAAa;QACf;QACAf,MAAMV,KAAK4B,QAAQ,CAAClB,MAAM;YACxBe,aAAa;QACf;QACAV;IACF;AACF,EAAE"}
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 { ChevronRight20Regular } from '@fluentui/react-icons';\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\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 },\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: <ChevronRight20Regular />,\n 'aria-hidden': true,\n },\n elementType: 'span',\n }),\n icon: slot.optional(icon, {\n elementType: 'span',\n }),\n density,\n };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronRight20Regular","useNavCategoryContext_unstable","useNavContext_unstable","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","always","elementType","defaultProps","children","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAExB,MAAM,EAAEU,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGX;IAEtF,MAAMY,yBAAyBf,iBAC7BF,eAAeS,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;QACd;QACAc,MAAMvB,KAAKwB,MAAM,CACf1B,yBAAyB,UAAU;YACjCS;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAES,aAAa;QAAS;QAE1BhB,YAAYT,KAAKwB,MAAM,CAACf,YAAY;YAClCiB,cAAc;gBACZC,wBAAU,oBAACzB;gBACX,eAAe;YACjB;YACAuB,aAAa;QACf;QACAf,MAAMV,KAAK4B,QAAQ,CAAClB,MAAM;YACxBe,aAAa;QACf;QACAV;IACF;AACF,EAAE"}
package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js CHANGED
@@ -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
- h: [".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}"],
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
  };
package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","navItemTokens","useRootDefaultClassName","tokens","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","useSplitNaveItemStyles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","d","p","h","a","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\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\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 },\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed\n }\n },\n baseNavItem: {\n // styles that we want to disagree with the default on\n display: 'flex',\n textTransform: 'none',\n alignSelf: 'stretch',\n textAlign: 'left',\n position: 'relative',\n justifyContent: 'start',\n gap: tokens.spacingVerticalL,\n backgroundColor: 'transparent'\n },\n baseSecondary: {\n minWidth: '28px',\n paddingInlineEnd: '12px',\n paddingInlineStart: '5px',\n paddingBlockStart: '5px',\n alignItems: 'start'\n },\n baseMedium: {\n paddingBlockStart: '9px'\n }\n});\n/**\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, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n }\n if (state.toggleButton) {\n state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n }\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
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":[]}
package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js.map CHANGED
@@ -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 { ChevronRight20Regular } from '@fluentui/react-icons';\nimport { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\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 },\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: <ChevronRight20Regular />,\n 'aria-hidden': true,\n },\n elementType: 'span',\n }),\n icon: slot.optional(icon, {\n elementType: 'span',\n }),\n density,\n };\n};\n"],"names":["useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","useNavCategoryContext_unstable","onRequestNavCategoryItemToggle","selectedCategoryValue","density","useNavContext_unstable","onNavCategoryItemClick","useEventCallback","mergeCallbacks","event","type","categoryValue","selected","validAriaCurrent","components","root","slot","always","getIntrinsicElementProps","elementType","defaultProps","children","React","createElement","ChevronRight20Regular","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCAC0D;4BAC3C;oCAES;4BACR;AAWhC,MAAMA,8BAA8B,CACzCC,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;QACd;QACAkB,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCvB;YACA,gBAAgBkB;YAChB,iBAAiBd;YACjB,GAAGL,KAAK;YACRE,SAASU;QACX,IACA;YAAEa,aAAa;QAAS;QAE1BtB,YAAYmB,oBAAAA,CAAKC,MAAM,CAACpB,YAAY;YAClCuB,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,iCAAAA,EAAAA;gBACX,eAAe;YACjB;YACAL,aAAa;QACf;QACArB,MAAMkB,oBAAAA,CAAKS,QAAQ,CAAC3B,MAAM;YACxBqB,aAAa;QACf;QACAf;IACF;AACF"}
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 { ChevronRight20Regular } from '@fluentui/react-icons';\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\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 },\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: <ChevronRight20Regular />,\n 'aria-hidden': true,\n },\n elementType: 'span',\n }),\n icon: slot.optional(icon, {\n elementType: 'span',\n }),\n density,\n };\n};\n"],"names":["useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","useNavCategoryContext_unstable","onRequestNavCategoryItemToggle","selectedCategoryValue","density","useNavContext_unstable","onNavCategoryItemClick","useEventCallback","mergeCallbacks","event","type","categoryValue","selected","validAriaCurrent","components","root","slot","always","getIntrinsicElementProps","elementType","defaultProps","children","React","createElement","ChevronRight20Regular","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCAC0D;4BAC3C;oCAES;4BACR;AAWhC,MAAMA,8BAA8B,CACzCC,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;QACd;QACAkB,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCvB;YACA,gBAAgBkB;YAChB,iBAAiBd;YACjB,GAAGL,KAAK;YACRE,SAASU;QACX,IACA;YAAEa,aAAa;QAAS;QAE1BtB,YAAYmB,oBAAAA,CAAKC,MAAM,CAACpB,YAAY;YAClCuB,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,iCAAAA,EAAAA;gBACX,eAAe;YACjB;YACAL,aAAa;QACf;QACArB,MAAMkB,oBAAAA,CAAKS,QAAQ,CAAC3B,MAAM;YACxBqB,aAAa;QACf;QACAf;IACF;AACF"}
package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js CHANGED
@@ -33,6 +33,13 @@ const splitNavItemClassNames = {
33
33
  // Don't use makeResetStyles here because the sub components call it once and
34
34
  // This links says that makeResetStyles should only be called once per element
35
35
  // https://griffel.js.org/react/api/make-reset-styles/#limitations
36
+ const { actionButton, toggleButton, menuButton } = splitNavItemClassNames;
37
+ const buttonHoverStyles = {
38
+ [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {
39
+ opacity: 1,
40
+ pointerEvents: 'auto'
41
+ }
42
+ };
36
43
  /**
37
44
  * Styles for the root slot
38
45
  */ const useSplitNaveItemStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -53,6 +60,10 @@ const splitNavItemClassNames = {
53
60
  Bkqvd7p: "f1e9ux7i",
54
61
  Bmy1vo4: "f1xfaukr",
55
62
  Jwef8y: "f11oyicx",
63
+ xwko9w: "f8z0t4e",
64
+ mcc9px: "f9ueil3",
65
+ B02v5zz: "f1g2hb8n",
66
+ i4x37a: "fpq6je",
56
67
  ecr2s2: "f9fof1w"
57
68
  },
58
69
  baseNavItem: {
@@ -79,6 +90,23 @@ const splitNavItemClassNames = {
79
90
  },
80
91
  baseMedium: {
81
92
  rjzwhg: "fjtod8q"
93
+ },
94
+ baseLarge: {
95
+ rjzwhg: "f16gijt3"
96
+ },
97
+ hoverAction: {
98
+ abs64n: "fk73vx1",
99
+ Bkecrkj: "f1aehjj5",
100
+ Bn62ygk: 0,
101
+ Cwk7ip: 0,
102
+ B3o57yi: 0,
103
+ Bmy1vo4: 0,
104
+ Bkqvd7p: 0,
105
+ Bi2q7bf: [
106
+ "fr12795",
107
+ "fcl876f"
108
+ ],
109
+ Es3by: "f1gqqdtu"
82
110
  }
83
111
  }, {
84
112
  d: [
@@ -119,10 +147,32 @@ const splitNavItemClassNames = {
119
147
  ".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}",
120
148
  ".fibmr9j{padding-block-start:5px;}",
121
149
  ".f1s2louj{align-items:start;}",
122
- ".fjtod8q{padding-block-start:9px;}"
150
+ ".fjtod8q{padding-block-start:9px;}",
151
+ ".f16gijt3{padding-block-start:12px;}",
152
+ ".fk73vx1{opacity:0;}",
153
+ ".f1aehjj5{pointer-events:none;}",
154
+ [
155
+ ".fr12795{transition:opacity 150ms cubic-bezier(0.33,0,0.67,1);}",
156
+ {
157
+ p: -1
158
+ }
159
+ ],
160
+ [
161
+ ".fcl876f{transition:opacity 150ms cubic-bezier(0.33, 0, 0.67, 1);}",
162
+ {
163
+ p: -1
164
+ }
165
+ ],
166
+ ".f1gqqdtu{will-change:opacity;}"
123
167
  ],
124
168
  h: [
125
- ".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}"
169
+ ".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}",
170
+ ".f8z0t4e:hover .fui-SplitNavItem__actionButton,.f8z0t4e:hover .fui-SplitNavItem__toggleButton,.f8z0t4e:hover .fui-SplitNavItem__menuButton{opacity:1;}",
171
+ ".f9ueil3:hover .fui-SplitNavItem__actionButton,.f9ueil3:hover .fui-SplitNavItem__toggleButton,.f9ueil3:hover .fui-SplitNavItem__menuButton{pointer-events:auto;}"
172
+ ],
173
+ w: [
174
+ ".f1g2hb8n:focus-within .fui-SplitNavItem__actionButton,.f1g2hb8n:focus-within .fui-SplitNavItem__toggleButton,.f1g2hb8n:focus-within .fui-SplitNavItem__menuButton{opacity:1;}",
175
+ ".fpq6je:focus-within .fui-SplitNavItem__actionButton,.fpq6je:focus-within .fui-SplitNavItem__toggleButton,.fpq6je:focus-within .fui-SplitNavItem__menuButton{pointer-events:auto;}"
126
176
  ],
127
177
  a: [
128
178
  ".f9fof1w:active{background-color:var(--colorNeutralBackground4Pressed);}"
@@ -137,13 +187,13 @@ const useSplitNavItemStyles_unstable = (state)=>{
137
187
  state.navItem.className = (0, _react.mergeClasses)(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
138
188
  }
139
189
  if (state.actionButton) {
140
- state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
190
+ state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
141
191
  }
142
192
  if (state.toggleButton) {
143
- state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
193
+ state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
144
194
  }
145
195
  if (state.menuButton) {
146
- state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
196
+ state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
147
197
  }
148
198
  return state;
149
199
  };
package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\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\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 },\n ':active': {\n backgroundColor: navItemTokens.backgroundColorPressed\n }\n },\n baseNavItem: {\n // styles that we want to disagree with the default on\n display: 'flex',\n textTransform: 'none',\n alignSelf: 'stretch',\n textAlign: 'left',\n position: 'relative',\n justifyContent: 'start',\n gap: tokens.spacingVerticalL,\n backgroundColor: 'transparent'\n },\n baseSecondary: {\n minWidth: '28px',\n paddingInlineEnd: '12px',\n paddingInlineStart: '5px',\n paddingBlockStart: '5px',\n alignItems: 'start'\n },\n baseMedium: {\n paddingBlockStart: '9px'\n }\n});\n/**\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, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n }\n if (state.toggleButton) {\n state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n }\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n }\n return state;\n};\n"],"names":["splitNavItemClassNames","useSplitNavItemStyles_unstable","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","useSplitNaveItemStyles","__styles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","d","p","h","a","state","splitNavItemStyles","sharedRootClassNames","useRootDefaultClassName","className","mergeClasses","density"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"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"],"names":["splitNavItemClassNames","useSplitNavItemStyles_unstable","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","__styles","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","state","splitNavItemStyles","sharedRootClassNames","useRootDefaultClassName","className","mergeClasses","density"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-nav",
3
- "version": "0.0.0-nightly-20250623-0406.1",
3
+ "version": "0.0.0-nightly-20250625-0407.1",
4
4
  "description": "New fluentui react package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -13,23 +13,24 @@
13
13
  "license": "MIT",
14
14
  "devDependencies": {
15
15
  "@fluentui/eslint-plugin": "*",
16
- "@fluentui/react-conformance": "0.0.0-nightly-20250623-0406.1",
17
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250623-0406.1",
16
+ "@fluentui/react-conformance": "0.0.0-nightly-20250625-0407.1",
17
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250625-0407.1",
18
18
  "@fluentui/scripts-api-extractor": "*"
19
19
  },
20
20
  "dependencies": {
21
- "@fluentui/react-aria": "0.0.0-nightly-20250623-0406.1",
22
- "@fluentui/react-button": "0.0.0-nightly-20250623-0406.1",
23
- "@fluentui/react-tooltip": "0.0.0-nightly-20250623-0406.1",
24
- "@fluentui/react-context-selector": "0.0.0-nightly-20250623-0406.1",
25
- "@fluentui/react-divider": "0.0.0-nightly-20250623-0406.1",
26
- "@fluentui/react-drawer": "0.0.0-nightly-20250623-0406.1",
21
+ "@fluentui/react-aria": "0.0.0-nightly-20250625-0407.1",
22
+ "@fluentui/react-button": "0.0.0-nightly-20250625-0407.1",
23
+ "@fluentui/react-context-selector": "0.0.0-nightly-20250625-0407.1",
24
+ "@fluentui/react-divider": "0.0.0-nightly-20250625-0407.1",
25
+ "@fluentui/react-drawer": "0.0.0-nightly-20250625-0407.1",
27
26
  "@fluentui/react-icons": "^2.0.245",
28
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250623-0406.1",
29
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20250623-0406.1",
30
- "@fluentui/react-tabster": "0.0.0-nightly-20250623-0406.1",
31
- "@fluentui/react-theme": "0.0.0-nightly-20250623-0406.1",
32
- "@fluentui/react-utilities": "0.0.0-nightly-20250623-0406.1",
27
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250625-0407.1",
28
+ "@fluentui/react-motion": "0.0.0-nightly-20250625-0407.1",
29
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20250625-0407.1",
30
+ "@fluentui/react-tabster": "0.0.0-nightly-20250625-0407.1",
31
+ "@fluentui/react-theme": "0.0.0-nightly-20250625-0407.1",
32
+ "@fluentui/react-tooltip": "0.0.0-nightly-20250625-0407.1",
33
+ "@fluentui/react-utilities": "0.0.0-nightly-20250625-0407.1",
33
34
  "@griffel/react": "^1.5.22",
34
35
  "@swc/helpers": "^0.5.1"
35
36
  },