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

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useTreeContext_unstable","useTreeItemContext_unstable","treeAvatarSize","useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","aside","as","size","ctx","isActionsVisible","components","root","avatarSize","required","defaultProps"],"sources":["../../../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, content, children, main, description, aside, as = 'span' } = props;\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const { isActionsVisible } = useTreeItemContext_unstable();\n  return {\n    components: {\n      content: 'div',\n      main: 'span',\n      description: 'span',\n      root: 'span',\n      media: 'span',\n      aside: 'span',\n    },\n    isActionsVisible,\n    avatarSize: treeAvatarSize[size],\n    root: getNativeElementProps(as, { ...props, ref }),\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    content: resolveShorthand(content, { required: true }),\n    description: resolveShorthand(description),\n    aside: resolveShorthand(aside),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AACxD,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ;AACrE,SAASC,cAAc,QAAQ;AAE/B;;;;;;;;;AASA,OAAO,MAAMC,iCAAA,GAAoCA,CAC/CC,KAAA,EACAC,GAAA,KAC+B;EAC/B,MAAM;IAAEC,KAAA;IAAOC,OAAA;IAASC,QAAA;IAAUC,IAAA;IAAMC,WAAA;IAAaC,KAAA;IAAOC,EAAA,GAAK;EAAM,CAAE,GAAGR,KAAA;EAC5E,MAAMS,IAAA,GAAOb,uBAAA,CAAwBc,GAAA,IAAOA,GAAA,CAAID,IAAI;EACpD,MAAM;IAAEE;EAAgB,CAAE,GAAGd,2BAAA;EAC7B,OAAO;IACLe,UAAA,EAAY;MACVT,OAAA,EAAS;MACTE,IAAA,EAAM;MACNC,WAAA,EAAa;MACbO,IAAA,EAAM;MACNX,KAAA,EAAO;MACPK,KAAA,EAAO;IACT;IACAI,gBAAA;IACAG,UAAA,EAAYhB,cAAc,CAACW,IAAA,CAAK;IAChCI,IAAA,EAAMnB,qBAAA,CAAsBc,EAAA,EAAI;MAAE,GAAGR,KAAK;MAAEC;IAAI;IAChDI,IAAA,EAAMV,gBAAA,CAAiBU,IAAA,EAAM;MAAEU,QAAA,EAAU,IAAI;MAAEC,YAAA,EAAc;QAAEZ;MAAS;IAAE;IAC1EF,KAAA,EAAOP,gBAAA,CAAiBO,KAAA,EAAO;MAAEa,QAAA,EAAU;IAAK;IAChDZ,OAAA,EAASR,gBAAA,CAAiBQ,OAAA,EAAS;MAAEY,QAAA,EAAU;IAAK;IACpDT,WAAA,EAAaX,gBAAA,CAAiBW,WAAA;IAC9BC,KAAA,EAAOZ,gBAAA,CAAiBY,KAAA;EAC1B;AACF"}
+{"version":3,"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","avatarSize","required","defaultProps"],"sources":["../../../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, content, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    content: resolveShorthand(content, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,cAAc,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ;AAE3C;;;;;;;;;AASA,OAAO,MAAMC,iCAAA,GAAoCA,CAC/CC,KAAA,EACAC,GAAA,KAC+B;EAC/B,MAAM;IAAEC,KAAA;IAAOC,OAAA;IAASC,QAAA;IAAUC,IAAA;IAAMC;EAAW,CAAE,GAAGN,KAAA;EAExD,MAAMO,mBAAA,GAAsBT,0BAAA,CAC1B;IACE,GAAGE,KAAK;IACRQ,UAAA,EAAY,IAAI;IAChBC,SAAA,EAAW;EACb,GACAR,GAAA;EAGF,MAAMS,IAAA,GAAOd,uBAAA,CAAwBe,GAAA,IAAOA,GAAA,CAAID,IAAI;EACpD,OAAO;IACL,GAAGH,mBAAmB;IACtBK,UAAA,EAAY;MACVC,UAAA,EAAY;MACZV,OAAA,EAAS;MACTE,IAAA,EAAM;MACNC,WAAA,EAAa;MACbQ,IAAA,EAAM;MACNZ,KAAA,EAAO;IACT;IACAa,UAAA,EAAYlB,cAAc,CAACa,IAAA,CAAK;IAChCL,IAAA,EAAMV,gBAAA,CAAiBU,IAAA,EAAM;MAAEW,QAAA,EAAU,IAAI;MAAEC,YAAA,EAAc;QAAEb;MAAS;IAAE;IAC1EF,KAAA,EAAOP,gBAAA,CAAiBO,KAAA,EAAO;MAAEc,QAAA,EAAU;IAAK;IAChDb,OAAA,EAASR,gBAAA,CAAiBQ,OAAA,EAAS;MAAEa,QAAA,EAAU;IAAK;IACpDV,WAAA,EAAaX,gBAAA,CAAiBW,WAAA;EAChC;AACF"}

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

@@ -1,11 +1,13 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
 export const treeItemPersonaLayoutClassNames = {
   root: 'fui-TreeItemPersonaLayout',
+  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
   media: 'fui-TreeItemPersonaLayout__media',
   content: 'fui-TreeItemPersonaLayout__content',
   description: 'fui-TreeItemPersonaLayout__description',
-  aside: 'fui-TreeItemPersonaLayout__aside',
   main: 'fui-TreeItemPersonaLayout__main'
 };
 /**
@@ -13,16 +15,33 @@ export const treeItemPersonaLayoutClassNames = {
  */
 const useRootStyles = /*#__PURE__*/__styles({
   base: {
-    a9b677: "fly5x3f",
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
     Bhrd7zp: "figsok6",
-    Bg96gwp: "f1i3iumi"
+    Bg96gwp: "f1i3iumi",
+    Ijaq50: "f15ws6j",
+    Br312pm: "f135tdbu",
+    nk6f5a: "f2e2169",
+    Bw0ie65: "f4rqp6x",
+    lj723h: "flvvhsy",
+    ecr2s2: "f1wfn5kd",
+    zt0xaq: "f5na5aj",
+    Bi91k9c: "fnwyq0v",
+    Jwef8y: "f1t94bn6",
+    tbva4x: "f1oboesa"
+  },
+  leaf: {
+    uwmqm3: ["f1k1erfc", "faevyjx"]
+  },
+  branch: {
+    uwmqm3: ["fo100m9", "f6yw3pu"]
   }
 }, {
-  d: [".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f15ws6j{grid-row-start:layout;}", ".f135tdbu{grid-column-start:layout;}", ".f2e2169{grid-row-end:layout;}", ".f4rqp6x{grid-column-end:layout;}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}"],
+  a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"],
+  h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]
 });
 /**
  * Styles for the expand icon slot
@@ -66,19 +85,27 @@ const useDescriptionStyles = /*#__PURE__*/__styles({
 }, {
   d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
 });
-const useAsideStyles = /*#__PURE__*/__styles({
+/**
+ * Styles for the expand icon slot
+ */
+const useExpandIconStyles = /*#__PURE__*/__styles({
   base: {
     mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
-    Huce71: "fz5stix",
-    z189sj: ["fw5db7e", "f1uw59to"],
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fy9rknc",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "fwrc4pm"
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    Bf4jedk: "f17fgpbq",
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "f11d4kpn",
+    Bh6795r: "f1jhi6b8",
+    Bnnss6s: "fi64zpg",
+    xawz: "f1rmlqtg",
+    z8tnut: "f1ywm7hm",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f14wxoun",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fz5stix{white-space:nowrap;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
 });
 /**
  * Apply styling to the TreeItemPersonaLayout slots based on the state
@@ -88,8 +115,9 @@ export const useTreeItemPersonaLayoutStyles_unstable = state => {
   const mediaStyles = useMediaStyles();
   const contentStyles = useContentStyles();
   const descriptionStyles = useDescriptionStyles();
-  const asideStyles = useAsideStyles();
-  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);
+  const expandIconStyles = useExpandIconStyles();
+  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
+  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);
   state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
   if (state.content) {
     state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);
@@ -100,9 +128,9 @@ export const useTreeItemPersonaLayoutStyles_unstable = state => {
   if (state.description) {
     state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
   }
-  if (state.aside) {
-    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
+  if (state.expandIcon) {
+    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
   }
   return state;
 };
-//# sourceMappingURL=useTreeItemPersonaLayoutStyles.js.map
+//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","expandIcon","media","content","description","main","useRootStyles","base","mc9l5x","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useDescriptionStyles","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","contentStyles","descriptionStyles","expandIconStyles","itemType","ctx","className"],"sources":["../../../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts"],"sourcesContent":["import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n  root: 'fui-TreeItemPersonaLayout',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  media: 'fui-TreeItemPersonaLayout__media',\n  content: 'fui-TreeItemPersonaLayout__content',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignItems: 'center',\n    ...typographyStyles.body1,\n    ...shorthands.gridArea('layout'),\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      // TODO: stop using treeItemClassNames.expandIcon for styling\n      [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n      },\n    },\n    ':hover': {\n      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      // TODO: stop using treeItemClassNames.expandIcon  for styling\n      [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n        color: tokens.colorNeutralForeground3Hover,\n      },\n    },\n  },\n  leaf: {\n    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  branch: {\n    paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '32px',\n    height: '32px',\n    ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS),\n  },\n});\n\nconst useContentStyles = makeStyles({\n  base: {\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(\n      tokens.spacingVerticalMNudge,\n      tokens.spacingHorizontalXS,\n      tokens.spacingVerticalMNudge,\n      tokens.spacingHorizontalS,\n    ),\n    ...shorthands.gap(tokens.spacingVerticalNone, tokens.spacingHorizontalNone),\n  },\n});\n\nconst useDescriptionStyles = makeStyles({\n  base: {\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '24px',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.flex(0, 0, 'auto'),\n    ...shorthands.padding(tokens.spacingVerticalXS, 0),\n  },\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n  const rootStyles = useRootStyles();\n  const mediaStyles = useMediaStyles();\n  const contentStyles = useContentStyles();\n  const descriptionStyles = useDescriptionStyles();\n  const expandIconStyles = useExpandIconStyles();\n\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n  state.root.className = mergeClasses(\n    treeItemPersonaLayoutClassNames.root,\n    rootStyles.base,\n    rootStyles[itemType],\n    state.root.className,\n  );\n\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.content,\n      contentStyles.base,\n      state.content.className,\n    );\n  }\n  if (state.main) {\n    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.description,\n      descriptionStyles.base,\n      state.description.className,\n    );\n  }\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.expandIcon,\n      expandIconStyles.base,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/contexts/treeContext.js

@@ -3,8 +3,7 @@ import { emptyImmutableSet } from '../utils/ImmutableSet';
 const defaultContextValue = {
   level: 0,
   openItems: emptyImmutableSet,
-  requestOpenChange: noop,
-  requestNavigation: noop,
+  requestTreeResponse: noop,
   appearance: 'subtle',
   size: 'medium'
 };

package/lib/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestOpenChange","noop","requestNavigation","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"sources":["../../src/contexts/treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange(data: TreeOpenChangeData<unknown>): void;\n  requestNavigation(data: TreeNavigationData_unstable<unknown>): void;\n};\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestOpenChange: noop,\n  requestNavigation: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ;AAE5E,SAASC,iBAAiB,QAAsB;AAchD,MAAMC,mBAAA,GAAwC;EAC5CC,KAAA,EAAO;EACPC,SAAA,EAAWH,iBAAA;EACXI,iBAAA,EAAmBC,IAAA;EACnBC,iBAAA,EAAmBD,IAAA;EACnBE,UAAA,EAAY;EACZC,IAAA,EAAM;AACR;AAEA,SAASH,KAAA,EAAO;EACd;AAGF,OAAO,MAAMI,WAAA,gBAAqDX,aAAA,CAChEY,SAAA;AAGF,OAAO,MAAM;EAAEC,QAAA,EAAUC;AAAY,CAAE,GAAGH,WAAA;AAC1C,OAAO,MAAMI,uBAAA,GAA8BC,QAAA,IACzCf,kBAAA,CAAmBU,WAAA,EAAa,CAACM,GAAA,GAAMd,mBAAmB,KAAKa,QAAA,CAASC,GAAA"}
+{"version":3,"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"sources":["../../src/contexts/treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest<unknown>): void;\n};\n\nexport type TreeItemRequest<Value> = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData<Value>, 'open' | 'target'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable<Value>, 'target'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ;AAE5E,SAASC,iBAAiB,QAAsB;AAsBhD,MAAMC,mBAAA,GAAwC;EAC5CC,KAAA,EAAO;EACPC,SAAA,EAAWH,iBAAA;EACXI,mBAAA,EAAqBC,IAAA;EACrBC,UAAA,EAAY;EACZC,IAAA,EAAM;AACR;AAEA,SAASF,KAAA,EAAO;EACd;AAGF,OAAO,MAAMG,WAAA,gBAAqDV,aAAA,CAChEW,SAAA;AAGF,OAAO,MAAM;EAAEC,QAAA,EAAUC;AAAY,CAAE,GAAGH,WAAA;AAC1C,OAAO,MAAMI,uBAAA,GAA8BC,QAAA,IACzCd,kBAAA,CAAmBS,WAAA,EAAa,CAACM,GAAA,GAAMb,mBAAmB,KAAKY,QAAA,CAASC,GAAA"}

package/lib/contexts/treeItemContext.js

@@ -1,11 +1,19 @@
 import * as React from 'react';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 const defaultContextValue = {
-  isActionsVisible: false
+  value: undefined,
+  isActionsVisible: false,
+  isAsideVisible: true,
+  actionsRef: /*#__PURE__*/React.createRef(),
+  expandIconRef: /*#__PURE__*/React.createRef(),
+  layoutRef: /*#__PURE__*/React.createRef(),
+  subtreeRef: /*#__PURE__*/React.createRef(),
+  itemType: 'leaf',
+  open: false
 };
-export const TreeItemContext = /*#__PURE__*/React.createContext(undefined);
+export const TreeItemContext = /*#__PURE__*/createContext(undefined);
 export const {
   Provider: TreeItemProvider
 } = TreeItemContext;
-var _React_useContext;
-export const useTreeItemContext_unstable = () => (_React_useContext = React.useContext(TreeItemContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultContextValue;
+export const useTreeItemContext_unstable = selector => useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));
 //# sourceMappingURL=treeItemContext.js.map

package/lib/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","defaultContextValue","isActionsVisible","TreeItemContext","createContext","undefined","Provider","TreeItemProvider","_React_useContext","useTreeItemContext_unstable","useContext"],"sources":["../../src/contexts/treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  isActionsVisible: false,\n};\n\nexport const TreeItemContext: React.Context<TreeItemContextValue | undefined> = React.createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = (): TreeItemContextValue =>\n  React.useContext(TreeItemContext) ?? defaultContextValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAMvB,MAAMC,mBAAA,GAA4C;EAChDC,gBAAA,EAAkB;AACpB;AAEA,OAAO,MAAMC,eAAA,gBAAmEH,KAAA,CAAMI,aAAa,CAEjGC,SAAA;AAEF,OAAO,MAAM;EAAEC,QAAA,EAAUC;AAAgB,CAAE,GAAGJ,eAAA;IAE5CK,iBAAA;AADF,OAAO,MAAMC,2BAAA,GAA8BA,CAAA,KACzC,CAAAD,iBAAA,GAAAR,KAAA,CAAMU,UAAU,CAACP,eAAA,eAAjBK,iBAAA,cAAAA,iBAAA,GAAqCP,mBAAmB"}
+{"version":3,"names":["React","createContext","useContextSelector","defaultContextValue","value","undefined","isActionsVisible","isAsideVisible","actionsRef","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","TreeItemContext","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"sources":["../../src/contexts/treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  value: unknown;\n  itemType: TreeItemType;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: undefined,\n  isActionsVisible: false,\n  isAsideVisible: true,\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ;AAe5E,MAAMC,mBAAA,GAA4C;EAChDC,KAAA,EAAOC,SAAA;EACPC,gBAAA,EAAkB,KAAK;EACvBC,cAAA,EAAgB,IAAI;EACpBC,UAAA,eAAYR,KAAA,CAAMS,SAAS;EAC3BC,aAAA,eAAeV,KAAA,CAAMS,SAAS;EAC9BE,SAAA,eAAWX,KAAA,CAAMS,SAAS;EAC1BG,UAAA,eAAYZ,KAAA,CAAMS,SAAS;EAC3BI,QAAA,EAAU;EACVC,IAAA,EAAM;AACR;AAEA,OAAO,MAAMC,eAAA,gBAA6Dd,aAAA,CAExEI,SAAA;AAEF,OAAO,MAAM;EAAEW,QAAA,EAAUC;AAAgB,CAAE,GAAGF,eAAA;AAC9C,OAAO,MAAMG,2BAAA,GAAkCC,QAAA,IAC7CjB,kBAAA,CAAmBa,eAAA,EAAiB,CAACK,GAAA,GAAMjB,mBAAmB,KAAKgB,QAAA,CAASC,GAAA"}

package/lib/hooks/useFlatTree.js

@@ -40,19 +40,19 @@ export function useFlatTree_unstable(flatTreeItemProps, options = {}) {
     const item = flatTreeItems.get(data.value);
     if (item) {
       switch (data.type) {
-        case treeDataTypes.typeAhead:
+        case treeDataTypes.TypeAhead:
           return item;
-        case treeDataTypes.arrowLeft:
+        case treeDataTypes.ArrowLeft:
           return flatTreeItems.get(item.parentValue);
-        case treeDataTypes.arrowRight:
+        case treeDataTypes.ArrowRight:
           return visibleItems[item.index + 1];
-        case treeDataTypes.end:
+        case treeDataTypes.End:
           return visibleItems[visibleItems.length - 1];
-        case treeDataTypes.home:
+        case treeDataTypes.Home:
           return visibleItems[0];
-        case treeDataTypes.arrowDown:
+        case treeDataTypes.ArrowDown:
           return visibleItems[item.index + 1];
-        case treeDataTypes.arrowUp:
+        case treeDataTypes.ArrowUp:
           return visibleItems[item.index - 1];
       }
     }

package/lib/hooks/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEventCallback","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","handleOpenChange","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","typeAhead","arrowLeft","parentValue","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","items"],"sources":["../../src/hooks/useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\nimport type {\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree';\nimport type { TreeItemProps } from '../TreeItem';\n\nexport type FlatTreeItemProps<Value = string> = Omit<TreeItemProps, 'value'> & {\n  value: Value;\n  parentValue?: Value;\n};\n\nexport type FlatTreeItem<Value = string> = Readonly<MutableFlatTreeItem<Value>>;\n\n/**\n * @internal\n * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator\n * to ensure required properties when building a FlatTreeITem\n */\nexport type MutableFlatTreeItem<Value = string> = {\n  parentValue?: Value;\n  childrenSize: number;\n  index: number;\n  value: Value;\n  level: number;\n  ref: React.RefObject<HTMLDivElement>;\n  getTreeItemProps(): Required<\n    Pick<TreeItemProps<Value>, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>\n  > &\n    TreeItemProps<Value>;\n};\n\nexport type FlatTreeProps<Value = string> = Required<\n  Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { ref: React.Ref<HTMLDivElement> }\n>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree<Value = string> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): FlatTreeProps<Value>;\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && document.getElementById(nextItem.id)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable<Value>): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: FlatTreeItem<Value>[],\n    data: TreeNavigationData_unstable<Value>,\n  ): FlatTreeItem<Value> | undefined;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<FlatTreeItem<Value>>;\n};\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable<Value = string>(\n  flatTreeItemProps: FlatTreeItemProps<Value>[],\n  options: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'> = {},\n): FlatTree<Value> {\n  const [openItems, updateOpenItems] = useOpenItemsState(options);\n  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData<Value>) => {\n    options.onOpenChange?.(event, data);\n    if (!event.isDefaultPrevented()) {\n      updateOpenItems(data);\n    }\n    event.preventDefault();\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Value>) => {\n      options.onNavigation_unstable?.(event, data);\n      if (!event.isDefaultPrevented()) {\n        navigate(data);\n      }\n      event.preventDefault();\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: FlatTreeItem<Value>[], data: TreeNavigationData_unstable<Value>) => {\n      const item = flatTreeItems.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.typeAhead:\n            return item;\n          case treeDataTypes.arrowLeft:\n            return flatTreeItems.get(item.parentValue!);\n          case treeDataTypes.arrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.end:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.home:\n            return visibleItems[0];\n          case treeDataTypes.arrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.arrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref: navigationRef as React.Ref<HTMLDivElement>,\n      openItems,\n      onOpenChange: handleOpenChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems],\n  );\n\n  const items = React.useCallback(\n    () => VisibleFlatTreeItemGenerator<Value>(openItems, flatTreeItems),\n    [openItems, flatTreeItems],\n  );\n\n  return React.useMemo(\n    () => ({ navigate, getTreeProps, getNextNavigableItem, items }),\n    [navigate, getTreeProps, getNextNavigableItem, items],\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["useEventCallback","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","handleOpenChange","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getTreeProps","useCallback","ref","items"],"sources":["../../src/hooks/useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\nimport type {\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree';\nimport type { TreeItemProps } from '../TreeItem';\nimport { ImmutableSet } from '../utils/ImmutableSet';\n\nexport type FlatTreeItemProps<Value = string> = Omit<TreeItemProps<Value>, 'itemType'> &\n  Partial<Pick<TreeItemProps<Value>, 'itemType'>> & {\n    value: Value;\n    parentValue?: Value;\n  };\n\n/**\n * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to\n * `useFlatTree` but with extra information that might be useful on flat tree scenarios\n */\nexport type FlatTreeItem<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {\n  index: number;\n  level: number;\n  childrenSize: number;\n  value: Props['value'];\n  parentValue: Props['parentValue'];\n  /**\n   * A reference to the element that will render the `TreeItem`,\n   * this is necessary for nodes with parents (to ensure child to parent navigation),\n   * if a node has no parent then this reference will be null.\n   */\n  ref: React.RefObject<HTMLDivElement>;\n  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &\n    Omit<Props, 'parentValue'>;\n};\n\nexport type FlatTreeProps<Value = string> = Required<\n  Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>\n> & {\n  ref: React.Ref<HTMLDivElement>;\n  openItems: ImmutableSet<Value>;\n};\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): FlatTreeProps<Props['value']>;\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && document.getElementById(nextItem.id)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable<Props['value']>): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: FlatTreeItem<Props>[],\n    data: TreeNavigationData_unstable<Props['value']>,\n  ): FlatTreeItem<Props> | undefined;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<FlatTreeItem<Props>>;\n};\n\ntype FlatTreeOptions<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = Pick<\n  TreeProps<Props['value']>,\n  'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'\n>;\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(\n  flatTreeItemProps: Props[],\n  options: FlatTreeOptions<Props> = {},\n): FlatTree<Props> {\n  const [openItems, updateOpenItems] = useOpenItemsState<Props['value']>(options);\n  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData<Props['value']>) => {\n    options.onOpenChange?.(event, data);\n    if (!event.isDefaultPrevented()) {\n      updateOpenItems(data);\n    }\n    event.preventDefault();\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Props['value']>) => {\n      options.onNavigation_unstable?.(event, data);\n      if (!event.isDefaultPrevented()) {\n        navigate(data);\n      }\n      event.preventDefault();\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable<Props['value']>) => {\n      const item = flatTreeItems.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return flatTreeItems.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref: navigationRef as React.Ref<HTMLDivElement>,\n      openItems,\n      onOpenChange: handleOpenChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems],\n  );\n\n  const items = React.useCallback(\n    () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),\n    [openItems, flatTreeItems],\n  );\n\n  return React.useMemo(\n    () => ({ navigate, getTreeProps, getNextNavigableItem, items }),\n    [navigate, getTreeProps, getNextNavigableItem, items],\n  );\n}\n"],"mappings":"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"}

package/lib/hooks/useFlatTreeNavigation.js

@@ -19,26 +19,26 @@ export function useFlatTreeNavigation(flatTreeItems) {
     }
     const treeItemWalker = treeItemWalkerRef.current;
     switch (data.type) {
-      case treeDataTypes.click:
+      case treeDataTypes.Click:
         return data.target;
-      case treeDataTypes.typeAhead:
+      case treeDataTypes.TypeAhead:
         treeItemWalker.currentElement = data.target;
         return nextTypeAheadElement(treeItemWalker, data.event.key);
-      case treeDataTypes.arrowLeft:
+      case treeDataTypes.ArrowLeft:
         return parentElement(flatTreeItems, data.value);
-      case treeDataTypes.arrowRight:
+      case treeDataTypes.ArrowRight:
         treeItemWalker.currentElement = data.target;
         return firstChild(data.target, treeItemWalker);
-      case treeDataTypes.end:
+      case treeDataTypes.End:
         treeItemWalker.currentElement = treeItemWalker.root;
         return treeItemWalker.lastChild();
-      case treeDataTypes.home:
+      case treeDataTypes.Home:
         treeItemWalker.currentElement = treeItemWalker.root;
         return treeItemWalker.firstChild();
-      case treeDataTypes.arrowDown:
+      case treeDataTypes.ArrowDown:
         treeItemWalker.currentElement = data.target;
         return treeItemWalker.nextElement();
-      case treeDataTypes.arrowUp:
+      case treeDataTypes.ArrowUp:
         treeItemWalker.currentElement = data.target;
         return treeItemWalker.previousElement();
     }

package/lib/hooks/useFlatTreeNavigation.js.map

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

package/lib/hooks/useNestedTreeNavigation.js

@@ -15,27 +15,27 @@ export function useNestedTreeNavigation() {
     }
     const treeItemWalker = walkerRef.current;
     switch (data.type) {
-      case treeDataTypes.click:
+      case treeDataTypes.Click:
         return data.target;
-      case treeDataTypes.typeAhead:
+      case treeDataTypes.TypeAhead:
         treeItemWalker.currentElement = data.target;
         return nextTypeAheadElement(treeItemWalker, data.event.key);
-      case treeDataTypes.arrowLeft:
+      case treeDataTypes.ArrowLeft:
         treeItemWalker.currentElement = data.target;
         return treeItemWalker.parentElement();
-      case treeDataTypes.arrowRight:
+      case treeDataTypes.ArrowRight:
         treeItemWalker.currentElement = data.target;
         return treeItemWalker.firstChild();
-      case treeDataTypes.end:
+      case treeDataTypes.End:
         treeItemWalker.currentElement = treeItemWalker.root;
         return lastChildRecursive(treeItemWalker);
-      case treeDataTypes.home:
+      case treeDataTypes.Home:
         treeItemWalker.currentElement = treeItemWalker.root;
         return treeItemWalker.firstChild();
-      case treeDataTypes.arrowDown:
+      case treeDataTypes.ArrowDown:
         treeItemWalker.currentElement = data.target;
         return treeItemWalker.nextElement();
-      case treeDataTypes.arrowUp:
+      case treeDataTypes.ArrowUp:
         treeItemWalker.currentElement = data.target;
         return treeItemWalker.previousElement();
     }

package/lib/hooks/useNestedTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMergedRefs","useHTMLElementWalkerRef","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useNestedTreeNavigation","rove","rovingRootRef","walkerRef","rootRef","getNextElement","data","current","treeItemWalker","type","click","target","typeAhead","currentElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChildRecursive","home","arrowDown","nextElement","arrowUp","previousElement","navigate","walker","lastElement","lastChild"],"sources":["../../src/hooks/useNestedTreeNavigation.ts"],"sourcesContent":["import { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useNestedTreeNavigation() {\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n  const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return;\n    }\n    const treeItemWalker = walkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.click:\n        return data.target;\n      case treeDataTypes.typeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.arrowLeft:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.parentElement();\n      case treeDataTypes.arrowRight:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.end:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return lastChildRecursive(treeItemWalker);\n      case treeDataTypes.home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.arrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.arrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return [navigate, useMergedRefs(rootRef, rovingRootRef)] as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAE9B,SAA4BC,uBAAuB,QAAQ;AAC3D,SAASC,oBAAoB,QAAQ;AACrC,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ;AAElC,OAAO,SAASC,wBAAA,EAA0B;EACxC,MAAM,CAAC;IAAEC;EAAI,CAAE,EAAEC,aAAA,CAAc,GAAGH,iBAAA,CAAkBD,cAAA;EACpD,MAAM,CAACK,SAAA,EAAWC,OAAA,CAAQ,GAAGT,uBAAA,CAAwBG,cAAA;EAErD,MAAMO,cAAA,GAAkBC,IAAA,IAAsC;IAC5D,IAAI,CAACH,SAAA,CAAUI,OAAO,EAAE;MACtB;IACF;IACA,MAAMC,cAAA,GAAiBL,SAAA,CAAUI,OAAO;IACxC,QAAQD,IAAA,CAAKG,IAAI;MACf,KAAKZ,aAAA,CAAca,KAAK;QACtB,OAAOJ,IAAA,CAAKK,MAAM;MACpB,KAAKd,aAAA,CAAce,SAAS;QAC1BJ,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOf,oBAAA,CAAqBY,cAAA,EAAgBF,IAAA,CAAKQ,KAAK,CAACC,GAAG;MAC5D,KAAKlB,aAAA,CAAcmB,SAAS;QAC1BR,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeS,aAAa;MACrC,KAAKpB,aAAA,CAAcqB,UAAU;QAC3BV,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeW,UAAU;MAClC,KAAKtB,aAAA,CAAcuB,GAAG;QACpBZ,cAAA,CAAeK,cAAc,GAAGL,cAAA,CAAea,IAAI;QACnD,OAAOC,kBAAA,CAAmBd,cAAA;MAC5B,KAAKX,aAAA,CAAc0B,IAAI;QACrBf,cAAA,CAAeK,cAAc,GAAGL,cAAA,CAAea,IAAI;QACnD,OAAOb,cAAA,CAAeW,UAAU;MAClC,KAAKtB,aAAA,CAAc2B,SAAS;QAC1BhB,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeiB,WAAW;MACnC,KAAK5B,aAAA,CAAc6B,OAAO;QACxBlB,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAemB,eAAe;IAAA;EAE3C;EACA,SAASC,SAAStB,IAAiC,EAAE;IACnD,MAAMmB,WAAA,GAAcpB,cAAA,CAAeC,IAAA;IACnC,IAAImB,WAAA,EAAa;MACfxB,IAAA,CAAKwB,WAAA;IACP;EACF;EACA,OAAO,CAACG,QAAA,EAAUlC,aAAA,CAAcU,OAAA,EAASF,aAAA,EAAe;AAC1D;AAEA,SAASoB,mBAAmBO,MAAyB,EAAE;EACrD,IAAIC,WAAA,GAAkC,IAAI;EAC1C,IAAIL,WAAA,GAAkC,IAAI;EAC1C,OAAQA,WAAA,GAAcI,MAAA,CAAOE,SAAS,IAAK;IACzCD,WAAA,GAAcL,WAAA;EAChB;EACA,OAAOK,WAAA;AACT"}
+{"version":3,"names":["useMergedRefs","useHTMLElementWalkerRef","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useNestedTreeNavigation","rove","rovingRootRef","walkerRef","rootRef","getNextElement","data","current","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"sources":["../../src/hooks/useNestedTreeNavigation.ts"],"sourcesContent":["import { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useNestedTreeNavigation() {\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n  const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n\n  const getNextElement = (data: TreeNavigationData_unstable<unknown>) => {\n    if (!walkerRef.current) {\n      return;\n    }\n    const treeItemWalker = walkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.parentElement();\n      case treeDataTypes.ArrowRight:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.End:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return lastChildRecursive(treeItemWalker);\n      case treeDataTypes.Home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.ArrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.ArrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable<unknown>) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return [navigate, useMergedRefs(rootRef, rovingRootRef)] as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAE9B,SAA4BC,uBAAuB,QAAQ;AAC3D,SAASC,oBAAoB,QAAQ;AACrC,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ;AAElC,OAAO,SAASC,wBAAA,EAA0B;EACxC,MAAM,CAAC;IAAEC;EAAI,CAAE,EAAEC,aAAA,CAAc,GAAGH,iBAAA,CAAkBD,cAAA;EACpD,MAAM,CAACK,SAAA,EAAWC,OAAA,CAAQ,GAAGT,uBAAA,CAAwBG,cAAA;EAErD,MAAMO,cAAA,GAAkBC,IAAA,IAA+C;IACrE,IAAI,CAACH,SAAA,CAAUI,OAAO,EAAE;MACtB;IACF;IACA,MAAMC,cAAA,GAAiBL,SAAA,CAAUI,OAAO;IACxC,QAAQD,IAAA,CAAKG,IAAI;MACf,KAAKZ,aAAA,CAAca,KAAK;QACtB,OAAOJ,IAAA,CAAKK,MAAM;MACpB,KAAKd,aAAA,CAAce,SAAS;QAC1BJ,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOf,oBAAA,CAAqBY,cAAA,EAAgBF,IAAA,CAAKQ,KAAK,CAACC,GAAG;MAC5D,KAAKlB,aAAA,CAAcmB,SAAS;QAC1BR,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeS,aAAa;MACrC,KAAKpB,aAAA,CAAcqB,UAAU;QAC3BV,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeW,UAAU;MAClC,KAAKtB,aAAA,CAAcuB,GAAG;QACpBZ,cAAA,CAAeK,cAAc,GAAGL,cAAA,CAAea,IAAI;QACnD,OAAOC,kBAAA,CAAmBd,cAAA;MAC5B,KAAKX,aAAA,CAAc0B,IAAI;QACrBf,cAAA,CAAeK,cAAc,GAAGL,cAAA,CAAea,IAAI;QACnD,OAAOb,cAAA,CAAeW,UAAU;MAClC,KAAKtB,aAAA,CAAc2B,SAAS;QAC1BhB,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeiB,WAAW;MACnC,KAAK5B,aAAA,CAAc6B,OAAO;QACxBlB,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAemB,eAAe;IAAA;EAE3C;EACA,SAASC,SAAStB,IAA0C,EAAE;IAC5D,MAAMmB,WAAA,GAAcpB,cAAA,CAAeC,IAAA;IACnC,IAAImB,WAAA,EAAa;MACfxB,IAAA,CAAKwB,WAAA;IACP;EACF;EACA,OAAO,CAACG,QAAA,EAAUlC,aAAA,CAAcU,OAAA,EAASF,aAAA,EAAe;AAC1D;AAEA,SAASoB,mBAAmBO,MAAyB,EAAE;EACrD,IAAIC,WAAA,GAAkC,IAAI;EAC1C,IAAIL,WAAA,GAAkC,IAAI;EAC1C,OAAQA,WAAA,GAAcI,MAAA,CAAOE,SAAS,IAAK;IACzCD,WAAA,GAAcL,WAAA;EAChB;EACA,OAAOK,WAAA;AACT"}

package/lib/hooks/useOpenItemsState.js

@@ -4,7 +4,7 @@ import { createImmutableSet, emptyImmutableSet } from '../utils/ImmutableSet';
 export function useOpenItemsState(props) {
   const [openItems, setOpenItems] = useControllableState({
     state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),
-    defaultState: React.useMemo(() => props.defaultOpenItems && createImmutableSet(props.defaultOpenItems), [props.defaultOpenItems]),
+    defaultState: props.defaultOpenItems && (() => createImmutableSet(props.defaultOpenItems)),
     initialState: emptyImmutableSet
   });
   const updateOpenItems = useEventCallback(data => setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)));

package/lib/hooks/useOpenItemsState.js.map

@@ -1 +1 @@
-{"version":3,"names":["useControllableState","useEventCallback","React","createImmutableSet","emptyImmutableSet","useOpenItemsState","props","openItems","setOpenItems","state","useMemo","defaultState","defaultOpenItems","initialState","updateOpenItems","data","currentOpenItems","createNextOpenItems","previousOpenItems","previousOpenItemsHasId","has","value","open","nextOpenItems","add","delete"],"sources":["../../src/hooks/useOpenItemsState.ts"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createImmutableSet, emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeOpenChangeData, TreeProps } from '../Tree';\n\nexport function useOpenItemsState<Value = string>(props: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems'>) {\n  const [openItems, setOpenItems] = useControllableState({\n    state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),\n    defaultState: React.useMemo(\n      () => props.defaultOpenItems && createImmutableSet(props.defaultOpenItems),\n      [props.defaultOpenItems],\n    ),\n    initialState: emptyImmutableSet,\n  });\n  const updateOpenItems = useEventCallback((data: TreeOpenChangeData<Value>) =>\n    setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)),\n  );\n  return [openItems, updateOpenItems] as const;\n}\n\nfunction createNextOpenItems<Value = string>(\n  data: TreeOpenChangeData<Value>,\n  previousOpenItems: ImmutableSet<Value>,\n): ImmutableSet<Value> {\n  const previousOpenItemsHasId = previousOpenItems.has(data.value);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = createImmutableSet(previousOpenItems);\n  return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"mappings":"AAAA,SAASA,oBAAoB,EAAEC,gBAAgB,QAAQ;AACvD,YAAYC,KAAA,MAAW;AACvB,SAASC,kBAAkB,EAAEC,iBAAiB,QAAsB;AAGpE,OAAO,SAASC,kBAAkCC,KAA+D,EAAE;EACjH,MAAM,CAACC,SAAA,EAAWC,YAAA,CAAa,GAAGR,oBAAA,CAAqB;IACrDS,KAAA,EAAOP,KAAA,CAAMQ,OAAO,CAAC,MAAMJ,KAAA,CAAMC,SAAS,IAAIJ,kBAAA,CAAmBG,KAAA,CAAMC,SAAS,GAAG,CAACD,KAAA,CAAMC,SAAS,CAAC;IACpGI,YAAA,EAAcT,KAAA,CAAMQ,OAAO,CACzB,MAAMJ,KAAA,CAAMM,gBAAgB,IAAIT,kBAAA,CAAmBG,KAAA,CAAMM,gBAAgB,GACzE,CAACN,KAAA,CAAMM,gBAAgB,CAAC;IAE1BC,YAAA,EAAcT;EAChB;EACA,MAAMU,eAAA,GAAkBb,gBAAA,CAAkBc,IAAA,IACxCP,YAAA,CAAaQ,gBAAA,IAAoBC,mBAAA,CAAoBF,IAAA,EAAMC,gBAAA;EAE7D,OAAO,CAACT,SAAA,EAAWO,eAAA,CAAgB;AACrC;AAEA,SAASG,oBACPF,IAA+B,EAC/BG,iBAAsC,EACjB;EACrB,MAAMC,sBAAA,GAAyBD,iBAAA,CAAkBE,GAAG,CAACL,IAAA,CAAKM,KAAK;EAC/D,IAAIN,IAAA,CAAKO,IAAI,GAAGH,sBAAA,GAAyB,CAACA,sBAAsB,EAAE;IAChE,OAAOD,iBAAA;EACT;EACA,MAAMK,aAAA,GAAgBpB,kBAAA,CAAmBe,iBAAA;EACzC,OAAOH,IAAA,CAAKO,IAAI,GAAGC,aAAA,CAAcC,GAAG,CAACT,IAAA,CAAKM,KAAK,IAAIE,aAAA,CAAcE,MAAM,CAACV,IAAA,CAAKM,KAAK,CAAC;AACrF"}
+{"version":3,"names":["useControllableState","useEventCallback","React","createImmutableSet","emptyImmutableSet","useOpenItemsState","props","openItems","setOpenItems","state","useMemo","defaultState","defaultOpenItems","initialState","updateOpenItems","data","currentOpenItems","createNextOpenItems","previousOpenItems","previousOpenItemsHasId","has","value","open","nextOpenItems","add","delete"],"sources":["../../src/hooks/useOpenItemsState.ts"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createImmutableSet, emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeOpenChangeData, TreeProps } from '../Tree';\n\nexport function useOpenItemsState<Value = string>(props: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems'>) {\n  const [openItems, setOpenItems] = useControllableState({\n    state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),\n    defaultState: props.defaultOpenItems && (() => createImmutableSet(props.defaultOpenItems)),\n    initialState: emptyImmutableSet,\n  });\n  const updateOpenItems = useEventCallback((data: TreeOpenChangeData<Value>) =>\n    setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)),\n  );\n  return [openItems, updateOpenItems] as const;\n}\n\nfunction createNextOpenItems<Value = string>(\n  data: TreeOpenChangeData<Value>,\n  previousOpenItems: ImmutableSet<Value>,\n): ImmutableSet<Value> {\n  const previousOpenItemsHasId = previousOpenItems.has(data.value);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = createImmutableSet(previousOpenItems);\n  return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"mappings":"AAAA,SAASA,oBAAoB,EAAEC,gBAAgB,QAAQ;AACvD,YAAYC,KAAA,MAAW;AACvB,SAASC,kBAAkB,EAAEC,iBAAiB,QAAsB;AAGpE,OAAO,SAASC,kBAAkCC,KAA+D,EAAE;EACjH,MAAM,CAACC,SAAA,EAAWC,YAAA,CAAa,GAAGR,oBAAA,CAAqB;IACrDS,KAAA,EAAOP,KAAA,CAAMQ,OAAO,CAAC,MAAMJ,KAAA,CAAMC,SAAS,IAAIJ,kBAAA,CAAmBG,KAAA,CAAMC,SAAS,GAAG,CAACD,KAAA,CAAMC,SAAS,CAAC;IACpGI,YAAA,EAAcL,KAAA,CAAMM,gBAAgB,KAAK,MAAMT,kBAAA,CAAmBG,KAAA,CAAMM,gBAAgB;IACxFC,YAAA,EAAcT;EAChB;EACA,MAAMU,eAAA,GAAkBb,gBAAA,CAAkBc,IAAA,IACxCP,YAAA,CAAaQ,gBAAA,IAAoBC,mBAAA,CAAoBF,IAAA,EAAMC,gBAAA;EAE7D,OAAO,CAACT,SAAA,EAAWO,eAAA,CAAgB;AACrC;AAEA,SAASG,oBACPF,IAA+B,EAC/BG,iBAAsC,EACjB;EACrB,MAAMC,sBAAA,GAAyBD,iBAAA,CAAkBE,GAAG,CAACL,IAAA,CAAKM,KAAK;EAC/D,IAAIN,IAAA,CAAKO,IAAI,GAAGH,sBAAA,GAAyB,CAACA,sBAAsB,EAAE;IAChE,OAAOD,iBAAA;EACT;EACA,MAAMK,aAAA,GAAgBpB,kBAAA,CAAmBe,iBAAA;EACzC,OAAOH,IAAA,CAAKO,IAAI,GAAGC,aAAA,CAAcC,GAAG,CAACT,IAAA,CAAKM,KAAK,IAAIE,aAAA,CAAcE,MAAM,CAACV,IAAA,CAAKM,KAAK,CAAC;AACrF"}

package/lib/index.js

@@ -4,6 +4,7 @@ export { treeItemLevelToken } from './utils/tokens';
 export { TreeItem, treeItemClassNames, renderTreeItem_unstable, useTreeItemStyles_unstable, useTreeItem_unstable } from './TreeItem';
 export { TreeItemLayout, treeItemLayoutClassNames, renderTreeItemLayout_unstable, useTreeItemLayoutStyles_unstable, useTreeItemLayout_unstable } from './TreeItemLayout';
 export { TreeItemPersonaLayout, treeItemPersonaLayoutClassNames, renderTreeItemPersonaLayout_unstable, useTreeItemPersonaLayoutStyles_unstable, useTreeItemPersonaLayout_unstable } from './TreeItemPersonaLayout';
+export { TreeItemAside, treeItemAsideClassNames, renderTreeItemAside_unstable, useTreeItemAsideStyles_unstable, useTreeItemAside_unstable } from './TreeItemAside';
 export { useFlatTree_unstable } from './hooks/index';
 export { flattenTree_unstable } from './utils/flattenTree';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

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

package/lib/utils/createFlatTreeItems.js

@@ -5,7 +5,7 @@ import * as React from 'react';
  */
 export function createFlatTreeItems(flatTreeItemProps) {
   const root = createFlatTreeRootItem();
-  const itemsPerValue = new Map([[flatTreeRootId, root]]);
+  const itemsPerValue = new Map([[root.value, root]]);
   const items = [];
   for (let index = 0; index < flatTreeItemProps.length; index++) {
     const {
@@ -21,7 +21,8 @@ export function createFlatTreeItems(flatTreeItemProps) {
       }
       break;
     }
-    const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentValue) !== treeItemProps.value;
+    var _treeItemProps_itemType;
+    const itemType = (_treeItemProps_itemType = treeItemProps.itemType) !== null && _treeItemProps_itemType !== void 0 ? _treeItemProps_itemType : treeItemProps.value === undefined || (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentValue) !== treeItemProps.value ? 'leaf' : 'branch';
     var _currentParent_level;
     const currentLevel = ((_currentParent_level = currentParent.level) !== null && _currentParent_level !== void 0 ? _currentParent_level : 0) + 1;
     const currentChildrenSize = ++currentParent.childrenSize;
@@ -33,7 +34,7 @@ export function createFlatTreeItems(flatTreeItemProps) {
         'aria-level': currentLevel,
         'aria-posinset': currentChildrenSize,
         'aria-setsize': currentParent.childrenSize,
-        leaf: isLeaf,
+        itemType,
         // a reference to every parent element is necessary to ensure navigation
         ref: flatTreeItem.childrenSize > 0 ? ref : undefined
       }),
@@ -46,13 +47,14 @@ export function createFlatTreeItems(flatTreeItemProps) {
     itemsPerValue.set(flatTreeItem.value, flatTreeItem);
     items.push(flatTreeItem);
   }
-  return {
+  const flatTreeItems = {
     root,
     size: items.length,
     getByIndex: index => items[index],
-    get: id => itemsPerValue.get(id),
-    set: (id, value) => itemsPerValue.set(id, value)
+    get: key => itemsPerValue.get(key),
+    set: (key, value) => itemsPerValue.set(key, value)
   };
+  return flatTreeItems;
 }
 export const flatTreeRootId = '__fuiFlatTreeRoot';
 function createFlatTreeRootItem() {
@@ -61,6 +63,7 @@ function createFlatTreeRootItem() {
       current: null
     },
     value: flatTreeRootId,
+    parentValue: undefined,
     getTreeItemProps: () => {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
@@ -71,7 +74,7 @@ function createFlatTreeRootItem() {
         'aria-setsize': -1,
         'aria-level': -1,
         'aria-posinset': -1,
-        leaf: true
+        itemType: 'branch'
       };
     },
     childrenSize: 0,
@@ -89,13 +92,12 @@ function createFlatTreeRootItem() {
 export function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {
   for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {
     const item = flatTreeItems.getByIndex(index);
-    var _flatTreeItems_get;
-    const parent = item.parentValue ? (_flatTreeItems_get = flatTreeItems.get(item.parentValue)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;
     if (isItemVisible(item, openItems, flatTreeItems)) {
       item.index = visibleIndex++;
       yield item;
     } else {
-      index += parent.childrenSize - 1 + item.childrenSize;
+      // Jump the amount of children the current item has, since those items will also be hidden
+      index += item.childrenSize;
     }
   }
 }