@fluentui/react-tree 9.0.0-beta.2 → 9.0.0-beta.20

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":["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    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    iconAfter: 'fui-TreeItemLayout__iconAfter'\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 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 * 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 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 * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    const { iconAfter , iconBefore , expandIcon , root  } = state;\n    const rootStyles = useRootStyles();\n    const iconStyles = useIconStyles();\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 (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\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    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,UAAU,EAAE,gCAAgC;EAC5CC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGb,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,CA2DzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,mBAAmB,gBAAGjD,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,CAW/B,CAAC;AACF;AACA;AACA;AAAI,MAAMa,aAAa,gBAAG3D,QAAA;EAAAc,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAoC,MAAA;IAAAX,OAAA;IAAAF,OAAA;EAAA;EAAA5B,UAAA;EAAAC,SAAA;AAAA;EAAAkC,CAAA;AAAA,CAUzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMc,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAM;IAAEjD,SAAS;IAAGD,UAAU;IAAGD,UAAU;IAAGD;EAAM,CAAC,GAAGoD,KAAK;EAC7D,MAAMC,UAAU,GAAGjD,aAAa,CAAC,CAAC;EAClC,MAAMkD,UAAU,GAAGJ,aAAa,CAAC,CAAC;EAClC,MAAMK,gBAAgB,GAAGf,mBAAmB,CAAC,CAAC;EAC9C,MAAMgB,IAAI,GAAG5D,uBAAuB,CAAE6D,GAAG,IAAGA,GAAG,CAACD,IAAI,CAAC;EACrD,MAAME,UAAU,GAAG9D,uBAAuB,CAAE6D,GAAG,IAAGA,GAAG,CAACC,UAAU,CAAC;EACjE,MAAMC,QAAQ,GAAG7D,2BAA2B,CAAE2D,GAAG,IAAGA,GAAG,CAACE,QAAQ,CAAC;EACjE3D,IAAI,CAAC4D,SAAS,GAAGpE,YAAY,CAACO,wBAAwB,CAACC,IAAI,EAAEqD,UAAU,CAAChD,IAAI,EAAEgD,UAAU,CAACK,UAAU,CAAC,EAAEL,UAAU,CAACG,IAAI,CAAC,EAAEH,UAAU,CAACM,QAAQ,CAAC,EAAE3D,IAAI,CAAC4D,SAAS,CAAC;EAC7J,IAAI3D,UAAU,EAAE;IACZA,UAAU,CAAC2D,SAAS,GAAGpE,YAAY,CAACO,wBAAwB,CAACE,UAAU,EAAEsD,gBAAgB,CAAClD,IAAI,EAAEJ,UAAU,CAAC2D,SAAS,CAAC;EACzH;EACA,IAAI1D,UAAU,EAAE;IACZA,UAAU,CAAC0D,SAAS,GAAGpE,YAAY,CAACO,wBAAwB,CAACG,UAAU,EAAEoD,UAAU,CAACjD,IAAI,EAAEiD,UAAU,CAACpD,UAAU,EAAEA,UAAU,CAAC0D,SAAS,CAAC;EAC1I;EACA,IAAIzD,SAAS,EAAE;IACXA,SAAS,CAACyD,SAAS,GAAGpE,YAAY,CAACO,wBAAwB,CAACI,SAAS,EAAEmD,UAAU,CAACjD,IAAI,EAAEiD,UAAU,CAACnD,SAAS,EAAEA,SAAS,CAACyD,SAAS,CAAC;EACtI;EACA,OAAOR,KAAK;AAChB,CAAC"}

package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js

@@ -1,16 +1,16 @@
 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';
 /**
- * TreeItemPersonaLayout component - TODO: add more docs
- */
-export const TreeItemPersonaLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useTreeItemPersonaLayout_unstable(props, ref);
-  useTreeItemPersonaLayoutStyles_unstable(state);
-  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);
-  return renderTreeItemPersonaLayout_unstable(state, contextValues);
+ * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
+ * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
+ * This component should only be used as a direct child of `TreeItem`.
+ */ export const TreeItemPersonaLayout = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTreeItemPersonaLayout_unstable(props, ref);
+    useTreeItemPersonaLayoutStyles_unstable(state);
+    const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);
+    return renderTreeItemPersonaLayout_unstable(state, contextValues);
 });
 TreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';
-//# sourceMappingURL=TreeItemPersonaLayout.js.map

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/packages/react-components/react-tree/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 * TreeItemPersonaLayout component - TODO: add more docs\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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iCAAiC,QAAQ,4BAA4B;AAC9E,SAASC,oCAAoC,QAAQ,+BAA+B;AACpF,SAASC,uCAAuC,QAAQ,kCAAkC;AAG1F,SAASC,8CAA8C,QAAQ,yCAAyC;AAExG;;;AAGA,OAAO,MAAMC,qBAAqB,gBAAoDL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpH,MAAMC,KAAK,GAAGR,iCAAiC,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE3DL,uCAAuC,CAACM,KAAK,CAAC;EAE9C,MAAMC,aAAa,GAAGN,8CAA8C,CAACK,KAAK,CAAC;EAE3E,OAAOP,oCAAoC,CAACO,KAAK,EAAEC,aAAa,CAAC;AACnE,CAAC,CAAC;AAEFL,qBAAqB,CAACM,WAAW,GAAG,uBAAuB"}
+{"version":3,"sources":["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"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,8CAA8C,QAAQ,0CAA0C;AAEzG;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrH,MAAMC,QAAQR,kCAAkCM,OAAOC;IAEvDL,wCAAwCM;IAExC,MAAMC,gBAAgBN,+CAA+CK;IAErE,OAAOP,qCAAqCO,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=TreeItemPersonaLayout.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItemPersonaLayout.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts"],"names":[],"mappings":"","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"]}
+{"version":3,"sources":["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"],"names":[],"mappings":"AAAA,WA0CE"}

package/lib/components/TreeItemPersonaLayout/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/TreeItemPersonaLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,gCAAgC;AAC9C,cAAc,gCAAgC;AAC9C,cAAc,6BAA6B;AAC3C,cAAc,0CAA0C"}

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js

@@ -1,31 +1,11 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import { AvatarContextProvider } from '@fluentui/react-avatar';
 /**
  * Render the final JSX of TreeItemPersonaLayout
- */
-export const renderTreeItemPersonaLayout_unstable = (state, contextValues) => {
-  const {
-    isActionsVisible
-  } = state;
-  const {
-    slots,
-    slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, slots.media && /*#__PURE__*/React.createElement(AvatarContextProvider, {
-    value: contextValues.avatar
-  }, /*#__PURE__*/React.createElement(slots.media, {
-    ...slotProps.media
-  })), slots.content && /*#__PURE__*/React.createElement(slots.content, {
-    ...slotProps.content
-  }, slots.main && /*#__PURE__*/React.createElement(slots.main, {
-    ...slotProps.main
-  }), slots.description && /*#__PURE__*/React.createElement(slots.description, {
-    ...slotProps.description
-  })), !isActionsVisible && slots.aside && /*#__PURE__*/React.createElement(slots.aside, {
-    ...slotProps.aside
-  }));
+ */ export const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
+    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.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":["React","getSlots","AvatarContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","isActionsVisible","slots","slotProps","createElement","root","media","value","avatar","content","main","description","aside"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAMpD,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D;;;AAGA,OAAO,MAAMC,oCAAoC,GAAGA,CAClDC,KAAiC,EACjCC,aAAiD,KAC/C;EACF,MAAM;IAAEC;EAAgB,CAAE,GAAGF,KAAK;EAClC,MAAM;IAAEG,KAAK;IAAEC;EAAS,CAAE,GAAGP,QAAQ,CAA6BG,KAAK,CAAC;EAExE,oBACEJ,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,KAAK,iBACVX,KAAA,CAAAS,aAAA,CAACP,qBAAqB;IAACU,KAAK,EAAEP,aAAa,CAACQ;EAAM,gBAChDb,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,EAAI,CAEvC,EACAJ,KAAK,CAACO,OAAO,iBACZd,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM;EAAO,GACjCP,KAAK,CAACQ,IAAI,iBAAIf,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,EAAI,EAChDR,KAAK,CAACS,WAAW,iBAAIhB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACS,WAAW;IAAA,GAAKR,SAAS,CAACQ;EAAW,EAAI,CAEzE,EACA,CAACV,gBAAgB,IAAIC,KAAK,CAACU,KAAK,iBAAIjB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACU,KAAK;IAAA,GAAKT,SAAS,CAACS;EAAK,EAAI,CAC9D;AAEjB,CAAC"}
+{"version":3,"sources":["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"],"names":["createElement","getSlotsNext","AvatarContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","content","main","description"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAyCG;IAEtE,qBACE,AArBJ,cAqBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAtB3B,cAsB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,iBAC/D,AAvBN,cAuBOP;QAAsBQ,OAAOL,cAAcM,MAAM;qBAChD,AAxBR,cAwBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,kBAElC,AA1BN,cA0BON,MAAMO,OAAO,EAAKN,UAAUM,OAAO,gBAClC,AA3BR,cA2BSP,MAAMQ,IAAI,EAAKP,UAAUO,IAAI,GAC7BR,MAAMS,WAAW,kBAAI,AA5B9B,cA4B+BT,MAAMS,WAAW,EAAKR,UAAUQ,WAAW;AAI1E,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -1,6 +1,8 @@
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';
+import * as React from 'react';
+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.
  *
@@ -9,50 +11,37 @@ import { treeAvatarSize } from '../../utils/tokens';
  *
  * @param props - props from this instance of TreeItemPersonaLayout
  * @param ref - reference to root HTMLElement of TreeItemPersonaLayout
- */
-export const useTreeItemPersonaLayout_unstable = (props, ref) => {
-  const {
-    media,
-    content,
-    children,
-    main,
-    description,
-    aside,
-    as = 'span'
-  } = props;
-  const size = useTreeContext_unstable(ctx => ctx.size);
-  const {
-    isActionsVisible
-  } = useTreeItemContext_unstable();
-  return {
-    components: {
-      content: 'div',
-      main: 'span',
-      description: 'span',
-      root: 'span',
-      media: 'span',
-      aside: 'span'
-    },
-    isActionsVisible,
-    avatarSize: treeAvatarSize[size],
-    root: getNativeElementProps(as, {
-      ...props,
-      ref
-    }),
-    main: resolveShorthand(main, {
-      required: true,
-      defaultProps: {
-        children
-      }
-    }),
-    media: resolveShorthand(media, {
-      required: true
-    }),
-    content: resolveShorthand(content, {
-      required: true
-    }),
-    description: resolveShorthand(description),
-    aside: resolveShorthand(aside)
-  };
+ */ export const useTreeItemPersonaLayout_unstable = (props, ref)=>{
+    const { media , content , children , main , description  } = props;
+    const treeItemLayoutState = useTreeItemLayout_unstable({
+        ...props,
+        iconBefore: null,
+        iconAfter: null
+    }, ref);
+    const size = useTreeContext_unstable((ctx)=>ctx.size);
+    return {
+        ...treeItemLayoutState,
+        components: {
+            expandIcon: 'div',
+            content: 'div',
+            main: 'div',
+            description: 'div',
+            root: 'div',
+            media: 'div'
+        },
+        avatarSize: treeAvatarSize[size],
+        main: resolveShorthand(main, {
+            required: true,
+            defaultProps: {
+                children
+            }
+        }),
+        media: resolveShorthand(media, {
+            required: true
+        }),
+        content: resolveShorthand(content, {
+            required: true
+        }),
+        description: resolveShorthand(description)
+    };
 };
-//# sourceMappingURL=useTreeItemPersonaLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["getNativeElementProps","resolveShorthand","useTreeContext_unstable","useTreeItemContext_unstable","treeAvatarSize","useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","aside","as","size","ctx","isActionsVisible","components","root","avatarSize","required","defaultProps"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, content, children, main, description, aside, as = 'span' } = props;\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const { isActionsVisible } = useTreeItemContext_unstable();\n  return {\n    components: {\n      content: 'div',\n      main: 'span',\n      description: 'span',\n      root: 'span',\n      media: 'span',\n      aside: 'span',\n    },\n    isActionsVisible,\n    avatarSize: treeAvatarSize[size],\n    root: getNativeElementProps(as, { ...props, ref }),\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    content: resolveShorthand(content, { required: true }),\n    description: resolveShorthand(description),\n    aside: resolveShorthand(aside),\n  };\n};\n"],"mappings":"AAEA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnF,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,gBAAgB;AACrF,SAASC,cAAc,QAAQ,oBAAoB;AAEnD;;;;;;;;;AASA,OAAO,MAAMC,iCAAiC,GAAGA,CAC/CC,KAAiC,EACjCC,GAA+B,KACD;EAC9B,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,WAAW;IAAEC,KAAK;IAAEC,EAAE,GAAG;EAAM,CAAE,GAAGR,KAAK;EACjF,MAAMS,IAAI,GAAGb,uBAAuB,CAACc,GAAG,IAAIA,GAAG,CAACD,IAAI,CAAC;EACrD,MAAM;IAAEE;EAAgB,CAAE,GAAGd,2BAA2B,EAAE;EAC1D,OAAO;IACLe,UAAU,EAAE;MACVT,OAAO,EAAE,KAAK;MACdE,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE,MAAM;MACnBO,IAAI,EAAE,MAAM;MACZX,KAAK,EAAE,MAAM;MACbK,KAAK,EAAE;KACR;IACDI,gBAAgB;IAChBG,UAAU,EAAEhB,cAAc,CAACW,IAAI,CAAC;IAChCI,IAAI,EAAEnB,qBAAqB,CAACc,EAAE,EAAE;MAAE,GAAGR,KAAK;MAAEC;IAAG,CAAE,CAAC;IAClDI,IAAI,EAAEV,gBAAgB,CAACU,IAAI,EAAE;MAAEU,QAAQ,EAAE,IAAI;MAAEC,YAAY,EAAE;QAAEZ;MAAQ;IAAE,CAAE,CAAC;IAC5EF,KAAK,EAAEP,gBAAgB,CAACO,KAAK,EAAE;MAAEa,QAAQ,EAAE;IAAI,CAAE,CAAC;IAClDZ,OAAO,EAAER,gBAAgB,CAACQ,OAAO,EAAE;MAAEY,QAAQ,EAAE;IAAI,CAAE,CAAC;IACtDT,WAAW,EAAEX,gBAAgB,CAACW,WAAW,CAAC;IAC1CC,KAAK,EAAEZ,gBAAgB,CAACY,KAAK;GAC9B;AACH,CAAC"}
+{"version":3,"sources":["useTreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, content, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    content: resolveShorthand(content, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","avatarSize","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC,MAC+B;IAC/B,MAAM,EAAEC,MAAK,EAAEC,QAAO,EAAEC,SAAQ,EAAEC,KAAI,EAAEC,YAAW,EAAE,GAAGN;IAExD,MAAMO,sBAAsBT,2BAC1B;QACE,GAAGE,KAAK;QACRQ,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAR;IAGF,MAAMS,OAAOd,wBAAwBe,CAAAA,MAAOA,IAAID,IAAI;IACpD,OAAO;QACL,GAAGH,mBAAmB;QACtBK,YAAY;YACVC,YAAY;YACZV,SAAS;YACTE,MAAM;YACNC,aAAa;YACbQ,MAAM;YACNZ,OAAO;QACT;QACAa,YAAYlB,cAAc,CAACa,KAAK;QAChCL,MAAMV,iBAAiBU,MAAM;YAAEW,UAAU,IAAI;YAAEC,cAAc;gBAAEb;YAAS;QAAE;QAC1EF,OAAOP,iBAAiBO,OAAO;YAAEc,UAAU,IAAI;QAAC;QAChDb,SAASR,iBAAiBQ,SAAS;YAAEa,UAAU,IAAI;QAAC;QACpDV,aAAaX,iBAAiBW;IAChC;AACF,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js

@@ -1,13 +1,12 @@
 import * as React from 'react';
 export function useTreeItemPersonaLayoutContextValues_unstable(state) {
-  const {
-    avatarSize
-  } = state;
-  const avatar = React.useMemo(() => ({
-    size: avatarSize
-  }), [avatarSize]);
-  return {
-    avatar
-  };
+    const { avatarSize  } = state;
+    const avatar = React.useMemo(()=>({
+            size: avatarSize
+        }), [
+        avatarSize
+    ]);
+    return {
+        avatar
+    };
 }
-//# sourceMappingURL=useTreeItemPersonaLayoutContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,8CAA8CA,CAC5DC,KAAiC;EAEjC,MAAM;IAAEC;EAAU,CAAE,GAAGD,KAAK;EAE5B,MAAME,MAAM,GAAGJ,KAAK,CAACK,OAAO,CAAqB,OAAO;IAAEC,IAAI,EAAEH;EAAU,CAAE,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAE5F,OAAO;IAAEC;EAAM,CAAE;AACnB"}
+{"version":3,"sources":["useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC,EACG;IACpC,MAAM,EAAEC,WAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB,CAAC"}

package/lib/components/TreeItemPersonaLayout/{useTreeItemPersonaLayoutStyles.js → useTreeItemPersonaLayoutStyles.styles.js}

@@ -1,11 +1,13 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
 export const treeItemPersonaLayoutClassNames = {
   root: 'fui-TreeItemPersonaLayout',
+  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
   media: 'fui-TreeItemPersonaLayout__media',
   content: 'fui-TreeItemPersonaLayout__content',
   description: 'fui-TreeItemPersonaLayout__description',
-  aside: 'fui-TreeItemPersonaLayout__aside',
   main: 'fui-TreeItemPersonaLayout__main'
 };
 /**
@@ -13,12 +15,33 @@ export const treeItemPersonaLayoutClassNames = {
  */
 const useRootStyles = /*#__PURE__*/__styles({
   base: {
-    a9b677: "fly5x3f",
     mc9l5x: "f22iagw",
-    Bt984gj: "f122n59"
+    Bt984gj: "f122n59",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    Ijaq50: "f15ws6j",
+    Br312pm: "f135tdbu",
+    nk6f5a: "f2e2169",
+    Bw0ie65: "f4rqp6x",
+    lj723h: "flvvhsy",
+    ecr2s2: "f1wfn5kd",
+    zt0xaq: "f5na5aj",
+    Bi91k9c: "fnwyq0v",
+    Jwef8y: "f1t94bn6",
+    tbva4x: "f1oboesa"
+  },
+  leaf: {
+    uwmqm3: ["f1k1erfc", "faevyjx"]
+  },
+  branch: {
+    uwmqm3: ["fo100m9", "f6yw3pu"]
   }
 }, {
-  d: [".fly5x3f{width:100%;}", ".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;}"]
+  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;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f15ws6j{grid-row-start:layout;}", ".f135tdbu{grid-column-start:layout;}", ".f2e2169{grid-row-end:layout;}", ".f4rqp6x{grid-column-end:layout;}", ".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));}"],
+  a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"],
+  h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]
 });
 /**
  * Styles for the expand icon slot
@@ -52,16 +75,6 @@ const useContentStyles = /*#__PURE__*/__styles({
 }, {
   d: [".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1fps8zv{-webkit-column-gap:var(--spacingVerticalNone);column-gap:var(--spacingVerticalNone);}", ".fws515f{row-gap:var(--spacingHorizontalNone);}"]
 });
-const useMainStyles = /*#__PURE__*/__styles({
-  base: {
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fkhj508",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "f1i3iumi"
-  }
-}, {
-  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
-});
 const useDescriptionStyles = /*#__PURE__*/__styles({
   base: {
     Bahqtrf: "fk6fouc",
@@ -72,19 +85,27 @@ const useDescriptionStyles = /*#__PURE__*/__styles({
 }, {
   d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
 });
-const useAsideStyles = /*#__PURE__*/__styles({
+/**
+ * Styles for the expand icon slot
+ */
+const useExpandIconStyles = /*#__PURE__*/__styles({
   base: {
     mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
-    Huce71: "fz5stix",
-    z189sj: ["fw5db7e", "f1uw59to"],
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fy9rknc",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "fwrc4pm"
+    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;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fz5stix{white-space:nowrap;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
+  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);}"]
 });
 /**
  * Apply styling to the TreeItemPersonaLayout slots based on the state
@@ -93,23 +114,23 @@ export const useTreeItemPersonaLayoutStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const mediaStyles = useMediaStyles();
   const contentStyles = useContentStyles();
-  const mainStyles = useMainStyles();
   const descriptionStyles = useDescriptionStyles();
-  const asideStyles = useAsideStyles();
-  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);
+  const expandIconStyles = useExpandIconStyles();
+  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
+  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);
   state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
   if (state.content) {
     state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);
   }
   if (state.main) {
-    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);
+    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);
   }
   if (state.description) {
     state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
   }
-  if (state.aside) {
-    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
+  if (state.expandIcon) {
+    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
   }
   return state;
 };
-//# sourceMappingURL=useTreeItemPersonaLayoutStyles.js.map
+//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","expandIcon","media","content","description","main","useRootStyles","base","mc9l5x","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useDescriptionStyles","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","contentStyles","descriptionStyles","expandIconStyles","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n    root: 'fui-TreeItemPersonaLayout',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    media: 'fui-TreeItemPersonaLayout__media',\n    content: 'fui-TreeItemPersonaLayout__content',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        ...typographyStyles.body1,\n        ...shorthands.gridArea('layout'),\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemClassNames.expandIcon for styling\n            [`& .${treeItemPersonaLayoutClassNames.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            [`& .${treeItemPersonaLayoutClassNames.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});\n/**\n * Styles for the expand icon slot\n */ const useMediaStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        width: '32px',\n        height: '32px',\n        ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS)\n    }\n});\nconst useContentStyles = makeStyles({\n    base: {\n        width: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS),\n        ...shorthands.gap(tokens.spacingVerticalNone, tokens.spacingHorizontalNone)\n    }\n});\nconst useDescriptionStyles = makeStyles({\n    base: {\n        ...typographyStyles.caption1\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 TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const mediaStyles = useMediaStyles();\n    const contentStyles = useContentStyles();\n    const descriptionStyles = useDescriptionStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n    if (state.content) {\n        state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);\n    }\n    if (state.main) {\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.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,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,UAAU,EAAE,uCAAuC;EACnDC,KAAK,EAAE,kCAAkC;EACzCC,OAAO,EAAE,oCAAoC;EAC7CC,WAAW,EAAE,wCAAwC;EACrDC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGd,QAAA;EAAAe,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA6BzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGtC,QAAA;EAAAe,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAsB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAV,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQ1B,CAAC;AACF,MAAMS,gBAAgB,gBAAG5C,QAAA;EAAAe,IAAA;IAAAwB,MAAA;IAAAvB,MAAA;IAAA6B,OAAA;IAAAJ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAV,MAAA;IAAAa,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,CAQxB,CAAC;AACF,MAAMa,oBAAoB,gBAAGhD,QAAA;EAAAe,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAc,CAAA;AAAA,CAI5B,CAAC;AACF;AACA;AACA;AAAI,MAAMc,mBAAmB,gBAAGjD,QAAA;EAAAe,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAiC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAf,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAV,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAW/B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMsB,uCAAuC,GAAIC,KAAK,IAAG;EAChE,MAAMC,UAAU,GAAG7C,aAAa,CAAC,CAAC;EAClC,MAAM8C,WAAW,GAAGtB,cAAc,CAAC,CAAC;EACpC,MAAMuB,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,gBAAgB,GAAGd,mBAAmB,CAAC,CAAC;EAC9C,MAAMe,QAAQ,GAAG1D,2BAA2B,CAAE2D,GAAG,IAAGA,GAAG,CAACD,QAAQ,CAAC;EACjEN,KAAK,CAAClD,IAAI,CAAC0D,SAAS,GAAGjE,YAAY,CAACM,+BAA+B,CAACC,IAAI,EAAEmD,UAAU,CAAC5C,IAAI,EAAE4C,UAAU,CAACK,QAAQ,CAAC,EAAEN,KAAK,CAAClD,IAAI,CAAC0D,SAAS,CAAC;EACtIR,KAAK,CAAChD,KAAK,CAACwD,SAAS,GAAGjE,YAAY,CAACM,+BAA+B,CAACG,KAAK,EAAEkD,WAAW,CAAC7C,IAAI,EAAE2C,KAAK,CAAChD,KAAK,CAACwD,SAAS,CAAC;EACpH,IAAIR,KAAK,CAAC/C,OAAO,EAAE;IACf+C,KAAK,CAAC/C,OAAO,CAACuD,SAAS,GAAGjE,YAAY,CAACM,+BAA+B,CAACI,OAAO,EAAEkD,aAAa,CAAC9C,IAAI,EAAE2C,KAAK,CAAC/C,OAAO,CAACuD,SAAS,CAAC;EAChI;EACA,IAAIR,KAAK,CAAC7C,IAAI,EAAE;IACZ6C,KAAK,CAAC7C,IAAI,CAACqD,SAAS,GAAGjE,YAAY,CAACM,+BAA+B,CAACM,IAAI,EAAE6C,KAAK,CAAC7C,IAAI,CAACqD,SAAS,CAAC;EACnG;EACA,IAAIR,KAAK,CAAC9C,WAAW,EAAE;IACnB8C,KAAK,CAAC9C,WAAW,CAACsD,SAAS,GAAGjE,YAAY,CAACM,+BAA+B,CAACK,WAAW,EAAEkD,iBAAiB,CAAC/C,IAAI,EAAE2C,KAAK,CAAC9C,WAAW,CAACsD,SAAS,CAAC;EAChJ;EACA,IAAIR,KAAK,CAACjD,UAAU,EAAE;IAClBiD,KAAK,CAACjD,UAAU,CAACyD,SAAS,GAAGjE,YAAY,CAACM,+BAA+B,CAACE,UAAU,EAAEsD,gBAAgB,CAAChD,IAAI,EAAE2C,KAAK,CAACjD,UAAU,CAACyD,SAAS,CAAC;EAC5I;EACA,OAAOR,KAAK;AAChB,CAAC"}