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

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

@@ -1 +1 @@
-{"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  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\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.main {...slotProps.main} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAyCI;IAEtE,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,iBAC/D,AAxBN,cAwBOR;QAAsBS,OAAOL,cAAcM,MAAM;qBAChD,AAzBR,cAyBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,kBAElC,AA3BN,cA2BON,MAAMO,IAAI,EAAKN,UAAUM,IAAI,GAC7BP,MAAMQ,WAAW,kBAAI,AA5B5B,cA4B6BR,MAAMQ,WAAW,EAAKP,UAAUO,WAAW,iBAClE,AA7BN,cA6BOZ;QAAsBQ,OAAON,MAAMW,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AA9B1B,cA8B2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AA/BxB,cA+ByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}
+{"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  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\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.description && <slots.description {...slotProps.description} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","content","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAyCI;IAEtE,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,iBAC/D,AAxBN,cAwBOR;QAAsBS,OAAOL,cAAcM,MAAM;qBAChD,AAzBR,cAyBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,kBAElC,AA3BN,cA2BON,MAAMO,OAAO,EAAKN,UAAUM,OAAO,GACnCP,MAAMQ,WAAW,kBAAI,AA5B5B,cA4B6BR,MAAMQ,WAAW,EAAKP,UAAUO,WAAW,iBAClE,AA7BN,cA6BOZ;QAAsBQ,OAAON,MAAMW,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AA9B1B,cA8B2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AA/BxB,cA+ByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -12,7 +12,7 @@ import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout'
  * @param props - props from this instance of TreeItemPersonaLayout
  * @param ref - reference to root HTMLElement of TreeItemPersonaLayout
  */ export const useTreeItemPersonaLayout_unstable = (props, ref)=>{
-    const { media , children , main , description  } = props;
+    const { media , children , content , description  } = props;
     const treeItemLayoutState = useTreeItemLayout_unstable({
         ...props,
         iconBefore: null,
@@ -23,7 +23,7 @@ import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout'
         ...treeItemLayoutState,
         components: {
             expandIcon: 'div',
-            main: 'div',
+            content: 'div',
             description: 'div',
             root: 'div',
             media: 'div',
@@ -31,7 +31,7 @@ import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout'
             actions: 'div'
         },
         avatarSize: treeAvatarSize[size],
-        main: resolveShorthand(main, {
+        content: resolveShorthand(content, {
             required: true,
             defaultProps: {
                 children

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

@@ -1 +1 @@
-{"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, 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      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","aside","actions","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,SAAQ,EAAEC,KAAI,EAAEC,YAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBR,2BAC1B;QACE,GAAGE,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOb,wBAAwBc,CAAAA,MAAOA,IAAID,IAAI;IACpD,OAAO;QACL,GAAGH,mBAAmB;QACtBK,YAAY;YACVC,YAAY;YACZR,MAAM;YACNC,aAAa;YACbQ,MAAM;YACNX,OAAO;YACPY,OAAO;YACPC,SAAS;QACX;QACAC,YAAYnB,cAAc,CAACY,KAAK;QAChCL,MAAMT,iBAAiBS,MAAM;YAAEa,UAAU,IAAI;YAAEC,cAAc;gBAAEf;YAAS;QAAE;QAC1ED,OAAOP,iBAAiBO,OAAO;YAAEe,UAAU,IAAI;QAAC;QAChDZ,aAAaV,iBAAiBU;IAChC;AACF,EAAE"}
+{"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, children, content, 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      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    content: resolveShorthand(content, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","children","content","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","aside","actions","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,SAAQ,EAAEC,QAAO,EAAEC,YAAW,EAAE,GAAGL;IAElD,MAAMM,sBAAsBR,2BAC1B;QACE,GAAGE,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOb,wBAAwBc,CAAAA,MAAOA,IAAID,IAAI;IACpD,OAAO;QACL,GAAGH,mBAAmB;QACtBK,YAAY;YACVC,YAAY;YACZR,SAAS;YACTC,aAAa;YACbQ,MAAM;YACNX,OAAO;YACPY,OAAO;YACPC,SAAS;QACX;QACAC,YAAYnB,cAAc,CAACY,KAAK;QAChCL,SAAST,iBAAiBS,SAAS;YAAEa,UAAU,IAAI;YAAEC,cAAc;gBAAEf;YAAS;QAAE;QAChFD,OAAOP,iBAAiBO,OAAO;YAAEe,UAAU,IAAI;QAAC;QAChDZ,aAAaV,iBAAiBU;IAChC;AACF,EAAE"}

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

@@ -6,7 +6,7 @@ export const treeItemPersonaLayoutClassNames = {
   root: 'fui-TreeItemPersonaLayout',
   media: 'fui-TreeItemPersonaLayout__media',
   description: 'fui-TreeItemPersonaLayout__description',
-  main: 'fui-TreeItemPersonaLayout__main',
+  content: 'fui-TreeItemPersonaLayout__content',
   expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
   aside: 'fui-TreeItemPersonaLayout__aside',
   actions: 'fui-TreeItemPersonaLayout__actions'
@@ -19,7 +19,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     mc9l5x: "f13qh94s",
     wkccdc: "f1y0tuzo",
     Budl1dq: "fellwe7",
-    zoa1oz: "f1pam7zy",
+    zoa1oz: "f86xsft",
     Bt984gj: "f122n59",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
@@ -39,7 +39,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     uwmqm3: ["fo100m9", "f6yw3pu"]
   }
 }, {
-  d: [".f13qh94s{display:grid;}", ".f1y0tuzo{grid-template-rows:1fr auto;}", ".fellwe7{grid-template-columns:auto auto 1fr auto;}", ".f1pam7zy{grid-template-areas:\"expandIcon media main        aside\" \"expandIcon media description aside\";}", ".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);}", ".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));}"],
+  d: [".f13qh94s{display:-ms-grid;display:grid;}", ".f1y0tuzo{-ms-grid-rows:1fr auto;grid-template-rows:1fr auto;}", ".fellwe7{-ms-grid-columns:auto auto 1fr auto;grid-template-columns:auto auto 1fr auto;}", ".f86xsft{grid-template-areas:\"expandIcon media content        aside\" \"expandIcon media description aside\";}", ".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);}", ".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);}"]
 });
@@ -62,14 +62,14 @@ const useMediaStyles = /*#__PURE__*/__styles({
     uwmqm3: ["fgiv446", "ffczdla"]
   }
 }, {
-  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;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".f1g0x7ka{padding-top:0;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f1qch9an{padding-bottom:0;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
+  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;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".f11uok23{-ms-grid-row:media;grid-row-start:media;}", ".f1qdfnnj{-ms-grid-column:media;grid-column-start:media;}", ".f1s27gz{-ms-grid-row-span:media;grid-row-end:media;}", ".f86d0yl{-ms-grid-column-span:media;grid-column-end:media;}", ".f1g0x7ka{padding-top:0;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f1qch9an{padding-bottom:0;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
 });
-const useMainStyles = /*#__PURE__*/__styles({
+const useContentStyles = /*#__PURE__*/__styles({
   base: {
-    Ijaq50: "f17iroih",
-    Br312pm: "fppdkoh",
-    nk6f5a: "fsb8d6n",
-    Bw0ie65: "f6k5g14",
+    Ijaq50: "fxwmwwq",
+    Br312pm: "f1e0gndy",
+    nk6f5a: "f4zz6gv",
+    Bw0ie65: "f7idnck",
     z8tnut: "f1ngh7ph",
     z189sj: ["f7x41pl", "fruq291"],
     Byoj8tv: "f5o476b",
@@ -82,7 +82,7 @@ const useMainStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".f17iroih{grid-row-start:main;}", ".fppdkoh{grid-column-start:main;}", ".fsb8d6n{grid-row-end:main;}", ".f6k5g14{grid-column-end:main;}", ".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);}", ".f1qch9an{padding-bottom:0;}"]
+  d: [".fxwmwwq{-ms-grid-row:content;grid-row-start:content;}", ".f1e0gndy{-ms-grid-column:content;grid-column-start:content;}", ".f4zz6gv{-ms-grid-row-span:content;grid-row-end:content;}", ".f7idnck{-ms-grid-column-span:content;grid-column-end:content;}", ".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);}", ".f1qch9an{padding-bottom:0;}"]
 });
 const useDescriptionStyles = /*#__PURE__*/__styles({
   base: {
@@ -100,7 +100,7 @@ const useDescriptionStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".ffekjdo{grid-row-start:description;}", ".f12wtlaa{grid-column-start:description;}", ".f1blqr63{grid-row-end:description;}", ".f2ve1i{grid-column-end:description;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".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);}"]
+  d: [".ffekjdo{-ms-grid-row:description;grid-row-start:description;}", ".f12wtlaa{-ms-grid-column:description;grid-column-start:description;}", ".f1blqr63{-ms-grid-row-span:description;grid-row-end:description;}", ".f2ve1i{-ms-grid-column-span:description;grid-column-end:description;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".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);}"]
 });
 /**
  * Styles for the action icon slot
@@ -121,7 +121,7 @@ const useActionsStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}", ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}", ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}", ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
 });
 /**
  * Styles for the action icon slot
@@ -144,7 +144,7 @@ const useAsideStyles = /*#__PURE__*/__styles({
     Belr9w4: "f14sijuj"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}", ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}", ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}", ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
 });
 /**
  * Styles for the expand icon slot
@@ -170,7 +170,7 @@ const useExpandIconStyles = /*#__PURE__*/__styles({
     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);}", ".f1e6rimv{grid-row-start:expandIcon;}", ".f10hsf66{grid-column-start:expandIcon;}", ".foflfm0{grid-row-end:expandIcon;}", ".f1b3ebjb{grid-column-end:expandIcon;}", ".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);}"]
+  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);}", ".f1e6rimv{-ms-grid-row:expandIcon;grid-row-start:expandIcon;}", ".f10hsf66{-ms-grid-column:expandIcon;grid-column-start:expandIcon;}", ".foflfm0{-ms-grid-row-span:expandIcon;grid-row-end:expandIcon;}", ".f1b3ebjb{-ms-grid-column-span:expandIcon;grid-column-end:expandIcon;}", ".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
@@ -182,12 +182,12 @@ export const useTreeItemPersonaLayoutStyles_unstable = state => {
   const actionsStyles = useActionsStyles();
   const asideStyles = useAsideStyles();
   const expandIconStyles = useExpandIconStyles();
-  const mainStyles = useMainStyles();
+  const contentStyles = useContentStyles();
   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.main) {
-    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);
+  if (state.content) {
+    state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.description && contentStyles.withDescription, state.content.className);
   }
   if (state.description) {
     state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","useRootStyles","base","mc9l5x","wkccdc","Budl1dq","zoa1oz","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","Ijaq50","Br312pm","nk6f5a","Bw0ie65","z8tnut","z189sj","Byoj8tv","useMainStyles","withDescription","useDescriptionStyles","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","descriptionStyles","actionsStyles","asideStyles","expandIconStyles","mainStyles","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    media: 'fui-TreeItemPersonaLayout__media',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    aside: 'fui-TreeItemPersonaLayout__aside',\n    actions: 'fui-TreeItemPersonaLayout__actions'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid',\n        gridTemplateRows: '1fr auto',\n        gridTemplateColumns: 'auto auto 1fr auto',\n        gridTemplateAreas: `\n      \"expandIcon media main        aside\"\n      \"expandIcon media description aside\"\n    `,\n        alignItems: 'center',\n        ...typographyStyles.body1,\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemPersonaLayoutClassNames.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 treeItemPersonaLayoutClassNames.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.gridArea('media'),\n        ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS)\n    }\n});\nconst useMainStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('main'),\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n    },\n    withDescription: {\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalS)\n    }\n});\nconst useDescriptionStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('description'),\n        ...typographyStyles.caption1,\n        ...shorthands.padding(0, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useAsideStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: '24px',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.gridArea('expandIcon'),\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 descriptionStyles = useDescriptionStyles();\n    const actionsStyles = useActionsStyles();\n    const asideStyles = useAsideStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const mainStyles = useMainStyles();\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.main) {\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.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":"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","content","expandIcon","aside","actions","useRootStyles","base","mc9l5x","wkccdc","Budl1dq","zoa1oz","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","Ijaq50","Br312pm","nk6f5a","Bw0ie65","z8tnut","z189sj","Byoj8tv","useContentStyles","withDescription","useDescriptionStyles","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","descriptionStyles","actionsStyles","asideStyles","expandIconStyles","contentStyles","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    media: 'fui-TreeItemPersonaLayout__media',\n    description: 'fui-TreeItemPersonaLayout__description',\n    content: 'fui-TreeItemPersonaLayout__content',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    aside: 'fui-TreeItemPersonaLayout__aside',\n    actions: 'fui-TreeItemPersonaLayout__actions'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid',\n        gridTemplateRows: '1fr auto',\n        gridTemplateColumns: 'auto auto 1fr auto',\n        gridTemplateAreas: `\n      \"expandIcon media content        aside\"\n      \"expandIcon media description aside\"\n    `,\n        alignItems: 'center',\n        ...typographyStyles.body1,\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemPersonaLayoutClassNames.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 treeItemPersonaLayoutClassNames.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.gridArea('media'),\n        ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS)\n    }\n});\nconst useContentStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('content'),\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n    },\n    withDescription: {\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalS)\n    }\n});\nconst useDescriptionStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('description'),\n        ...typographyStyles.caption1,\n        ...shorthands.padding(0, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useAsideStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: '24px',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.gridArea('expandIcon'),\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 descriptionStyles = useDescriptionStyles();\n    const actionsStyles = useActionsStyles();\n    const asideStyles = useAsideStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const contentStyles = useContentStyles();\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.description && contentStyles.withDescription, state.content.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.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":"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"}

package/lib/index.js

@@ -1,7 +1,7 @@
 export { Tree, treeClassNames, renderTree_unstable, useTreeStyles_unstable, useTree_unstable, useTreeContextValues_unstable } from './Tree';
 export { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';
 export { treeItemLevelToken } from './utils/tokens';
-export { TreeItem, treeItemClassNames, renderTreeItem_unstable, useTreeItemStyles_unstable, useTreeItem_unstable } from './TreeItem';
+export { TreeItem, treeItemClassNames, renderTreeItem_unstable, useTreeItemStyles_unstable, useTreeItemContextValues_unstable, useTreeItem_unstable } from './TreeItem';
 export { TreeItemLayout, treeItemLayoutClassNames, renderTreeItemLayout_unstable, useTreeItemLayoutStyles_unstable, useTreeItemLayout_unstable } from './TreeItemLayout';
 export { TreeItemPersonaLayout, treeItemPersonaLayoutClassNames, renderTreeItemPersonaLayout_unstable, useTreeItemPersonaLayoutStyles_unstable, useTreeItemPersonaLayout_unstable } from './TreeItemPersonaLayout';
 export { useFlatTree_unstable } from './hooks/index';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Tree,\n  treeClassNames,\n  renderTree_unstable,\n  useTreeStyles_unstable,\n  useTree_unstable,\n  useTreeContextValues_unstable,\n} from './Tree';\nexport type {\n  TreeProps,\n  TreeState,\n  TreeSlots,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeNavigationEvent_unstable,\n  TreeNavigationData_unstable,\n} from './Tree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n  TreeItem,\n  treeItemClassNames,\n  renderTreeItem_unstable,\n  useTreeItemStyles_unstable,\n  useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemProps, TreeItemState, TreeItemSlots } from './TreeItem';\n\nexport {\n  TreeItemLayout,\n  treeItemLayoutClassNames,\n  renderTreeItemLayout_unstable,\n  useTreeItemLayoutStyles_unstable,\n  useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n  TreeItemPersonaLayout,\n  treeItemPersonaLayoutClassNames,\n  renderTreeItemPersonaLayout_unstable,\n  useTreeItemPersonaLayoutStyles_unstable,\n  useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { useFlatTree_unstable } from './hooks/index';\nexport type { FlatTreeItem, FlatTreeItemProps, FlatTreeProps, FlatTree } from './hooks/index';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { NestedTreeItem } from './utils/flattenTree';\n"],"names":["Tree","treeClassNames","renderTree_unstable","useTreeStyles_unstable","useTree_unstable","useTreeContextValues_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","useFlatTree_unstable","flattenTree_unstable"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,EAChBC,6BAA6B,QACxB,SAAS;AAWhB,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ,aAAa;AAGlH,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAGpB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,0BAA0B;AAOjC,SAASC,oBAAoB,QAAQ,gBAAgB;AAGrD,SAASC,oBAAoB,QAAQ,sBAAsB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Tree,\n  treeClassNames,\n  renderTree_unstable,\n  useTreeStyles_unstable,\n  useTree_unstable,\n  useTreeContextValues_unstable,\n} from './Tree';\nexport type {\n  TreeProps,\n  TreeState,\n  TreeSlots,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeNavigationEvent_unstable,\n  TreeNavigationData_unstable,\n} from './Tree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n  TreeItem,\n  treeItemClassNames,\n  renderTreeItem_unstable,\n  useTreeItemStyles_unstable,\n  useTreeItemContextValues_unstable,\n  useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemProps, TreeItemState, TreeItemSlots } from './TreeItem';\n\nexport {\n  TreeItemLayout,\n  treeItemLayoutClassNames,\n  renderTreeItemLayout_unstable,\n  useTreeItemLayoutStyles_unstable,\n  useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n  TreeItemPersonaLayout,\n  treeItemPersonaLayoutClassNames,\n  renderTreeItemPersonaLayout_unstable,\n  useTreeItemPersonaLayoutStyles_unstable,\n  useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { useFlatTree_unstable } from './hooks/index';\nexport type { FlatTreeItem, FlatTreeItemProps, FlatTreeProps, FlatTree } from './hooks/index';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { NestedTreeItem } from './utils/flattenTree';\n"],"names":["Tree","treeClassNames","renderTree_unstable","useTreeStyles_unstable","useTree_unstable","useTreeContextValues_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","useFlatTree_unstable","flattenTree_unstable"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,EAChBC,6BAA6B,QACxB,SAAS;AAWhB,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ,aAAa;AAGlH,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,oBAAoB,QACf,aAAa;AAGpB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,0BAA0B;AAOjC,SAASC,oBAAoB,QAAQ,gBAAgB;AAGrD,SAASC,oBAAoB,QAAQ,sBAAsB"}

package/lib-commonjs/components/Tree/useTreeStyles.styles.js

@@ -39,10 +39,10 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}",
         ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}",
         ".f1s4axba{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;}",
-        ".f1na4k6z{grid-row-start:subtree;}",
-        ".fwt6ga{grid-column-start:subtree;}",
-        ".fi45nfw{grid-row-end:subtree;}",
-        ".f10ort2y{grid-column-end:subtree;}"
+        ".f1na4k6z{-ms-grid-row:subtree;grid-row-start:subtree;}",
+        ".fwt6ga{-ms-grid-column:subtree;grid-column-start:subtree;}",
+        ".fi45nfw{-ms-grid-row-span:subtree;grid-row-end:subtree;}",
+        ".f10ort2y{-ms-grid-column-span:subtree;grid-column-end:subtree;}"
     ]
 });
 const useTreeStyles_unstable = (state)=>{

package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n  root: 'fui-Tree'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Belr9w4: \"f1j0q4x9\"\n  },\n  subtree: {\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"f1s4axba\",\n    Ijaq50: \"f1na4k6z\",\n    Br312pm: \"fwt6ga\",\n    nk6f5a: \"fi45nfw\",\n    Bw0ie65: \"f10ort2y\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}\", \".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}\", \".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}\", \".f1s4axba{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;}\", \".f1na4k6z{grid-row-start:subtree;}\", \".fwt6ga{grid-column-start:subtree;}\", \".fi45nfw{grid-row-end:subtree;}\", \".f10ort2y{grid-column-end:subtree;}\"]\n});\nexport const useTreeStyles_unstable = state => {\n  const styles = useStyles();\n  const isSubtree = state.level > 0;\n  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubtree && styles.subtree, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTreeStyles.styles.js.map"],"names":["treeClassNames","useTreeStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","Belr9w4","subtree","Bh6795r","Bnnss6s","xawz","Ijaq50","Br312pm","nk6f5a","Bw0ie65","d","state","styles","isSubtree","level","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,cAAc,MAAdA;IAqBAC,sBAAsB,MAAtBA;;uBAvBsC;AAE5C,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,SAAS;QACPC,SAAS;QACTC,SAAS;QACTC,MAAM;QACNC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAiD;QAAqF;QAAuE;QAAoF;QAAsC;QAAuC;QAAmC;KAAsC;AAClnB;AACO,MAAMf,yBAAyBgB,CAAAA,QAAS;IAC7C,MAAMC,SAASf;IACf,MAAMgB,YAAYF,MAAMG,KAAK,GAAG;IAChCH,MAAMf,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,eAAeE,IAAI,EAAEgB,OAAOhB,IAAI,EAAEiB,aAAaD,OAAOV,OAAO,EAAES,MAAMf,IAAI,CAACmB,SAAS;IACvH,OAAOJ;AACT,GACA,gDAAgD"}
+{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n  root: 'fui-Tree'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Belr9w4: \"f1j0q4x9\"\n  },\n  subtree: {\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"f1s4axba\",\n    Ijaq50: \"f1na4k6z\",\n    Br312pm: \"fwt6ga\",\n    nk6f5a: \"fi45nfw\",\n    Bw0ie65: \"f10ort2y\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}\", \".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}\", \".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}\", \".f1s4axba{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;}\", \".f1na4k6z{-ms-grid-row:subtree;grid-row-start:subtree;}\", \".fwt6ga{-ms-grid-column:subtree;grid-column-start:subtree;}\", \".fi45nfw{-ms-grid-row-span:subtree;grid-row-end:subtree;}\", \".f10ort2y{-ms-grid-column-span:subtree;grid-column-end:subtree;}\"]\n});\nexport const useTreeStyles_unstable = state => {\n  const styles = useStyles();\n  const isSubtree = state.level > 0;\n  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubtree && styles.subtree, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTreeStyles.styles.js.map"],"names":["treeClassNames","useTreeStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","Belr9w4","subtree","Bh6795r","Bnnss6s","xawz","Ijaq50","Br312pm","nk6f5a","Bw0ie65","d","state","styles","isSubtree","level","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,cAAc,MAAdA;IAqBAC,sBAAsB,MAAtBA;;uBAvBsC;AAE5C,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,SAAS;QACPC,SAAS;QACTC,SAAS;QACTC,MAAM;QACNC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAiD;QAAqF;QAAuE;QAAoF;QAA2D;QAA+D;QAA6D;KAAmE;AACttB;AACO,MAAMf,yBAAyBgB,CAAAA,QAAS;IAC7C,MAAMC,SAASf;IACf,MAAMgB,YAAYF,MAAMG,KAAK,GAAG;IAChCH,MAAMf,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,eAAeE,IAAI,EAAEgB,OAAOhB,IAAI,EAAEiB,aAAaD,OAAOV,OAAO,EAAES,MAAMf,IAAI,CAACmB,SAAS;IACvH,OAAOJ;AACT,GACA,gDAAgD"}

package/lib-commonjs/components/TreeItem/index.js

@@ -8,3 +8,4 @@ _exportStar(require("./TreeItem.types"), exports);
 _exportStar(require("./renderTreeItem"), exports);
 _exportStar(require("./useTreeItem"), exports);
 _exportStar(require("./useTreeItemStyles.styles"), exports);
+_exportStar(require("./useTreeItemContextValues"), exports);

package/lib-commonjs/components/TreeItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\nexport * from './useTreeItemContextValues';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA"}

package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js

@@ -11,7 +11,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
 const _reactButton = require("@fluentui/react-button");
 const renderTreeItemLayout_unstable = (state)=>{
     const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactButton.ButtonContextProvider, {
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconBefore, slotProps.iconBefore), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, slotProps.content, slotProps.root.children), slots.iconAfter && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactButton.ButtonContextProvider, {
         value: state.buttonContextValue
     }, slots.actions && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.aside, slotProps.aside)));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItemLayout\n */ export const renderTreeItemLayout_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ createElement(ButtonContextProvider, {\n        value: state.buttonContextValue\n    }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));\n};\n"],"names":["renderTreeItemLayout_unstable","state","slots","slotProps","getSlotsNext","createElement","root","expandIcon","iconBefore","children","iconAfter","ButtonContextProvider","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;6BACS;AAG3B,MAAMA,gCAAgC,CAACC,QAAQ;IACtD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAEJ,UAAUI,UAAU,GAAGL,MAAMM,UAAU,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,UAAU,EAAEL,UAAUK,UAAU,GAAGL,UAAUG,IAAI,CAACG,QAAQ,EAAEP,MAAMQ,SAAS,IAAI,WAAW,GAAGL,IAAAA,8BAAa,EAACH,MAAMQ,SAAS,EAAEP,UAAUO,SAAS,GAAG,WAAW,GAAGL,IAAAA,8BAAa,EAACM,kCAAqB,EAAE;QAC/YC,OAAOX,MAAMY,kBAAkB;IACnC,GAAGX,MAAMY,OAAO,IAAI,WAAW,GAAGT,IAAAA,8BAAa,EAACH,MAAMY,OAAO,EAAEX,UAAUW,OAAO,GAAGZ,MAAMa,KAAK,IAAI,WAAW,GAAGV,IAAAA,8BAAa,EAACH,MAAMa,KAAK,EAAEZ,UAAUY,KAAK;AAC9J"}
+{"version":3,"sources":["renderTreeItemLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItemLayout\n */ export const renderTreeItemLayout_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), /*#__PURE__*/ createElement(slots.content, slotProps.content, slotProps.root.children), slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ createElement(ButtonContextProvider, {\n        value: state.buttonContextValue\n    }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));\n};\n"],"names":["renderTreeItemLayout_unstable","state","slots","slotProps","getSlotsNext","createElement","root","expandIcon","iconBefore","content","children","iconAfter","ButtonContextProvider","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;6BACS;AAG3B,MAAMA,gCAAgC,CAACC,QAAQ;IACtD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAEJ,UAAUI,UAAU,GAAGL,MAAMM,UAAU,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,UAAU,EAAEL,UAAUK,UAAU,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMO,OAAO,EAAEN,UAAUM,OAAO,EAAEN,UAAUG,IAAI,CAACI,QAAQ,GAAGR,MAAMS,SAAS,IAAI,WAAW,GAAGN,IAAAA,8BAAa,EAACH,MAAMS,SAAS,EAAER,UAAUQ,SAAS,GAAG,WAAW,GAAGN,IAAAA,8BAAa,EAACO,kCAAqB,EAAE;QAC9cC,OAAOZ,MAAMa,kBAAkB;IACnC,GAAGZ,MAAMa,OAAO,IAAI,WAAW,GAAGV,IAAAA,8BAAa,EAACH,MAAMa,OAAO,EAAEZ,UAAUY,OAAO,GAAGb,MAAMc,KAAK,IAAI,WAAW,GAAGX,IAAAA,8BAAa,EAACH,MAAMc,KAAK,EAAEb,UAAUa,KAAK;AAC9J"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -12,7 +12,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
 const _treeItemContext = require("../../contexts/treeItemContext");
 const _treeItemChevron = require("../TreeItemChevron");
 const useTreeItemLayout_unstable = (props, ref)=>{
-    const { iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;
+    const { content , iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;
     const layoutRef = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
     const expandIconRef = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.expandIconRef);
     const isActionsVisibleContext = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.isActionsVisible);
@@ -26,6 +26,7 @@ const useTreeItemLayout_unstable = (props, ref)=>{
             root: 'div',
             expandIcon: 'div',
             iconBefore: 'div',
+            content: 'div',
             iconAfter: 'div',
             actions: 'div',
             aside: 'div'
@@ -42,6 +43,9 @@ const useTreeItemLayout_unstable = (props, ref)=>{
                 'aria-hidden': true
             }
         }),
+        content: (0, _reactUtilities.resolveShorthand)(content, {
+            required: true
+        }),
         iconAfter: (0, _reactUtilities.resolveShorthand)(iconAfter, {
             defaultProps: {
                 'aria-hidden': true

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);\n    const isActionsVisibleContext = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible);\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\n    var _ref;\n    const isActionsVisible = (_ref = isResolvedShorthand(actions) ? actions.visible : undefined) !== null && _ref !== void 0 ? _ref : isActionsVisibleContext;\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    const actionsRef = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, useTreeItemContext_unstable((ctx)=>ctx.actionsRef));\n    return {\n        components: {\n            root: 'div',\n            expandIcon: 'div',\n            iconBefore: 'div',\n            iconAfter: 'div',\n            actions: 'div',\n            aside: 'div'\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: getNativeElementProps(as, {\n            ...props,\n            ref: useMergedRefs(ref, layoutRef)\n        }),\n        iconBefore: resolveShorthand(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            }\n        }),\n        iconAfter: resolveShorthand(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            }\n        }),\n        aside: isAsideVisible ? resolveShorthand(aside) : undefined,\n        actions: isActionsVisible ? resolveShorthand(// visible props should not be propagated to the DOM\n        isResolvedShorthand(actions) ? {\n            ...actions,\n            visible: undefined\n        } : actions, {\n            defaultProps: {\n                ref: actionsRef\n            }\n        }) : undefined,\n        expandIcon: resolveShorthand(expandIcon, {\n            required: isBranch,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n                'aria-hidden': true,\n                ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)\n            }\n        })\n    };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","aside","actions","layoutRef","useTreeItemContext_unstable","ctx","expandIconRef","isActionsVisibleContext","isActionsVisible","isAsideVisible","_ref","isResolvedShorthand","visible","undefined","isBranch","itemType","actionsRef","useMergedRefs","components","root","buttonContextValue","size","getNativeElementProps","resolveShorthand","defaultProps","required","children","React","createElement","TreeItemChevron"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACqE;iCAChD;iCACZ;AASrB,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAM,EAAEC,UAAS,EAAGC,WAAU,EAAGC,WAAU,EAAGC,IAAI,OAAM,EAAGC,MAAK,EAAGC,QAAO,EAAG,GAAGP;IAChF,MAAMQ,YAAYC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBF,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,aAAa;IAC1E,MAAMC,0BAA0BH,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,gBAAgB;IACvF,MAAMC,iBAAiBL,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAII,cAAc;IAC5E,IAAIC;IACJ,MAAMF,mBAAmB,AAACE,CAAAA,OAAOC,IAAAA,mCAAmB,EAACT,WAAWA,QAAQU,OAAO,GAAGC,SAAS,AAAD,MAAO,IAAI,IAAIH,SAAS,KAAK,IAAIA,OAAOH,uBAAuB;IACzJ,MAAMO,WAAWV,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIU,QAAQ,KAAK;IACrE,MAAMC,aAAaC,IAAAA,6BAAa,EAACN,IAAAA,mCAAmB,EAACT,WAAWA,QAAQN,GAAG,GAAGiB,SAAS,EAAET,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIW,UAAU;IAC1I,OAAO;QACHE,YAAY;YACRC,MAAM;YACNpB,YAAY;YACZD,YAAY;YACZD,WAAW;YACXK,SAAS;YACTD,OAAO;QACX;QACAmB,oBAAoB;YAChBC,MAAM;QACV;QACAF,MAAMG,IAAAA,qCAAqB,EAACtB,IAAI;YAC5B,GAAGL,KAAK;YACRC,KAAKqB,IAAAA,6BAAa,EAACrB,KAAKO;QAC5B;QACAL,YAAYyB,IAAAA,gCAAgB,EAACzB,YAAY;YACrC0B,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACA3B,WAAW0B,IAAAA,gCAAgB,EAAC1B,WAAW;YACnC2B,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACAvB,OAAOQ,iBAAiBc,IAAAA,gCAAgB,EAACtB,SAASY,SAAS;QAC3DX,SAASM,mBAAmBe,IAAAA,gCAAgB,EAC5CZ,IAAAA,mCAAmB,EAACT,WAAW;YAC3B,GAAGA,OAAO;YACVU,SAASC;QACb,IAAIX,OAAO,EAAE;YACTsB,cAAc;gBACV5B,KAAKoB;YACT;QACJ,KAAKH,SAAS;QACdd,YAAYwB,IAAAA,gCAAgB,EAACxB,YAAY;YACrC0B,UAAUX;YACVU,cAAc;gBACVE,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,gCAAe,EAAE,IAAI;gBACjE,eAAe,IAAI;gBACnBjC,KAAKqB,IAAAA,6BAAa,EAACN,IAAAA,mCAAmB,EAACZ,cAAcA,WAAWH,GAAG,GAAGiB,SAAS,EAAEP;YACrF;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { content , iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);\n    const isActionsVisibleContext = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible);\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\n    var _ref;\n    const isActionsVisible = (_ref = isResolvedShorthand(actions) ? actions.visible : undefined) !== null && _ref !== void 0 ? _ref : isActionsVisibleContext;\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    const actionsRef = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, useTreeItemContext_unstable((ctx)=>ctx.actionsRef));\n    return {\n        components: {\n            root: 'div',\n            expandIcon: 'div',\n            iconBefore: 'div',\n            content: 'div',\n            iconAfter: 'div',\n            actions: 'div',\n            aside: 'div'\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: getNativeElementProps(as, {\n            ...props,\n            ref: useMergedRefs(ref, layoutRef)\n        }),\n        iconBefore: resolveShorthand(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            }\n        }),\n        content: resolveShorthand(content, {\n            required: true\n        }),\n        iconAfter: resolveShorthand(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            }\n        }),\n        aside: isAsideVisible ? resolveShorthand(aside) : undefined,\n        actions: isActionsVisible ? resolveShorthand(// visible props should not be propagated to the DOM\n        isResolvedShorthand(actions) ? {\n            ...actions,\n            visible: undefined\n        } : actions, {\n            defaultProps: {\n                ref: actionsRef\n            }\n        }) : undefined,\n        expandIcon: resolveShorthand(expandIcon, {\n            required: isBranch,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n                'aria-hidden': true,\n                ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)\n            }\n        })\n    };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","expandIcon","as","aside","actions","layoutRef","useTreeItemContext_unstable","ctx","expandIconRef","isActionsVisibleContext","isActionsVisible","isAsideVisible","_ref","isResolvedShorthand","visible","undefined","isBranch","itemType","actionsRef","useMergedRefs","components","root","buttonContextValue","size","getNativeElementProps","resolveShorthand","defaultProps","required","children","React","createElement","TreeItemChevron"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACqE;iCAChD;iCACZ;AASrB,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAM,EAAEC,QAAO,EAAGC,UAAS,EAAGC,WAAU,EAAGC,WAAU,EAAGC,IAAI,OAAM,EAAGC,MAAK,EAAGC,QAAO,EAAG,GAAGR;IAC1F,MAAMS,YAAYC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBF,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,aAAa;IAC1E,MAAMC,0BAA0BH,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,gBAAgB;IACvF,MAAMC,iBAAiBL,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAII,cAAc;IAC5E,IAAIC;IACJ,MAAMF,mBAAmB,AAACE,CAAAA,OAAOC,IAAAA,mCAAmB,EAACT,WAAWA,QAAQU,OAAO,GAAGC,SAAS,AAAD,MAAO,IAAI,IAAIH,SAAS,KAAK,IAAIA,OAAOH,uBAAuB;IACzJ,MAAMO,WAAWV,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIU,QAAQ,KAAK;IACrE,MAAMC,aAAaC,IAAAA,6BAAa,EAACN,IAAAA,mCAAmB,EAACT,WAAWA,QAAQP,GAAG,GAAGkB,SAAS,EAAET,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIW,UAAU;IAC1I,OAAO;QACHE,YAAY;YACRC,MAAM;YACNpB,YAAY;YACZD,YAAY;YACZF,SAAS;YACTC,WAAW;YACXK,SAAS;YACTD,OAAO;QACX;QACAmB,oBAAoB;YAChBC,MAAM;QACV;QACAF,MAAMG,IAAAA,qCAAqB,EAACtB,IAAI;YAC5B,GAAGN,KAAK;YACRC,KAAKsB,IAAAA,6BAAa,EAACtB,KAAKQ;QAC5B;QACAL,YAAYyB,IAAAA,gCAAgB,EAACzB,YAAY;YACrC0B,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACA5B,SAAS2B,IAAAA,gCAAgB,EAAC3B,SAAS;YAC/B6B,UAAU,IAAI;QAClB;QACA5B,WAAW0B,IAAAA,gCAAgB,EAAC1B,WAAW;YACnC2B,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACAvB,OAAOQ,iBAAiBc,IAAAA,gCAAgB,EAACtB,SAASY,SAAS;QAC3DX,SAASM,mBAAmBe,IAAAA,gCAAgB,EAC5CZ,IAAAA,mCAAmB,EAACT,WAAW;YAC3B,GAAGA,OAAO;YACVU,SAASC;QACb,IAAIX,OAAO,EAAE;YACTsB,cAAc;gBACV7B,KAAKqB;YACT;QACJ,KAAKH,SAAS;QACdd,YAAYwB,IAAAA,gCAAgB,EAACxB,YAAY;YACrC0B,UAAUX;YACVU,cAAc;gBACVE,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,gCAAe,EAAE,IAAI;gBACjE,eAAe,IAAI;gBACnBlC,KAAKsB,IAAAA,6BAAa,EAACN,IAAAA,mCAAmB,EAACZ,cAAcA,WAAWJ,GAAG,GAAGkB,SAAS,EAAEP;YACrF;QACJ;IACJ;AACJ"}