@fluentui/react-tree 9.0.0-beta.30 → 9.0.0-beta.32

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

@@ -67,7 +67,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     ecr2s2: "fophhak"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f15ws6j{-ms-grid-row:layout;grid-row-start:layout;}", ".f135tdbu{-ms-grid-column:layout;grid-column-start:layout;}", ".f2e2169{-ms-grid-row-span:layout;grid-row-end:layout;}", ".f4rqp6x{-ms-grid-column-span:layout;grid-column-end:layout;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f15ws6j{grid-row-start:layout;}", ".f135tdbu{grid-column-start:layout;}", ".f2e2169{grid-row-end:layout;}", ".f4rqp6x{grid-column-end:layout;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
   a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"],
   h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"]
 });
@@ -90,7 +90,7 @@ const useActionsStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}", ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}", ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}", ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
+  d: [".f22iagw{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
@@ -113,7 +113,7 @@ const useAsideStyles = /*#__PURE__*/__styles({
     Belr9w4: "f14sijuj"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}", ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}", ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}", ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
+  d: [".f22iagw{display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{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{column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
 });
 /**
  * Styles for the expand icon slot
@@ -135,7 +135,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:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1jhi6b8{flex-grow:0;}", ".fi64zpg{flex-shrink:0;}", ".f1rmlqtg{flex-basis:auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
 });
 /**
  * Styles for the content slot
@@ -162,7 +162,7 @@ const useIconStyles = /*#__PURE__*/__styles({
     Be2twd7: "f1pp30po"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
 });
 const useIconBeforeStyles = /*#__PURE__*/__styles({
   medium: {

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { AvatarContextProvider } from '@fluentui/react-avatar';
 import { ButtonContextProvider } from '@fluentui/react-button';
 /**
  * Render the final JSX of TreeItemPersonaLayout
  */ export const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.selector && /*#__PURE__*/ createElement(slots.selector, slotProps.selector), /*#__PURE__*/ createElement(AvatarContextProvider, {
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.expandIcon && /*#__PURE__*/ createElement(state.expandIcon, null), state.selector && /*#__PURE__*/ createElement(state.selector, null), /*#__PURE__*/ createElement(AvatarContextProvider, {
         value: contextValues.avatar
-    }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), /*#__PURE__*/ createElement(ButtonContextProvider, {
+    }, /*#__PURE__*/ createElement(state.media, null)), /*#__PURE__*/ createElement(state.main, null), state.description && /*#__PURE__*/ createElement(state.description, null), /*#__PURE__*/ createElement(ButtonContextProvider, {
         value: state.buttonContextValue
-    }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));
+    }, state.actions && /*#__PURE__*/ createElement(state.actions, null), state.aside && /*#__PURE__*/ createElement(state.aside, null)));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.selector && <slots.selector {...slotProps.selector} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.main {...slotProps.main} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAyCI;IAEtE,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,QAAQ,kBAAI,AAxBzB,cAwB0BJ,MAAMI,QAAQ,EAAKH,UAAUG,QAAQ,iBACzD,AAzBN,cAyBOT;QAAsBU,OAAON,cAAcO,MAAM;qBAChD,AA1BR,cA0BSN,MAAMO,KAAK,EAAKN,UAAUM,KAAK,kBAElC,AA5BN,cA4BOP,MAAMQ,IAAI,EAAKP,UAAUO,IAAI,GAC7BR,MAAMS,WAAW,kBAAI,AA7B5B,cA6B6BT,MAAMS,WAAW,EAAKR,UAAUQ,WAAW,iBAClE,AA9BN,cA8BOb;QAAsBS,OAAOP,MAAMY,kBAAkB;OACnDV,MAAMW,OAAO,kBAAI,AA/B1B,cA+B2BX,MAAMW,OAAO,EAAKV,UAAUU,OAAO,GACrDX,MAAMY,KAAK,kBAAI,AAhCxB,cAgCyBZ,MAAMY,KAAK,EAAKX,UAAUW,KAAK;AAIxD,EAAE"}
+{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  assertSlots<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.expandIcon && <state.expandIcon />}\n      {state.selector && <state.selector />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <state.media />\n      </AvatarContextProvider>\n      <state.main />\n      {state.description && <state.description />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {state.actions && <state.actions />}\n        {state.aside && <state.aside />}\n      </ButtonContextProvider>\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAMxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACHL,YAAwCI;IAExC,qBACE,AAtBJ,cAsBKA,MAAME,IAAI,QACRF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,SACrCH,MAAMI,QAAQ,kBAAI,AAxBzB,cAwB0BJ,MAAMI,QAAQ,uBAClC,AAzBN,cAyBOP;QAAsBQ,OAAOJ,cAAcK,MAAM;qBAChD,AA1BR,cA0BSN,MAAMO,KAAK,wBAEd,AA5BN,cA4BOP,MAAMQ,IAAI,SACVR,MAAMS,WAAW,kBAAI,AA7B5B,cA6B6BT,MAAMS,WAAW,uBACxC,AA9BN,cA8BOX;QAAsBO,OAAOL,MAAMU,kBAAkB;OACnDV,MAAMW,OAAO,kBAAI,AA/B1B,cA+B2BX,MAAMW,OAAO,SAC/BX,MAAMY,KAAK,kBAAI,AAhCxB,cAgCyBZ,MAAMY,KAAK;AAIpC,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { resolveShorthand } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
 import { useTreeContext_unstable } from '../../contexts';
 import { treeAvatarSize } from '../../utils/tokens';
 import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';
@@ -36,15 +36,17 @@ import { Radio } from '@fluentui/react-radio';
             selector: selectionMode === 'multiselect' ? Checkbox : Radio
         },
         avatarSize: treeAvatarSize[size],
-        main: resolveShorthand(main, {
-            required: true,
+        main: slot.always(main, {
             defaultProps: {
                 children
-            }
+            },
+            elementType: 'div'
         }),
-        media: resolveShorthand(media, {
-            required: true
+        media: slot.always(media, {
+            elementType: 'div'
         }),
-        description: resolveShorthand(description)
+        description: slot.optional(description, {
+            elementType: 'div'
+        })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemPersonaLayout.ts"],"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';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\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  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\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      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\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","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","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;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;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,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC,KAAK;QAC/D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,iBAAiBW,MAAM;YAAEe,UAAU,IAAI;YAAEC,cAAc;gBAAEjB;YAAS;QAAE;QAC1ED,OAAOT,iBAAiBS,OAAO;YAAEiB,UAAU,IAAI;QAAC;QAChDd,aAAaZ,iBAAiBY;IAChC;AACF,EAAE"}
+{"version":3,"sources":["useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\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  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\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      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    avatarSize: treeAvatarSize[size],\n    main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n    media: slot.always(media, { elementType: 'div' }),\n    description: slot.optional(description, { elementType: 'div' }),\n  };\n};\n"],"names":["React","slot","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","always","defaultProps","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;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,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC,KAAK;QAC/D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,KAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,KAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,KAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}

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

@@ -40,7 +40,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     uwmqm3: ["fo100m9", "f6yw3pu"]
   }
 }, {
-  d: [".f13qh94s{display:-ms-grid;display:grid;}", ".f1y0tuzo{-ms-grid-rows:1fr auto;grid-template-rows:1fr auto;}", ".fellwe7{-ms-grid-columns:auto auto 1fr auto;grid-template-columns:auto auto 1fr auto;}", ".f1pam7zy{grid-template-areas:\"expandIcon media main        aside\" \"expandIcon media description aside\";}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}"],
+  d: [".f13qh94s{display: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{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);}"]
 });
@@ -63,7 +63,7 @@ const useMediaStyles = /*#__PURE__*/__styles({
     uwmqm3: ["fgiv446", "ffczdla"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".f11uok23{-ms-grid-row:media;grid-row-start:media;}", ".f1qdfnnj{-ms-grid-column:media;grid-column-start:media;}", ".f1s27gz{-ms-grid-row-span:media;grid-row-end:media;}", ".f86d0yl{-ms-grid-column-span:media;grid-column-end:media;}", ".f1g0x7ka{padding-top:0;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f1qch9an{padding-bottom:0;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
+  d: [".f22iagw{display:flex;}", ".f122n59{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 useMainStyles = /*#__PURE__*/__styles({
   base: {
@@ -83,7 +83,7 @@ const useMainStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".f17iroih{-ms-grid-row:main;grid-row-start:main;}", ".fppdkoh{-ms-grid-column:main;grid-column-start:main;}", ".fsb8d6n{-ms-grid-row-span:main;grid-row-end:main;}", ".f6k5g14{-ms-grid-column-span:main;grid-column-end:main;}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
+  d: [".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: {
@@ -101,7 +101,7 @@ const useDescriptionStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".ffekjdo{-ms-grid-row:description;grid-row-start:description;}", ".f12wtlaa{-ms-grid-column:description;grid-column-start:description;}", ".f1blqr63{-ms-grid-row-span:description;grid-row-end:description;}", ".f2ve1i{-ms-grid-column-span:description;grid-column-end:description;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}"]
+  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
@@ -122,7 +122,7 @@ const useActionsStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}", ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}", ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}", ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
+  d: [".f22iagw{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
@@ -145,7 +145,7 @@ const useAsideStyles = /*#__PURE__*/__styles({
     Belr9w4: "f14sijuj"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}", ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}", ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}", ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
+  d: [".f22iagw{display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{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{column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
 });
 /**
  * Styles for the expand icon slot
@@ -171,7 +171,7 @@ const useExpandIconStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1cnd47f", "fhxju0i"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1e6rimv{-ms-grid-row:expandIcon;grid-row-start:expandIcon;}", ".f10hsf66{-ms-grid-column:expandIcon;grid-column-start:expandIcon;}", ".foflfm0{-ms-grid-row-span:expandIcon;grid-row-end:expandIcon;}", ".f1b3ebjb{-ms-grid-column-span:expandIcon;grid-column-end:expandIcon;}", ".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{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{flex-grow:0;}", ".fi64zpg{flex-shrink:0;}", ".f1rmlqtg{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

package/lib/contexts/treeItemContext.js

@@ -12,7 +12,7 @@ const defaultContextValue = {
     isAsideVisible: false,
     itemType: 'leaf',
     open: false,
-    checked: undefined
+    checked: false
 };
 export const TreeItemContext = createContext(undefined);
 export const { Provider: TreeItemProvider  } = TreeItemContext;

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 type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nimport { TreeSelectionValue } from '../Tree';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  selectionRef: React.Ref<HTMLInputElement>;\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: TreeItemValue;\n  open: boolean;\n  checked?: TreeSelectionValue;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: headlessTreeRootId,\n  selectionRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  isActionsVisible: false,\n  isAsideVisible: false,\n  itemType: 'leaf',\n  open: false,\n  checked: undefined,\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","headlessTreeRootId","defaultContextValue","value","selectionRef","createRef","layoutRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","undefined","TreeItemContext","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,kBAAkB,QAAQ,8BAA8B;AAiBjE,MAAMC,sBAA4C;IAChDC,OAAOF;IACPG,cAAcN,MAAMO,SAAS;IAC7BC,WAAWR,MAAMO,SAAS;IAC1BE,YAAYT,MAAMO,SAAS;IAC3BG,YAAYV,MAAMO,SAAS;IAC3BI,eAAeX,MAAMO,SAAS;IAC9BK,kBAAkB,KAAK;IACvBC,gBAAgB,KAAK;IACrBC,UAAU;IACVC,MAAM,KAAK;IACXC,SAASC;AACX;AAEA,OAAO,MAAMC,kBAA6DjB,cAExEgB,WAAW;AAEb,OAAO,MAAM,EAAEE,UAAUC,iBAAgB,EAAE,GAAGF,gBAAgB;AAC9D,OAAO,MAAMG,8BAA8B,CAAIC,WAC7CpB,mBAAmBgB,iBAAiB,CAACK,MAAMnB,mBAAmB,GAAKkB,SAASC,MAAM"}
+{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nimport { TreeSelectionValue } from '../Tree';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  selectionRef: React.Ref<HTMLInputElement>;\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: TreeItemValue;\n  open: boolean;\n  checked: TreeSelectionValue;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: headlessTreeRootId,\n  selectionRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  isActionsVisible: false,\n  isAsideVisible: false,\n  itemType: 'leaf',\n  open: false,\n  checked: 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","headlessTreeRootId","defaultContextValue","value","selectionRef","createRef","layoutRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,kBAAkB,QAAQ,8BAA8B;AAiBjE,MAAMC,sBAA4C;IAChDC,OAAOF;IACPG,cAAcN,MAAMO,SAAS;IAC7BC,WAAWR,MAAMO,SAAS;IAC1BE,YAAYT,MAAMO,SAAS;IAC3BG,YAAYV,MAAMO,SAAS;IAC3BI,eAAeX,MAAMO,SAAS;IAC9BK,kBAAkB,KAAK;IACvBC,gBAAgB,KAAK;IACrBC,UAAU;IACVC,MAAM,KAAK;IACXC,SAAS,KAAK;AAChB;AAEA,OAAO,MAAMC,kBAA6DhB,cAExEiB,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,iBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7CpB,mBAAmBe,iBAAiB,CAACM,MAAMnB,mBAAmB,GAAKkB,SAASC,MAAM"}

package/lib/hooks/useRootTree.js

@@ -1,4 +1,4 @@
-import { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';
+import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createOpenItems } from '../utils/createOpenItems';
@@ -121,11 +121,13 @@ import { treeDataTypes } from '../utils/tokens';
         openItems,
         checkedItems,
         requestTreeResponse,
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             role: 'tree',
             'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 }

package/lib/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: Pick<\n    TreeProps,\n    | 'selectionMode'\n    | 'appearance'\n    | 'size'\n    | 'openItems'\n    | 'checkedItems'\n    | 'onOpenChange'\n    | 'onCheckedChange'\n    | 'onNavigation_unstable'\n    | 'aria-label'\n    | 'aria-labelledby'\n  >,\n  ref: React.Ref<HTMLElement>,\n): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n  const requestOpenChange = (data: TreeOpenChangeData) => props.onOpenChange?.(data.event, data);\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.type) {\n      case treeDataTypes.Click:\n      case treeDataTypes.ExpandIconClick: {\n        return ReactDOM.unstable_batchedUpdates(() => {\n          requestOpenChange({\n            ...request,\n            open: request.itemType === 'branch' && !openItems.has(request.value),\n            openItems: openItems.dangerouslyGetInternalSet_unstable(),\n          });\n          requestNavigation({ ...request, type: treeDataTypes.Click });\n        });\n      }\n      case treeDataTypes.ArrowRight: {\n        if (request.itemType === 'leaf') {\n          return;\n        }\n        const open = openItems.has(request.value);\n        if (!open) {\n          return requestOpenChange({\n            ...request,\n            open: true,\n            openItems: openItems.dangerouslyGetInternalSet_unstable(),\n          });\n        }\n        return requestNavigation(request);\n      }\n      case treeDataTypes.Enter: {\n        const open = openItems.has(request.value);\n        return requestOpenChange({\n          ...request,\n          open: request.itemType === 'branch' && !open,\n          openItems: openItems.dangerouslyGetInternalSet_unstable(),\n        });\n      }\n      case treeDataTypes.ArrowLeft: {\n        const open = openItems.has(request.value);\n        if (open && request.itemType === 'branch') {\n          return requestOpenChange({\n            ...request,\n            open: false,\n            type: treeDataTypes.ArrowLeft,\n            openItems: openItems.dangerouslyGetInternalSet_unstable(),\n          });\n        }\n        return requestNavigation({ ...request, type: treeDataTypes.ArrowLeft });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ ...request, target: request.event.currentTarget });\n      case treeDataTypes.Change: {\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n        } as TreeCheckedChangeData);\n      }\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref,\n      role: 'tree',\n      'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["getNativeElementProps","useEventCallback","React","ReactDOM","createOpenItems","createCheckedItems","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","onOpenChange","event","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","requestTreeResponse","request","Click","ExpandIconClick","unstable_batchedUpdates","open","itemType","has","value","dangerouslyGetInternalSet_unstable","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","target","currentTarget","Change","dangerouslyGetInternalMap_unstable","components","root","level","role","undefined","process","env","NODE_ENV","console","warn"],"mappings":"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"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: Pick<\n    TreeProps,\n    | 'selectionMode'\n    | 'appearance'\n    | 'size'\n    | 'openItems'\n    | 'checkedItems'\n    | 'onOpenChange'\n    | 'onCheckedChange'\n    | 'onNavigation_unstable'\n    | 'aria-label'\n    | 'aria-labelledby'\n  >,\n\n  ref: React.Ref<HTMLElement>,\n): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n  const requestOpenChange = (data: TreeOpenChangeData) => props.onOpenChange?.(data.event, data);\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.type) {\n      case treeDataTypes.Click:\n      case treeDataTypes.ExpandIconClick: {\n        return ReactDOM.unstable_batchedUpdates(() => {\n          requestOpenChange({\n            ...request,\n            open: request.itemType === 'branch' && !openItems.has(request.value),\n            openItems: openItems.dangerouslyGetInternalSet_unstable(),\n          });\n          requestNavigation({ ...request, type: treeDataTypes.Click });\n        });\n      }\n      case treeDataTypes.ArrowRight: {\n        if (request.itemType === 'leaf') {\n          return;\n        }\n        const open = openItems.has(request.value);\n        if (!open) {\n          return requestOpenChange({\n            ...request,\n            open: true,\n            openItems: openItems.dangerouslyGetInternalSet_unstable(),\n          });\n        }\n        return requestNavigation(request);\n      }\n      case treeDataTypes.Enter: {\n        const open = openItems.has(request.value);\n        return requestOpenChange({\n          ...request,\n          open: request.itemType === 'branch' && !open,\n          openItems: openItems.dangerouslyGetInternalSet_unstable(),\n        });\n      }\n      case treeDataTypes.ArrowLeft: {\n        const open = openItems.has(request.value);\n        if (open && request.itemType === 'branch') {\n          return requestOpenChange({\n            ...request,\n            open: false,\n            type: treeDataTypes.ArrowLeft,\n            openItems: openItems.dangerouslyGetInternalSet_unstable(),\n          });\n        }\n        return requestNavigation({ ...request, type: treeDataTypes.ArrowLeft });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ ...request, target: request.event.currentTarget });\n      case treeDataTypes.Change: {\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n        } as TreeCheckedChangeData);\n      }\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["getNativeElementProps","useEventCallback","slot","React","ReactDOM","createOpenItems","createCheckedItems","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","onOpenChange","event","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","requestTreeResponse","request","Click","ExpandIconClick","unstable_batchedUpdates","open","itemType","has","value","dangerouslyGetInternalSet_unstable","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","target","currentTarget","Change","dangerouslyGetInternalMap_unstable","components","root","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib/hooks/useSubtree.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';
-import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render a sub-level tree.
  *
@@ -27,10 +27,12 @@ import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities'
         size,
         selectionMode,
         level: parentLevel + 1,
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref: useMergedRefs(ref, subtreeRef),
             role: 'group',
             ...props
+        }), {
+            elementType: 'div'
         }),
         openItems,
         checkedItems,

package/lib/hooks/useSubtree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(props: Pick<TreeProps, 'appearance' | 'size'>, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const value = useTreeItemContext_unstable(ctx => ctx.value);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const checkedItems = useTreeContext_unstable(ctx => ctx.checkedItems);\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const open = openItems.has(value);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    selectionMode,\n    level: parentLevel + 1,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, subtreeRef),\n      role: 'group',\n      ...props,\n    }),\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n  };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","value","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","has","components","root","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AACzF,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AAEjF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAA6C,EAAEC,GAA2B,EAAa;IAChH,MAAMC,oBAAoBP,wBAAwBQ,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcV,wBAAwBQ,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaX,4BAA4BO,CAAAA,MAAOA,IAAII,UAAU;IACpE,MAAMC,QAAQZ,4BAA4BO,CAAAA,MAAOA,IAAIK,KAAK;IAE1D,MAAM,EAAEJ,YAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,CAAA,EAAEI,MAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,EAAE,GAAGL;IAEvF,MAAMS,cAAcd,wBAAwBQ,CAAAA,MAAOA,IAAIO,KAAK;IAC5D,MAAMC,gBAAgBhB,wBAAwBQ,CAAAA,MAAOA,IAAIQ,aAAa;IACtE,MAAMC,YAAYjB,wBAAwBQ,CAAAA,MAAOA,IAAIS,SAAS;IAC9D,MAAMC,eAAelB,wBAAwBQ,CAAAA,MAAOA,IAAIU,YAAY;IACpE,MAAMC,sBAAsBnB,wBAAwBQ,CAAAA,MAAOA,IAAIW,mBAAmB;IAElF,MAAMC,OAAOH,UAAUI,GAAG,CAACR;IAE3B,OAAO;QACLO;QACAE,YAAY;YACVC,MAAM;QACR;QACAd;QACAE;QACAK;QACAD,OAAOD,cAAc;QACrBS,MAAMrB,sBAAsB,OAAO;YACjCI,KAAKH,cAAcG,KAAKM;YACxBY,MAAM;YACN,GAAGnB,KAAK;QACV;QACAY;QACAC;QACAC;IACF;AACF,CAAC"}
+{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(props: Pick<TreeProps, 'appearance' | 'size'>, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const value = useTreeItemContext_unstable(ctx => ctx.value);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const checkedItems = useTreeContext_unstable(ctx => ctx.checkedItems);\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const open = openItems.has(value);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    selectionMode,\n    level: parentLevel + 1,\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, subtreeRef),\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n  };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","slot","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","value","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","has","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AACzF,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAA6C,EAAEC,GAA2B,EAAa;IAChH,MAAMC,oBAAoBR,wBAAwBS,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcX,wBAAwBS,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaZ,4BAA4BQ,CAAAA,MAAOA,IAAII,UAAU;IACpE,MAAMC,QAAQb,4BAA4BQ,CAAAA,MAAOA,IAAIK,KAAK;IAE1D,MAAM,EAAEJ,YAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,CAAA,EAAEI,MAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,EAAE,GAAGL;IAEvF,MAAMS,cAAcf,wBAAwBS,CAAAA,MAAOA,IAAIO,KAAK;IAC5D,MAAMC,gBAAgBjB,wBAAwBS,CAAAA,MAAOA,IAAIQ,aAAa;IACtE,MAAMC,YAAYlB,wBAAwBS,CAAAA,MAAOA,IAAIS,SAAS;IAC9D,MAAMC,eAAenB,wBAAwBS,CAAAA,MAAOA,IAAIU,YAAY;IACpE,MAAMC,sBAAsBpB,wBAAwBS,CAAAA,MAAOA,IAAIW,mBAAmB;IAElF,MAAMC,OAAOH,UAAUI,GAAG,CAACR;IAE3B,OAAO;QACLO;QACAE,YAAY;YACVC,MAAM;QACR;QACAd;QACAE;QACAK;QACAD,OAAOD,cAAc;QACrBS,MAAMpB,KAAKqB,MAAM,CACfvB,sBAAsB,OAAO;YAC3BK,KAAKJ,cAAcI,KAAKM;YACxBa,MAAM;YACN,GAAGpB,KAAK;QACV,IACA;YAAEqB,aAAa;QAAM;QAEvBT;QACAC;QACAC;IACF;AACF,CAAC"}

package/lib/utils/createHeadlessTree.js

@@ -32,6 +32,7 @@
                 return;
             }
             parentItem.itemType = 'branch';
+            var _propsWithoutParentValue_itemType;
             const item = {
                 value: props.value,
                 getTreeItemProps: ()=>({
@@ -41,7 +42,7 @@
                         'aria-setsize': parentItem.childrenValues.length,
                         itemType: item.itemType
                     }),
-                itemType: 'leaf',
+                itemType: (_propsWithoutParentValue_itemType = propsWithoutParentValue.itemType) !== null && _propsWithoutParentValue_itemType !== void 0 ? _propsWithoutParentValue_itemType : 'leaf',
                 level: parentItem.level + 1,
                 parentValue,
                 childrenValues: [],

package/lib/utils/createHeadlessTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createHeadlessTree.ts"],"sourcesContent":["import { TreeItemProps, TreeItemType, TreeItemValue } from '../TreeItem';\nimport { ImmutableSet } from './ImmutableSet';\n\nexport type HeadlessTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & {\n  value: TreeItemValue;\n  itemType?: TreeItemType;\n  parentValue?: TreeItemValue;\n};\n\n/**\n * The item that is returned by `createHeadlessTree`, it represents a wrapper around the properties provided to\n * `createHeadlessTree` but with extra information that might be useful on virtual tree scenarios\n */\nexport type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {\n  level: number;\n  index: number;\n  position: number;\n  childrenValues: TreeItemValue[];\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n  itemType: TreeItemType;\n  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &\n    Omit<Props, 'parentValue'>;\n};\n\n/**\n * @internal\n */\nexport type HeadlessTree<Props extends HeadlessTreeItemProps> = {\n  /**\n   * the number of items in the virtual tree\n   */\n  readonly size: number;\n  /**\n   * the root item of the virtual tree\n   */\n  root: HeadlessTreeItem<HeadlessTreeItemProps>;\n  /**\n   * method to get a virtual tree item by its value\n   * @param key the key of the item to get\n   */\n  get(value: TreeItemValue): HeadlessTreeItem<Props> | undefined;\n  /**\n   * method to check if a virtual tree item exists by its value\n   * @param value the value of the item to check if exists\n   */\n  has(value: TreeItemValue): boolean;\n  /**\n   * method to add a new virtual tree item to the virtual tree\n   * @param props the props of the item to add\n   */\n  add(props: Props): void;\n  /**\n   * method to remove a virtual tree item from the virtual tree.\n   * When an item is removed:\n   * 1. all its children are also removed\n   * 2. all its siblings are repositioned\n   * @param value the value of the item to remove\n   */\n  // remove(value: TreeItemValue): void;\n  /**\n   * method to get the parent of a virtual tree item by its value\n   * @param value the value of the item to get the parent from\n   */\n  getParent(value: TreeItemValue): HeadlessTreeItem<Props>;\n  /**\n   * method to get the subtree of a virtual tree item by its value\n   * @param value the value of the item to get the subtree from\n   */\n  subtree(value: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;\n  /**\n   * method to get the children of a virtual tree item by its value\n   * @param value the value of the item to get the children from\n   */\n  children(value: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;\n  /**\n   * method to get the visible items of a virtual tree\n   * @param openItems the open items of the tree\n   */\n  visibleItems(openItems: ImmutableSet<TreeItemValue>): IterableIterator<HeadlessTreeItem<Props>>;\n  /**\n   * method to get the ancestors of a virtual tree item by its value\n   * @param value the value of the item to get the ancestors from\n   */\n  ancestors(value: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;\n};\n\n/**\n * creates a list of virtual tree items\n * and provides a map to access each item by id\n */\nexport function createHeadlessTree<Props extends HeadlessTreeItemProps>(\n  initialProps: Props[] = [],\n): HeadlessTree<Props> {\n  const root = createHeadlessTreeRootItem();\n  const itemsPerValue = new Map<TreeItemValue, HeadlessTreeItem<HeadlessTreeItemProps>>([[root.value, root]]);\n\n  const headlessTree: HeadlessTree<HeadlessTreeItemProps> = {\n    root,\n    get size() {\n      return itemsPerValue.size;\n    },\n    getParent: key => itemsPerValue.get(itemsPerValue.get(key)?.parentValue ?? root.value) ?? root,\n    get: key => itemsPerValue.get(key),\n    has: key => itemsPerValue.has(key),\n    add(props) {\n      const { parentValue = headlessTreeRootId, ...propsWithoutParentValue } = props;\n      const parentItem = itemsPerValue.get(parentValue);\n      if (!parentItem) {\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.error(\n            `HeadlessTree: item ${props.value} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized, parents should come before children`,\n          );\n        }\n        return;\n      }\n      parentItem.itemType = 'branch';\n\n      const item: HeadlessTreeItem<HeadlessTreeItemProps> = {\n        value: props.value,\n        getTreeItemProps: () => ({\n          ...propsWithoutParentValue,\n          'aria-level': item.level,\n          'aria-posinset': item.position,\n          'aria-setsize': parentItem.childrenValues.length,\n          itemType: item.itemType,\n        }),\n        itemType: 'leaf',\n        level: parentItem.level + 1,\n        parentValue,\n        childrenValues: [],\n        index: -1,\n        position: parentItem.childrenValues.push(props.value),\n      };\n      itemsPerValue.set(item.value, item);\n    },\n    // TODO: eventually it would be nice to have this method exported for the user to modify\n    // the internal state of the virtual tree\n    // remove(value) {\n    //   const itemToBeRemoved = itemsPerValue.get(value);\n    //   if (!itemToBeRemoved) {\n    //     return;\n    //   }\n    //   const parentItem = headlessTree.getParent(value);\n    //   parentItem.childrenValues.splice(itemToBeRemoved.position, 1);\n    //   itemsPerValue.delete(value);\n    //   if (parentItem.childrenValues.length === 0) {\n    //     parentItem.itemType = 'leaf';\n    //   }\n    //   for (let index = itemToBeRemoved.position; index < parentItem.childrenValues.length; index++) {\n    //     const child = itemsPerValue.get(parentItem.childrenValues[index]);\n    //     if (child) {\n    //       child.position = index + 1;\n    //     }\n    //   }\n    //   for (const descendant of HeadlessTreeSubtreeGenerator(value, headlessTree)) {\n    //     itemsPerValue.delete(descendant.value);\n    //   }\n    // },\n    subtree: key => HeadlessTreeSubtreeGenerator(key, headlessTree),\n    children: key => HeadlessTreeChildrenGenerator(key, headlessTree),\n    ancestors: key => HeadlessTreeAncestorsGenerator(key, headlessTree),\n    visibleItems: openItems => HeadlessTreeVisibleItemsGenerator(openItems, headlessTree),\n  };\n\n  initialProps.forEach(headlessTree.add);\n\n  return headlessTree as HeadlessTree<Props>;\n}\n\nexport const headlessTreeRootId = '__fuiHeadlessTreeRoot';\n\nfunction createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {\n  return {\n    parentValue: undefined,\n    value: headlessTreeRootId,\n    itemType: 'branch',\n    getTreeItemProps: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return {\n        id: headlessTreeRootId,\n        value: headlessTreeRootId,\n        'aria-setsize': -1,\n        'aria-level': -1,\n        'aria-posinset': -1,\n        itemType: 'branch',\n      };\n    },\n    childrenValues: [],\n    get index() {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return -1;\n    },\n    get position() {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return -1;\n    },\n    level: 0,\n  };\n}\n\n/**\n * Generator that returns all subtree of a given virtual tree item\n * @param key the key of the item to get the subtree from\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction* HeadlessTreeSubtreeGenerator<Props extends HeadlessTreeItemProps>(\n  key: TreeItemValue,\n  virtualTreeItems: HeadlessTree<Props>,\n): Generator<HeadlessTreeItem<Props>, void, void> {\n  const item = virtualTreeItems.get(key);\n  if (!item || item.childrenValues.length === 0) {\n    return;\n  }\n  for (const childValue of item.childrenValues) {\n    yield virtualTreeItems.get(childValue)!;\n    yield* HeadlessTreeSubtreeGenerator(childValue, virtualTreeItems);\n  }\n}\n\n/**\n * Generator that returns all children of a given virtual tree item\n * @param key the key of the item to get the children from\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction* HeadlessTreeChildrenGenerator<Props extends HeadlessTreeItemProps>(\n  key: TreeItemValue,\n  virtualTreeItems: HeadlessTree<Props>,\n): Generator<HeadlessTreeItem<Props>, void, void> {\n  const item = virtualTreeItems.get(key);\n  if (!item || item.childrenValues.length === 0) {\n    return;\n  }\n  for (const childValue of item.childrenValues) {\n    yield virtualTreeItems.get(childValue)!;\n  }\n}\n\n/**\n * Generator that returns all ancestors of a given virtual tree item\n * @param key the key of the item to get the children from\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction* HeadlessTreeAncestorsGenerator<Props extends HeadlessTreeItemProps>(\n  key: TreeItemValue,\n  virtualTreeItems: HeadlessTree<Props>,\n): Generator<HeadlessTreeItem<Props>, void, void> {\n  let parent = virtualTreeItems.getParent(key);\n  while (parent !== virtualTreeItems.root) {\n    yield parent;\n    parent = virtualTreeItems.getParent(parent.value);\n  }\n}\n\n/**\n * Generator that returns all visible items of a given virtual tree\n * @param openItems the open items of the tree\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction* HeadlessTreeVisibleItemsGenerator<Props extends HeadlessTreeItemProps>(\n  openItems: ImmutableSet<TreeItemValue>,\n  virtualTreeItems: HeadlessTree<Props>,\n): Generator<HeadlessTreeItem<Props>, void, void> {\n  let index = 0;\n  for (const item of HeadlessTreeSubtreeGenerator(virtualTreeItems.root.value, virtualTreeItems)) {\n    if (isItemVisible(item, openItems, virtualTreeItems)) {\n      item.index = index++;\n      yield item;\n    }\n  }\n}\n\nfunction isItemVisible(\n  item: HeadlessTreeItem<HeadlessTreeItemProps>,\n  openItems: ImmutableSet<TreeItemValue>,\n  virtualTreeItems: HeadlessTree<HeadlessTreeItemProps>,\n) {\n  if (item.level === 1) {\n    return true;\n  }\n  while (item.parentValue && item.parentValue !== virtualTreeItems.root.value) {\n    if (!openItems.has(item.parentValue)) {\n      return false;\n    }\n    const parent = virtualTreeItems.get(item.parentValue);\n    if (!parent) {\n      return false;\n    }\n    item = parent;\n  }\n  return true;\n}\n"],"names":["createHeadlessTree","initialProps","root","createHeadlessTreeRootItem","itemsPerValue","Map","value","headlessTree","size","getParent","key","get","parentValue","has","add","props","headlessTreeRootId","propsWithoutParentValue","parentItem","process","env","NODE_ENV","console","error","itemType","item","getTreeItemProps","level","position","childrenValues","length","index","push","set","subtree","HeadlessTreeSubtreeGenerator","children","HeadlessTreeChildrenGenerator","ancestors","HeadlessTreeAncestorsGenerator","visibleItems","openItems","HeadlessTreeVisibleItemsGenerator","forEach","undefined","id","virtualTreeItems","childValue","parent","isItemVisible"],"mappings":"AAuFA;;;CAGC,GACD,OAAO,SAASA,mBACdC,eAAwB,EAAE,EACL;IACrB,MAAMC,OAAOC;IACb,MAAMC,gBAAgB,IAAIC,IAA4D;QAAC;YAACH,KAAKI,KAAK;YAAEJ;SAAK;KAAC;QAOpEE,gCAAlBA;IALpB,MAAMG,eAAoD;QACxDL;QACA,IAAIM,QAAO;YACT,OAAOJ,cAAcI,IAAI;QAC3B;QACAC,WAAWC,CAAAA;gBAAyBN;YAAlBA,OAAAA,CAAAA,qBAAAA,cAAcO,GAAG,CAACP,CAAAA,iCAAAA,CAAAA,sBAAAA,cAAcO,GAAG,CAACD,kBAAlBN,iCAAAA,KAAAA,IAAAA,oBAAwBQ,WAAW,cAAnCR,4CAAAA,iCAAuCF,KAAKI,KAAK,eAAnEF,gCAAAA,qBAAwEF,IAAI;;QAC9FS,KAAKD,CAAAA,MAAON,cAAcO,GAAG,CAACD;QAC9BG,KAAKH,CAAAA,MAAON,cAAcS,GAAG,CAACH;QAC9BI,KAAIC,KAAK,EAAE;YACT,MAAM,EAAEH,aAAcI,mBAAkB,EAAE,GAAGC,yBAAyB,GAAGF;YACzE,MAAMG,aAAad,cAAcO,GAAG,CAACC;YACrC,IAAI,CAACM,YAAY;gBACf,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;oBAC1C,sCAAsC;oBACtCC,QAAQC,KAAK,CACX,CAAC,mBAAmB,EAAER,MAAMT,KAAK,CAAC,iJAAiJ,CAAC;gBAExL,CAAC;gBACD;YACF,CAAC;YACDY,WAAWM,QAAQ,GAAG;YAEtB,MAAMC,OAAgD;gBACpDnB,OAAOS,MAAMT,KAAK;gBAClBoB,kBAAkB,IAAO,CAAA;wBACvB,GAAGT,uBAAuB;wBAC1B,cAAcQ,KAAKE,KAAK;wBACxB,iBAAiBF,KAAKG,QAAQ;wBAC9B,gBAAgBV,WAAWW,cAAc,CAACC,MAAM;wBAChDN,UAAUC,KAAKD,QAAQ;oBACzB,CAAA;gBACAA,UAAU;gBACVG,OAAOT,WAAWS,KAAK,GAAG;gBAC1Bf;gBACAiB,gBAAgB,EAAE;gBAClBE,OAAO,CAAC;gBACRH,UAAUV,WAAWW,cAAc,CAACG,IAAI,CAACjB,MAAMT,KAAK;YACtD;YACAF,cAAc6B,GAAG,CAACR,KAAKnB,KAAK,EAAEmB;QAChC;QACA,wFAAwF;QACxF,yCAAyC;QACzC,kBAAkB;QAClB,sDAAsD;QACtD,4BAA4B;QAC5B,cAAc;QACd,MAAM;QACN,sDAAsD;QACtD,mEAAmE;QACnE,iCAAiC;QACjC,kDAAkD;QAClD,oCAAoC;QACpC,MAAM;QACN,oGAAoG;QACpG,yEAAyE;QACzE,mBAAmB;QACnB,oCAAoC;QACpC,QAAQ;QACR,MAAM;QACN,kFAAkF;QAClF,8CAA8C;QAC9C,MAAM;QACN,KAAK;QACLS,SAASxB,CAAAA,MAAOyB,6BAA6BzB,KAAKH;QAClD6B,UAAU1B,CAAAA,MAAO2B,8BAA8B3B,KAAKH;QACpD+B,WAAW5B,CAAAA,MAAO6B,+BAA+B7B,KAAKH;QACtDiC,cAAcC,CAAAA,YAAaC,kCAAkCD,WAAWlC;IAC1E;IAEAN,aAAa0C,OAAO,CAACpC,aAAaO,GAAG;IAErC,OAAOP;AACT,CAAC;AAED,OAAO,MAAMS,qBAAqB,wBAAwB;AAE1D,SAASb,6BAAsE;IAC7E,OAAO;QACLS,aAAagC;QACbtC,OAAOU;QACPQ,UAAU;QACVE,kBAAkB,IAAM;YACtB,IAAIP,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO;gBACLsB,IAAI7B;gBACJV,OAAOU;gBACP,gBAAgB,CAAC;gBACjB,cAAc,CAAC;gBACf,iBAAiB,CAAC;gBAClBQ,UAAU;YACZ;QACF;QACAK,gBAAgB,EAAE;QAClB,IAAIE,SAAQ;YACV,IAAIZ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO,CAAC;QACV;QACA,IAAIK,YAAW;YACb,IAAIT,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO,CAAC;QACV;QACAI,OAAO;IACT;AACF;AAEA;;;CAGC,GACD,gEAAgE;AAChE,UAAUQ,6BACRzB,GAAkB,EAClBoC,gBAAqC,EACW;IAChD,MAAMrB,OAAOqB,iBAAiBnC,GAAG,CAACD;IAClC,IAAI,CAACe,QAAQA,KAAKI,cAAc,CAACC,MAAM,KAAK,GAAG;QAC7C;IACF,CAAC;IACD,KAAK,MAAMiB,cAActB,KAAKI,cAAc,CAAE;QAC5C,MAAMiB,iBAAiBnC,GAAG,CAACoC;QAC3B,OAAOZ,6BAA6BY,YAAYD;IAClD;AACF;AAEA;;;CAGC,GACD,gEAAgE;AAChE,UAAUT,8BACR3B,GAAkB,EAClBoC,gBAAqC,EACW;IAChD,MAAMrB,OAAOqB,iBAAiBnC,GAAG,CAACD;IAClC,IAAI,CAACe,QAAQA,KAAKI,cAAc,CAACC,MAAM,KAAK,GAAG;QAC7C;IACF,CAAC;IACD,KAAK,MAAMiB,cAActB,KAAKI,cAAc,CAAE;QAC5C,MAAMiB,iBAAiBnC,GAAG,CAACoC;IAC7B;AACF;AAEA;;;CAGC,GACD,gEAAgE;AAChE,UAAUR,+BACR7B,GAAkB,EAClBoC,gBAAqC,EACW;IAChD,IAAIE,SAASF,iBAAiBrC,SAAS,CAACC;IACxC,MAAOsC,WAAWF,iBAAiB5C,IAAI,CAAE;QACvC,MAAM8C;QACNA,SAASF,iBAAiBrC,SAAS,CAACuC,OAAO1C,KAAK;IAClD;AACF;AAEA;;;CAGC,GACD,gEAAgE;AAChE,UAAUoC,kCACRD,SAAsC,EACtCK,gBAAqC,EACW;IAChD,IAAIf,QAAQ;IACZ,KAAK,MAAMN,QAAQU,6BAA6BW,iBAAiB5C,IAAI,CAACI,KAAK,EAAEwC,kBAAmB;QAC9F,IAAIG,cAAcxB,MAAMgB,WAAWK,mBAAmB;YACpDrB,KAAKM,KAAK,GAAGA;YACb,MAAMN;QACR,CAAC;IACH;AACF;AAEA,SAASwB,cACPxB,IAA6C,EAC7CgB,SAAsC,EACtCK,gBAAqD,EACrD;IACA,IAAIrB,KAAKE,KAAK,KAAK,GAAG;QACpB,OAAO,IAAI;IACb,CAAC;IACD,MAAOF,KAAKb,WAAW,IAAIa,KAAKb,WAAW,KAAKkC,iBAAiB5C,IAAI,CAACI,KAAK,CAAE;QAC3E,IAAI,CAACmC,UAAU5B,GAAG,CAACY,KAAKb,WAAW,GAAG;YACpC,OAAO,KAAK;QACd,CAAC;QACD,MAAMoC,SAASF,iBAAiBnC,GAAG,CAACc,KAAKb,WAAW;QACpD,IAAI,CAACoC,QAAQ;YACX,OAAO,KAAK;QACd,CAAC;QACDvB,OAAOuB;IACT;IACA,OAAO,IAAI;AACb"}
+{"version":3,"sources":["createHeadlessTree.ts"],"sourcesContent":["import { TreeItemProps, TreeItemType, TreeItemValue } from '../TreeItem';\nimport { ImmutableSet } from './ImmutableSet';\n\nexport type HeadlessTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & {\n  value: TreeItemValue;\n  itemType?: TreeItemType;\n  parentValue?: TreeItemValue;\n};\n\n/**\n * The item that is returned by `createHeadlessTree`, it represents a wrapper around the properties provided to\n * `createHeadlessTree` but with extra information that might be useful on virtual tree scenarios\n */\nexport type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {\n  level: number;\n  index: number;\n  position: number;\n  childrenValues: TreeItemValue[];\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n  itemType: TreeItemType;\n  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &\n    Omit<Props, 'parentValue'>;\n};\n\n/**\n * @internal\n */\nexport type HeadlessTree<Props extends HeadlessTreeItemProps> = {\n  /**\n   * the number of items in the virtual tree\n   */\n  readonly size: number;\n  /**\n   * the root item of the virtual tree\n   */\n  root: HeadlessTreeItem<HeadlessTreeItemProps>;\n  /**\n   * method to get a virtual tree item by its value\n   * @param key the key of the item to get\n   */\n  get(value: TreeItemValue): HeadlessTreeItem<Props> | undefined;\n  /**\n   * method to check if a virtual tree item exists by its value\n   * @param value the value of the item to check if exists\n   */\n  has(value: TreeItemValue): boolean;\n  /**\n   * method to add a new virtual tree item to the virtual tree\n   * @param props the props of the item to add\n   */\n  add(props: Props): void;\n  /**\n   * method to remove a virtual tree item from the virtual tree.\n   * When an item is removed:\n   * 1. all its children are also removed\n   * 2. all its siblings are repositioned\n   * @param value the value of the item to remove\n   */\n  // remove(value: TreeItemValue): void;\n  /**\n   * method to get the parent of a virtual tree item by its value\n   * @param value the value of the item to get the parent from\n   */\n  getParent(value: TreeItemValue): HeadlessTreeItem<Props>;\n  /**\n   * method to get the subtree of a virtual tree item by its value\n   * @param value the value of the item to get the subtree from\n   */\n  subtree(value: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;\n  /**\n   * method to get the children of a virtual tree item by its value\n   * @param value the value of the item to get the children from\n   */\n  children(value: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;\n  /**\n   * method to get the visible items of a virtual tree\n   * @param openItems the open items of the tree\n   */\n  visibleItems(openItems: ImmutableSet<TreeItemValue>): IterableIterator<HeadlessTreeItem<Props>>;\n  /**\n   * method to get the ancestors of a virtual tree item by its value\n   * @param value the value of the item to get the ancestors from\n   */\n  ancestors(value: TreeItemValue): IterableIterator<HeadlessTreeItem<Props>>;\n};\n\n/**\n * creates a list of virtual tree items\n * and provides a map to access each item by id\n */\nexport function createHeadlessTree<Props extends HeadlessTreeItemProps>(\n  initialProps: Props[] = [],\n): HeadlessTree<Props> {\n  const root = createHeadlessTreeRootItem();\n  const itemsPerValue = new Map<TreeItemValue, HeadlessTreeItem<HeadlessTreeItemProps>>([[root.value, root]]);\n\n  const headlessTree: HeadlessTree<HeadlessTreeItemProps> = {\n    root,\n    get size() {\n      return itemsPerValue.size;\n    },\n    getParent: key => itemsPerValue.get(itemsPerValue.get(key)?.parentValue ?? root.value) ?? root,\n    get: key => itemsPerValue.get(key),\n    has: key => itemsPerValue.has(key),\n    add(props) {\n      const { parentValue = headlessTreeRootId, ...propsWithoutParentValue } = props;\n      const parentItem = itemsPerValue.get(parentValue);\n      if (!parentItem) {\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.error(\n            `HeadlessTree: item ${props.value} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized, parents should come before children`,\n          );\n        }\n        return;\n      }\n      parentItem.itemType = 'branch';\n\n      const item: HeadlessTreeItem<HeadlessTreeItemProps> = {\n        value: props.value,\n        getTreeItemProps: () => ({\n          ...propsWithoutParentValue,\n          'aria-level': item.level,\n          'aria-posinset': item.position,\n          'aria-setsize': parentItem.childrenValues.length,\n          itemType: item.itemType,\n        }),\n        itemType: propsWithoutParentValue.itemType ?? 'leaf',\n        level: parentItem.level + 1,\n        parentValue,\n        childrenValues: [],\n        index: -1,\n        position: parentItem.childrenValues.push(props.value),\n      };\n      itemsPerValue.set(item.value, item);\n    },\n    // TODO: eventually it would be nice to have this method exported for the user to modify\n    // the internal state of the virtual tree\n    // remove(value) {\n    //   const itemToBeRemoved = itemsPerValue.get(value);\n    //   if (!itemToBeRemoved) {\n    //     return;\n    //   }\n    //   const parentItem = headlessTree.getParent(value);\n    //   parentItem.childrenValues.splice(itemToBeRemoved.position, 1);\n    //   itemsPerValue.delete(value);\n    //   if (parentItem.childrenValues.length === 0) {\n    //     parentItem.itemType = 'leaf';\n    //   }\n    //   for (let index = itemToBeRemoved.position; index < parentItem.childrenValues.length; index++) {\n    //     const child = itemsPerValue.get(parentItem.childrenValues[index]);\n    //     if (child) {\n    //       child.position = index + 1;\n    //     }\n    //   }\n    //   for (const descendant of HeadlessTreeSubtreeGenerator(value, headlessTree)) {\n    //     itemsPerValue.delete(descendant.value);\n    //   }\n    // },\n    subtree: key => HeadlessTreeSubtreeGenerator(key, headlessTree),\n    children: key => HeadlessTreeChildrenGenerator(key, headlessTree),\n    ancestors: key => HeadlessTreeAncestorsGenerator(key, headlessTree),\n    visibleItems: openItems => HeadlessTreeVisibleItemsGenerator(openItems, headlessTree),\n  };\n\n  initialProps.forEach(headlessTree.add);\n\n  return headlessTree as HeadlessTree<Props>;\n}\n\nexport const headlessTreeRootId = '__fuiHeadlessTreeRoot';\n\nfunction createHeadlessTreeRootItem(): HeadlessTreeItem<HeadlessTreeItemProps> {\n  return {\n    parentValue: undefined,\n    value: headlessTreeRootId,\n    itemType: 'branch',\n    getTreeItemProps: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return {\n        id: headlessTreeRootId,\n        value: headlessTreeRootId,\n        'aria-setsize': -1,\n        'aria-level': -1,\n        'aria-posinset': -1,\n        itemType: 'branch',\n      };\n    },\n    childrenValues: [],\n    get index() {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return -1;\n    },\n    get position() {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('HeadlessTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return -1;\n    },\n    level: 0,\n  };\n}\n\n/**\n * Generator that returns all subtree of a given virtual tree item\n * @param key the key of the item to get the subtree from\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction* HeadlessTreeSubtreeGenerator<Props extends HeadlessTreeItemProps>(\n  key: TreeItemValue,\n  virtualTreeItems: HeadlessTree<Props>,\n): Generator<HeadlessTreeItem<Props>, void, void> {\n  const item = virtualTreeItems.get(key);\n  if (!item || item.childrenValues.length === 0) {\n    return;\n  }\n  for (const childValue of item.childrenValues) {\n    yield virtualTreeItems.get(childValue)!;\n    yield* HeadlessTreeSubtreeGenerator(childValue, virtualTreeItems);\n  }\n}\n\n/**\n * Generator that returns all children of a given virtual tree item\n * @param key the key of the item to get the children from\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction* HeadlessTreeChildrenGenerator<Props extends HeadlessTreeItemProps>(\n  key: TreeItemValue,\n  virtualTreeItems: HeadlessTree<Props>,\n): Generator<HeadlessTreeItem<Props>, void, void> {\n  const item = virtualTreeItems.get(key);\n  if (!item || item.childrenValues.length === 0) {\n    return;\n  }\n  for (const childValue of item.childrenValues) {\n    yield virtualTreeItems.get(childValue)!;\n  }\n}\n\n/**\n * Generator that returns all ancestors of a given virtual tree item\n * @param key the key of the item to get the children from\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction* HeadlessTreeAncestorsGenerator<Props extends HeadlessTreeItemProps>(\n  key: TreeItemValue,\n  virtualTreeItems: HeadlessTree<Props>,\n): Generator<HeadlessTreeItem<Props>, void, void> {\n  let parent = virtualTreeItems.getParent(key);\n  while (parent !== virtualTreeItems.root) {\n    yield parent;\n    parent = virtualTreeItems.getParent(parent.value);\n  }\n}\n\n/**\n * Generator that returns all visible items of a given virtual tree\n * @param openItems the open items of the tree\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction* HeadlessTreeVisibleItemsGenerator<Props extends HeadlessTreeItemProps>(\n  openItems: ImmutableSet<TreeItemValue>,\n  virtualTreeItems: HeadlessTree<Props>,\n): Generator<HeadlessTreeItem<Props>, void, void> {\n  let index = 0;\n  for (const item of HeadlessTreeSubtreeGenerator(virtualTreeItems.root.value, virtualTreeItems)) {\n    if (isItemVisible(item, openItems, virtualTreeItems)) {\n      item.index = index++;\n      yield item;\n    }\n  }\n}\n\nfunction isItemVisible(\n  item: HeadlessTreeItem<HeadlessTreeItemProps>,\n  openItems: ImmutableSet<TreeItemValue>,\n  virtualTreeItems: HeadlessTree<HeadlessTreeItemProps>,\n) {\n  if (item.level === 1) {\n    return true;\n  }\n  while (item.parentValue && item.parentValue !== virtualTreeItems.root.value) {\n    if (!openItems.has(item.parentValue)) {\n      return false;\n    }\n    const parent = virtualTreeItems.get(item.parentValue);\n    if (!parent) {\n      return false;\n    }\n    item = parent;\n  }\n  return true;\n}\n"],"names":["createHeadlessTree","initialProps","root","createHeadlessTreeRootItem","itemsPerValue","Map","value","headlessTree","size","getParent","key","get","parentValue","has","add","props","headlessTreeRootId","propsWithoutParentValue","parentItem","process","env","NODE_ENV","console","error","itemType","item","getTreeItemProps","level","position","childrenValues","length","index","push","set","subtree","HeadlessTreeSubtreeGenerator","children","HeadlessTreeChildrenGenerator","ancestors","HeadlessTreeAncestorsGenerator","visibleItems","openItems","HeadlessTreeVisibleItemsGenerator","forEach","undefined","id","virtualTreeItems","childValue","parent","isItemVisible"],"mappings":"AAuFA;;;CAGC,GACD,OAAO,SAASA,mBACdC,eAAwB,EAAE,EACL;IACrB,MAAMC,OAAOC;IACb,MAAMC,gBAAgB,IAAIC,IAA4D;QAAC;YAACH,KAAKI,KAAK;YAAEJ;SAAK;KAAC;QAOpEE,gCAAlBA;IALpB,MAAMG,eAAoD;QACxDL;QACA,IAAIM,QAAO;YACT,OAAOJ,cAAcI,IAAI;QAC3B;QACAC,WAAWC,CAAAA;gBAAyBN;YAAlBA,OAAAA,CAAAA,qBAAAA,cAAcO,GAAG,CAACP,CAAAA,iCAAAA,CAAAA,sBAAAA,cAAcO,GAAG,CAACD,kBAAlBN,iCAAAA,KAAAA,IAAAA,oBAAwBQ,WAAW,cAAnCR,4CAAAA,iCAAuCF,KAAKI,KAAK,eAAnEF,gCAAAA,qBAAwEF,IAAI;;QAC9FS,KAAKD,CAAAA,MAAON,cAAcO,GAAG,CAACD;QAC9BG,KAAKH,CAAAA,MAAON,cAAcS,GAAG,CAACH;QAC9BI,KAAIC,KAAK,EAAE;YACT,MAAM,EAAEH,aAAcI,mBAAkB,EAAE,GAAGC,yBAAyB,GAAGF;YACzE,MAAMG,aAAad,cAAcO,GAAG,CAACC;YACrC,IAAI,CAACM,YAAY;gBACf,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;oBAC1C,sCAAsC;oBACtCC,QAAQC,KAAK,CACX,CAAC,mBAAmB,EAAER,MAAMT,KAAK,CAAC,iJAAiJ,CAAC;gBAExL,CAAC;gBACD;YACF,CAAC;YACDY,WAAWM,QAAQ,GAAG;gBAWVP;YATZ,MAAMQ,OAAgD;gBACpDnB,OAAOS,MAAMT,KAAK;gBAClBoB,kBAAkB,IAAO,CAAA;wBACvB,GAAGT,uBAAuB;wBAC1B,cAAcQ,KAAKE,KAAK;wBACxB,iBAAiBF,KAAKG,QAAQ;wBAC9B,gBAAgBV,WAAWW,cAAc,CAACC,MAAM;wBAChDN,UAAUC,KAAKD,QAAQ;oBACzB,CAAA;gBACAA,UAAUP,CAAAA,oCAAAA,wBAAwBO,QAAQ,cAAhCP,+CAAAA,oCAAoC,MAAM;gBACpDU,OAAOT,WAAWS,KAAK,GAAG;gBAC1Bf;gBACAiB,gBAAgB,EAAE;gBAClBE,OAAO,CAAC;gBACRH,UAAUV,WAAWW,cAAc,CAACG,IAAI,CAACjB,MAAMT,KAAK;YACtD;YACAF,cAAc6B,GAAG,CAACR,KAAKnB,KAAK,EAAEmB;QAChC;QACA,wFAAwF;QACxF,yCAAyC;QACzC,kBAAkB;QAClB,sDAAsD;QACtD,4BAA4B;QAC5B,cAAc;QACd,MAAM;QACN,sDAAsD;QACtD,mEAAmE;QACnE,iCAAiC;QACjC,kDAAkD;QAClD,oCAAoC;QACpC,MAAM;QACN,oGAAoG;QACpG,yEAAyE;QACzE,mBAAmB;QACnB,oCAAoC;QACpC,QAAQ;QACR,MAAM;QACN,kFAAkF;QAClF,8CAA8C;QAC9C,MAAM;QACN,KAAK;QACLS,SAASxB,CAAAA,MAAOyB,6BAA6BzB,KAAKH;QAClD6B,UAAU1B,CAAAA,MAAO2B,8BAA8B3B,KAAKH;QACpD+B,WAAW5B,CAAAA,MAAO6B,+BAA+B7B,KAAKH;QACtDiC,cAAcC,CAAAA,YAAaC,kCAAkCD,WAAWlC;IAC1E;IAEAN,aAAa0C,OAAO,CAACpC,aAAaO,GAAG;IAErC,OAAOP;AACT,CAAC;AAED,OAAO,MAAMS,qBAAqB,wBAAwB;AAE1D,SAASb,6BAAsE;IAC7E,OAAO;QACLS,aAAagC;QACbtC,OAAOU;QACPQ,UAAU;QACVE,kBAAkB,IAAM;YACtB,IAAIP,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO;gBACLsB,IAAI7B;gBACJV,OAAOU;gBACP,gBAAgB,CAAC;gBACjB,cAAc,CAAC;gBACf,iBAAiB,CAAC;gBAClBQ,UAAU;YACZ;QACF;QACAK,gBAAgB,EAAE;QAClB,IAAIE,SAAQ;YACV,IAAIZ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO,CAAC;QACV;QACA,IAAIK,YAAW;YACb,IAAIT,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO,CAAC;QACV;QACAI,OAAO;IACT;AACF;AAEA;;;CAGC,GACD,gEAAgE;AAChE,UAAUQ,6BACRzB,GAAkB,EAClBoC,gBAAqC,EACW;IAChD,MAAMrB,OAAOqB,iBAAiBnC,GAAG,CAACD;IAClC,IAAI,CAACe,QAAQA,KAAKI,cAAc,CAACC,MAAM,KAAK,GAAG;QAC7C;IACF,CAAC;IACD,KAAK,MAAMiB,cAActB,KAAKI,cAAc,CAAE;QAC5C,MAAMiB,iBAAiBnC,GAAG,CAACoC;QAC3B,OAAOZ,6BAA6BY,YAAYD;IAClD;AACF;AAEA;;;CAGC,GACD,gEAAgE;AAChE,UAAUT,8BACR3B,GAAkB,EAClBoC,gBAAqC,EACW;IAChD,MAAMrB,OAAOqB,iBAAiBnC,GAAG,CAACD;IAClC,IAAI,CAACe,QAAQA,KAAKI,cAAc,CAACC,MAAM,KAAK,GAAG;QAC7C;IACF,CAAC;IACD,KAAK,MAAMiB,cAActB,KAAKI,cAAc,CAAE;QAC5C,MAAMiB,iBAAiBnC,GAAG,CAACoC;IAC7B;AACF;AAEA;;;CAGC,GACD,gEAAgE;AAChE,UAAUR,+BACR7B,GAAkB,EAClBoC,gBAAqC,EACW;IAChD,IAAIE,SAASF,iBAAiBrC,SAAS,CAACC;IACxC,MAAOsC,WAAWF,iBAAiB5C,IAAI,CAAE;QACvC,MAAM8C;QACNA,SAASF,iBAAiBrC,SAAS,CAACuC,OAAO1C,KAAK;IAClD;AACF;AAEA;;;CAGC,GACD,gEAAgE;AAChE,UAAUoC,kCACRD,SAAsC,EACtCK,gBAAqC,EACW;IAChD,IAAIf,QAAQ;IACZ,KAAK,MAAMN,QAAQU,6BAA6BW,iBAAiB5C,IAAI,CAACI,KAAK,EAAEwC,kBAAmB;QAC9F,IAAIG,cAAcxB,MAAMgB,WAAWK,mBAAmB;YACpDrB,KAAKM,KAAK,GAAGA;YACb,MAAMN;QACR,CAAC;IACH;AACF;AAEA,SAASwB,cACPxB,IAA6C,EAC7CgB,SAAsC,EACtCK,gBAAqD,EACrD;IACA,IAAIrB,KAAKE,KAAK,KAAK,GAAG;QACpB,OAAO,IAAI;IACb,CAAC;IACD,MAAOF,KAAKb,WAAW,IAAIa,KAAKb,WAAW,KAAKkC,iBAAiB5C,IAAI,CAACI,KAAK,CAAE;QAC3E,IAAI,CAACmC,UAAU5B,GAAG,CAACY,KAAKb,WAAW,GAAG;YACpC,OAAO,KAAK;QACd,CAAC;QACD,MAAMoC,SAASF,iBAAiBnC,GAAG,CAACc,KAAKb,WAAW;QACpD,IAAI,CAACoC,QAAQ;YACX,OAAO,KAAK;QACd,CAAC;QACDvB,OAAOuB;IACT;IACA,OAAO,IAAI;AACb"}

package/lib/utils/getTreeItemValueFromElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getTreeItemValueFromElement.ts"],"sourcesContent":["export const dataTreeItemValueAttrName = 'data-fui-tree-item-value';\n\nexport const getTreeItemValueFromElement = (element: HTMLElement) => {\n  return element.getAttribute(dataTreeItemValueAttrName);\n};\n"],"names":["dataTreeItemValueAttrName","getTreeItemValueFromElement","element","getAttribute"],"mappings":"AAAA,OAAO,MAAMA,4BAA4B,2BAA2B;AAEpE,OAAO,MAAMC,8BAA8B,CAACC,UAAyB;IACnE,OAAOA,QAAQC,YAAY,CAACH;AAC9B,EAAE"}
+{"version":3,"sources":["getTreeItemValueFromElement.ts"],"sourcesContent":["import type { TreeItemValue } from '../TreeItem';\n\nexport const dataTreeItemValueAttrName = 'data-fui-tree-item-value';\n\nexport const getTreeItemValueFromElement = (element: HTMLElement) => {\n  return element.getAttribute(dataTreeItemValueAttrName) as TreeItemValue | null;\n};\n"],"names":["dataTreeItemValueAttrName","getTreeItemValueFromElement","element","getAttribute"],"mappings":"AAEA,OAAO,MAAMA,4BAA4B,2BAA2B;AAEpE,OAAO,MAAMC,8BAA8B,CAACC,UAAyB;IACnE,OAAOA,QAAQC,YAAY,CAACH;AAC9B,EAAE"}

package/lib-commonjs/components/FlatTree/FlatTree.js

@@ -8,13 +8,14 @@ Object.defineProperty(exports, "FlatTree", {
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _index = require("../Tree/index");
 const _useFlatTree = require("./useFlatTree");
 const _useFlatTreeStylesStyles = require("./useFlatTreeStyles.styles");
+const _useFlatTreeContextValues = require("./useFlatTreeContextValues");
+const _renderFlatTree = require("./renderFlatTree");
 const FlatTree = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useFlatTree.useFlatTree_unstable)(props, ref);
-    const contextValues = (0, _index.useTreeContextValues_unstable)(state);
+    const contextValues = (0, _useFlatTreeContextValues.useFlatTreeContextValues_unstable)(state);
     (0, _useFlatTreeStylesStyles.useFlatTreeStyles_unstable)(state);
-    return (0, _index.renderTree_unstable)(state, contextValues);
+    return (0, _renderFlatTree.renderFlatTree_unstable)(state, contextValues);
 });
 FlatTree.displayName = 'FlatTree';

package/lib-commonjs/components/FlatTree/FlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeContextValues_unstable as useFlatTreeContextValues_unstable, renderTree_unstable as renderFlatTree_unstable } from '../Tree/index';\nimport { useFlatTree_unstable } from './useFlatTree';\nimport { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';\n/**\n * FlatTree component - TODO: add more docs\n */ export const FlatTree = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useFlatTree_unstable(props, ref);\n    const contextValues = useFlatTreeContextValues_unstable(state);\n    useFlatTreeStyles_unstable(state);\n    return renderFlatTree_unstable(state, contextValues);\n});\nFlatTree.displayName = 'FlatTree';\n"],"names":["FlatTree","React","forwardRef","props","ref","state","useFlatTree_unstable","contextValues","useFlatTreeContextValues_unstable","useFlatTreeStyles_unstable","renderFlatTree_unstable","displayName"],"mappings":";;;;+BAMiBA;;aAAAA;;;6DANM;uBAC4G;6BAC9F;yCACM;AAGhC,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACrE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,oCAAiC,EAACH;IACxDI,IAAAA,mDAA0B,EAACJ;IAC3B,OAAOK,IAAAA,0BAAuB,EAACL,OAAOE;AAC1C;AACAP,SAASW,WAAW,GAAG"}
+{"version":3,"sources":["FlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useFlatTree_unstable } from './useFlatTree';\nimport { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';\nimport { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';\nimport { renderFlatTree_unstable } from './renderFlatTree';\n/**\n * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.\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 */ export const FlatTree = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useFlatTree_unstable(props, ref);\n    const contextValues = useFlatTreeContextValues_unstable(state);\n    useFlatTreeStyles_unstable(state);\n    return renderFlatTree_unstable(state, contextValues);\n});\nFlatTree.displayName = 'FlatTree';\n"],"names":["FlatTree","React","forwardRef","props","ref","state","useFlatTree_unstable","contextValues","useFlatTreeContextValues_unstable","useFlatTreeStyles_unstable","renderFlatTree_unstable","displayName"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;6BACc;yCACM;0CACO;gCACV;AAM7B,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACrE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,2DAAiC,EAACH;IACxDI,IAAAA,mDAA0B,EAACJ;IAC3B,OAAOK,IAAAA,uCAAuB,EAACL,OAAOE;AAC1C;AACAP,SAASW,WAAW,GAAG"}

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

@@ -2,20 +2,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    renderFlatTree_unstable: ()=>_index.renderTree_unstable,
-    useFlatTreeContextValues_unstable: ()=>_index.useTreeContextValues_unstable
-});
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./FlatTree"), exports);
 _exportStar(require("./FlatTree.types"), exports);
-const _index = require("../Tree/index");
 _exportStar(require("./useHeadlessFlatTree"), exports);
 _exportStar(require("./useFlatTree"), exports);
 _exportStar(require("./useFlatTreeStyles.styles"), exports);
+_exportStar(require("./useFlatTreeContextValues"), exports);
+_exportStar(require("./renderFlatTree"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './FlatTree';\nexport * from './FlatTree.types';\nexport { renderTree_unstable as renderFlatTree_unstable, useTreeContextValues_unstable as useFlatTreeContextValues_unstable } from '../Tree/index';\nexport * from './useHeadlessFlatTree';\nexport * from './useFlatTree';\nexport * from './useFlatTreeStyles.styles';\n"],"names":["renderFlatTree_unstable","renderTree_unstable","useFlatTreeContextValues_unstable","useTreeContextValues_unstable"],"mappings":";;;;;;;;;;;IAEgCA,uBAAuB,MAA9CC,0BAAmB;IAA8DC,iCAAiC,MAAlEC,oCAA6B;;;oBAFxE;oBACA;uBACqH;oBACrH;oBACA;oBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './FlatTree';\nexport * from './FlatTree.types';\nexport * from './useHeadlessFlatTree';\nexport * from './useFlatTree';\nexport * from './useFlatTreeStyles.styles';\nexport * from './useFlatTreeContextValues';\nexport * from './renderFlatTree';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}

package/lib-commonjs/components/FlatTree/renderFlatTree.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderFlatTree_unstable", {
+    enumerable: true,
+    get: ()=>renderFlatTree_unstable
+});
+const _tree = require("../../Tree");
+const renderFlatTree_unstable = _tree.renderTree_unstable;

package/lib-commonjs/components/FlatTree/renderFlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderFlatTree.js"],"sourcesContent":["import { renderTree_unstable } from '../../Tree';\nexport const renderFlatTree_unstable = renderTree_unstable;\n"],"names":["renderFlatTree_unstable","renderTree_unstable"],"mappings":";;;;+BACaA;;aAAAA;;sBADuB;AAC7B,MAAMA,0BAA0BC,yBAAmB"}