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

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 , content , children , main , description  } = props;
+    const { media , children , main , description  } = props;
     const treeItemLayoutState = useTreeItemLayout_unstable({
         ...props,
         iconBefore: null,
@@ -23,11 +23,12 @@ import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout'
         ...treeItemLayoutState,
         components: {
             expandIcon: 'div',
-            content: 'div',
             main: 'div',
             description: 'div',
             root: 'div',
-            media: 'div'
+            media: 'div',
+            aside: 'div',
+            actions: 'div'
         },
         avatarSize: treeAvatarSize[size],
         main: resolveShorthand(main, {
@@ -39,9 +40,6 @@ import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout'
         media: resolveShorthand(media, {
             required: true
         }),
-        content: resolveShorthand(content, {
-            required: true
-        }),
         description: resolveShorthand(description)
     };
 };

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, 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"}
+{"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"}

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

@@ -4,27 +4,27 @@ 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',
-  main: 'fui-TreeItemPersonaLayout__main'
+  main: 'fui-TreeItemPersonaLayout__main',
+  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
+  aside: 'fui-TreeItemPersonaLayout__aside',
+  actions: 'fui-TreeItemPersonaLayout__actions'
 };
 /**
  * Styles for the root slot
  */
 const useRootStyles = /*#__PURE__*/__styles({
   base: {
-    mc9l5x: "f22iagw",
+    mc9l5x: "f13qh94s",
+    wkccdc: "f1y0tuzo",
+    Budl1dq: "fellwe7",
+    zoa1oz: "f1pam7zy",
     Bt984gj: "f122n59",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
     Bhrd7zp: "figsok6",
     Bg96gwp: "f1i3iumi",
-    Ijaq50: "f15ws6j",
-    Br312pm: "f135tdbu",
-    nk6f5a: "f2e2169",
-    Bw0ie65: "f4rqp6x",
     lj723h: "flvvhsy",
     ecr2s2: "f1wfn5kd",
     zt0xaq: "f5na5aj",
@@ -39,7 +39,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     uwmqm3: ["fo100m9", "f6yw3pu"]
   }
 }, {
-  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));}"],
+  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));}"],
   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);}"]
 });
@@ -52,38 +52,99 @@ const useMediaStyles = /*#__PURE__*/__styles({
     Bt984gj: "f122n59",
     a9b677: "f1szoe96",
     Bqenvij: "f1d2rq10",
+    Ijaq50: "f11uok23",
+    Br312pm: "f1qdfnnj",
+    nk6f5a: "f1s27gz",
+    Bw0ie65: "f86d0yl",
     z8tnut: "f1g0x7ka",
     z189sj: ["f7x41pl", "fruq291"],
     Byoj8tv: "f1qch9an",
     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;}", ".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{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);}"]
 });
-const useContentStyles = /*#__PURE__*/__styles({
+const useMainStyles = /*#__PURE__*/__styles({
   base: {
-    a9b677: "fly5x3f",
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
+    Ijaq50: "f17iroih",
+    Br312pm: "fppdkoh",
+    nk6f5a: "fsb8d6n",
+    Bw0ie65: "f6k5g14",
     z8tnut: "f1ngh7ph",
     z189sj: ["f7x41pl", "fruq291"],
     Byoj8tv: "f5o476b",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
-    i8kkvl: "f1fps8zv",
-    Belr9w4: "fws515f"
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  withDescription: {
+    z8tnut: "f1ngh7ph",
+    z189sj: ["f7x41pl", "fruq291"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  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);}"]
+  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;}"]
 });
 const useDescriptionStyles = /*#__PURE__*/__styles({
   base: {
+    Ijaq50: "ffekjdo",
+    Br312pm: "f12wtlaa",
+    nk6f5a: "f1blqr63",
+    Bw0ie65: "f2ve1i",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
     Bhrd7zp: "figsok6",
-    Bg96gwp: "fwrc4pm"
+    Bg96gwp: "fwrc4pm",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["f7x41pl", "fruq291"],
+    Byoj8tv: "f5o476b",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
+  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);}"]
+});
+/**
+ * Styles for the action icon slot
+ */
+const useActionsStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Frg6f3: ["fcgxt0o", "f1ujusj6"],
+    qhf8xq: "f10pi13n",
+    Bj3rh1h: "f19g0ac",
+    Ijaq50: "fobksn0",
+    Br312pm: "fmy5l6f",
+    nk6f5a: "fzqypwc",
+    Bw0ie65: "f1tmftl3",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f1qch9an",
+    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;}"]
+});
+/**
+ * Styles for the action icon slot
+ */
+const useAsideStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Frg6f3: ["fcgxt0o", "f1ujusj6"],
+    Bt984gj: "f122n59",
+    Bj3rh1h: "f11zp4z2",
+    Ijaq50: "fobksn0",
+    Br312pm: "fmy5l6f",
+    nk6f5a: "fzqypwc",
+    Bw0ie65: "f1tmftl3",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fw5db7e", "f1uw59to"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1uw59to", "fw5db7e"],
+    i8kkvl: "f1ufnopg",
+    Belr9w4: "f14sijuj"
+  }
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".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);}"]
 });
 /**
  * Styles for the expand icon slot
@@ -96,6 +157,10 @@ const useExpandIconStyles = /*#__PURE__*/__styles({
     Bf4jedk: "f17fgpbq",
     B7ck84d: "f1ewtqcl",
     sj55zd: "f11d4kpn",
+    Ijaq50: "f1e6rimv",
+    Br312pm: "f10hsf66",
+    nk6f5a: "foflfm0",
+    Bw0ie65: "f1b3ebjb",
     Bh6795r: "f1jhi6b8",
     Bnnss6s: "fi64zpg",
     xawz: "f1rmlqtg",
@@ -105,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);}", ".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{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);}"]
 });
 /**
  * Apply styling to the TreeItemPersonaLayout slots based on the state
@@ -113,21 +178,26 @@ const useExpandIconStyles = /*#__PURE__*/__styles({
 export const useTreeItemPersonaLayoutStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const mediaStyles = useMediaStyles();
-  const contentStyles = useContentStyles();
   const descriptionStyles = useDescriptionStyles();
+  const actionsStyles = useActionsStyles();
+  const asideStyles = useAsideStyles();
   const expandIconStyles = useExpandIconStyles();
+  const mainStyles = useMainStyles();
   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, state.main.className);
+    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);
   }
   if (state.description) {
     state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
   }
+  if (state.actions) {
+    state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.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);
   }

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

@@ -1 +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":"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"}
+{"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":"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,KAAK,EAAE,kCAAkC;EACzCC,WAAW,EAAE,wCAAwC;EACrDC,IAAI,EAAE,iCAAiC;EACvCC,UAAU,EAAE,uCAAuC;EACnDC,KAAK,EAAE,kCAAkC;EACzCC,OAAO,EAAE;AACb,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,IAAA;IAAAC,MAAA;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,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAkCzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGtC,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAI,OAAA;IAAAkB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAS1B,CAAC;AACF,MAAMa,aAAa,gBAAGhD,QAAA;EAAAgB,IAAA;IAAAyB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;EAAAgB,eAAA;IAAAJ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF,MAAMe,oBAAoB,gBAAGlD,QAAA;EAAAgB,IAAA;IAAAyB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAtB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAoB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAM5B,CAAC;AACF;AACA;AACA;AAAI,MAAMgB,gBAAgB,gBAAGnD,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAmC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAb,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAS5B,CAAC;AACF;AACA;AACA;AAAI,MAAMoB,cAAc,gBAAGvD,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAmC,MAAA;IAAA/B,OAAA;IAAAiC,OAAA;IAAAb,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;IAAAuB,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAtB,CAAA;AAAA,CAU1B,CAAC;AACF;AACA;AACA;AAAI,MAAMuB,mBAAmB,gBAAG1D,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAI,OAAA;IAAAsC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAArB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAmB,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAApB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAY/B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM+B,uCAAuC,GAAIC,KAAK,IAAG;EAChE,MAAMC,UAAU,GAAGrD,aAAa,CAAC,CAAC;EAClC,MAAMsD,WAAW,GAAG/B,cAAc,CAAC,CAAC;EACpC,MAAMgC,iBAAiB,GAAGpB,oBAAoB,CAAC,CAAC;EAChD,MAAMqB,aAAa,GAAGpB,gBAAgB,CAAC,CAAC;EACxC,MAAMqB,WAAW,GAAGjB,cAAc,CAAC,CAAC;EACpC,MAAMkB,gBAAgB,GAAGf,mBAAmB,CAAC,CAAC;EAC9C,MAAMgB,UAAU,GAAG1B,aAAa,CAAC,CAAC;EAClC,MAAM2B,QAAQ,GAAGrE,2BAA2B,CAAEsE,GAAG,IAAGA,GAAG,CAACD,QAAQ,CAAC;EACjER,KAAK,CAAC3D,IAAI,CAACqE,SAAS,GAAG5E,YAAY,CAACM,+BAA+B,CAACC,IAAI,EAAE4D,UAAU,CAACpD,IAAI,EAAEoD,UAAU,CAACO,QAAQ,CAAC,EAAER,KAAK,CAAC3D,IAAI,CAACqE,SAAS,CAAC;EACtIV,KAAK,CAAC1D,KAAK,CAACoE,SAAS,GAAG5E,YAAY,CAACM,+BAA+B,CAACE,KAAK,EAAE4D,WAAW,CAACrD,IAAI,EAAEmD,KAAK,CAAC1D,KAAK,CAACoE,SAAS,CAAC;EACpH,IAAIV,KAAK,CAACxD,IAAI,EAAE;IACZwD,KAAK,CAACxD,IAAI,CAACkE,SAAS,GAAG5E,YAAY,CAACM,+BAA+B,CAACI,IAAI,EAAE+D,UAAU,CAAC1D,IAAI,EAAEmD,KAAK,CAACzD,WAAW,IAAIgE,UAAU,CAACzB,eAAe,EAAEkB,KAAK,CAACxD,IAAI,CAACkE,SAAS,CAAC;EACrK;EACA,IAAIV,KAAK,CAACzD,WAAW,EAAE;IACnByD,KAAK,CAACzD,WAAW,CAACmE,SAAS,GAAG5E,YAAY,CAACM,+BAA+B,CAACG,WAAW,EAAE4D,iBAAiB,CAACtD,IAAI,EAAEmD,KAAK,CAACzD,WAAW,CAACmE,SAAS,CAAC;EAChJ;EACA,IAAIV,KAAK,CAACrD,OAAO,EAAE;IACfqD,KAAK,CAACrD,OAAO,CAAC+D,SAAS,GAAG5E,YAAY,CAACM,+BAA+B,CAACO,OAAO,EAAEyD,aAAa,CAACvD,IAAI,EAAEmD,KAAK,CAACrD,OAAO,CAAC+D,SAAS,CAAC;EAChI;EACA,IAAIV,KAAK,CAACtD,KAAK,EAAE;IACbsD,KAAK,CAACtD,KAAK,CAACgE,SAAS,GAAG5E,YAAY,CAACM,+BAA+B,CAACM,KAAK,EAAE2D,WAAW,CAACxD,IAAI,EAAEmD,KAAK,CAACtD,KAAK,CAACgE,SAAS,CAAC;EACxH;EACA,IAAIV,KAAK,CAACvD,UAAU,EAAE;IAClBuD,KAAK,CAACvD,UAAU,CAACiE,SAAS,GAAG5E,YAAY,CAACM,+BAA+B,CAACK,UAAU,EAAE6D,gBAAgB,CAACzD,IAAI,EAAEmD,KAAK,CAACvD,UAAU,CAACiE,SAAS,CAAC;EAC5I;EACA,OAAOV,KAAK;AAChB,CAAC"}

package/lib/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest<unknown>): void;\n};\n\nexport type TreeItemRequest<Value> = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData<Value>, 'open' | 'target'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable<Value>, 'target'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,iBAAiB,QAAsB,wBAAwB;AAsBxE,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,WAAWH;IACXI,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDV,cAChEW,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCd,mBAAmBS,aAAa,CAACM,MAAMb,mBAAmB,GAAKY,SAASC,MAAM"}
+{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'target'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable, 'target'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,iBAAiB,QAAsB,wBAAwB;AAsBxE,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,WAAWH;IACXI,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDV,cAChEW,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCd,mBAAmBS,aAAa,CAACM,MAAMb,mBAAmB,GAAKY,SAASC,MAAM"}

package/lib/contexts/treeItemContext.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 const defaultContextValue = {
-    value: undefined,
+    value: '',
     isActionsVisible: false,
     isAsideVisible: true,
     actionsRef: React.createRef(),

package/lib/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  value: unknown;\n  itemType: TreeItemType;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: undefined,\n  isActionsVisible: false,\n  isAsideVisible: true,\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","undefined","isActionsVisible","isAsideVisible","actionsRef","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","TreeItemContext","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAe/G,MAAMC,sBAA4C;IAChDC,OAAOC;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,YAAYR,MAAMS,SAAS;IAC3BC,eAAeV,MAAMS,SAAS;IAC9BE,WAAWX,MAAMS,SAAS;IAC1BG,YAAYZ,MAAMS,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6Dd,cAExEI,WAAW;AAEb,OAAO,MAAM,EAAEW,UAAUC,iBAAgB,EAAE,GAAGF,gBAAgB;AAC9D,OAAO,MAAMG,8BAA8B,CAAIC,WAC7CjB,mBAAmBa,iBAAiB,CAACK,MAAMjB,mBAAmB,GAAKgB,SAASC,MAAM"}
+{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  itemType: TreeItemType;\n  value: string;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: '',\n  isActionsVisible: false,\n  isAsideVisible: true,\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","isActionsVisible","isAsideVisible","actionsRef","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAe/G,MAAMC,sBAA4C;IAChDC,OAAO;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,YAAYP,MAAMQ,SAAS;IAC3BC,eAAeT,MAAMQ,SAAS;IAC9BE,WAAWV,MAAMQ,SAAS;IAC1BG,YAAYX,MAAMQ,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6Db,cAExEc,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,iBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7CjB,mBAAmBY,iBAAiB,CAACM,MAAMjB,mBAAmB,GAAKgB,SAASC,MAAM"}

package/lib/hooks/useFlatTree.js

@@ -1,9 +1,10 @@
-import { useEventCallback } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';
 import { treeDataTypes } from '../utils/tokens';
 import { useFlatTreeNavigation } from './useFlatTreeNavigation';
 import { useOpenItemsState } from './useOpenItemsState';
+import { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
  * in multiple scenarios including virtualization.
@@ -21,6 +22,7 @@ import { useOpenItemsState } from './useOpenItemsState';
         flatTreeItemProps
     ]);
     const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
+    const treeRef = React.useRef(null);
     const handleOpenChange = useEventCallback((event, data)=>{
         var _options_onOpenChange;
         (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
@@ -58,8 +60,13 @@ import { useOpenItemsState } from './useOpenItemsState';
             }
         }
     });
+    const getElementFromItem = React.useCallback((item)=>{
+        var _treeRef_current;
+        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}="${item.value}"]`);
+    }, []);
+    const ref = useMergedRefs(treeRef, navigationRef);
     const getTreeProps = React.useCallback(()=>({
-            ref: navigationRef,
+            ref,
             openItems,
             onOpenChange: handleOpenChange,
             // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -76,11 +83,13 @@ import { useOpenItemsState } from './useOpenItemsState';
             navigate,
             getTreeProps,
             getNextNavigableItem,
+            getElementFromItem,
             items
         }), [
         navigate,
         getTreeProps,
         getNextNavigableItem,
+        getElementFromItem,
         items
     ]);
 }

package/lib/hooks/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\nimport type {\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree';\nimport type { TreeItemProps } from '../TreeItem';\nimport { ImmutableSet } from '../utils/ImmutableSet';\n\nexport type FlatTreeItemProps<Value = string> = Omit<TreeItemProps<Value>, 'itemType'> &\n  Partial<Pick<TreeItemProps<Value>, 'itemType'>> & {\n    value: Value;\n    parentValue?: Value;\n  };\n\n/**\n * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to\n * `useFlatTree` but with extra information that might be useful on flat tree scenarios\n */\nexport type FlatTreeItem<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {\n  index: number;\n  level: number;\n  childrenSize: number;\n  value: Props['value'];\n  parentValue: Props['parentValue'];\n  /**\n   * A reference to the element that will render the `TreeItem`,\n   * this is necessary for nodes with parents (to ensure child to parent navigation),\n   * if a node has no parent then this reference will be null.\n   */\n  ref: React.RefObject<HTMLDivElement>;\n  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &\n    Omit<Props, 'parentValue'>;\n};\n\nexport type FlatTreeProps<Value = string> = Required<\n  Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>\n> & {\n  ref: React.Ref<HTMLDivElement>;\n  openItems: ImmutableSet<Value>;\n};\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): FlatTreeProps<Props['value']>;\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && document.getElementById(nextItem.id)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable<Props['value']>): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: FlatTreeItem<Props>[],\n    data: TreeNavigationData_unstable<Props['value']>,\n  ): FlatTreeItem<Props> | undefined;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<FlatTreeItem<Props>>;\n};\n\ntype FlatTreeOptions<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = Pick<\n  TreeProps<Props['value']>,\n  'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'\n>;\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(\n  flatTreeItemProps: Props[],\n  options: FlatTreeOptions<Props> = {},\n): FlatTree<Props> {\n  const [openItems, updateOpenItems] = useOpenItemsState<Props['value']>(options);\n  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData<Props['value']>) => {\n    options.onOpenChange?.(event, data);\n    if (!event.isDefaultPrevented()) {\n      updateOpenItems(data);\n    }\n    event.preventDefault();\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Props['value']>) => {\n      options.onNavigation_unstable?.(event, data);\n      if (!event.isDefaultPrevented()) {\n        navigate(data);\n      }\n      event.preventDefault();\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable<Props['value']>) => {\n      const item = flatTreeItems.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return flatTreeItems.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref: navigationRef as React.Ref<HTMLDivElement>,\n      openItems,\n      onOpenChange: handleOpenChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems],\n  );\n\n  const items = React.useCallback(\n    () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),\n    [openItems, flatTreeItems],\n  );\n\n  return React.useMemo(\n    () => ({ navigate, getTreeProps, getNextNavigableItem, items }),\n    [navigate, getTreeProps, getNextNavigableItem, items],\n  );\n}\n"],"names":["useEventCallback","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","handleOpenChange","event","data","onOpenChange","isDefaultPrevented","preventDefault","handleNavigation","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getTreeProps","useCallback","ref","items"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ,+BAA+B;AACjG,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,iBAAiB,QAAQ,sBAAsB;AA2GxD;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,qBACdC,iBAA0B,EAC1BC,UAAkC,CAAC,CAAC,EACnB;IACjB,MAAM,CAACC,WAAWC,gBAAgB,GAAGL,kBAAkCG;IACvE,MAAMG,gBAAgBX,MAAMY,OAAO,CAAC,IAAMX,oBAAoBM,oBAAoB;QAACA;KAAkB;IACrG,MAAM,CAACM,UAAUC,cAAc,GAAGV,sBAAsBO;IAExD,MAAMI,mBAAmBhB,iBAAiB,CAACiB,OAA4BC,OAA6C;YAClHT;QAAAA,CAAAA,wBAAAA,QAAQU,YAAY,cAApBV,mCAAAA,KAAAA,IAAAA,sBAAAA,KAAAA,SAAuBQ,OAAOC;QAC9B,IAAI,CAACD,MAAMG,kBAAkB,IAAI;YAC/BT,gBAAgBO;QAClB,CAAC;QACDD,MAAMI,cAAc;IACtB;IAEA,MAAMC,mBAAmBtB,iBACvB,CAACiB,OAAqCC,OAAsD;YAC1FT;QAAAA,CAAAA,iCAAAA,QAAQc,qBAAqB,cAA7Bd,4CAAAA,KAAAA,IAAAA,+BAAAA,KAAAA,SAAgCQ,OAAOC;QACvC,IAAI,CAACD,MAAMG,kBAAkB,IAAI;YAC/BN,SAASI;QACX,CAAC;QACDD,MAAMI,cAAc;IACtB;IAGF,MAAMG,uBAAuBxB,iBAC3B,CAACyB,cAAqCP,OAAsD;QAC1F,MAAMQ,OAAOd,cAAce,GAAG,CAACT,KAAKU,KAAK;QACzC,IAAIF,MAAM;YACR,OAAQR,KAAKW,IAAI;gBACf,KAAKzB,cAAc0B,SAAS;oBAC1B,OAAOJ;gBACT,KAAKtB,cAAc2B,SAAS;oBAC1B,OAAOnB,cAAce,GAAG,CAACD,KAAKM,WAAW;gBAC3C,KAAK5B,cAAc6B,UAAU;oBAC3B,OAAOR,YAAY,CAACC,KAAKQ,KAAK,GAAG,EAAE;gBACrC,KAAK9B,cAAc+B,GAAG;oBACpB,OAAOV,YAAY,CAACA,aAAaW,MAAM,GAAG,EAAE;gBAC9C,KAAKhC,cAAciC,IAAI;oBACrB,OAAOZ,YAAY,CAAC,EAAE;gBACxB,KAAKrB,cAAckC,SAAS;oBAC1B,OAAOb,YAAY,CAACC,KAAKQ,KAAK,GAAG,EAAE;gBACrC,KAAK9B,cAAcmC,OAAO;oBACxB,OAAOd,YAAY,CAACC,KAAKQ,KAAK,GAAG,EAAE;YACvC;QACF,CAAC;IACH;IAGF,MAAMM,eAAevC,MAAMwC,WAAW,CACpC,IAAO,CAAA;YACLC,KAAK3B;YACLL;YACAS,cAAcH;YACd,gEAAgE;YAChEO,uBAAuBD;QACzB,CAAA,GACA,uDAAuD;IACvD;QAACZ;KAAU;IAGb,MAAMiC,QAAQ1C,MAAMwC,WAAW,CAC7B,IAAMtC,6BAA6BO,WAAWE,gBAC9C;QAACF;QAAWE;KAAc;IAG5B,OAAOX,MAAMY,OAAO,CAClB,IAAO,CAAA;YAAEC;YAAU0B;YAAchB;YAAsBmB;QAAM,CAAA,GAC7D;QAAC7B;QAAU0B;QAAchB;QAAsBmB;KAAM;AAEzD,CAAC"}
+{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\nimport type {\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree';\nimport type { TreeItemProps, TreeItemValue } from '../TreeItem';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\n\nexport type FlatTreeItemProps = Omit<TreeItemProps, 'itemType'> &\n  Partial<Pick<TreeItemProps, 'itemType'>> & {\n    value: TreeItemValue;\n    parentValue?: TreeItemValue;\n  };\n\n/**\n * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to\n * `useFlatTree` but with extra information that might be useful on flat tree scenarios\n */\nexport type FlatTreeItem<Props extends FlatTreeItemProps = FlatTreeItemProps> = {\n  index: number;\n  level: number;\n  childrenSize: number;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &\n    Omit<Props, 'parentId'>;\n};\n\nexport type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & {\n  ref: React.Ref<HTMLDivElement>;\n  openItems: ImmutableSet<string>;\n};\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree<Props extends FlatTreeItemProps = FlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): FlatTreeProps;\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && tree.getElementFromItem(nextItem)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: FlatTreeItem<Props>[],\n    data: TreeNavigationData_unstable,\n  ): FlatTreeItem<Props> | undefined;\n  /**\n   * similar to getElementById but for FlatTreeItems\n   */\n  getElementFromItem(item: FlatTreeItem<Props>): HTMLElement | null;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<FlatTreeItem<Props>>;\n};\n\ntype FlatTreeOptions = Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>;\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable<Props extends FlatTreeItemProps = FlatTreeItemProps>(\n  flatTreeItemProps: Props[],\n  options: FlatTreeOptions = {},\n): FlatTree<Props> {\n  const [openItems, updateOpenItems] = useOpenItemsState(options);\n  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n  const treeRef = React.useRef<HTMLDivElement>(null);\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    options.onOpenChange?.(event, data);\n    if (!event.isDefaultPrevented()) {\n      updateOpenItems(data);\n    }\n    event.preventDefault();\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      options.onNavigation_unstable?.(event, data);\n      if (!event.isDefaultPrevented()) {\n        navigate(data);\n      }\n      event.preventDefault();\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable) => {\n      const item = flatTreeItems.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return flatTreeItems.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getElementFromItem = React.useCallback((item: FlatTreeItem<Props>) => {\n    return treeRef.current?.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`) as HTMLElement | null;\n  }, []);\n\n  const ref = useMergedRefs(treeRef, navigationRef as React.Ref<HTMLDivElement>);\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref,\n      openItems,\n      onOpenChange: handleOpenChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems],\n  );\n\n  const items = React.useCallback(\n    () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),\n    [openItems, flatTreeItems],\n  );\n\n  return React.useMemo(\n    () => ({ navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items }),\n    [navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items],\n  );\n}\n"],"names":["useEventCallback","useMergedRefs","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","dataTreeItemValueAttrName","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","treeRef","useRef","handleOpenChange","event","data","onOpenChange","isDefaultPrevented","preventDefault","handleNavigation","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","current","querySelector","ref","getTreeProps","items"],"mappings":"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"}

package/lib/hooks/useFlatTreeNavigation.js

@@ -5,6 +5,7 @@ import { treeDataTypes } from '../utils/tokens';
 import { treeItemFilter } from '../utils/treeItemFilter';
 import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
 import { useRovingTabIndex } from './useRovingTabIndexes';
+import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../utils/getTreeItemValueFromElement';
 export function useFlatTreeNavigation(flatTreeItems) {
     const { targetDocument  } = useFluent_unstable();
     const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);
@@ -21,7 +22,7 @@ export function useFlatTreeNavigation(flatTreeItems) {
                 treeItemWalker.currentElement = data.target;
                 return nextTypeAheadElement(treeItemWalker, data.event.key);
             case treeDataTypes.ArrowLeft:
-                return parentElement(flatTreeItems, data.value);
+                return parentElement(flatTreeItems, data.target, treeItemWalker);
             case treeDataTypes.ArrowRight:
                 treeItemWalker.currentElement = data.target;
                 return firstChild(data.target, treeItemWalker);
@@ -63,12 +64,14 @@ function firstChild(target, treeWalker) {
     }
     return null;
 }
-function parentElement(flatTreeItems, value) {
+function parentElement(flatTreeItems, target, treeWalker) {
+    const value = getTreeItemValueFromElement(target);
+    if (value === null) {
+        return null;
+    }
     const flatTreeItem = flatTreeItems.get(value);
     if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {
-        const parentItem = flatTreeItems.get(flatTreeItem.parentValue);
-        var _parentItem_ref_current;
-        return (_parentItem_ref_current = parentItem === null || parentItem === void 0 ? void 0 : parentItem.ref.current) !== null && _parentItem_ref_current !== void 0 ? _parentItem_ref_current : null;
+        return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}="${flatTreeItem.parentValue}"]`);
     }
     return null;
 }

package/lib/hooks/useFlatTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { FlatTreeItems } from '../utils/createFlatTreeItems';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { FlatTreeItemProps } from './useFlatTree';\n\nexport function useFlatTreeNavigation<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(\n  flatTreeItems: FlatTreeItems<Props>,\n) {\n  const { targetDocument } = useFluent_unstable();\n  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n  function getNextElement(data: TreeNavigationData_unstable<Props['value']>) {\n    if (!targetDocument || !treeItemWalkerRef.current) {\n      return null;\n    }\n    const treeItemWalker = treeItemWalkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        return parentElement(flatTreeItems, data.value);\n      case treeDataTypes.ArrowRight:\n        treeItemWalker.currentElement = data.target;\n        return firstChild(data.target, treeItemWalker);\n      case treeDataTypes.End:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.lastChild();\n      case treeDataTypes.Home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.ArrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.ArrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable<Props['value']>) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(flatTreeItems: FlatTreeItems<FlatTreeItemProps<unknown>>, value: unknown) {\n  const flatTreeItem = flatTreeItems.get(value);\n  if (flatTreeItem?.parentValue) {\n    const parentItem = flatTreeItems.get(flatTreeItem.parentValue);\n    return parentItem?.ref.current ?? null;\n  }\n  return null;\n}\n"],"names":["useFluent_unstable","useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useHTMLElementWalkerRef","useRovingTabIndex","useFlatTreeNavigation","flatTreeItems","targetDocument","treeItemWalkerRef","treeItemWalkerRootRef","rove","rovingRootRef","getNextElement","data","current","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","value","ArrowRight","firstChild","End","root","lastChild","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","flatTreeItem","get","parentValue","parentItem","ref"],"mappings":"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"}
+{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { FlatTreeItems } from '../utils/createFlatTreeItems';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { FlatTreeItemProps } from './useFlatTree';\nimport { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../utils/getTreeItemValueFromElement';\n\nexport function useFlatTreeNavigation<Props extends FlatTreeItemProps = FlatTreeItemProps>(\n  flatTreeItems: FlatTreeItems<Props>,\n) {\n  const { targetDocument } = useFluent_unstable();\n  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!targetDocument || !treeItemWalkerRef.current) {\n      return null;\n    }\n    const treeItemWalker = treeItemWalkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        return parentElement(flatTreeItems, data.target, treeItemWalker);\n      case treeDataTypes.ArrowRight:\n        treeItemWalker.currentElement = data.target;\n        return firstChild(data.target, treeItemWalker);\n      case treeDataTypes.End:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.lastChild();\n      case treeDataTypes.Home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.ArrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.ArrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(\n  flatTreeItems: FlatTreeItems<FlatTreeItemProps>,\n  target: HTMLElement,\n  treeWalker: HTMLElementWalker,\n) {\n  const value = getTreeItemValueFromElement(target);\n  if (value === null) {\n    return null;\n  }\n  const flatTreeItem = flatTreeItems.get(value);\n  if (flatTreeItem?.parentValue) {\n    return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${flatTreeItem.parentValue}\"]`);\n  }\n  return null;\n}\n"],"names":["useFluent_unstable","useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useHTMLElementWalkerRef","useRovingTabIndex","dataTreeItemValueAttrName","getTreeItemValueFromElement","useFlatTreeNavigation","flatTreeItems","targetDocument","treeItemWalkerRef","treeItemWalkerRootRef","rove","rovingRootRef","getNextElement","data","current","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChild","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","value","flatTreeItem","get","parentValue","querySelector"],"mappings":"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"}

package/lib/hooks/useNestedTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNestedTreeNavigation.ts"],"sourcesContent":["import { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useNestedTreeNavigation() {\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n  const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n\n  const getNextElement = (data: TreeNavigationData_unstable<unknown>) => {\n    if (!walkerRef.current) {\n      return;\n    }\n    const treeItemWalker = walkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.parentElement();\n      case treeDataTypes.ArrowRight:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.End:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return lastChildRecursive(treeItemWalker);\n      case treeDataTypes.Home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.ArrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.ArrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable<unknown>) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return [navigate, useMergedRefs(rootRef, rovingRootRef)] as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["useMergedRefs","useHTMLElementWalkerRef","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useNestedTreeNavigation","rove","rovingRootRef","walkerRef","rootRef","getNextElement","data","current","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAE1D,SAA4BC,uBAAuB,QAAQ,yBAAyB;AACpF,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,OAAO,SAASC,0BAA0B;IACxC,MAAM,CAAC,EAAEC,KAAI,EAAE,EAAEC,cAAc,GAAGH,kBAAkBD;IACpD,MAAM,CAACK,WAAWC,QAAQ,GAAGT,wBAAwBG;IAErD,MAAMO,iBAAiB,CAACC,OAA+C;QACrE,IAAI,CAACH,UAAUI,OAAO,EAAE;YACtB;QACF,CAAC;QACD,MAAMC,iBAAiBL,UAAUI,OAAO;QACxC,OAAQD,KAAKG,IAAI;YACf,KAAKZ,cAAca,KAAK;gBACtB,OAAOJ,KAAKK,MAAM;YACpB,KAAKd,cAAce,SAAS;gBAC1BJ,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOf,qBAAqBY,gBAAgBF,KAAKQ,KAAK,CAACC,GAAG;YAC5D,KAAKlB,cAAcmB,SAAS;gBAC1BR,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeS,aAAa;YACrC,KAAKpB,cAAcqB,UAAU;gBAC3BV,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeW,UAAU;YAClC,KAAKtB,cAAcuB,GAAG;gBACpBZ,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOC,mBAAmBd;YAC5B,KAAKX,cAAc0B,IAAI;gBACrBf,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOb,eAAeW,UAAU;YAClC,KAAKtB,cAAc2B,SAAS;gBAC1BhB,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeiB,WAAW;YACnC,KAAK5B,cAAc6B,OAAO;gBACxBlB,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAemB,eAAe;QACzC;IACF;IACA,SAASC,SAAStB,IAA0C,EAAE;QAC5D,MAAMmB,cAAcpB,eAAeC;QACnC,IAAImB,aAAa;YACfxB,KAAKwB;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUlC,cAAcU,SAASF;KAAe;AAC1D,CAAC;AAED,SAASoB,mBAAmBO,MAAyB,EAAE;IACrD,IAAIC,cAAkC,IAAI;IAC1C,IAAIL,cAAkC,IAAI;IAC1C,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}
+{"version":3,"sources":["useNestedTreeNavigation.ts"],"sourcesContent":["import { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useNestedTreeNavigation() {\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n  const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return;\n    }\n    const treeItemWalker = walkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.parentElement();\n      case treeDataTypes.ArrowRight:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.End:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return lastChildRecursive(treeItemWalker);\n      case treeDataTypes.Home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.ArrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.ArrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return [navigate, useMergedRefs(rootRef, rovingRootRef)] as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["useMergedRefs","useHTMLElementWalkerRef","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useNestedTreeNavigation","rove","rovingRootRef","walkerRef","rootRef","getNextElement","data","current","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAE1D,SAA4BC,uBAAuB,QAAQ,yBAAyB;AACpF,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,OAAO,SAASC,0BAA0B;IACxC,MAAM,CAAC,EAAEC,KAAI,EAAE,EAAEC,cAAc,GAAGH,kBAAkBD;IACpD,MAAM,CAACK,WAAWC,QAAQ,GAAGT,wBAAwBG;IAErD,MAAMO,iBAAiB,CAACC,OAAsC;QAC5D,IAAI,CAACH,UAAUI,OAAO,EAAE;YACtB;QACF,CAAC;QACD,MAAMC,iBAAiBL,UAAUI,OAAO;QACxC,OAAQD,KAAKG,IAAI;YACf,KAAKZ,cAAca,KAAK;gBACtB,OAAOJ,KAAKK,MAAM;YACpB,KAAKd,cAAce,SAAS;gBAC1BJ,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOf,qBAAqBY,gBAAgBF,KAAKQ,KAAK,CAACC,GAAG;YAC5D,KAAKlB,cAAcmB,SAAS;gBAC1BR,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeS,aAAa;YACrC,KAAKpB,cAAcqB,UAAU;gBAC3BV,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeW,UAAU;YAClC,KAAKtB,cAAcuB,GAAG;gBACpBZ,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOC,mBAAmBd;YAC5B,KAAKX,cAAc0B,IAAI;gBACrBf,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOb,eAAeW,UAAU;YAClC,KAAKtB,cAAc2B,SAAS;gBAC1BhB,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeiB,WAAW;YACnC,KAAK5B,cAAc6B,OAAO;gBACxBlB,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAemB,eAAe;QACzC;IACF;IACA,SAASC,SAAStB,IAAiC,EAAE;QACnD,MAAMmB,cAAcpB,eAAeC;QACnC,IAAImB,aAAa;YACfxB,KAAKwB;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUlC,cAAcU,SAASF;KAAe;AAC1D,CAAC;AAED,SAASoB,mBAAmBO,MAAyB,EAAE;IACrD,IAAIC,cAAkC,IAAI;IAC1C,IAAIL,cAAkC,IAAI;IAC1C,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}

package/lib/hooks/useOpenItemsState.js

@@ -16,6 +16,9 @@ export function useOpenItemsState(props) {
     ];
 }
 function createNextOpenItems(data, previousOpenItems) {
+    if (data.value === null) {
+        return previousOpenItems;
+    }
     const previousOpenItemsHasId = previousOpenItems.has(data.value);
     if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {
         return previousOpenItems;

package/lib/hooks/useOpenItemsState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOpenItemsState.ts"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createImmutableSet, emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeOpenChangeData, TreeProps } from '../Tree';\n\nexport function useOpenItemsState<Value = string>(props: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems'>) {\n  const [openItems, setOpenItems] = useControllableState({\n    state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),\n    defaultState: props.defaultOpenItems && (() => createImmutableSet(props.defaultOpenItems)),\n    initialState: emptyImmutableSet,\n  });\n  const updateOpenItems = useEventCallback((data: TreeOpenChangeData<Value>) =>\n    setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)),\n  );\n  return [openItems, updateOpenItems] as const;\n}\n\nfunction createNextOpenItems<Value = string>(\n  data: TreeOpenChangeData<Value>,\n  previousOpenItems: ImmutableSet<Value>,\n): ImmutableSet<Value> {\n  const previousOpenItemsHasId = previousOpenItems.has(data.value);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = createImmutableSet(previousOpenItems);\n  return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableState","useEventCallback","React","createImmutableSet","emptyImmutableSet","useOpenItemsState","props","openItems","setOpenItems","state","useMemo","defaultState","defaultOpenItems","initialState","updateOpenItems","data","currentOpenItems","createNextOpenItems","previousOpenItems","previousOpenItemsHasId","has","value","open","nextOpenItems","add","delete"],"mappings":"AAAA,SAASA,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACnF,YAAYC,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,EAAEC,iBAAiB,QAAsB,wBAAwB;AAG5F,OAAO,SAASC,kBAAkCC,KAA+D,EAAE;IACjH,MAAM,CAACC,WAAWC,aAAa,GAAGR,qBAAqB;QACrDS,OAAOP,MAAMQ,OAAO,CAAC,IAAMJ,MAAMC,SAAS,IAAIJ,mBAAmBG,MAAMC,SAAS,GAAG;YAACD,MAAMC,SAAS;SAAC;QACpGI,cAAcL,MAAMM,gBAAgB,IAAK,CAAA,IAAMT,mBAAmBG,MAAMM,gBAAgB,CAAA;QACxFC,cAAcT;IAChB;IACA,MAAMU,kBAAkBb,iBAAiB,CAACc,OACxCP,aAAaQ,CAAAA,mBAAoBC,oBAAoBF,MAAMC;IAE7D,OAAO;QAACT;QAAWO;KAAgB;AACrC,CAAC;AAED,SAASG,oBACPF,IAA+B,EAC/BG,iBAAsC,EACjB;IACrB,MAAMC,yBAAyBD,kBAAkBE,GAAG,CAACL,KAAKM,KAAK;IAC/D,IAAIN,KAAKO,IAAI,GAAGH,yBAAyB,CAACA,sBAAsB,EAAE;QAChE,OAAOD;IACT,CAAC;IACD,MAAMK,gBAAgBpB,mBAAmBe;IACzC,OAAOH,KAAKO,IAAI,GAAGC,cAAcC,GAAG,CAACT,KAAKM,KAAK,IAAIE,cAAcE,MAAM,CAACV,KAAKM,KAAK,CAAC;AACrF"}
+{"version":3,"sources":["useOpenItemsState.ts"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createImmutableSet, emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeOpenChangeData, TreeProps } from '../Tree';\n\nexport function useOpenItemsState(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n  const [openItems, setOpenItems] = useControllableState({\n    state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),\n    defaultState: props.defaultOpenItems && (() => createImmutableSet(props.defaultOpenItems)),\n    initialState: emptyImmutableSet,\n  });\n  const updateOpenItems = useEventCallback((data: TreeOpenChangeData) =>\n    setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)),\n  );\n  return [openItems, updateOpenItems] as const;\n}\n\nfunction createNextOpenItems(data: TreeOpenChangeData, previousOpenItems: ImmutableSet<string>): ImmutableSet<string> {\n  if (data.value === null) {\n    return previousOpenItems;\n  }\n  const previousOpenItemsHasId = previousOpenItems.has(data.value);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = createImmutableSet(previousOpenItems);\n  return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableState","useEventCallback","React","createImmutableSet","emptyImmutableSet","useOpenItemsState","props","openItems","setOpenItems","state","useMemo","defaultState","defaultOpenItems","initialState","updateOpenItems","data","currentOpenItems","createNextOpenItems","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","add","delete"],"mappings":"AAAA,SAASA,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACnF,YAAYC,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,EAAEC,iBAAiB,QAAsB,wBAAwB;AAG5F,OAAO,SAASC,kBAAkBC,KAAwD,EAAE;IAC1F,MAAM,CAACC,WAAWC,aAAa,GAAGR,qBAAqB;QACrDS,OAAOP,MAAMQ,OAAO,CAAC,IAAMJ,MAAMC,SAAS,IAAIJ,mBAAmBG,MAAMC,SAAS,GAAG;YAACD,MAAMC,SAAS;SAAC;QACpGI,cAAcL,MAAMM,gBAAgB,IAAK,CAAA,IAAMT,mBAAmBG,MAAMM,gBAAgB,CAAA;QACxFC,cAAcT;IAChB;IACA,MAAMU,kBAAkBb,iBAAiB,CAACc,OACxCP,aAAaQ,CAAAA,mBAAoBC,oBAAoBF,MAAMC;IAE7D,OAAO;QAACT;QAAWO;KAAgB;AACrC,CAAC;AAED,SAASG,oBAAoBF,IAAwB,EAAEG,iBAAuC,EAAwB;IACpH,IAAIH,KAAKI,KAAK,KAAK,IAAI,EAAE;QACvB,OAAOD;IACT,CAAC;IACD,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACN,KAAKI,KAAK;IAC/D,IAAIJ,KAAKO,IAAI,GAAGF,yBAAyB,CAACA,sBAAsB,EAAE;QAChE,OAAOF;IACT,CAAC;IACD,MAAMK,gBAAgBpB,mBAAmBe;IACzC,OAAOH,KAAKO,IAAI,GAAGC,cAAcC,GAAG,CAACT,KAAKI,KAAK,IAAII,cAAcE,MAAM,CAACV,KAAKI,KAAK,CAAC;AACrF"}

package/lib/index.js

@@ -4,6 +4,5 @@ export { treeItemLevelToken } from './utils/tokens';
 export { TreeItem, treeItemClassNames, renderTreeItem_unstable, useTreeItemStyles_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 { TreeItemAside, treeItemAsideClassNames, renderTreeItemAside_unstable, useTreeItemAsideStyles_unstable, useTreeItemAside_unstable } from './TreeItemAside';
 export { useFlatTree_unstable } from './hooks/index';
 export { flattenTree_unstable } from './utils/flattenTree';