npm - @fluentui/react-tree - Versions diffs - 9.0.0-beta.21 → 9.0.0-beta.23 - Mend

@fluentui/react-tree 9.0.0-beta.21 → 9.0.0-beta.23

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 (41) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,147 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Tue, 27 Jun 2023 11:19:43 GMT",
+      "date": "Mon, 03 Jul 2023 11:54:01 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.23",
+      "version": "9.0.0-beta.23",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.26",
+            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.10",
+            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.21",
+            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.26",
+            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.0",
+            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.6.0",
+            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.9.2",
+            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-utilities to v9.10.1",
+            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10",
+            "commit": "e7a838bfd1ce4b077d265295fcbef8dc2177e724"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 28 Jun 2023 11:12:35 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.22",
+      "version": "9.0.0-beta.22",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "fbe878e9c9785588197481f172c42c2c0a230292",
+            "comment": "fix: update .npmignore to unify v8 packages and exclude project.json"
+          },
+          {
+            "author": "petrduda@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7",
+            "comment": "bugfix: aligns TreeItem leaf and branch nodes"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "55b25f7aabb9db09beb11c61ee334c04c89ada74",
+            "comment": "chore: export useTreeItemContextValues_unstable"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.25",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.9",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.20",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.25",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.2.16",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.9.1",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-utilities to v9.10.0",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.9",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 27 Jun 2023 11:21:23 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.21",
       "version": "9.0.0-beta.21",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,46 @@
 # Change Log - @fluentui/react-tree
-This log was last generated on Tue, 27 Jun 2023 11:19:43 GMT and should not be manually modified.
+This log was last generated on Mon, 03 Jul 2023 11:54:01 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.0-beta.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.23)
+Mon, 03 Jul 2023 11:54:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.22..@fluentui/react-tree_v9.0.0-beta.23)
+### Changes
+- Bump @fluentui/react-aria to v9.3.26 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+- Bump @fluentui/react-avatar to v9.5.10 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+- Bump @fluentui/react-button to v9.3.21 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.26 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+- Bump @fluentui/react-portal to v9.3.0 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.6.0 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+- Bump @fluentui/react-tabster to v9.9.2 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+- Bump @fluentui/react-utilities to v9.10.1 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10 ([PR #28399](https://github.com/microsoft/fluentui/pull/28399) by beachball)
+## [9.0.0-beta.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.22)
+Wed, 28 Jun 2023 11:12:35 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.21..@fluentui/react-tree_v9.0.0-beta.22)
+### Changes
+- chore: export useTreeItemContextValues_unstable ([PR #28344](https://github.com/microsoft/fluentui/pull/28344) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.25 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
+- Bump @fluentui/react-avatar to v9.5.9 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
+- Bump @fluentui/react-button to v9.3.20 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.25 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
+- Bump @fluentui/react-portal to v9.2.16 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
+- Bump @fluentui/react-tabster to v9.9.1 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
+- Bump @fluentui/react-utilities to v9.10.0 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.9 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
 ## [9.0.0-beta.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.21)
-Tue, 27 Jun 2023 11:19:43 GMT
+Tue, 27 Jun 2023 11:21:23 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.20..@fluentui/react-tree_v9.0.0-beta.21)
 ### Changes

package/dist/index.d.ts CHANGED Viewed

@@ -278,6 +278,10 @@ export declare type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutS
 export declare type TreeItemLayoutSlots = {
     root: Slot<'div'>;
+    /**
+     * Content. Children of the root slot are automatically rendered here
+     */
+    content: NonNullable<Slot<'div'>>;
     /**
      * Icon slot that renders right before main content
      */
@@ -338,11 +342,11 @@ export declare type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'acti
      */
     media: NonNullable<Slot<'div'>>;
     /**
-     * Main text. Children of the root slot are automatically rendered here
+     * Content. Children of the root slot are automatically rendered here
      */
-    main: NonNullable<Slot<'div'>>;
+    content: NonNullable<Slot<'div'>>;
     /**
-     * Secondary text that describes or complements the main text
+     * Secondary text that describes or complements the content
      */
     description?: Slot<'div'>;
 };
@@ -547,6 +551,8 @@ export declare function useTreeItem_unstable(props: TreeItemProps, ref: React_2.
 export declare const useTreeItemContext_unstable: <T>(selector: ContextSelector<TreeItemContextValue, T>) => T;
+export declare function useTreeItemContextValues_unstable(state: Pick<TreeItemState, keyof TreeItemContextValue>): TreeItemContextValues;
 /**
  * Create the state required to render TreeItemLayout.
  *

package/lib/components/Tree/useTreeStyles.styles.js CHANGED Viewed

@@ -19,7 +19,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bw0ie65: "f10ort2y"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1s4axba{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;}", ".f1na4k6z{grid-row-start:subtree;}", ".fwt6ga{grid-column-start:subtree;}", ".fi45nfw{grid-row-end:subtree;}", ".f10ort2y{grid-column-end:subtree;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1s4axba{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;}", ".f1na4k6z{-ms-grid-row:subtree;grid-row-start:subtree;}", ".fwt6ga{-ms-grid-column:subtree;grid-column-start:subtree;}", ".fi45nfw{-ms-grid-row-span:subtree;grid-row-end:subtree;}", ".f10ort2y{-ms-grid-column-span:subtree;grid-column-end:subtree;}"]
 });
 export const useTreeStyles_unstable = state => {
   const styles = useStyles();

package/lib/components/TreeItem/index.js CHANGED Viewed

@@ -3,3 +3,4 @@ export * from './TreeItem.types';
 export * from './renderTreeItem';
 export * from './useTreeItem';
 export * from './useTreeItemStyles.styles';
+export * from './useTreeItemContextValues';

package/lib/components/TreeItem/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B"}
1	+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\nexport * from './useTreeItemContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B;AAC3C,cAAc,6BAA6B"}

package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\n\nexport type TreeItemLayoutSlots = {\n root: Slot<'div'>;\n /*\n Icon slot that renders right before main content\n /\n iconBefore?: Slot<'div'>;\n /\n Icon slot that renders right after main content\n /\n iconAfter?: Slot<'div'>;\n /\n Expand icon slot,\n * by default renders a chevron icon to indicate opening and closing\n /\n expandIcon?: Slot<'div'>;\n aside?: Slot<'div'>;\n /\n actionable elements are normally buttons, menus, or other focusable elements.\n * Those elements are only visibly available if the given tree item is currently active.\n /\n actions?: Slot<\n ExtractSlotProps<\n Slot<'div'> & {\n /\n Forces visibility of the aside/action content\n /\n visible?: boolean;\n }\n >\n >;\n};\n\n/\n TreeItemLayout Props\n /\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/\n State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,~~WA6CE~~"}
1	+ {"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\n\nexport type TreeItemLayoutSlots = {\n root: Slot<'div'>;\n /*\n Content. Children of the root slot are automatically rendered here\n /\n content: NonNullable<Slot<'div'>>;\n /\n Icon slot that renders right before main content\n /\n iconBefore?: Slot<'div'>;\n /\n Icon slot that renders right after main content\n /\n iconAfter?: Slot<'div'>;\n /\n Expand icon slot,\n * by default renders a chevron icon to indicate opening and closing\n /\n expandIcon?: Slot<'div'>;\n aside?: Slot<'div'>;\n /\n actionable elements are normally buttons, menus, or other focusable elements.\n * Those elements are only visibly available if the given tree item is currently active.\n /\n actions?: Slot<\n ExtractSlotProps<\n Slot<'div'> & {\n /\n Forces visibility of the aside/action content\n /\n visible?: boolean;\n }\n >\n >;\n};\n\n/\n TreeItemLayout Props\n /\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/\n State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAiDE"}

package/lib/components/TreeItemLayout/renderTreeItemLayout.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { ButtonContextProvider } from '@fluentui/react-button';
  * Render the final JSX of TreeItemLayout
  */ export const renderTreeItemLayout_unstable = (state)=>{
     const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ createElement(ButtonContextProvider, {
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), /*#__PURE__*/ createElement(slots.content, slotProps.content, slotProps.root.children), slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ createElement(ButtonContextProvider, {
         value: state.buttonContextValue
     }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));
 };

package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic /\n/* @jsx createElement /\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/\n Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n {slotProps.root.children}\n {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n <ButtonContextProvider value={state.buttonContextValue}>\n {slots.actions && <slots.actions {...slotProps.actions} />}\n {slots.aside && <slots.aside {...slotProps.aside} />}\n </ButtonContextProvider>\n </slots.root>\n );\n};\n"],"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","iconBefore","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAkCG;IAE/D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAf3B,cAe4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,UAAU,kBAAI,AAhB3B,cAgB4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU,~~GAC9DH~~,UAAUC,IAAI,~~CAACG~~,QAAQ,~~EACvBL~~,~~MAAMM~~,SAAS,kBAAI,AAlB1B,~~cAkB2BN~~,~~MAAMM~~,SAAS,~~EAAKL~~,~~UAAUK~~,SAAS,iBAC5D,AAnBN,~~cAmBOT~~;~~QAAsBU~~,~~OAAOR~~,~~MAAMS~~,kBAAkB;~~OACnDR~~,~~MAAMS~~,OAAO,kBAAI,AApB1B,~~cAoB2BT~~,~~MAAMS~~,OAAO,~~EAAKR~~,~~UAAUQ~~,OAAO,~~GACrDT~~,~~MAAMU~~,KAAK,kBAAI,AArBxB,~~cAqByBV~~,~~MAAMU~~,KAAK,~~EAAKT~~,~~UAAUS~~,KAAK;AAIxD,EAAE"}
1	+ {"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic /\n/* @jsx createElement /\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/\n Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n <slots.content {...slotProps.content}>{slotProps.root.children}</slots.content>\n {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n <ButtonContextProvider value={state.buttonContextValue}>\n {slots.actions && <slots.actions {...slotProps.actions} />}\n {slots.aside && <slots.aside {...slotProps.aside} />}\n </ButtonContextProvider>\n </slots.root>\n );\n};\n"],"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","iconBefore","content","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAkCG;IAE/D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAf3B,cAe4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,UAAU,kBAAI,AAhB3B,cAgB4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU,iBAC/D,AAjBN,cAiBOJ,MAAMK,OAAO,EAAKJ,UAAUI,OAAO,EAAGJ,UAAUC,IAAI,CAACI,QAAQ,GAC7DN,MAAMO,SAAS,kBAAI,AAlB1B,cAkB2BP,MAAMO,SAAS,EAAKN,UAAUM,SAAS,iBAC5D,AAnBN,cAmBOV;QAAsBW,OAAOT,MAAMU,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AApB1B,cAoB2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AArBxB,cAqByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { TreeItemChevron } from '../TreeItemChevron';
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
-    const { iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;
+    const { content , iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
     const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
     const isActionsVisibleContext = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible);
@@ -25,6 +25,7 @@ import { TreeItemChevron } from '../TreeItemChevron';
             root: 'div',
             expandIcon: 'div',
             iconBefore: 'div',
+            content: 'div',
             iconAfter: 'div',
             actions: 'div',
             aside: 'div'
@@ -41,6 +42,9 @@ import { TreeItemChevron } from '../TreeItemChevron';
                 'aria-hidden': true
             }
         }),
+        content: resolveShorthand(content, {
+            required: true
+        }),
         iconAfter: resolveShorthand(iconAfter, {
             defaultProps: {
                 'aria-hidden': true

package/lib/components/TreeItemLayout/useTreeItemLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n getNativeElementProps,\n isResolvedShorthand,\n resolveShorthand,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/*\n Create the state required to render TreeItemLayout.\n \n The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n \n @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n props: TreeItemLayoutProps,\n ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n const { iconAfter, iconBefore, expandIcon, as = 'span', aside, actions } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n const isActionsVisibleContext = useTreeItemContext_unstable(ctx => ctx.isActionsVisible);\n const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n const isActionsVisible = (isResolvedShorthand(actions) ? actions.visible : undefined) ?? isActionsVisibleContext;\n const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n const actionsRef = useMergedRefs(\n isResolvedShorthand(actions) ? actions.ref : undefined,\n useTreeItemContext_unstable(ctx => ctx.actionsRef),\n );\n\n return {\n components: {\n root: 'div',\n expandIcon: 'div',\n iconBefore: 'div',\n iconAfter: 'div',\n actions: 'div',\n aside: 'div',\n },\n buttonContextValue: { size: 'small' },\n root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n aside: isAsideVisible ? resolveShorthand(aside) : undefined,\n actions: isActionsVisible\n ? resolveShorthand<ExtractSlotProps<TreeItemLayoutSlots['actions']>>(\n // visible props should not be propagated to the DOM\n isResolvedShorthand(actions) ? { ...actions, visible: undefined } : actions,\n {\n defaultProps: { ref: actionsRef },\n },\n )\n : undefined,\n expandIcon: resolveShorthand(expandIcon, {\n required: isBranch,\n defaultProps: {\n children: <TreeItemChevron />,\n 'aria-hidden': true,\n ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n },\n }),\n };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","aside","actions","layoutRef","ctx","expandIconRef","isActionsVisibleContext","isActionsVisible","isAsideVisible","visible","undefined","isBranch","itemType","actionsRef","components","root","buttonContextValue","size","defaultProps","required","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAEEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAQ,qBAAqB;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,UAAS,EAAEC,WAAU,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAEC,MAAK,EAAEC,QAAO,EAAE,~~GAAGP~~;~~IAE3E~~,~~MAAMQ~~,~~YAAYX~~,~~4BAA4BY~~,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,~~gBAAgBb~~,~~4BAA4BY~~,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,~~0BAA0Bd~~,~~4BAA4BY~~,CAAAA,MAAOA,IAAIG,gBAAgB;IACvF,MAAMC,~~iBAAiBhB~~,~~4BAA4BY~~,CAAAA,MAAOA,IAAII,cAAc;~~QAClDnB~~;IAA1B,~~MAAMkB~~,mBAAmB,~~CAAClB~~,OAAAA,~~oBAAoBa~~,WAAWA,QAAQO,OAAO,GAAGC,SAAS,~~cAA1DrB~~,kBAAAA,OAA+~~DiB~~,uBAAuB;IAChH,MAAMK,~~WAAWnB~~,~~4BAA4BY~~,CAAAA,MAAOA,IAAIQ,QAAQ,KAAK;IACrE,MAAMC,~~aAAatB~~,cACjBF,~~oBAAoBa~~,WAAWA,~~QAAQN~~,GAAG,~~GAAGc~~,SAAS,~~EACtDlB~~,~~4BAA4BY~~,CAAAA,MAAOA,IAAIS,UAAU;IAGnD,OAAO;QACLC,YAAY;YACVC,MAAM;YACNhB,YAAY;YACZD,YAAY;~~YACZD~~,WAAW;YACXK,SAAS;YACTD,OAAO;QACT;QACAe,oBAAoB;YAAEC,MAAM;QAAQ;QACpCF,~~MAAM3B~~,~~sBAAsBY~~,IAAI;YAAE,~~GAAGL~~,KAAK;YAAEC,KAAKL,cAAcK,~~KAAKO~~;QAAW;QAC/EL,~~YAAYR~~,~~iBAAiBQ~~,YAAY;YAAEoB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;~~QACjFrB~~,~~WAAWP~~,iBAAiBO,WAAW;YAAEqB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/EjB,OAAOO,~~iBAAiBlB~~,~~iBAAiBW~~,SAASS,SAAS;QAC3DR,SAASK,~~mBACLjB~~,iBACE,oDAAoD;QACpDD,~~oBAAoBa~~,WAAW;YAAE,GAAGA,OAAO;YAAEO,SAASC;QAAU,IAAIR,OAAO,EAC3E;YACEgB,cAAc;~~gBAAEtB~~,~~KAAKiB~~;YAAW;QAClC,KAEFH,SAAS;QACbX,~~YAAYT~~,~~iBAAiBS~~,YAAY;YACvCoB,UAAUR;YACVO,cAAc;gBACZE,wBAAU,~~oBAAC3B~~;gBACX,eAAe,IAAI;gBACnBG,KAAKL,cAAcF,~~oBAAoBU~~,cAAcA,~~WAAWH~~,GAAG,~~GAAGc~~,SAAS,EAAEL;YACnF;QACF;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n getNativeElementProps,\n isResolvedShorthand,\n resolveShorthand,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/*\n Create the state required to render TreeItemLayout.\n \n The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n \n @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n props: TreeItemLayoutProps,\n ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n const { content, iconAfter, iconBefore, expandIcon, as = 'span', aside, actions } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n const isActionsVisibleContext = useTreeItemContext_unstable(ctx => ctx.isActionsVisible);\n const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n const isActionsVisible = (isResolvedShorthand(actions) ? actions.visible : undefined) ?? isActionsVisibleContext;\n const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n const actionsRef = useMergedRefs(\n isResolvedShorthand(actions) ? actions.ref : undefined,\n useTreeItemContext_unstable(ctx => ctx.actionsRef),\n );\n\n return {\n components: {\n root: 'div',\n expandIcon: 'div',\n iconBefore: 'div',\n content: 'div',\n iconAfter: 'div',\n actions: 'div',\n aside: 'div',\n },\n buttonContextValue: { size: 'small' },\n root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n content: resolveShorthand(content, { required: true }),\n iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n aside: isAsideVisible ? resolveShorthand(aside) : undefined,\n actions: isActionsVisible\n ? resolveShorthand<ExtractSlotProps<TreeItemLayoutSlots['actions']>>(\n // visible props should not be propagated to the DOM\n isResolvedShorthand(actions) ? { ...actions, visible: undefined } : actions,\n {\n defaultProps: { ref: actionsRef },\n },\n )\n : undefined,\n expandIcon: resolveShorthand(expandIcon, {\n required: isBranch,\n defaultProps: {\n children: <TreeItemChevron />,\n 'aria-hidden': true,\n ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n },\n }),\n };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","expandIcon","as","aside","actions","layoutRef","ctx","expandIconRef","isActionsVisibleContext","isActionsVisible","isAsideVisible","visible","undefined","isBranch","itemType","actionsRef","components","root","buttonContextValue","size","defaultProps","required","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAEEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAQ,qBAAqB;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,QAAO,EAAEC,UAAS,EAAEC,WAAU,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAEC,MAAK,EAAEC,QAAO,EAAE,GAAGR;IAEpF,MAAMS,YAAYZ,4BAA4Ba,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBd,4BAA4Ba,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,0BAA0Bf,4BAA4Ba,CAAAA,MAAOA,IAAIG,gBAAgB;IACvF,MAAMC,iBAAiBjB,4BAA4Ba,CAAAA,MAAOA,IAAII,cAAc;QAClDpB;IAA1B,MAAMmB,mBAAmB,CAACnB,OAAAA,oBAAoBc,WAAWA,QAAQO,OAAO,GAAGC,SAAS,cAA1DtB,kBAAAA,OAA+DkB,uBAAuB;IAChH,MAAMK,WAAWpB,4BAA4Ba,CAAAA,MAAOA,IAAIQ,QAAQ,KAAK;IACrE,MAAMC,aAAavB,cACjBF,oBAAoBc,WAAWA,QAAQP,GAAG,GAAGe,SAAS,EACtDnB,4BAA4Ba,CAAAA,MAAOA,IAAIS,UAAU;IAGnD,OAAO;QACLC,YAAY;YACVC,MAAM;YACNhB,YAAY;YACZD,YAAY;YACZF,SAAS;YACTC,WAAW;YACXK,SAAS;YACTD,OAAO;QACT;QACAe,oBAAoB;YAAEC,MAAM;QAAQ;QACpCF,MAAM5B,sBAAsBa,IAAI;YAAE,GAAGN,KAAK;YAAEC,KAAKL,cAAcK,KAAKQ;QAAW;QAC/EL,YAAYT,iBAAiBS,YAAY;YAAEoB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFtB,SAASP,iBAAiBO,SAAS;YAAEuB,UAAU,IAAI;QAAC;QACpDtB,WAAWR,iBAAiBQ,WAAW;YAAEqB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/EjB,OAAOO,iBAAiBnB,iBAAiBY,SAASS,SAAS;QAC3DR,SAASK,mBACLlB,iBACE,oDAAoD;QACpDD,oBAAoBc,WAAW;YAAE,GAAGA,OAAO;YAAEO,SAASC;QAAU,IAAIR,OAAO,EAC3E;YACEgB,cAAc;gBAAEvB,KAAKkB;YAAW;QAClC,KAEFH,SAAS;QACbX,YAAYV,iBAAiBU,YAAY;YACvCoB,UAAUR;YACVO,cAAc;gBACZE,wBAAU,oBAAC5B;gBACX,eAAe,IAAI;gBACnBG,KAAKL,cAAcF,oBAAoBW,cAAcA,WAAWJ,GAAG,GAAGe,SAAS,EAAEL;YACnF;QACF;IACF;AACF,EAAE"}

package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
 export const treeItemLayoutClassNames = {
   root: 'fui-TreeItemLayout',
   iconBefore: 'fui-TreeItemLayout__iconBefore',
+  content: 'fui-TreeItemLayout__content',
   iconAfter: 'fui-TreeItemLayout__iconAfter',
   expandIcon: 'fui-TreeItemLayout__expandIcon',
   aside: 'fui-TreeItemLayout__aside',
@@ -42,14 +43,12 @@ const useRootStyles = /*#__PURE__*/__styles({
     uwmqm3: ["fo100m9", "f6yw3pu"]
   },
   medium: {
-    i8kkvl: "f1rjii52",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
     Bhrd7zp: "figsok6",
     Bg96gwp: "f1i3iumi"
   },
   small: {
-    i8kkvl: "f1ufnopg",
     sshi5w: "f1pha7fy",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
@@ -67,26 +66,10 @@ const useRootStyles = /*#__PURE__*/__styles({
     ecr2s2: "fophhak"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f15ws6j{grid-row-start:layout;}", ".f135tdbu{grid-column-start:layout;}", ".f2e2169{grid-row-end:layout;}", ".f4rqp6x{grid-column-end:layout;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f15ws6j{-ms-grid-row:layout;grid-row-start:layout;}", ".f135tdbu{-ms-grid-column:layout;grid-column-start:layout;}", ".f2e2169{-ms-grid-row-span:layout;grid-row-end:layout;}", ".f4rqp6x{-ms-grid-column-span:layout;grid-column-end:layout;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
   a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"],
   h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"]
 });
-/**
- * Styles for the before/after icon slot
- */
-const useIconStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bt984gj: "f122n59",
-    sj55zd: "fkfq4zb",
-    Bg96gwp: "f106mvju",
-    Be2twd7: "f1pp30po"
-  },
-  iconBefore: {},
-  iconAfter: {}
-}, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
-});
 /**
  * Styles for the action icon slot
  */
@@ -106,7 +89,7 @@ const useActionsStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}", ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}", ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}", ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
 });
 /**
  * Styles for the action icon slot
@@ -129,7 +112,7 @@ const useAsideStyles = /*#__PURE__*/__styles({
     Belr9w4: "f14sijuj"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}", ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}", ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}", ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
 });
 /**
  * Styles for the expand icon slot
@@ -153,29 +136,85 @@ const useExpandIconStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
 });
+/**
+ * Styles for the content slot
+ */
+const useContentStyles = /*#__PURE__*/__styles({
+  base: {
+    z8tnut: "f1g0x7ka",
+    z189sj: ["ffczdla", "fgiv446"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["fgiv446", "ffczdla"]
+  }
+}, {
+  d: [".f1g0x7ka{padding-top:0;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f1qch9an{padding-bottom:0;}"]
+});
+/**
+ * Styles for the before/after icon slot
+ */
+const useIconStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    sj55zd: "fkfq4zb",
+    Bg96gwp: "f106mvju",
+    Be2twd7: "f1pp30po"
+  }
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
+});
+const useIconBeforeStyles = /*#__PURE__*/__styles({
+  medium: {
+    z189sj: ["f7x41pl", "fruq291"]
+  },
+  small: {
+    z189sj: ["ffczdla", "fgiv446"]
+  }
+}, {
+  d: [".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}"]
+});
+const useIconAfterStyles = /*#__PURE__*/__styles({
+  medium: {
+    uwmqm3: ["fruq291", "f7x41pl"]
+  },
+  small: {
+    uwmqm3: ["fgiv446", "ffczdla"]
+  }
+}, {
+  d: [".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
+});
 /**
  * Apply styling to the TreeItemLayout slots based on the state
  */
 export const useTreeItemLayoutStyles_unstable = state => {
   const {
+    content,
     iconAfter,
     iconBefore,
+    expandIcon,
     root
   } = state;
   const rootStyles = useRootStyles();
-  const iconStyles = useIconStyles();
   const actionsStyles = useActionsStyles();
   const asideStyles = useAsideStyles();
+  const contentStyles = useContentStyles();
   const expandIconStyles = useExpandIconStyles();
+  const iconStyles = useIconStyles();
+  const iconBeforeStyles = useIconBeforeStyles();
+  const iconAfterStyles = useIconAfterStyles();
   const size = useTreeContext_unstable(ctx => ctx.size);
   const appearance = useTreeContext_unstable(ctx => ctx.appearance);
   const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
   root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+  content.className = mergeClasses(treeItemLayoutClassNames.content, contentStyles.base, content.className);
+  if (expandIcon) {
+    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
+  }
   if (iconBefore) {
-    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);
+    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);
   }
   if (iconAfter) {
-    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);
+    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);
   }
   if (state.actions) {
     state.actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, state.actions.className);

package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","iconAfter","expandIcon","aside","actions","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","i8kkvl","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useIconStyles","sj55zd","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","Bh6795r","Bnnss6s","xawz","useTreeItemLayoutStyles_unstable","state","rootStyles","iconStyles","actionsStyles","asideStyles","expandIconStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions'\n};\n/*\n Styles for the root slot\n / const useRootStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n boxSizing: 'border-box',\n ...shorthands.gridArea('layout'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed\n }\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover\n }\n }\n },\n leaf: {\n paddingLeft: `calc(var(${treeItemLevelToken}, 1) ${tokens.spacingHorizontalXXL})`\n },\n branch: {\n paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n },\n medium: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body1\n },\n small: {\n columnGap: tokens.spacingHorizontalXS,\n minHeight: '24px',\n ...typographyStyles.caption1\n },\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n }\n }\n});\n/*\n Styles for the before/after icon slot\n / const useIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500\n },\n iconBefore: {},\n iconAfter: {}\n});\n/\n Styles for the action icon slot\n / const useActionsStyles = makeStyles({\n base: {\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n ...shorthands.gridArea('aside'),\n ...shorthands.padding(0, tokens.spacingHorizontalS)\n }\n});\n/\n Styles for the action icon slot\n / const useAsideStyles = makeStyles({\n base: {\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n ...shorthands.gridArea('aside'),\n ...shorthands.padding(0, tokens.spacingHorizontalM),\n ...shorthands.gap(tokens.spacingHorizontalXS)\n }\n});\n/\n Styles for the expand icon slot\n / const useExpandIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n ...shorthands.flex(0, 0, 'auto'),\n ...shorthands.padding(tokens.spacingVerticalXS, 0)\n }\n});\n/\n Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n const { iconAfter , iconBefore , root } = state;\n const rootStyles = useRootStyles();\n const iconStyles = useIconStyles();\n const actionsStyles = useActionsStyles();\n const asideStyles = useAsideStyles();\n const expandIconStyles = useExpandIconStyles();\n const size = useTreeContext_unstable((ctx)=>ctx.size);\n const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n if (iconBefore) {\n iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);\n }\n if (iconAfter) {\n iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);\n }\n if (state.actions) {\n state.actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n }\n if (state.aside) {\n state.aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,UAAU,EAAE,gCAAgC;EAC5CC,SAAS,EAAE,+BAA+B;EAC1CC,UAAU,EAAE,gCAAgC;EAC5CC,KAAK,EAAE,2BAA2B;EAClCC,OAAO,EAAE;AACb,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAL,MAAA;IAAApB,MAAA;IAAAqB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;EAAA;IAAAZ,MAAA;IAAAH,MAAA;EAAA;EAAAgB,WAAA;IAAAC,MAAA;IAAAd,MAAA;IAAAH,MAAA;EAAA;AAAA;EAAAkB,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA2DzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGnD,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAkC,MAAA;IAAAT,OAAA;IAAAF,OAAA;EAAA;EAAA/B,UAAA;EAAAC,SAAA;AAAA;EAAAqC,CAAA;AAAA,CAUzB,CAAC;AACF;AACA;AACA;AAAI,MAAMK,gBAAgB,gBAAGrD,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAqC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAnC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAiC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAvB,MAAA;EAAA;AAAA;EAAAY,CAAA;AAAA,CAS5B,CAAC;AACF;AACA;AACA;AAAI,MAAMY,cAAc,gBAAG5D,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAqC,MAAA;IAAApC,OAAA;IAAAsC,OAAA;IAAAnC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAiC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAvB,MAAA;IAAAG,MAAA;IAAAsB,OAAA;EAAA;AAAA;EAAAb,CAAA;AAAA,CAU1B,CAAC;AACF;AACA;AACA;AAAI,MAAMc,mBAAmB,gBAAG9D,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA6C,OAAA;IAAAC,OAAA;IAAA5C,OAAA;IAAAgC,MAAA;IAAAa,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAvB,MAAA;EAAA;AAAA;EAAAY,CAAA;AAAA,CAW/B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMoB,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAM;IAAE1D,SAAS;IAAGD,UAAU;IAAGD;EAAM,CAAC,GAAG4D,KAAK;EAChD,MAAMC,UAAU,GAAGvD,aAAa,CAAC,CAAC;EAClC,MAAMwD,UAAU,GAAGpB,aAAa,CAAC,CAAC;EAClC,MAAMqB,aAAa,GAAGnB,gBAAgB,CAAC,CAAC;EACxC,MAAMoB,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,gBAAgB,GAAGZ,mBAAmB,CAAC,CAAC;EAC9C,MAAMa,IAAI,GAAGtE,uBAAuB,CAAEuE,GAAG,IAAGA,GAAG,CAACD,IAAI,CAAC;EACrD,MAAME,UAAU,GAAGxE,uBAAuB,CAAEuE,GAAG,IAAGA,GAAG,CAACC,UAAU,CAAC;EACjE,MAAMC,QAAQ,GAAGvE,2BAA2B,CAAEqE,GAAG,IAAGA,GAAG,CAACE,QAAQ,CAAC;EACjErE,IAAI,CAACsE,SAAS,GAAG9E,YAAY,CAACO,wBAAwB,CAACC,IAAI,EAAE6D,UAAU,CAACtD,IAAI,EAAEsD,UAAU,CAACO,UAAU,CAAC,EAAEP,UAAU,CAACK,IAAI,CAAC,EAAEL,UAAU,CAACQ,QAAQ,CAAC,EAAErE,IAAI,CAACsE,SAAS,CAAC;EAC7J,IAAIrE,UAAU,EAAE;IACZA,UAAU,CAACqE,SAAS,GAAG9E,YAAY,CAACO,wBAAwB,CAACE,UAAU,EAAE6D,UAAU,CAACvD,IAAI,EAAEuD,UAAU,CAAC7D,UAAU,EAAEA,UAAU,CAACqE,SAAS,CAAC;EAC1I;EACA,IAAIpE,SAAS,EAAE;IACXA,SAAS,CAACoE,SAAS,GAAG9E,YAAY,CAACO,wBAAwB,CAACG,SAAS,EAAE4D,UAAU,CAACvD,IAAI,EAAEuD,UAAU,CAAC5D,SAAS,EAAEA,SAAS,CAACoE,SAAS,CAAC;EACtI;EACA,IAAIV,KAAK,CAACvD,OAAO,EAAE;IACfuD,KAAK,CAACvD,OAAO,CAACiE,SAAS,GAAG9E,YAAY,CAACO,wBAAwB,CAACM,OAAO,EAAE0D,aAAa,CAACxD,IAAI,EAAEqD,KAAK,CAACvD,OAAO,CAACiE,SAAS,CAAC;EACzH;EACA,IAAIV,KAAK,CAACxD,KAAK,EAAE;IACbwD,KAAK,CAACxD,KAAK,CAACkE,SAAS,GAAG9E,YAAY,CAACO,wBAAwB,CAACK,KAAK,EAAE4D,WAAW,CAACzD,IAAI,EAAEqD,KAAK,CAACxD,KAAK,CAACkE,SAAS,CAAC;EACjH;EACA,IAAIV,KAAK,CAACzD,UAAU,EAAE;IAClByD,KAAK,CAACzD,UAAU,CAACmE,SAAS,GAAG9E,YAAY,CAACO,wBAAwB,CAACI,UAAU,EAAE8D,gBAAgB,CAAC1D,IAAI,EAAEqD,KAAK,CAACzD,UAAU,CAACmE,SAAS,CAAC;EACrI;EACA,OAAOV,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","content","iconAfter","expandIcon","aside","actions","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useContentStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","actionsStyles","asideStyles","contentStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n content: 'fui-TreeItemLayout__content',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions'\n};\n/*\n Styles for the root slot\n / const useRootStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n boxSizing: 'border-box',\n ...shorthands.gridArea('layout'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed\n }\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover\n }\n }\n },\n leaf: {\n paddingLeft: `calc(var(${treeItemLevelToken}, 1) ${tokens.spacingHorizontalXXL})`\n },\n branch: {\n paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n },\n medium: {\n ...typographyStyles.body1\n },\n small: {\n minHeight: '24px',\n ...typographyStyles.caption1\n },\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n }\n }\n});\n/*\n Styles for the action icon slot\n / const useActionsStyles = makeStyles({\n base: {\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n ...shorthands.gridArea('aside'),\n ...shorthands.padding(0, tokens.spacingHorizontalS)\n }\n});\n/\n Styles for the action icon slot\n / const useAsideStyles = makeStyles({\n base: {\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n ...shorthands.gridArea('aside'),\n ...shorthands.padding(0, tokens.spacingHorizontalM),\n ...shorthands.gap(tokens.spacingHorizontalXS)\n }\n});\n/\n Styles for the expand icon slot\n / const useExpandIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n ...shorthands.flex(0, 0, 'auto'),\n ...shorthands.padding(tokens.spacingVerticalXS, 0)\n }\n});\n/\n Styles for the content slot\n / const useContentStyles = makeStyles({\n base: {\n ...shorthands.padding(0, tokens.spacingHorizontalXXS)\n }\n});\n/\n Styles for the before/after icon slot\n / const useIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500\n }\n});\nconst useIconBeforeStyles = makeStyles({\n medium: {\n paddingRight: tokens.spacingHorizontalXS\n },\n small: {\n paddingRight: tokens.spacingHorizontalXXS\n }\n});\nconst useIconAfterStyles = makeStyles({\n medium: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS\n }\n});\n/\n Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n const { content , iconAfter , iconBefore , expandIcon , root } = state;\n const rootStyles = useRootStyles();\n const actionsStyles = useActionsStyles();\n const asideStyles = useAsideStyles();\n const contentStyles = useContentStyles();\n const expandIconStyles = useExpandIconStyles();\n const iconStyles = useIconStyles();\n const iconBeforeStyles = useIconBeforeStyles();\n const iconAfterStyles = useIconAfterStyles();\n const size = useTreeContext_unstable((ctx)=>ctx.size);\n const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n content.className = mergeClasses(treeItemLayoutClassNames.content, contentStyles.base, content.className);\n if (expandIcon) {\n expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n }\n if (iconBefore) {\n iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);\n }\n if (iconAfter) {\n iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n }\n if (state.actions) {\n state.actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n }\n if (state.aside) {\n state.aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n }\n return state;\n};\n"],"mappings":"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"}

package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' \| 'aside' \| 'expandIcon'> & {\n root: NonNullable<Slot<'div'>>;\n /*\n Avatar to display.\n /\n media: NonNullable<Slot<'div'>>;\n /\n ~~Main text~~. Children of the root slot are automatically rendered here\n /\n ~~main~~: NonNullable<Slot<'div'>>;\n /\n Secondary text that describes or complements the ~~main text~~\n /\n description?: Slot<'div'>;\n};\n\n/\n TreeItemPersonaLayout Props\n /\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/\n State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n avatarSize: AvatarSize;\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAoCE"}
1	+ {"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' \| 'aside' \| 'expandIcon'> & {\n root: NonNullable<Slot<'div'>>;\n /*\n Avatar to display.\n /\n media: NonNullable<Slot<'div'>>;\n /\n Content. Children of the root slot are automatically rendered here\n /\n content: NonNullable<Slot<'div'>>;\n /\n Secondary text that describes or complements the content\n /\n description?: Slot<'div'>;\n};\n\n/\n TreeItemPersonaLayout Props\n /\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/\n State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n avatarSize: AvatarSize;\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAoCE"}

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { ButtonContextProvider } from '@fluentui/react-button';
     const { slots , slotProps  } = getSlotsNext(state);
     return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), /*#__PURE__*/ createElement(AvatarContextProvider, {
         value: contextValues.avatar
-    }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), /*#__PURE__*/ createElement(ButtonContextProvider, {
+    }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.content, slotProps.content), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), /*#__PURE__*/ createElement(ButtonContextProvider, {
         value: state.buttonContextValue
     }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));
 };