@fluentui/react-tree 9.0.0-beta.11 → 9.0.0-beta.13

package/lib/components/TreeItemAside/useTreeItemAside.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+/**
+ * Create the state required to render TreeItemAside.
+ *
+ * The returned state can be modified with hooks such as useTreeItemAsideStyles_unstable,
+ * before being passed to renderTreeItemAside_unstable.
+ *
+ * @param props - props from this instance of TreeItemAside
+ * @param ref - reference to root HTMLElement of TreeItemAside
+ */
+export const useTreeItemAside_unstable = (props, ref) => {
+  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);
+  const contextVisible = useTreeItemContext_unstable(ctx => props.actions ? ctx.isActionsVisible : ctx.isAsideVisible);
+  const {
+    actions = false,
+    visible = contextVisible
+  } = props;
+  return {
+    actions,
+    visible,
+    buttonContextValue: {
+      size: 'small'
+    },
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref: useMergedRefs(ref, actions ? actionsRef : undefined),
+      ...props
+    })
+  };
+};
+//# sourceMappingURL=useTreeItemAside.js.map

package/lib/components/TreeItemAside/useTreeItemAside.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","getNativeElementProps","useMergedRefs","useTreeItemContext_unstable","useTreeItemAside_unstable","props","ref","actionsRef","ctx","contextVisible","actions","isActionsVisible","isAsideVisible","visible","buttonContextValue","size","components","root","undefined"],"sources":["../../../src/components/TreeItemAside/useTreeItemAside.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemAsideProps, TreeItemAsideState } from './TreeItemAside.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\n/**\n * Create the state required to render TreeItemAside.\n *\n * The returned state can be modified with hooks such as useTreeItemAsideStyles_unstable,\n * before being passed to renderTreeItemAside_unstable.\n *\n * @param props - props from this instance of TreeItemAside\n * @param ref - reference to root HTMLElement of TreeItemAside\n */\nexport const useTreeItemAside_unstable = (\n  props: TreeItemAsideProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemAsideState => {\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const contextVisible = useTreeItemContext_unstable(ctx =>\n    props.actions ? ctx.isActionsVisible : ctx.isAsideVisible,\n  );\n  const { actions = false, visible = contextVisible } = props;\n\n  return {\n    actions,\n    visible,\n    buttonContextValue: { size: 'small' },\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, actions ? actionsRef : undefined),\n      ...props,\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,aAAa,QAAQ;AAErD,SAASC,2BAA2B,QAAQ;AAE5C;;;;;;;;;AASA,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,KAAA,EACAC,GAAA,KACuB;EACvB,MAAMC,UAAA,GAAaJ,2BAAA,CAA4BK,GAAA,IAAOA,GAAA,CAAID,UAAU;EACpE,MAAME,cAAA,GAAiBN,2BAAA,CAA4BK,GAAA,IACjDH,KAAA,CAAMK,OAAO,GAAGF,GAAA,CAAIG,gBAAgB,GAAGH,GAAA,CAAII,cAAc;EAE3D,MAAM;IAAEF,OAAA,GAAU,KAAK;IAAEG,OAAA,GAAUJ;EAAc,CAAE,GAAGJ,KAAA;EAEtD,OAAO;IACLK,OAAA;IACAG,OAAA;IACAC,kBAAA,EAAoB;MAAEC,IAAA,EAAM;IAAQ;IACpCC,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAMhB,qBAAA,CAAsB,OAAO;MACjCK,GAAA,EAAKJ,aAAA,CAAcI,GAAA,EAAKI,OAAA,GAAUH,UAAA,GAAaW,SAAS;MACxD,GAAGb;IACL;EACF;AACF"}

package/lib/components/TreeItemAside/useTreeItemAsideStyles.styles.js

@@ -0,0 +1,47 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const treeItemAsideClassNames = {
+  root: 'fui-TreeItemAside'
+};
+/**
+ * Styles for the action icon slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Frg6f3: ["fcgxt0o", "f1ujusj6"],
+    Ijaq50: "fobksn0",
+    Br312pm: "fmy5l6f",
+    nk6f5a: "fzqypwc",
+    Bw0ie65: "f1tmftl3"
+  },
+  actions: {
+    qhf8xq: "f10pi13n",
+    Bj3rh1h: "f19g0ac",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  aside: {
+    Bt984gj: "f122n59",
+    Bj3rh1h: "f11zp4z2",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fw5db7e", "f1uw59to"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1uw59to", "fw5db7e"],
+    i8kkvl: "f1ufnopg",
+    Belr9w4: "f14sijuj"
+  }
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f11zp4z2{z-index:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
+});
+/**
+ * Apply styling to the TreeItemAside slots based on the state
+ */
+export const useTreeItemAsideStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(treeItemAsideClassNames.root, styles.base, state.actions ? styles.actions : styles.aside, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useTreeItemAsideStyles.styles.js.map

package/lib/components/TreeItemAside/useTreeItemAsideStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","treeItemAsideClassNames","root","useStyles","base","mc9l5x","Frg6f3","Ijaq50","Br312pm","nk6f5a","Bw0ie65","actions","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","uwmqm3","aside","Bt984gj","i8kkvl","Belr9w4","d","useTreeItemAsideStyles_unstable","state","styles","className"],"sources":["../../../src/components/TreeItemAside/useTreeItemAsideStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TreeItemAsideSlots, TreeItemAsideState } from './TreeItemAside.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const treeItemAsideClassNames: SlotClassNames<TreeItemAsideSlots> = {\n  root: 'fui-TreeItemAside',\n};\n\n/**\n * Styles for the action icon slot\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'flex',\n    marginLeft: 'auto',\n    ...shorthands.gridArea('aside'),\n  },\n  actions: {\n    position: 'relative',\n    zIndex: 1,\n    ...shorthands.padding(0, tokens.spacingHorizontalS),\n  },\n  aside: {\n    alignItems: 'center',\n    zIndex: 0,\n    ...shorthands.padding(0, tokens.spacingHorizontalM),\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n  },\n});\n\n/**\n * Apply styling to the TreeItemAside slots based on the state\n */\nexport const useTreeItemAsideStyles_unstable = (state: TreeItemAsideState): TreeItemAsideState => {\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    treeItemAsideClassNames.root,\n    styles.base,\n    state.actions ? styles.actions : styles.aside,\n    state.root.className,\n  );\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,SAASC,MAAM,QAAQ;AAEvB,OAAO,MAAMC,uBAAA,GAA8D;EACzEC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAN,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAiBlB;AAEA;;;AAGA,OAAO,MAAMC,+BAAA,GAAmCC,KAAA,IAAkD;EAChG,MAAMC,MAAA,GAAStB,SAAA;EAEfqB,KAAA,CAAMtB,IAAI,CAACwB,SAAS,GAAG5B,YAAA,CACrBG,uBAAA,CAAwBC,IAAI,EAC5BuB,MAAA,CAAOrB,IAAI,EACXoB,KAAA,CAAMb,OAAO,GAAGc,MAAA,CAAOd,OAAO,GAAGc,MAAA,CAAOP,KAAK,EAC7CM,KAAA,CAAMtB,IAAI,CAACwB,SAAS;EAEtB,OAAOF,KAAA;AACT"}

package/lib/components/TreeItemChevron.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { ChevronRight12Regular } from '@fluentui/react-icons';
+import { useTreeItemContext_unstable } from '../contexts/treeItemContext';
+export const TreeItemChevron = /*#__PURE__*/React.memo(() => {
+  const open = useTreeItemContext_unstable(ctx => ctx.open);
+  const {
+    dir
+  } = useFluent_unstable();
+  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
+  return /*#__PURE__*/React.createElement(ChevronRight12Regular, {
+    style: expandIconInlineStyles[expandIconRotation]
+  });
+});
+TreeItemChevron.displayName = 'TreeItemChevron';
+const expandIconInlineStyles = {
+  90: {
+    transform: `rotate(90deg)`
+  },
+  0: {
+    transform: `rotate(0deg)`
+  },
+  180: {
+    transform: `rotate(180deg)`
+  }
+};
+//# sourceMappingURL=TreeItemChevron.js.map

package/lib/components/TreeItemChevron.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useFluent_unstable","ChevronRight12Regular","useTreeItemContext_unstable","TreeItemChevron","memo","open","ctx","dir","expandIconRotation","createElement","style","expandIconInlineStyles","displayName","transform"],"sources":["../../src/components/TreeItemChevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  const { dir } = useFluent_unstable();\n\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  return <ChevronRight12Regular style={expandIconInlineStyles[expandIconRotation]} />;\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n  90: { transform: `rotate(90deg)` },\n  0: { transform: `rotate(0deg)` },\n  180: { transform: `rotate(180deg)` },\n} as const;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,2BAA2B,QAAQ;AAE5C,OAAO,MAAMC,eAAA,gBAAkBJ,KAAA,CAAMK,IAAI,CAAC,MAAM;EAC9C,MAAMC,IAAA,GAAOH,2BAAA,CAA4BI,GAAA,IAAOA,GAAA,CAAID,IAAI;EAExD,MAAM;IAAEE;EAAG,CAAE,GAAGP,kBAAA;EAEhB,MAAMQ,kBAAA,GAAqBH,IAAA,GAAO,KAAKE,GAAA,KAAQ,QAAQ,IAAI,GAAG;EAC9D,oBAAOR,KAAA,CAAAU,aAAA,CAACR,qBAAA;IAAsBS,KAAA,EAAOC,sBAAsB,CAACH,kBAAA;;AAC9D;AACAL,eAAA,CAAgBS,WAAW,GAAG;AAE9B,MAAMD,sBAAA,GAAyB;EAC7B,IAAI;IAAEE,SAAA,EAAY;EAAe;EACjC,GAAG;IAAEA,SAAA,EAAY;EAAc;EAC/B,KAAK;IAAEA,SAAA,EAAY;EAAgB;AACrC"}

package/lib/components/TreeItemLayout/TreeItemLayout.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTreeItemLayout_unstable } from './useTreeItemLayout';
 import { renderTreeItemLayout_unstable } from './renderTreeItemLayout';
-import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';
+import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';
 /**
  * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.
  * It provides a consistent visual structure for tree items in a `Tree` component.

package/lib/components/TreeItemLayout/TreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemLayout_unstable(props, ref);\n\n  useTreeItemLayoutStyles_unstable(state);\n  return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,gCAAgC,QAAQ;AAIjD;;;;;AAKA,OAAO,MAAMC,cAAA,gBAA2DJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvG,MAAMC,KAAA,GAAQP,0BAAA,CAA2BK,KAAA,EAAOC,GAAA;EAEhDJ,gCAAA,CAAiCK,KAAA;EACjC,OAAON,6BAAA,CAA8BM,KAAA;AACvC;AAEAJ,cAAA,CAAeK,WAAW,GAAG"}
+{"version":3,"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemLayout_unstable(props, ref);\n\n  useTreeItemLayoutStyles_unstable(state);\n  return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,gCAAgC,QAAQ;AAIjD;;;;;AAKA,OAAO,MAAMC,cAAA,gBAA2DJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvG,MAAMC,KAAA,GAAQP,0BAAA,CAA2BK,KAAA,EAAOC,GAAA;EAEhDJ,gCAAA,CAAiCK,KAAA;EACjC,OAAON,6BAAA,CAA8BM,KAAA;AACvC;AAEAJ,cAAA,CAAeK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TreeItemLayout/TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TreeItemContextValue } from '../../contexts/treeItemContext';\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'span'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'span'>;\n  aside?: Slot<'span'>;\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> & TreeItemContextValue;\n"],"mappings":"AAAA"}
+{"version":3,"names":[],"sources":["../../../src/components/TreeItemLayout/TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TreeItemLayoutSlots = {\n  root: 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  /**\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\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"],"mappings":"AAAA"}

package/lib/components/TreeItemLayout/index.js

@@ -2,5 +2,5 @@ export * from './TreeItemLayout';
 export * from './TreeItemLayout.types';
 export * from './renderTreeItemLayout';
 export * from './useTreeItemLayout';
-export * from './useTreeItemLayoutStyles';
+export * from './useTreeItemLayoutStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/TreeItemLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TreeItemLayout/index.ts"],"sourcesContent":["export * from './TreeItemLayout';\nexport * from './TreeItemLayout.types';\nexport * from './renderTreeItemLayout';\nexport * from './useTreeItemLayout';\nexport * from './useTreeItemLayoutStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/TreeItemLayout/index.ts"],"sourcesContent":["export * from './TreeItemLayout';\nexport * from './TreeItemLayout.types';\nexport * from './renderTreeItemLayout';\nexport * from './useTreeItemLayout';\nexport * from './useTreeItemLayoutStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TreeItemLayout/renderTreeItemLayout.js

@@ -4,13 +4,10 @@ import { getSlotsNext } from '@fluentui/react-utilities';
  * Render the final JSX of TreeItemLayout
  */
 export const renderTreeItemLayout_unstable = state => {
-  const {
-    isActionsVisible
-  } = state;
   const {
     slots,
     slotProps
   } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.iconBefore && /*#__PURE__*/createElement(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/createElement(slots.iconAfter, slotProps.iconAfter), !isActionsVisible && slots.aside && /*#__PURE__*/createElement(slots.aside, slotProps.aside));
+  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));
 };
 //# sourceMappingURL=renderTreeItemLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderTreeItemLayout_unstable","state","isActionsVisible","slots","slotProps","root","iconBefore","children","iconAfter","aside"],"sources":["../../../src/components/TreeItemLayout/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';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { isActionsVisible } = state;\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      {slotProps.root.children}\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n      {!isActionsVisible && slots.aside && <slots.aside {...slotProps.aside} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA+B;EAC3E,MAAM;IAAEC;EAAgB,CAAE,GAAGD,KAAA;EAC7B,MAAM;IAAEE,KAAA;IAAOC;EAAS,CAAE,GAAGL,YAAA,CAAkCE,KAAA;EAC/D,oBACEH,aAbJ,CAaKK,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,UAAU,iBAAIR,aAd3B,CAc4BK,KAAA,CAAMG,UAAU,EAAKF,SAAA,CAAUE,UAAU,GAC9DF,SAAA,CAAUC,IAAI,CAACE,QAAQ,EACvBJ,KAAA,CAAMK,SAAS,iBAAIV,aAhB1B,CAgB2BK,KAAA,CAAMK,SAAS,EAAKJ,SAAA,CAAUI,SAAS,GAC3D,CAACN,gBAAA,IAAoBC,KAAA,CAAMM,KAAK,iBAAIX,aAjB3C,CAiB4CK,KAAA,CAAMM,KAAK,EAAKL,SAAA,CAAUK,KAAK;AAG3E"}
+{"version":3,"names":["createElement","getSlotsNext","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","iconBefore","children","iconAfter"],"sources":["../../../src/components/TreeItemLayout/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';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\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    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA+B;EAC3E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAkCE,KAAA;EAC/D,oBACEH,aAZJ,CAYKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,UAAU,iBAAIP,aAb3B,CAa4BI,KAAA,CAAMG,UAAU,EAAKF,SAAA,CAAUE,UAAU,GAC9DH,KAAA,CAAMI,UAAU,iBAAIR,aAd3B,CAc4BI,KAAA,CAAMI,UAAU,EAAKH,SAAA,CAAUG,UAAU,GAC9DH,SAAA,CAAUC,IAAI,CAACG,QAAQ,EACvBL,KAAA,CAAMM,SAAS,iBAAIV,aAhB1B,CAgB2BI,KAAA,CAAMM,SAAS,EAAKL,SAAA,CAAUK,SAAS;AAGlE"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+import { TreeItemChevron } from '../TreeItemChevron';
 /**
  * Create the state required to render TreeItemLayout.
  *
@@ -14,21 +15,22 @@ export const useTreeItemLayout_unstable = (props, ref) => {
   const {
     iconAfter,
     iconBefore,
-    aside,
-    as = 'div'
+    expandIcon,
+    as = 'span'
   } = props;
-  const treeItemContext = useTreeItemContext_unstable();
+  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);
+  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);
+  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');
   return {
-    ...treeItemContext,
     components: {
       root: 'div',
-      iconBefore: 'span',
-      iconAfter: 'span',
-      aside: 'span'
+      expandIcon: 'div',
+      iconBefore: 'div',
+      iconAfter: 'div'
     },
     root: getNativeElementProps(as, {
       ...props,
-      ref
+      ref: useMergedRefs(ref, layoutRef)
     }),
     iconBefore: resolveShorthand(iconBefore, {
       defaultProps: {
@@ -40,9 +42,12 @@ export const useTreeItemLayout_unstable = (props, ref) => {
         'aria-hidden': true
       }
     }),
-    aside: resolveShorthand(aside, {
+    expandIcon: resolveShorthand(expandIcon, {
+      required: isBranch,
       defaultProps: {
-        'aria-hidden': true
+        children: /*#__PURE__*/React.createElement(TreeItemChevron, null),
+        'aria-hidden': true,
+        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
       }
     })
   };

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useTreeItemContext_unstable","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","aside","as","treeItemContext","components","root","defaultProps"],"sources":["../../../src/components/TreeItemLayout/useTreeItemLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\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, aside, as = 'div' } = props;\n  const treeItemContext = useTreeItemContext_unstable();\n\n  return {\n    ...treeItemContext,\n    components: {\n      root: 'div',\n      iconBefore: 'span',\n      iconAfter: 'span',\n      aside: 'span',\n    },\n    root: getNativeElementProps(as, { ...props, ref }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: resolveShorthand(aside, { defaultProps: { 'aria-hidden': true } }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AAExD,SAASC,2BAA2B,QAAQ;AAE5C;;;;;;;;;AASA,OAAO,MAAMC,0BAAA,GAA6BA,CACxCC,KAAA,EACAC,GAAA,KACwB;EACxB,MAAM;IAAEC,SAAA;IAAWC,UAAA;IAAYC,KAAA;IAAOC,EAAA,GAAK;EAAK,CAAE,GAAGL,KAAA;EACrD,MAAMM,eAAA,GAAkBR,2BAAA;EAExB,OAAO;IACL,GAAGQ,eAAe;IAClBC,UAAA,EAAY;MACVC,IAAA,EAAM;MACNL,UAAA,EAAY;MACZD,SAAA,EAAW;MACXE,KAAA,EAAO;IACT;IACAI,IAAA,EAAMZ,qBAAA,CAAsBS,EAAA,EAAI;MAAE,GAAGL,KAAK;MAAEC;IAAI;IAChDE,UAAA,EAAYN,gBAAA,CAAiBM,UAAA,EAAY;MAAEM,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;IACjFP,SAAA,EAAWL,gBAAA,CAAiBK,SAAA,EAAW;MAAEO,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;IAC/EL,KAAA,EAAOP,gBAAA,CAAiBO,KAAA,EAAO;MAAEK,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;EACzE;AACF"}
+{"version":3,"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","layoutRef","ctx","expandIconRef","isBranch","itemType","components","root","defaultProps","required","children","createElement","undefined"],"sources":["../../../src/components/TreeItemLayout/useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, 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' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      iconAfter: 'div',\n    },\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    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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ;AAE5F,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,eAAe,QAAQ;AAEhC;;;;;;;;;AASA,OAAO,MAAMC,0BAAA,GAA6BA,CACxCC,KAAA,EACAC,GAAA,KACwB;EACxB,MAAM;IAAEC,SAAA;IAAWC,UAAA;IAAYC,UAAA;IAAYC,EAAA,GAAK;EAAM,CAAE,GAAGL,KAAA;EAE3D,MAAMM,SAAA,GAAYT,2BAAA,CAA4BU,GAAA,IAAOA,GAAA,CAAID,SAAS;EAClE,MAAME,aAAA,GAAgBX,2BAAA,CAA4BU,GAAA,IAAOA,GAAA,CAAIC,aAAa;EAC1E,MAAMC,QAAA,GAAWZ,2BAAA,CAA4BU,GAAA,IAAOA,GAAA,CAAIG,QAAQ,KAAK;EAErE,OAAO;IACLC,UAAA,EAAY;MACVC,IAAA,EAAM;MACNR,UAAA,EAAY;MACZD,UAAA,EAAY;MACZD,SAAA,EAAW;IACb;IACAU,IAAA,EAAMnB,qBAAA,CAAsBY,EAAA,EAAI;MAAE,GAAGL,KAAK;MAAEC,GAAA,EAAKL,aAAA,CAAcK,GAAA,EAAKK,SAAA;IAAW;IAC/EH,UAAA,EAAYR,gBAAA,CAAiBQ,UAAA,EAAY;MAAEU,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;IACjFX,SAAA,EAAWP,gBAAA,CAAiBO,SAAA,EAAW;MAAEW,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;IAC/ET,UAAA,EAAYT,gBAAA,CAAiBS,UAAA,EAAY;MACvCU,QAAA,EAAUL,QAAA;MACVI,YAAA,EAAc;QACZE,QAAA,eAAUvB,KAAA,CAAAwB,aAAA,CAAClB,eAAA;QACX,eAAe,IAAI;QACnBG,GAAA,EAAKL,aAAA,CAAcF,mBAAA,CAAoBU,UAAA,IAAcA,UAAA,CAAWH,GAAG,GAAGgB,SAAS,EAAET,aAAA;MACnF;IACF;EACF;AACF"}

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

@@ -0,0 +1,138 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+export const treeItemLayoutClassNames = {
+  root: 'fui-TreeItemLayout',
+  expandIcon: 'fui-TreeItemLayout__expandIcon',
+  iconBefore: 'fui-TreeItemLayout__iconBefore',
+  iconAfter: 'fui-TreeItemLayout__iconAfter'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    sshi5w: "f1nxs5xn",
+    B7ck84d: "f1ewtqcl",
+    Ijaq50: "f15ws6j",
+    Br312pm: "f135tdbu",
+    nk6f5a: "f2e2169",
+    Bw0ie65: "f4rqp6x",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    lj723h: "flvvhsy",
+    ecr2s2: "f1wfn5kd",
+    qya0sb: "f1ih54s9",
+    Bi91k9c: "fnwyq0v",
+    Jwef8y: "f1t94bn6",
+    Becwuud: "f1jk1nfw"
+  },
+  leaf: {
+    uwmqm3: ["f1k1erfc", "faevyjx"]
+  },
+  branch: {
+    uwmqm3: ["fo100m9", "f6yw3pu"]
+  },
+  medium: {
+    i8kkvl: "f1rjii52",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  small: {
+    i8kkvl: "f1ufnopg",
+    sshi5w: "f1pha7fy",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  subtle: {},
+  "subtle-alpha": {
+    Jwef8y: "f146ro5n",
+    ecr2s2: "fkam630"
+  },
+  transparent: {
+    De3pzq: "f1c21dwh",
+    Jwef8y: "fjxutwb",
+    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);}"],
+  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 expand icon slot
+ */
+const useExpandIconStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    Bf4jedk: "f17fgpbq",
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "f11d4kpn",
+    Bh6795r: "f1jhi6b8",
+    Bnnss6s: "fi64zpg",
+    xawz: "f1rmlqtg",
+    z8tnut: "f1ywm7hm",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f14wxoun",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  }
+}, {
+  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 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);}"]
+});
+/**
+ * Apply styling to the TreeItemLayout slots based on the state
+ */
+export const useTreeItemLayoutStyles_unstable = state => {
+  const {
+    iconAfter,
+    iconBefore,
+    expandIcon,
+    root
+  } = state;
+  const rootStyles = useRootStyles();
+  const iconStyles = useIconStyles();
+  const expandIconStyles = useExpandIconStyles();
+  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);
+  if (expandIcon) {
+    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
+  }
+  if (iconBefore) {
+    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);
+  }
+  if (iconAfter) {
+    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","expandIcon","iconBefore","iconAfter","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","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","z8tnut","z189sj","Byoj8tv","useIconStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","iconStyles","expandIconStyles","size","ctx","appearance","itemType","className"],"sources":["../../../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n  root: 'fui-TreeItemLayout',\n  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  iconAfter: 'fui-TreeItemLayout__iconAfter',\n};\n\n/**\n * Styles for the root slot\n */\nconst 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 treeItemClassNames.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 treeItemClassNames.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/**\n * Styles for the expand icon slot\n */\nconst 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/**\n * Styles for the before/after icon slot\n */\nconst 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/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n  const { iconAfter, iconBefore, expandIcon, root } = state;\n  const rootStyles = useRootStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\n\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\n  root.className = mergeClasses(\n    treeItemLayoutClassNames.root,\n    rootStyles.base,\n    rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[itemType],\n    root.className,\n  );\n\n  if (expandIcon) {\n    expandIcon.className = mergeClasses(\n      treeItemLayoutClassNames.expandIcon,\n      expandIconStyles.base,\n      expandIcon.className,\n    );\n  }\n\n  if (iconBefore) {\n    iconBefore.className = mergeClasses(\n      treeItemLayoutClassNames.iconBefore,\n      iconStyles.base,\n      iconStyles.iconBefore,\n      iconBefore.className,\n    );\n  }\n\n  if (iconAfter) {\n    iconAfter.className = mergeClasses(\n      treeItemLayoutClassNames.iconAfter,\n      iconStyles.base,\n      iconStyles.iconAfter,\n      iconAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ;AACzC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,2BAA2B,QAAQ;AAE5C,OAAO,MAAMC,wBAAA,GAAgE;EAC3EC,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,UAAA,EAAY;EACZC,SAAA,EAAW;AACb;AAEA;;;AAGA,MAAMC,aAAA,gBAAgBb,QAAA;EAAAc,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,EA2DtB;AAEA;;;AAGA,MAAMC,mBAAA,gBAAsBjD,QAAA;EAAAc,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAkC,OAAA;IAAAC,OAAA;IAAAjC,OAAA;IAAAkC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAxB,MAAA;EAAA;AAAA;EAAAY,CAAA;AAAA,EAW5B;AAEA;;;AAGA,MAAMa,aAAA,gBAAgB3D,QAAA;EAAAc,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAoC,MAAA;IAAAX,OAAA;IAAAF,OAAA;EAAA;EAAA5B,UAAA;EAAAC,SAAA;AAAA;EAAAkC,CAAA;AAAA,EAUtB;AAEA;;;AAGA,OAAO,MAAMc,gCAAA,GAAoCC,KAAA,IAAoD;EACnG,MAAM;IAAEjD,SAAA;IAAWD,UAAA;IAAYD,UAAA;IAAYD;EAAI,CAAE,GAAGoD,KAAA;EACpD,MAAMC,UAAA,GAAajD,aAAA;EACnB,MAAMkD,UAAA,GAAaJ,aAAA;EACnB,MAAMK,gBAAA,GAAmBf,mBAAA;EAEzB,MAAMgB,IAAA,GAAO5D,uBAAA,CAAwB6D,GAAA,IAAOA,GAAA,CAAID,IAAI;EACpD,MAAME,UAAA,GAAa9D,uBAAA,CAAwB6D,GAAA,IAAOA,GAAA,CAAIC,UAAU;EAChE,MAAMC,QAAA,GAAW7D,2BAAA,CAA4B2D,GAAA,IAAOA,GAAA,CAAIE,QAAQ;EAEhE3D,IAAA,CAAK4D,SAAS,GAAGpE,YAAA,CACfO,wBAAA,CAAyBC,IAAI,EAC7BqD,UAAA,CAAWhD,IAAI,EACfgD,UAAU,CAACK,UAAA,CAAW,EACtBL,UAAU,CAACG,IAAA,CAAK,EAChBH,UAAU,CAACM,QAAA,CAAS,EACpB3D,IAAA,CAAK4D,SAAS;EAGhB,IAAI3D,UAAA,EAAY;IACdA,UAAA,CAAW2D,SAAS,GAAGpE,YAAA,CACrBO,wBAAA,CAAyBE,UAAU,EACnCsD,gBAAA,CAAiBlD,IAAI,EACrBJ,UAAA,CAAW2D,SAAS;EAExB;EAEA,IAAI1D,UAAA,EAAY;IACdA,UAAA,CAAW0D,SAAS,GAAGpE,YAAA,CACrBO,wBAAA,CAAyBG,UAAU,EACnCoD,UAAA,CAAWjD,IAAI,EACfiD,UAAA,CAAWpD,UAAU,EACrBA,UAAA,CAAW0D,SAAS;EAExB;EAEA,IAAIzD,SAAA,EAAW;IACbA,SAAA,CAAUyD,SAAS,GAAGpE,YAAA,CACpBO,wBAAA,CAAyBI,SAAS,EAClCmD,UAAA,CAAWjD,IAAI,EACfiD,UAAA,CAAWnD,SAAS,EACpBA,SAAA,CAAUyD,SAAS;EAEvB;EAEA,OAAOR,KAAA;AACT"}

package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';
 import { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';
-import { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';
+import { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';
 import { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';
 /**
  * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.

package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iCAAiC,QAAQ;AAClD,SAASC,oCAAoC,QAAQ;AACrD,SAASC,uCAAuC,QAAQ;AAGxD,SAASC,8CAA8C,QAAQ;AAE/D;;;;;AAKA,OAAO,MAAMC,qBAAA,gBAAyEL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrH,MAAMC,KAAA,GAAQR,iCAAA,CAAkCM,KAAA,EAAOC,GAAA;EAEvDL,uCAAA,CAAwCM,KAAA;EAExC,MAAMC,aAAA,GAAgBN,8CAAA,CAA+CK,KAAA;EAErE,OAAOP,oCAAA,CAAqCO,KAAA,EAAOC,aAAA;AACrD;AAEAL,qBAAA,CAAsBM,WAAW,GAAG"}
+{"version":3,"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iCAAiC,QAAQ;AAClD,SAASC,oCAAoC,QAAQ;AACrD,SAASC,uCAAuC,QAAQ;AAGxD,SAASC,8CAA8C,QAAQ;AAE/D;;;;;AAKA,OAAO,MAAMC,qBAAA,gBAAyEL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrH,MAAMC,KAAA,GAAQR,iCAAA,CAAkCM,KAAA,EAAOC,GAAA;EAEvDL,uCAAA,CAAwCM,KAAA;EAExC,MAAMC,aAAA,GAAgBN,8CAAA,CAA+CK,KAAA;EAErE,OAAOP,oCAAA,CAAqCO,KAAA,EAAOC,aAAA;AACrD;AAEAL,qBAAA,CAAsBM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport type { TreeItemContextValue } from '../../contexts/treeItemContext';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = {\n  root: Slot<'span'>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'span'>>;\n  /**\n   * Main text. Children of the root slot are automatically rendered here\n   */\n  main: Slot<'span'>;\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description?: Slot<'span'>;\n  /**\n   * aside text that works as extra textual information\n   */\n  aside?: Slot<'span'>;\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  content: 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  TreeItemContextValue & {\n    avatarSize: AvatarSize;\n  };\n"],"mappings":"AAAA"}
+{"version":3,"names":[],"sources":["../../../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = {\n  root: NonNullable<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  /**\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   * A layout wrapper for the main and description slots\n   */\n  content: NonNullable<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};\n"],"mappings":"AAAA"}

package/lib/components/TreeItemPersonaLayout/index.js

@@ -2,5 +2,5 @@ export * from './TreeItemPersonaLayout';
 export * from './TreeItemPersonaLayout.types';
 export * from './renderTreeItemPersonaLayout';
 export * from './useTreeItemPersonaLayout';
-export * from './useTreeItemPersonaLayoutStyles';
+export * from './useTreeItemPersonaLayoutStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/TreeItemPersonaLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js

@@ -5,15 +5,12 @@ import { AvatarContextProvider } from '@fluentui/react-avatar';
  * Render the final JSX of TreeItemPersonaLayout
  */
 export const renderTreeItemPersonaLayout_unstable = (state, contextValues) => {
-  const {
-    isActionsVisible
-  } = state;
   const {
     slots,
     slotProps
   } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.media && /*#__PURE__*/createElement(AvatarContextProvider, {
+  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)), slots.content && /*#__PURE__*/createElement(slots.content, slotProps.content, slots.main && /*#__PURE__*/createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/createElement(slots.description, slotProps.description)), !isActionsVisible && slots.aside && /*#__PURE__*/createElement(slots.aside, slotProps.aside));
+  }, /*#__PURE__*/createElement(slots.media, slotProps.media)), /*#__PURE__*/createElement(slots.content, slotProps.content, /*#__PURE__*/createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/createElement(slots.description, slotProps.description)));
 };
 //# sourceMappingURL=renderTreeItemPersonaLayout.js.map

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","AvatarContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","isActionsVisible","slots","slotProps","root","media","value","avatar","content","main","description","aside"],"sources":["../../../src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutContextValues,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { isActionsVisible } = state;\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <slots.media {...slotProps.media} />\n        </AvatarContextProvider>\n      )}\n      {slots.content && (\n        <slots.content {...slotProps.content}>\n          {slots.main && <slots.main {...slotProps.main} />}\n          {slots.description && <slots.description {...slotProps.description} />}\n        </slots.content>\n      )}\n      {!isActionsVisible && slots.aside && <slots.aside {...slotProps.aside} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAM7B,SAASC,qBAAqB,QAAQ;AAEtC;;;AAGA,OAAO,MAAMC,oCAAA,GAAuCA,CAClDC,KAAA,EACAC,aAAA,KACG;EACH,MAAM;IAAEC;EAAgB,CAAE,GAAGF,KAAA;EAC7B,MAAM;IAAEG,KAAA;IAAOC;EAAS,CAAE,GAAGP,YAAA,CAAyCG,KAAA;EAEtE,oBACEJ,aAtBJ,CAsBKO,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,KAAK,iBACVV,aAxBR,CAwBSE,qBAAA;IAAsBS,KAAA,EAAON,aAAA,CAAcO;kBAC1CZ,aAzBV,CAyBWO,KAAA,CAAMG,KAAK,EAAKF,SAAA,CAAUE,KAAK,IAGnCH,KAAA,CAAMM,OAAO,iBACZb,aA7BR,CA6BSO,KAAA,CAAMM,OAAO,EAAKL,SAAA,CAAUK,OAAO,EACjCN,KAAA,CAAMO,IAAI,iBAAId,aA9BzB,CA8B0BO,KAAA,CAAMO,IAAI,EAAKN,SAAA,CAAUM,IAAI,GAC5CP,KAAA,CAAMQ,WAAW,iBAAIf,aA/BhC,CA+BiCO,KAAA,CAAMQ,WAAW,EAAKP,SAAA,CAAUO,WAAW,IAGrE,CAACT,gBAAA,IAAoBC,KAAA,CAAMS,KAAK,iBAAIhB,aAlC3C,CAkC4CO,KAAA,CAAMS,KAAK,EAAKR,SAAA,CAAUQ,KAAK;AAG3E"}
+{"version":3,"names":["createElement","getSlotsNext","AvatarContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","content","main","description"],"sources":["../../../src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutContextValues,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.content {...slotProps.content}>\n        <slots.main {...slotProps.main} />\n        {slots.description && <slots.description {...slotProps.description} />}\n      </slots.content>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAM7B,SAASC,qBAAqB,QAAQ;AAEtC;;;AAGA,OAAO,MAAMC,oCAAA,GAAuCA,CAClDC,KAAA,EACAC,aAAA,KACG;EACH,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAAyCG,KAAA;EAEtE,oBACEJ,aArBJ,CAqBKM,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,UAAU,iBAAIT,aAtB3B,CAsB4BM,KAAA,CAAMG,UAAU,EAAKF,SAAA,CAAUE,UAAU,gBAC/DT,aAvBN,CAuBOE,qBAAA;IAAsBQ,KAAA,EAAOL,aAAA,CAAcM;kBAC1CX,aAxBR,CAwBSM,KAAA,CAAMM,KAAK,EAAKL,SAAA,CAAUK,KAAK,iBAElCZ,aA1BN,CA0BOM,KAAA,CAAMO,OAAO,EAAKN,SAAA,CAAUM,OAAO,eAClCb,aA3BR,CA2BSM,KAAA,CAAMQ,IAAI,EAAKP,SAAA,CAAUO,IAAI,GAC7BR,KAAA,CAAMS,WAAW,iBAAIf,aA5B9B,CA4B+BM,KAAA,CAAMS,WAAW,EAAKR,SAAA,CAAUQ,WAAW;AAI1E"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { useTreeContext_unstable } from '../../contexts';
 import { treeAvatarSize } from '../../utils/tokens';
+import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';
 /**
  * Create the state required to render TreeItemPersonaLayout.
  *
@@ -17,29 +18,25 @@ export const useTreeItemPersonaLayout_unstable = (props, ref) => {
     content,
     children,
     main,
-    description,
-    aside,
-    as = 'span'
+    description
   } = props;
+  const treeItemLayoutState = useTreeItemLayout_unstable({
+    ...props,
+    iconBefore: null,
+    iconAfter: null
+  }, ref);
   const size = useTreeContext_unstable(ctx => ctx.size);
-  const {
-    isActionsVisible
-  } = useTreeItemContext_unstable();
   return {
+    ...treeItemLayoutState,
     components: {
+      expandIcon: 'div',
       content: 'div',
-      main: 'span',
-      description: 'span',
-      root: 'span',
-      media: 'span',
-      aside: 'span'
+      main: 'div',
+      description: 'div',
+      root: 'div',
+      media: 'div'
     },
-    isActionsVisible,
     avatarSize: treeAvatarSize[size],
-    root: getNativeElementProps(as, {
-      ...props,
-      ref
-    }),
     main: resolveShorthand(main, {
       required: true,
       defaultProps: {
@@ -52,8 +49,7 @@ export const useTreeItemPersonaLayout_unstable = (props, ref) => {
     content: resolveShorthand(content, {
       required: true
     }),
-    description: resolveShorthand(description),
-    aside: resolveShorthand(aside)
+    description: resolveShorthand(description)
   };
 };
 //# sourceMappingURL=useTreeItemPersonaLayout.js.map