@fluentui/react-nav 0.0.0-nightly-20250625-0407.1 → 0.0.0-nightly-20250627-0405.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 (43) hide show
  1. package/CHANGELOG.md +41 -18
  2. package/dist/index.d.ts +28 -2
  3. package/lib/components/NavCategoryItem/NavCategoryItem.types.js.map +1 -1
  4. package/lib/components/NavCategoryItem/renderNavCategoryItem.js +13 -1
  5. package/lib/components/NavCategoryItem/renderNavCategoryItem.js.map +1 -1
  6. package/lib/components/NavCategoryItem/useNavCategoryItem.js +37 -3
  7. package/lib/components/NavCategoryItem/useNavCategoryItem.js.map +1 -1
  8. package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js +2 -1
  9. package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js.map +1 -1
  10. package/lib/components/NavSubItem/useNavSubItemStyles.styles.js +2 -1
  11. package/lib/components/NavSubItem/useNavSubItemStyles.styles.js.map +1 -1
  12. package/lib/components/NavSubItemGroup/NavSubItemGroup.types.js.map +1 -1
  13. package/lib/components/NavSubItemGroup/renderNavSubItemGroup.js +3 -3
  14. package/lib/components/NavSubItemGroup/renderNavSubItemGroup.js.map +1 -1
  15. package/lib/components/NavSubItemGroup/useNavSubItemGroup.js +50 -4
  16. package/lib/components/NavSubItemGroup/useNavSubItemGroup.js.map +1 -1
  17. package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js +11 -4
  18. package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map +1 -1
  19. package/lib/components/SplitNavItem/renderSplitNavItem.js +19 -12
  20. package/lib/components/SplitNavItem/renderSplitNavItem.js.map +1 -1
  21. package/lib/components/useNavContextValues.js +5 -3
  22. package/lib/components/useNavContextValues.js.map +1 -1
  23. package/lib-commonjs/components/NavCategoryItem/NavCategoryItem.types.js.map +1 -1
  24. package/lib-commonjs/components/NavCategoryItem/renderNavCategoryItem.js +13 -1
  25. package/lib-commonjs/components/NavCategoryItem/renderNavCategoryItem.js.map +1 -1
  26. package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js +36 -2
  27. package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.js.map +1 -1
  28. package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.js +2 -1
  29. package/lib-commonjs/components/NavCategoryItem/useNavCategoryItem.styles.js.map +1 -1
  30. package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.js +2 -1
  31. package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.js.map +1 -1
  32. package/lib-commonjs/components/NavSubItemGroup/NavSubItemGroup.types.js.map +1 -1
  33. package/lib-commonjs/components/NavSubItemGroup/renderNavSubItemGroup.js +3 -3
  34. package/lib-commonjs/components/NavSubItemGroup/renderNavSubItemGroup.js.map +1 -1
  35. package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroup.js +50 -4
  36. package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroup.js.map +1 -1
  37. package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js +17 -4
  38. package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map +1 -1
  39. package/lib-commonjs/components/SplitNavItem/renderSplitNavItem.js +20 -12
  40. package/lib-commonjs/components/SplitNavItem/renderSplitNavItem.js.map +1 -1
  41. package/lib-commonjs/components/useNavContextValues.js +5 -3
  42. package/lib-commonjs/components/useNavContextValues.js.map +1 -1
  43. package/package.json +15 -15
package/CHANGELOG.md CHANGED
@@ -1,31 +1,54 @@
1
1
  # Change Log - @fluentui/react-nav
2
2
 
3
- This log was last generated on Wed, 25 Jun 2025 04:22:42 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 27 Jun 2025 04:21:58 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250625-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v0.0.0-nightly-20250625-0407.1)
7
+ ## [0.0.0-nightly-20250627-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v0.0.0-nightly-20250627-0405.1)
8
8
 
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)
9
+ Fri, 27 Jun 2025 04:21:58 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.2.0..@fluentui/react-nav_v0.0.0-nightly-20250627-0405.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-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)
15
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
16
+ - Bump @fluentui/react-button to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
17
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
18
+ - Bump @fluentui/react-divider to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
19
+ - Bump @fluentui/react-drawer to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
20
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
21
+ - Bump @fluentui/react-motion to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
22
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
23
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
24
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
25
+ - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
26
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
27
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
28
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250627-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/67ad9a6729d75445751a4e7292a6fc19e62b29f4) by beachball)
29
+
30
+ ## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.2.0)
31
+
32
+ Thu, 26 Jun 2025 14:11:54 GMT
33
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.3..@fluentui/react-nav_v9.2.0)
34
+
35
+ ### Minor changes
36
+
37
+ - feat: add motion to nav components ([PR #34632](https://github.com/microsoft/fluentui/pull/34632) by marcosvmmoura@gmail.com)
38
+ - Bump @fluentui/react-aria to v9.15.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
39
+ - Bump @fluentui/react-button to v9.5.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
40
+ - Bump @fluentui/react-context-selector to v9.2.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
41
+ - Bump @fluentui/react-divider to v9.3.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
42
+ - Bump @fluentui/react-drawer to v9.8.4 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
43
+ - Bump @fluentui/react-jsx-runtime to v9.1.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
44
+ - Bump @fluentui/react-motion to v9.9.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
45
+ - Bump @fluentui/react-tabster to v9.25.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
46
+ - Bump @fluentui/react-tooltip to v9.7.4 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
47
+ - Bump @fluentui/react-utilities to v9.22.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
48
+
49
+ ### Patches
50
+
51
+ - fix: only display actions on hover ([PR #34634](https://github.com/microsoft/fluentui/pull/34634) by marcosvmmoura@gmail.com)
29
52
 
30
53
  ## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.3)
31
54
 
package/dist/index.d.ts CHANGED
@@ -26,6 +26,7 @@ import { EventHandler } from '@fluentui/react-utilities';
26
26
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
27
27
  import type { InlineDrawerSlots } from '@fluentui/react-drawer';
28
28
  import { MenuButtonProps } from '@fluentui/react-button';
29
+ import { PresenceMotionSlotProps } from '@fluentui/react-motion';
29
30
  import * as React_2 from 'react';
30
31
  import type { Slot } from '@fluentui/react-utilities';
31
32
  import { SlotClassNames } from '@fluentui/react-utilities';
@@ -178,6 +179,10 @@ export declare type NavCategoryItemSlots = {
178
179
  * Expand icon slot rendered after the content to indicate an open and closed state.
179
180
  */
180
181
  expandIcon: NonNullable<Slot<'span'>>;
182
+ /**
183
+ * Expand icon motion slot.
184
+ */
185
+ expandIconMotion?: Slot<PresenceMotionSlotProps>;
181
186
  };
182
187
 
183
188
  /**
@@ -548,7 +553,21 @@ export declare const navSubItemClassNames: SlotClassNames<NavSubItemSlots>;
548
553
  */
549
554
  export declare const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps>;
550
555
 
551
- export declare const navSubItemGroupClassNames: SlotClassNames<NavSubItemGroupSlots>;
556
+ export declare const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>>;
557
+
558
+ /**
559
+ * Context value for NavSubItemGroup
560
+ */
561
+ declare type NavSubItemGroupCollapseMotionParams = {
562
+ /**
563
+ * The number of items in the NavSubItemGroup
564
+ */
565
+ items?: number;
566
+ /**
567
+ * The density of the NavItem
568
+ */
569
+ density?: NavDensity;
570
+ };
552
571
 
553
572
  /**
554
573
  * NavSubItemGroup Props
@@ -556,7 +575,14 @@ export declare const navSubItemGroupClassNames: SlotClassNames<NavSubItemGroupSl
556
575
  export declare type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;
557
576
 
558
577
  export declare type NavSubItemGroupSlots = {
578
+ /**
579
+ * The root element
580
+ */
559
581
  root: NonNullable<Slot<'div'>>;
582
+ /**
583
+ * Collapse motion slot
584
+ */
585
+ collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;
560
586
  };
561
587
 
562
588
  /**
@@ -657,7 +683,7 @@ export declare const renderNavSubItem_unstable: (state: NavSubItemState) => JSX.
657
683
  /**
658
684
  * Render the final JSX of NavSubItemGroup
659
685
  */
660
- export declare const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSX.Element | null;
686
+ export declare const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSX.Element;
661
687
 
662
688
  /**
663
689
  * Render the final JSX of SplitNavItem
package/lib/components/NavCategoryItem/NavCategoryItem.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.types.ts"],"sourcesContent":["import { NavDensity } from '../Nav/Nav.types';\nimport { NavCategoryItemContextValue } from '../NavCategoryItemContext';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavCategoryItemContextValues = {\n navCategoryItem: NavCategoryItemContextValue;\n};\n\nexport type NavCategoryItemSlots = {\n /**\n * The root element\n */\n root: NonNullable<Slot<'button'>>;\n\n /**\n * Icon that renders before the content.\n * Should be specific to each Category\n */\n icon?: Slot<'span'>;\n\n /**\n * Expand icon slot rendered after the content to indicate an open and closed state.\n */\n expandIcon: NonNullable<Slot<'span'>>;\n};\n\n/**\n * navCategoryItem Props\n */\nexport type NavCategoryItemProps = ComponentProps<Partial<NavCategoryItemSlots>>;\n\n/**\n * State used in rendering NavCategoryItem\n */\nexport type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &\n NavCategoryItemContextValue & {\n /**\n * If this navCategoryItem is selected\n */\n selected: boolean;\n /**\n * The density of the NavItem\n *\n * @default 'medium'\n */\n density: NavDensity;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA+BA;;CAEC,GACD,WAYI"}
1
+ {"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { NavDensity } from '../Nav/Nav.types';\nimport type { NavCategoryItemContextValue } from '../NavCategoryItemContext';\n\nexport type NavCategoryItemContextValues = {\n navCategoryItem: NavCategoryItemContextValue;\n};\n\nexport type NavCategoryItemSlots = {\n /**\n * The root element\n */\n root: NonNullable<Slot<'button'>>;\n\n /**\n * Icon that renders before the content.\n * Should be specific to each Category\n */\n icon?: Slot<'span'>;\n\n /**\n * Expand icon slot rendered after the content to indicate an open and closed state.\n */\n expandIcon: NonNullable<Slot<'span'>>;\n\n /**\n * Expand icon motion slot.\n */\n expandIconMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * navCategoryItem Props\n */\nexport type NavCategoryItemProps = ComponentProps<Partial<NavCategoryItemSlots>>;\n\n/**\n * State used in rendering NavCategoryItem\n */\nexport type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &\n NavCategoryItemContextValue & {\n /**\n * If this navCategoryItem is selected\n */\n selected: boolean;\n /**\n * The density of the NavItem\n *\n * @default 'medium'\n */\n density: NavDensity;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AAqCA;;CAEC,GACD,WAYI"}
package/lib/components/NavCategoryItem/renderNavCategoryItem.js CHANGED
@@ -1,6 +1,18 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
2
2
  import { assertSlots } from '@fluentui/react-utilities';
3
3
  import { NavCategoryItemProvider } from '../NavCategoryItemContext';
4
+ const getExpandIcon = (state)=>{
5
+ assertSlots(state);
6
+ if (!state.expandIcon) {
7
+ return null;
8
+ }
9
+ if (!state.expandIconMotion) {
10
+ return /*#__PURE__*/ _jsx(state.expandIcon, {});
11
+ }
12
+ return /*#__PURE__*/ _jsx(state.expandIconMotion, {
13
+ children: /*#__PURE__*/ _jsx(state.expandIcon, {})
14
+ });
15
+ };
4
16
  /**
5
17
  * Render the final JSX of NavCategoryItem
6
18
  */ export const renderNavCategoryItem_unstable = (state, contextValues)=>{
@@ -11,7 +23,7 @@ import { NavCategoryItemProvider } from '../NavCategoryItemContext';
11
23
  children: [
12
24
  state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
13
25
  state.root.children,
14
- state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})
26
+ getExpandIcon(state)
15
27
  ]
16
28
  })
17
29
  });
package/lib/components/NavCategoryItem/renderNavCategoryItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavCategoryItem/renderNavCategoryItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavCategoryItemState, NavCategoryItemSlots, NavCategoryItemContextValues } from './NavCategoryItem.types';\nimport { NavCategoryItemProvider } from '../NavCategoryItemContext';\n\n/**\n * Render the final JSX of NavCategoryItem\n */\nexport const renderNavCategoryItem_unstable = (\n state: NavCategoryItemState,\n contextValues: NavCategoryItemContextValues,\n) => {\n assertSlots<NavCategoryItemSlots>(state);\n\n return (\n <NavCategoryItemProvider value={contextValues.navCategoryItem}>\n <state.root>\n {state.icon && <state.icon />}\n {state.root.children}\n {state.expandIcon && <state.expandIcon />}\n </state.root>\n </NavCategoryItemProvider>\n );\n};\n"],"names":["assertSlots","NavCategoryItemProvider","renderNavCategoryItem_unstable","state","contextValues","value","navCategoryItem","root","icon","children","expandIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEAJ,YAAkCG;IAElC,qBACE,KAACF;QAAwBI,OAAOD,cAAcE,eAAe;kBAC3D,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,UAAU,kBAAI,KAACP,MAAMO,UAAU;;;;AAI9C,EAAE"}
1
+ {"version":3,"sources":["../src/components/NavCategoryItem/renderNavCategoryItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavCategoryItemState, NavCategoryItemSlots, NavCategoryItemContextValues } from './NavCategoryItem.types';\nimport { NavCategoryItemProvider } from '../NavCategoryItemContext';\n\nconst getExpandIcon = (state: NavCategoryItemState) => {\n assertSlots<NavCategoryItemSlots>(state);\n\n if (!state.expandIcon) {\n return null;\n }\n\n if (!state.expandIconMotion) {\n return <state.expandIcon />;\n }\n\n return (\n <state.expandIconMotion>\n <state.expandIcon />\n </state.expandIconMotion>\n );\n};\n\n/**\n * Render the final JSX of NavCategoryItem\n */\nexport const renderNavCategoryItem_unstable = (\n state: NavCategoryItemState,\n contextValues: NavCategoryItemContextValues,\n) => {\n assertSlots<NavCategoryItemSlots>(state);\n\n return (\n <NavCategoryItemProvider value={contextValues.navCategoryItem}>\n <state.root>\n {state.icon && <state.icon />}\n {state.root.children}\n {getExpandIcon(state)}\n </state.root>\n </NavCategoryItemProvider>\n );\n};\n"],"names":["assertSlots","NavCategoryItemProvider","getExpandIcon","state","expandIcon","expandIconMotion","renderNavCategoryItem_unstable","contextValues","value","navCategoryItem","root","icon","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,MAAMC,gBAAgB,CAACC;IACrBH,YAAkCG;IAElC,IAAI,CAACA,MAAMC,UAAU,EAAE;QACrB,OAAO;IACT;IAEA,IAAI,CAACD,MAAME,gBAAgB,EAAE;QAC3B,qBAAO,KAACF,MAAMC,UAAU;IAC1B;IAEA,qBACE,KAACD,MAAME,gBAAgB;kBACrB,cAAA,KAACF,MAAMC,UAAU;;AAGvB;AAEA;;CAEC,GACD,OAAO,MAAME,iCAAiC,CAC5CH,OACAI;IAEAP,YAAkCG;IAElC,qBACE,KAACF;QAAwBO,OAAOD,cAAcE,eAAe;kBAC3D,cAAA,MAACN,MAAMO,IAAI;;gBACRP,MAAMQ,IAAI,kBAAI,KAACR,MAAMQ,IAAI;gBACzBR,MAAMO,IAAI,CAACE,QAAQ;gBACnBV,cAAcC;;;;AAIvB,EAAE"}
package/lib/components/NavCategoryItem/useNavCategoryItem.js CHANGED
@@ -1,8 +1,35 @@
1
1
  import * as React from 'react';
2
2
  import { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';
3
- import { ChevronRight20Regular } from '@fluentui/react-icons';
3
+ import { ChevronDown20Regular } from '@fluentui/react-icons';
4
+ import { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';
4
5
  import { useNavCategoryContext_unstable } from '../NavCategoryContext';
5
6
  import { useNavContext_unstable } from '../NavContext';
7
+ const ExpandIconMotion = createPresenceComponent(()=>{
8
+ const keyframes = [
9
+ {
10
+ transform: 'rotate(0deg) translate3D(0, 0, 0)'
11
+ },
12
+ {
13
+ transform: 'rotate(180deg) translate3D(0, 0, 0)'
14
+ }
15
+ ];
16
+ const duration = motionTokens.durationFast;
17
+ const easing = motionTokens.curveEasyEase;
18
+ return {
19
+ enter: {
20
+ keyframes,
21
+ duration,
22
+ easing
23
+ },
24
+ exit: {
25
+ keyframes: [
26
+ ...keyframes
27
+ ].reverse(),
28
+ duration,
29
+ easing
30
+ }
31
+ };
32
+ });
6
33
  /**
7
34
  * Create the state required to render NavCategoryItem.
8
35
  *
@@ -32,7 +59,8 @@ import { useNavContext_unstable } from '../NavContext';
32
59
  components: {
33
60
  root: 'button',
34
61
  icon: 'span',
35
- expandIcon: 'span'
62
+ expandIcon: 'span',
63
+ expandIconMotion: ExpandIconMotion
36
64
  },
37
65
  root: slot.always(getIntrinsicElementProps('button', {
38
66
  ref,
@@ -45,11 +73,17 @@ import { useNavContext_unstable } from '../NavContext';
45
73
  }),
46
74
  expandIcon: slot.always(expandIcon, {
47
75
  defaultProps: {
48
- children: /*#__PURE__*/ React.createElement(ChevronRight20Regular, null),
76
+ children: /*#__PURE__*/ React.createElement(ChevronDown20Regular, null),
49
77
  'aria-hidden': true
50
78
  },
51
79
  elementType: 'span'
52
80
  }),
81
+ expandIconMotion: presenceMotionSlot(props.expandIconMotion, {
82
+ elementType: ExpandIconMotion,
83
+ defaultProps: {
84
+ visible: open
85
+ }
86
+ }),
53
87
  icon: slot.optional(icon, {
54
88
  elementType: 'span'
55
89
  }),
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 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"}
1
+ {"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\n\nconst ExpandIconMotion = createPresenceComponent(() => {\n const keyframes: Keyframe[] = [\n {\n transform: 'rotate(0deg) translate3D(0, 0, 0)',\n },\n {\n transform: 'rotate(180deg) translate3D(0, 0, 0)',\n },\n ];\n const duration = motionTokens.durationFast;\n const easing = motionTokens.curveEasyEase;\n\n return {\n enter: {\n keyframes,\n duration,\n easing,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing,\n },\n };\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n props: NavCategoryItemProps,\n ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n const { onClick, expandIcon, icon } = props;\n\n const { open, value } = useNavCategoryContext_unstable();\n\n const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n const onNavCategoryItemClick = useEventCallback(\n mergeCallbacks(onClick, event =>\n onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n ),\n );\n\n // don't fill the icon when it's open\n const selected = selectedCategoryValue === value && !open;\n // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n return {\n open,\n value,\n selected,\n components: {\n root: 'button',\n icon: 'span',\n expandIcon: 'span',\n expandIconMotion: ExpandIconMotion,\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n 'aria-current': validAriaCurrent,\n 'aria-expanded': open,\n ...props,\n onClick: onNavCategoryItemClick,\n }),\n { elementType: 'button' },\n ),\n expandIcon: slot.always(expandIcon, {\n defaultProps: {\n children: <ChevronDown20Regular />,\n 'aria-hidden': true,\n },\n elementType: 'span',\n }),\n expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n elementType: ExpandIconMotion,\n defaultProps: {\n visible: open,\n },\n }),\n icon: slot.optional(icon, {\n elementType: 'span',\n }),\n density,\n };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponent","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","ExpandIconMotion","keyframes","transform","duration","durationFast","easing","curveEasyEase","enter","exit","reverse","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","always","elementType","defaultProps","children","visible","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,uBAAuB,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAGnG,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD,MAAMC,mBAAmBL,wBAAwB;IAC/C,MAAMM,YAAwB;QAC5B;YACEC,WAAW;QACb;QACA;YACEA,WAAW;QACb;KACD;IACD,MAAMC,WAAWP,aAAaQ,YAAY;IAC1C,MAAMC,SAAST,aAAaU,aAAa;IAEzC,OAAO;QACLC,OAAO;YACLN;YACAE;YACAE;QACF;QACAG,MAAM;YACJP,WAAW;mBAAIA;aAAU,CAACQ,OAAO;YACjCN;YACAE;QACF;IACF;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMK,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGnB;IAExB,MAAM,EAAEoB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGrB;IAEtF,MAAMsB,yBAAyB5B,iBAC7BF,eAAesB,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;YACZe,kBAAkB7B;QACpB;QACA4B,MAAMpC,KAAKsC,MAAM,CACfxC,yBAAyB,UAAU;YACjCsB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYtB,KAAKsC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,wBAAU,oBAACvC;gBACX,eAAe;YACjB;YACAqC,aAAa;QACf;QACAF,kBAAkBhC,mBAAmBc,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa/B;YACbgC,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMvB,KAAK2C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}
package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js CHANGED
@@ -4,7 +4,8 @@ import { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClas
4
4
  export const navCategoryItemClassNames = {
5
5
  root: 'fui-NavCategoryItem',
6
6
  icon: 'fui-NavCategoryItem__icon',
7
- expandIcon: 'fui-NavCategoryItem__expandIcon'
7
+ expandIcon: 'fui-NavCategoryItem__expandIcon',
8
+ expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'
8
9
  };
9
10
  const useExpandIconStyles = /*#__PURE__*/__styles({
10
11
  base: {
package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","useExpandIconStyles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","density","className"],"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n root: 'fui-NavCategoryItem',\n icon: 'fui-NavCategoryItem__icon',\n expandIcon: 'fui-NavCategoryItem__expandIcon'\n};\nconst useExpandIconStyles = makeStyles({\n base: {\n marginInlineStart: 'auto',\n height: '20px'\n },\n open: {\n transform: 'rotate(90deg)'\n },\n selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n base: {\n width: '100%'\n }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const smallStyles = useSmallStyles();\n const defaultRootClassName = useRootDefaultClassName();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const iconStyles = useIconStyles();\n const expandIconStyles = useExpandIconStyles();\n const { selected, open, density } = state;\n state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);\n if (state.icon) {\n state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE,2BAA2B;EACjCC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAS3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAGxB,QAAA;EAAAa,IAAA;IAAAY,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAIhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;EAClC,MAAMK,WAAW,GAAGtB,cAAc,CAAC,CAAC;EACpC,MAAMuB,oBAAoB,GAAGxB,uBAAuB,CAAC,CAAC;EACtD,MAAMyB,aAAa,GAAG5B,gBAAgB,CAAC,CAAC;EACxC,MAAM6B,eAAe,GAAG3B,kBAAkB,CAAC,CAAC;EAC5C,MAAM4B,UAAU,GAAG7B,aAAa,CAAC,CAAC;EAClC,MAAM8B,gBAAgB,GAAGtB,mBAAmB,CAAC,CAAC;EAC9C,MAAM;IAAEM,QAAQ;IAAEF,IAAI;IAAEmB;EAAQ,CAAC,GAAGR,KAAK;EACzCA,KAAK,CAAClB,IAAI,CAAC2B,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACC,IAAI,EAAEqB,oBAAoB,EAAEF,UAAU,CAACf,IAAI,EAAEsB,OAAO,KAAK,OAAO,IAAIN,WAAW,CAACpB,IAAI,EAAES,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIgB,eAAe,CAACnB,IAAI,EAAEK,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIe,aAAa,CAACb,QAAQ,EAAES,KAAK,CAAClB,IAAI,CAAC2B,SAAS,CAAC;EACnRT,KAAK,CAAChB,UAAU,CAACyB,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACG,UAAU,EAAEuB,gBAAgB,CAACrB,IAAI,EAAEc,KAAK,CAACX,IAAI,IAAIkB,gBAAgB,CAAClB,IAAI,EAAEW,KAAK,CAAChB,UAAU,CAACyB,SAAS,CAAC;EACvK,IAAIT,KAAK,CAACjB,IAAI,EAAE;IACZiB,KAAK,CAACjB,IAAI,CAAC0B,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACE,IAAI,EAAEuB,UAAU,CAACpB,IAAI,EAAEK,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAACjB,IAAI,CAAC0B,SAAS,CAAC;EAC/I;EACA,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","density","className"],"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n root: 'fui-NavCategoryItem',\n icon: 'fui-NavCategoryItem__icon',\n expandIcon: 'fui-NavCategoryItem__expandIcon',\n expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'\n};\nconst useExpandIconStyles = makeStyles({\n base: {\n marginInlineStart: 'auto',\n height: '20px'\n },\n open: {\n transform: 'rotate(90deg)'\n },\n selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n base: {\n width: '100%'\n }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const smallStyles = useSmallStyles();\n const defaultRootClassName = useRootDefaultClassName();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const iconStyles = useIconStyles();\n const expandIconStyles = useExpandIconStyles();\n const { selected, open, density } = state;\n state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);\n if (state.icon) {\n state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE,2BAA2B;EACjCC,UAAU,EAAE,iCAAiC;EAC7CC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAS3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAGzB,QAAA;EAAAc,IAAA;IAAAY,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAIhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;EAClC,MAAMK,WAAW,GAAGvB,cAAc,CAAC,CAAC;EACpC,MAAMwB,oBAAoB,GAAGzB,uBAAuB,CAAC,CAAC;EACtD,MAAM0B,aAAa,GAAG7B,gBAAgB,CAAC,CAAC;EACxC,MAAM8B,eAAe,GAAG5B,kBAAkB,CAAC,CAAC;EAC5C,MAAM6B,UAAU,GAAG9B,aAAa,CAAC,CAAC;EAClC,MAAM+B,gBAAgB,GAAGtB,mBAAmB,CAAC,CAAC;EAC9C,MAAM;IAAEM,QAAQ;IAAEF,IAAI;IAAEmB;EAAQ,CAAC,GAAGR,KAAK;EACzCA,KAAK,CAACnB,IAAI,CAAC4B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACC,IAAI,EAAEsB,oBAAoB,EAAEF,UAAU,CAACf,IAAI,EAAEsB,OAAO,KAAK,OAAO,IAAIN,WAAW,CAACrB,IAAI,EAAEU,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIgB,eAAe,CAACnB,IAAI,EAAEK,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIe,aAAa,CAACb,QAAQ,EAAES,KAAK,CAACnB,IAAI,CAAC4B,SAAS,CAAC;EACnRT,KAAK,CAACjB,UAAU,CAAC0B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACG,UAAU,EAAEwB,gBAAgB,CAACrB,IAAI,EAAEc,KAAK,CAACX,IAAI,IAAIkB,gBAAgB,CAAClB,IAAI,EAAEW,KAAK,CAACjB,UAAU,CAAC0B,SAAS,CAAC;EACvK,IAAIT,KAAK,CAAClB,IAAI,EAAE;IACZkB,KAAK,CAAClB,IAAI,CAAC2B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACE,IAAI,EAAEwB,UAAU,CAACpB,IAAI,EAAEK,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAAClB,IAAI,CAAC2B,SAAS,CAAC;EAC/I;EACA,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/NavSubItem/useNavSubItemStyles.styles.js CHANGED
@@ -34,6 +34,7 @@ export const useNavSubItemStyles_unstable = state => {
34
34
  selected,
35
35
  density
36
36
  } = state;
37
- state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, density === 'small' && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
37
+ const isSmallDensity = density === 'small';
38
+ state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
38
39
  return state;
39
40
  };
package/lib/components/NavSubItem/useNavSubItemStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px'\n },\n smallBase: {\n paddingInlineStart: '40px'\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n }\n }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n const { selected, density } = state;\n state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, density === 'small' && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnCA,KAAK,CAACT,IAAI,CAACiB,SAAS,GAAGxB,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEM,OAAO,KAAK,OAAO,IAAIL,WAAW,CAACX,IAAI,EAAEgB,OAAO,KAAK,OAAO,IAAIF,wBAAwB,CAACV,SAAS,EAAEU,wBAAwB,CAACZ,IAAI,EAAEa,QAAQ,IAAIF,eAAe,CAACX,IAAI,EAAEa,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEA,QAAQ,IAAID,wBAAwB,CAACT,iBAAiB,EAAEI,KAAK,CAACT,IAAI,CAACiB,SAAS,CAAC;EAC3W,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px'\n },\n smallBase: {\n paddingInlineStart: '40px'\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n }\n }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n const { selected, density } = state;\n const isSmallDensity = density === 'small';\n state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnC,MAAMQ,cAAc,GAAGD,OAAO,KAAK,OAAO;EAC1CP,KAAK,CAACT,IAAI,CAACkB,SAAS,GAAGzB,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEO,cAAc,IAAIN,WAAW,CAACX,IAAI,EAAEiB,cAAc,IAAIH,wBAAwB,CAACV,SAAS,EAAEU,wBAAwB,CAACZ,IAAI,EAAEa,QAAQ,IAAIF,eAAe,CAACX,IAAI,EAAEa,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEA,QAAQ,IAAID,wBAAwB,CAACT,iBAAiB,EAAEI,KAAK,CAACT,IAAI,CAACkB,SAAS,CAAC;EACjW,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/NavSubItemGroup/NavSubItemGroup.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavSubItemGroupSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\n/**\n * State used in rendering NavSubItemGroup\n */\nexport type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAWA;;CAEC,GACD,WAKE"}
1
+ {"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavDensity } from '../Nav/Nav.types';\n\n/**\n * Context value for NavSubItemGroup\n */\nexport type NavSubItemGroupCollapseMotionParams = {\n /**\n * The number of items in the NavSubItemGroup\n */\n items?: number;\n\n /**\n * The density of the NavItem\n */\n density?: NavDensity;\n};\n\nexport type NavSubItemGroupSlots = {\n /**\n * The root element\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Collapse motion slot\n */\n collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;\n};\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\n/**\n * State used in rendering NavSubItemGroup\n */\nexport type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAoCA;;CAEC,GACD,WAKE"}
package/lib/components/NavSubItemGroup/renderNavSubItemGroup.js CHANGED
@@ -4,7 +4,7 @@ import { assertSlots } from '@fluentui/react-utilities';
4
4
  * Render the final JSX of NavSubItemGroup
5
5
  */ export const renderNavSubItemGroup_unstable = (state)=>{
6
6
  assertSlots(state);
7
- return state.open ? /*#__PURE__*/ _jsx(state.root, {
8
- children: state.root.children
9
- }) : null;
7
+ return state.collapseMotion ? /*#__PURE__*/ _jsx(state.collapseMotion, {
8
+ children: /*#__PURE__*/ _jsx(state.root, {})
9
+ }) : /*#__PURE__*/ _jsx(state.root, {});
10
10
  };
package/lib/components/NavSubItemGroup/renderNavSubItemGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavSubItemGroup/renderNavSubItemGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';\n\n/**\n * Render the final JSX of NavSubItemGroup\n */\nexport const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState) => {\n assertSlots<NavSubItemGroupSlots>(state);\n\n return state.open ? <state.root>{state.root.children}</state.root> : null;\n};\n"],"names":["assertSlots","renderNavSubItemGroup_unstable","state","open","root","children"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,OAAOA,MAAMC,IAAI,iBAAG,KAACD,MAAME,IAAI;kBAAEF,MAAME,IAAI,CAACC,QAAQ;SAAiB;AACvE,EAAE"}
1
+ {"version":3,"sources":["../src/components/NavSubItemGroup/renderNavSubItemGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';\n\n/**\n * Render the final JSX of NavSubItemGroup\n */\nexport const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState) => {\n assertSlots<NavSubItemGroupSlots>(state);\n\n return state.collapseMotion ? (\n <state.collapseMotion>\n <state.root />\n </state.collapseMotion>\n ) : (\n <state.root />\n );\n};\n"],"names":["assertSlots","renderNavSubItemGroup_unstable","state","collapseMotion","root"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,OAAOA,MAAMC,cAAc,iBACzB,KAACD,MAAMC,cAAc;kBACnB,cAAA,KAACD,MAAME,IAAI;uBAGb,KAACF,MAAME,IAAI;AAEf,EAAE"}
package/lib/components/NavSubItemGroup/useNavSubItemGroup.js CHANGED
@@ -1,6 +1,44 @@
1
1
  import * as React from 'react';
2
2
  import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
3
+ import { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';
3
4
  import { useNavCategoryContext_unstable } from '../NavCategoryContext';
5
+ import { useNavContext_unstable } from '../NavContext';
6
+ const smallSize = 28; // 28px for small density
7
+ const largeSize = 40; // 40px for large density
8
+ const NavGroupMotion = createPresenceComponent(({ items, density })=>{
9
+ const isSmallDensity = density === 'small';
10
+ const height = items ? isSmallDensity ? items * smallSize : items * largeSize : 0;
11
+ const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large
12
+ const keyframes = [
13
+ {
14
+ opacity: 0,
15
+ minHeight: 0,
16
+ height: 0
17
+ },
18
+ {
19
+ opacity: 1,
20
+ minHeight: `${height}px`,
21
+ height: `${height}px`
22
+ }
23
+ ];
24
+ const baseDuration = motionTokens.durationFast + (items || 0) * durationPerItem;
25
+ const maxDuration = motionTokens.durationUltraSlow;
26
+ const duration = baseDuration > maxDuration ? maxDuration : baseDuration;
27
+ return {
28
+ enter: {
29
+ keyframes,
30
+ duration,
31
+ easing: motionTokens.curveDecelerateMid
32
+ },
33
+ exit: {
34
+ keyframes: [
35
+ ...keyframes
36
+ ].reverse(),
37
+ duration,
38
+ easing: motionTokens.curveAccelerateMin
39
+ }
40
+ };
41
+ });
4
42
  /**
5
43
  * Create the state required to render NavSubItemGroup.
6
44
  *
@@ -11,19 +49,27 @@ import { useNavCategoryContext_unstable } from '../NavCategoryContext';
11
49
  * @param ref - reference to root HTMLDivElement of NavSubItemGroup
12
50
  */ export const useNavSubItemGroup_unstable = (props, ref)=>{
13
51
  const { open } = useNavCategoryContext_unstable();
14
- // copied over from accordion. todo - figure out how to handle.
15
- // const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });
16
- // const navigation = useAccordionContext_unstable(ctx => ctx.navigation);
52
+ const { density } = useNavContext_unstable();
17
53
  return {
18
54
  open,
19
55
  components: {
20
- root: 'div'
56
+ root: 'div',
57
+ collapseMotion: NavGroupMotion
21
58
  },
22
59
  root: slot.always(getIntrinsicElementProps('div', {
23
60
  ...props,
24
61
  ref
25
62
  }), {
26
63
  elementType: 'div'
64
+ }),
65
+ collapseMotion: presenceMotionSlot(props.collapseMotion, {
66
+ elementType: NavGroupMotion,
67
+ defaultProps: {
68
+ visible: open,
69
+ unmountOnExit: true,
70
+ items: React.Children.count(props.children),
71
+ density
72
+ }
27
73
  })
28
74
  };
29
75
  };
package/lib/components/NavSubItemGroup/useNavSubItemGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n props: NavSubItemGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n const { open } = useNavCategoryContext_unstable();\n\n // copied over from accordion. todo - figure out how to handle.\n // const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n // const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","open","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,8BAA8B,QAAQ,wBAAwB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IAEjB,+DAA+D;IAC/D,0FAA0F;IAC1F,0EAA0E;IAE1E,OAAO;QACLI;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,GAAGI,KAAK;YACRC;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type {\n NavSubItemGroupCollapseMotionParams,\n NavSubItemGroupProps,\n NavSubItemGroupState,\n} from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\n\nconst smallSize = 28; // 28px for small density\nconst largeSize = 40; // 40px for large density\n\nconst NavGroupMotion = createPresenceComponent(({ items, density }: NavSubItemGroupCollapseMotionParams) => {\n const isSmallDensity = density === 'small';\n const height = items ? (isSmallDensity ? items * smallSize : items * largeSize) : 0;\n const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large\n const keyframes: Keyframe[] = [\n {\n opacity: 0,\n minHeight: 0,\n height: 0,\n },\n {\n opacity: 1,\n minHeight: `${height}px`,\n height: `${height}px`,\n },\n ];\n const baseDuration = motionTokens.durationFast + (items || 0) * durationPerItem;\n const maxDuration = motionTokens.durationUltraSlow;\n const duration = baseDuration > maxDuration ? maxDuration : baseDuration;\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n props: NavSubItemGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n const { open } = useNavCategoryContext_unstable();\n const { density } = useNavContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n collapseMotion: NavGroupMotion,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: NavGroupMotion,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n items: React.Children.count(props.children),\n density,\n },\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","createPresenceComponent","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","smallSize","largeSize","NavGroupMotion","items","density","isSmallDensity","height","durationPerItem","keyframes","opacity","minHeight","baseDuration","durationFast","maxDuration","durationUltraSlow","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit","Children","count","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAOnG,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD,MAAMC,YAAY,IAAI,yBAAyB;AAC/C,MAAMC,YAAY,IAAI,yBAAyB;AAE/C,MAAMC,iBAAiBP,wBAAwB,CAAC,EAAEQ,KAAK,EAAEC,OAAO,EAAuC;IACrG,MAAMC,iBAAiBD,YAAY;IACnC,MAAME,SAASH,QAASE,iBAAiBF,QAAQH,YAAYG,QAAQF,YAAa;IAClF,MAAMM,kBAAkBF,iBAAiB,KAAK,IAAI,0CAA0C;IAC5F,MAAMG,YAAwB;QAC5B;YACEC,SAAS;YACTC,WAAW;YACXJ,QAAQ;QACV;QACA;YACEG,SAAS;YACTC,WAAW,CAAC,EAAEJ,OAAO,EAAE,CAAC;YACxBA,QAAQ,CAAC,EAAEA,OAAO,EAAE,CAAC;QACvB;KACD;IACD,MAAMK,eAAef,aAAagB,YAAY,GAAG,AAACT,CAAAA,SAAS,CAAA,IAAKI;IAChE,MAAMM,cAAcjB,aAAakB,iBAAiB;IAClD,MAAMC,WAAWJ,eAAeE,cAAcA,cAAcF;IAE5D,OAAO;QACLK,OAAO;YACLR;YACAO;YACAE,QAAQrB,aAAasB,kBAAkB;QACzC;QACAC,MAAM;YACJX,WAAW;mBAAIA;aAAU,CAACY,OAAO;YACjCL;YACAE,QAAQrB,aAAayB,kBAAkB;QACzC;IACF;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAG3B;IACjB,MAAM,EAAEM,OAAO,EAAE,GAAGL;IAEpB,OAAO;QACL0B;QACAC,YAAY;YACVC,MAAM;YACNC,gBAAgB1B;QAClB;QAEAyB,MAAMjC,KAAKmC,MAAM,CACfpC,yBAAyB,OAAO;YAC9B,GAAG8B,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,gBAAgB/B,mBAAmB0B,MAAMK,cAAc,EAAE;YACvDE,aAAa5B;YACb6B,cAAc;gBACZC,SAASP;gBACTQ,eAAe;gBACf9B,OAAOX,MAAM0C,QAAQ,CAACC,KAAK,CAACZ,MAAMa,QAAQ;gBAC1ChC;YACF;QACF;IACF;AACF,EAAE"}
package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js CHANGED
@@ -6,8 +6,17 @@ export const navSubItemGroupClassNames = {
6
6
  * Styles for the root slot
7
7
  */
8
8
  const useStyles = /*#__PURE__*/__styles({
9
- root: {}
10
- }, {});
9
+ root: {
10
+ Bz10aip: "f1yj8dow",
11
+ B68tc82: 0,
12
+ Bmxbyg5: 0,
13
+ Bpg54ce: "f1a3p1vp"
14
+ }
15
+ }, {
16
+ d: [".f1yj8dow{transform:translateZ(0);}", [".f1a3p1vp{overflow:hidden;}", {
17
+ p: -1
18
+ }]]
19
+ });
11
20
  /**
12
21
  * Apply styling to the NavSubItemGroup slots based on the state
13
22
  */
@@ -16,7 +25,5 @@ export const useNavSubItemGroupStyles_unstable = state => {
16
25
 
17
26
  const styles = useStyles();
18
27
  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);
19
- // TODO Add class names to slots, for example:
20
- // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
21
28
  return state;
22
29
  };
package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n // TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;AAAA,KAGrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAME,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACtG;EACA;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n transform: 'translateZ(0)',\n overflow: 'hidden'\n }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGb,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/SplitNavItem/renderSplitNavItem.js CHANGED
@@ -1,5 +1,21 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
2
+ import * as React from 'react';
2
3
  import { assertSlots } from '@fluentui/react-utilities';
4
+ /**
5
+ * @internal
6
+ *
7
+ * Helper function to render button slots
8
+ */ const renderButtonSlot = (Button, ButtonTooltip)=>{
9
+ if (!Button) {
10
+ return null;
11
+ }
12
+ if (ButtonTooltip) {
13
+ return /*#__PURE__*/ _jsx(ButtonTooltip, {
14
+ children: /*#__PURE__*/ _jsx(Button, {})
15
+ });
16
+ }
17
+ return /*#__PURE__*/ _jsx(Button, {});
18
+ };
3
19
  /**
4
20
  * Render the final JSX of SplitNavItem
5
21
  */ export const renderSplitNavItem_unstable = (state)=>{
@@ -7,18 +23,9 @@ import { assertSlots } from '@fluentui/react-utilities';
7
23
  return /*#__PURE__*/ _jsxs(state.root, {
8
24
  children: [
9
25
  state.navItem && /*#__PURE__*/ _jsx(state.navItem, {}),
10
- state.actionButton && state.actionButtonTooltip && /*#__PURE__*/ _jsx(state.actionButtonTooltip, {
11
- children: /*#__PURE__*/ _jsx(state.actionButton, {})
12
- }),
13
- state.actionButton && !state.actionButtonTooltip && /*#__PURE__*/ _jsx(state.actionButton, {}),
14
- state.toggleButton && state.toggleButtonTooltip && /*#__PURE__*/ _jsx(state.toggleButtonTooltip, {
15
- children: /*#__PURE__*/ _jsx(state.toggleButton, {})
16
- }),
17
- state.toggleButton && !state.toggleButtonTooltip && /*#__PURE__*/ _jsx(state.toggleButton, {}),
18
- state.menuButton && state.menuButtonTooltip && /*#__PURE__*/ _jsx(state.menuButtonTooltip, {
19
- children: /*#__PURE__*/ _jsx(state.menuButton, {})
20
- }),
21
- state.menuButton && !state.menuButtonTooltip && /*#__PURE__*/ _jsx(state.menuButton, {})
26
+ renderButtonSlot(state.actionButton, state.actionButtonTooltip),
27
+ renderButtonSlot(state.menuButton, state.menuButtonTooltip),
28
+ renderButtonSlot(state.toggleButton, state.toggleButtonTooltip)
22
29
  ]
23
30
  });
24
31
  };
package/lib/components/SplitNavItem/renderSplitNavItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/SplitNavItem/renderSplitNavItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SplitNavItemState, SplitNavItemSlots } from './SplitNavItem.types';\n\n/**\n * Render the final JSX of SplitNavItem\n */\nexport const renderSplitNavItem_unstable = (state: SplitNavItemState) => {\n assertSlots<SplitNavItemSlots>(state);\n\n return (\n <state.root>\n {state.navItem && <state.navItem />}\n {state.actionButton && state.actionButtonTooltip && (\n <state.actionButtonTooltip>\n <state.actionButton />\n </state.actionButtonTooltip>\n )}\n {state.actionButton && !state.actionButtonTooltip && <state.actionButton />}\n\n {state.toggleButton && state.toggleButtonTooltip && (\n <state.toggleButtonTooltip>\n <state.toggleButton />\n </state.toggleButtonTooltip>\n )}\n {state.toggleButton && !state.toggleButtonTooltip && <state.toggleButton />}\n\n {state.menuButton && state.menuButtonTooltip && (\n <state.menuButtonTooltip>\n <state.menuButton />\n </state.menuButtonTooltip>\n )}\n {state.menuButton && !state.menuButtonTooltip && <state.menuButton />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSplitNavItem_unstable","state","root","navItem","actionButton","actionButtonTooltip","toggleButton","toggleButtonTooltip","menuButton","menuButtonTooltip"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,OAAO,kBAAI,KAACF,MAAME,OAAO;YAC/BF,MAAMG,YAAY,IAAIH,MAAMI,mBAAmB,kBAC9C,KAACJ,MAAMI,mBAAmB;0BACxB,cAAA,KAACJ,MAAMG,YAAY;;YAGtBH,MAAMG,YAAY,IAAI,CAACH,MAAMI,mBAAmB,kBAAI,KAACJ,MAAMG,YAAY;YAEvEH,MAAMK,YAAY,IAAIL,MAAMM,mBAAmB,kBAC9C,KAACN,MAAMM,mBAAmB;0BACxB,cAAA,KAACN,MAAMK,YAAY;;YAGtBL,MAAMK,YAAY,IAAI,CAACL,MAAMM,mBAAmB,kBAAI,KAACN,MAAMK,YAAY;YAEvEL,MAAMO,UAAU,IAAIP,MAAMQ,iBAAiB,kBAC1C,KAACR,MAAMQ,iBAAiB;0BACtB,cAAA,KAACR,MAAMO,UAAU;;YAGpBP,MAAMO,UAAU,IAAI,CAACP,MAAMQ,iBAAiB,kBAAI,KAACR,MAAMO,UAAU;;;AAGxE,EAAE"}
1
+ {"version":3,"sources":["../src/components/SplitNavItem/renderSplitNavItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { SplitNavItemState, SplitNavItemSlots } from './SplitNavItem.types';\n\n/**\n * @internal\n *\n * Helper function to render button slots\n */\nconst renderButtonSlot = (Button?: React.ElementType, ButtonTooltip?: React.ElementType) => {\n if (!Button) {\n return null;\n }\n\n if (ButtonTooltip) {\n return (\n <ButtonTooltip>\n <Button />\n </ButtonTooltip>\n );\n }\n\n return <Button />;\n};\n\n/**\n * Render the final JSX of SplitNavItem\n */\nexport const renderSplitNavItem_unstable = (state: SplitNavItemState) => {\n assertSlots<SplitNavItemSlots>(state);\n\n return (\n <state.root>\n {state.navItem && <state.navItem />}\n {renderButtonSlot(state.actionButton, state.actionButtonTooltip)}\n {renderButtonSlot(state.menuButton, state.menuButtonTooltip)}\n {renderButtonSlot(state.toggleButton, state.toggleButtonTooltip)}\n </state.root>\n );\n};\n"],"names":["React","assertSlots","renderButtonSlot","Button","ButtonTooltip","renderSplitNavItem_unstable","state","root","navItem","actionButton","actionButtonTooltip","menuButton","menuButtonTooltip","toggleButton","toggleButtonTooltip"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,4BAA4B;AAIxD;;;;CAIC,GACD,MAAMC,mBAAmB,CAACC,QAA4BC;IACpD,IAAI,CAACD,QAAQ;QACX,OAAO;IACT;IAEA,IAAIC,eAAe;QACjB,qBACE,KAACA;sBACC,cAAA,KAACD;;IAGP;IAEA,qBAAO,KAACA;AACV;AAEA;;CAEC,GACD,OAAO,MAAME,8BAA8B,CAACC;IAC1CL,YAA+BK;IAE/B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,OAAO,kBAAI,KAACF,MAAME,OAAO;YAC/BN,iBAAiBI,MAAMG,YAAY,EAAEH,MAAMI,mBAAmB;YAC9DR,iBAAiBI,MAAMK,UAAU,EAAEL,MAAMM,iBAAiB;YAC1DV,iBAAiBI,MAAMO,YAAY,EAAEP,MAAMQ,mBAAmB;;;AAGrE,EAAE"}