@fluentui/react-tree 9.0.0-beta.26 → 9.0.0-beta.27

package/lib/{hooks → components/FlatTree}/useFlatControllableCheckedItems.js

@@ -1,34 +1,21 @@
 import { useControllableState } from '@fluentui/react-utilities';
-import { ImmutableMap } from '../utils/ImmutableMap';
+import { ImmutableMap } from '../../utils/ImmutableMap';
 import * as React from 'react';
-function initializeMap(iterable) {
-    const map = new Map();
-    if (iterable === undefined) {
-        return ImmutableMap.empty;
-    }
-    for (const item of iterable){
-        if (Array.isArray(item)) {
-            map.set(item[0], item[1]);
-        } else {
-            map.set(item, true);
-        }
-    }
-    return ImmutableMap.dangerouslyCreate_unstable(map);
-}
+import { createCheckedItems } from '../../utils/createCheckedItems';
 export function useFlatControllableCheckedItems(props) {
     const [checkedItems, setCheckedItems] = useControllableState({
         initialState: ImmutableMap.empty,
-        state: React.useMemo(()=>props.checkedItems && initializeMap(props.checkedItems), [
+        state: React.useMemo(()=>props.checkedItems && createCheckedItems(props.checkedItems), [
             props.checkedItems
         ]),
-        defaultState: ()=>initializeMap(props.defaultCheckedItems)
+        defaultState: ()=>createCheckedItems(props.defaultCheckedItems)
     });
     return [
         checkedItems,
         setCheckedItems
     ];
 }
-export function createNextFlatCheckedItems(data, previousCheckedItems, flatTreeItems) {
+export function createNextFlatCheckedItems(data, previousCheckedItems, virtualTree) {
     if (data.selectionMode === 'single') {
         return ImmutableMap.create([
             [
@@ -37,28 +24,28 @@ export function createNextFlatCheckedItems(data, previousCheckedItems, flatTreeI
             ]
         ]);
     }
-    const treeItem = flatTreeItems.get(data.value);
+    const treeItem = virtualTree.get(data.value);
     if (!treeItem) {
         if (process.env.NODE_ENV !== 'production') {
             // eslint-disable-next-line no-console
-            console.error(`useFlatTree: tree item ${data.value} not found`);
+            console.error(`useHeadlessFlatTree: tree item ${data.value} not found`);
         }
         return previousCheckedItems;
     }
     const nextCheckedItems = new Map(previousCheckedItems);
-    for (const children of flatTreeItems.subtree(data.value)){
+    for (const children of virtualTree.subtree(data.value)){
         nextCheckedItems.set(children.value, data.checked);
     }
     nextCheckedItems.set(data.value, data.checked);
     let isAncestorsMixed = false;
-    for (const parent of flatTreeItems.ancestors(treeItem.value)){
+    for (const parent of virtualTree.ancestors(treeItem.value)){
         // if one parent is mixed, all ancestors are mixed
         if (isAncestorsMixed) {
             nextCheckedItems.set(parent.value, 'mixed');
             continue;
         }
         const checkedChildren = [];
-        for (const child of flatTreeItems.children(parent.value)){
+        for (const child of virtualTree.children(parent.value)){
             var _nextCheckedItems_get;
             if (((_nextCheckedItems_get = nextCheckedItems.get(child.value)) !== null && _nextCheckedItems_get !== void 0 ? _nextCheckedItems_get : false) === data.checked) {
                 checkedChildren.push(child);

package/lib/components/FlatTree/useFlatControllableCheckedItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFlatControllableCheckedItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { TreeItemValue } from '../../TreeItem';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport * as React from 'react';\nimport type { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport type { TreeCheckedChangeData, TreeProps } from '../Tree/Tree.types';\n\nexport function useFlatControllableCheckedItems(props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems'>) {\n  const [checkedItems, setCheckedItems] = useControllableState({\n    initialState: ImmutableMap.empty,\n    state: React.useMemo(() => props.checkedItems && createCheckedItems(props.checkedItems), [props.checkedItems]),\n    defaultState: () => createCheckedItems(props.defaultCheckedItems),\n  });\n\n  return [checkedItems, setCheckedItems] as const;\n}\n\nexport function createNextFlatCheckedItems<Props extends HeadlessTreeItemProps>(\n  data: Pick<TreeCheckedChangeData, 'value' | 'checked' | 'selectionMode'>,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n  virtualTree: HeadlessTree<Props>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.create([[data.value, data.checked]]);\n  }\n  const treeItem = virtualTree.get(data.value);\n  if (!treeItem) {\n    if (process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(`useHeadlessFlatTree: tree item ${data.value} not found`);\n    }\n    return previousCheckedItems;\n  }\n  const nextCheckedItems = new Map(previousCheckedItems);\n  for (const children of virtualTree.subtree(data.value)) {\n    nextCheckedItems.set(children.value, data.checked);\n  }\n  nextCheckedItems.set(data.value, data.checked);\n\n  let isAncestorsMixed = false;\n  for (const parent of virtualTree.ancestors(treeItem.value)) {\n    // if one parent is mixed, all ancestors are mixed\n    if (isAncestorsMixed) {\n      nextCheckedItems.set(parent.value, 'mixed');\n      continue;\n    }\n    const checkedChildren = [];\n    for (const child of virtualTree.children(parent.value)) {\n      if ((nextCheckedItems.get(child.value) ?? false) === data.checked) {\n        checkedChildren.push(child);\n      }\n    }\n    if (checkedChildren.length === parent.childrenValues.length) {\n      nextCheckedItems.set(parent.value, data.checked);\n    } else {\n      // if one parent is mixed, all ancestors are mixed\n      isAncestorsMixed = true;\n      nextCheckedItems.set(parent.value, 'mixed');\n    }\n  }\n  return ImmutableMap.dangerouslyCreate_unstable(nextCheckedItems);\n}\n"],"names":["useControllableState","ImmutableMap","React","createCheckedItems","useFlatControllableCheckedItems","props","checkedItems","setCheckedItems","initialState","empty","state","useMemo","defaultState","defaultCheckedItems","createNextFlatCheckedItems","data","previousCheckedItems","virtualTree","selectionMode","create","value","checked","treeItem","get","process","env","NODE_ENV","console","error","nextCheckedItems","Map","children","subtree","set","isAncestorsMixed","parent","ancestors","checkedChildren","child","push","length","childrenValues","dangerouslyCreate_unstable"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AAEjE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,YAAYC,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE,OAAO,SAASC,gCAAgCC,KAA8D,EAAE;IAC9G,MAAM,CAACC,cAAcC,gBAAgB,GAAGP,qBAAqB;QAC3DQ,cAAcP,aAAaQ,KAAK;QAChCC,OAAOR,MAAMS,OAAO,CAAC,IAAMN,MAAMC,YAAY,IAAIH,mBAAmBE,MAAMC,YAAY,GAAG;YAACD,MAAMC,YAAY;SAAC;QAC7GM,cAAc,IAAMT,mBAAmBE,MAAMQ,mBAAmB;IAClE;IAEA,OAAO;QAACP;QAAcC;KAAgB;AACxC,CAAC;AAED,OAAO,SAASO,2BACdC,IAAwE,EACxEC,oBAAoE,EACpEC,WAAgC,EACgB;IAChD,IAAIF,KAAKG,aAAa,KAAK,UAAU;QACnC,OAAOjB,aAAakB,MAAM,CAAC;YAAC;gBAACJ,KAAKK,KAAK;gBAAEL,KAAKM,OAAO;aAAC;SAAC;IACzD,CAAC;IACD,MAAMC,WAAWL,YAAYM,GAAG,CAACR,KAAKK,KAAK;IAC3C,IAAI,CAACE,UAAU;QACb,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,sCAAsC;YACtCC,QAAQC,KAAK,CAAC,CAAC,+BAA+B,EAAEb,KAAKK,KAAK,CAAC,UAAU,CAAC;QACxE,CAAC;QACD,OAAOJ;IACT,CAAC;IACD,MAAMa,mBAAmB,IAAIC,IAAId;IACjC,KAAK,MAAMe,YAAYd,YAAYe,OAAO,CAACjB,KAAKK,KAAK,EAAG;QACtDS,iBAAiBI,GAAG,CAACF,SAASX,KAAK,EAAEL,KAAKM,OAAO;IACnD;IACAQ,iBAAiBI,GAAG,CAAClB,KAAKK,KAAK,EAAEL,KAAKM,OAAO;IAE7C,IAAIa,mBAAmB,KAAK;IAC5B,KAAK,MAAMC,UAAUlB,YAAYmB,SAAS,CAACd,SAASF,KAAK,EAAG;QAC1D,kDAAkD;QAClD,IAAIc,kBAAkB;YACpBL,iBAAiBI,GAAG,CAACE,OAAOf,KAAK,EAAE;YACnC,QAAS;QACX,CAAC;QACD,MAAMiB,kBAAkB,EAAE;QAC1B,KAAK,MAAMC,SAASrB,YAAYc,QAAQ,CAACI,OAAOf,KAAK,EAAG;gBACjDS;YAAL,IAAI,AAACA,CAAAA,CAAAA,wBAAAA,iBAAiBN,GAAG,CAACe,MAAMlB,KAAK,eAAhCS,mCAAAA,wBAAqC,KAAK,AAAD,MAAOd,KAAKM,OAAO,EAAE;gBACjEgB,gBAAgBE,IAAI,CAACD;YACvB,CAAC;QACH;QACA,IAAID,gBAAgBG,MAAM,KAAKL,OAAOM,cAAc,CAACD,MAAM,EAAE;YAC3DX,iBAAiBI,GAAG,CAACE,OAAOf,KAAK,EAAEL,KAAKM,OAAO;QACjD,OAAO;YACL,kDAAkD;YAClDa,mBAAmB,IAAI;YACvBL,iBAAiBI,GAAG,CAACE,OAAOf,KAAK,EAAE;QACrC,CAAC;IACH;IACA,OAAOnB,aAAayC,0BAA0B,CAACb;AACjD,CAAC"}

package/lib/components/FlatTree/useFlatTree.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { useRootTree } from '../../hooks/useRootTree';
+export const useFlatTree_unstable = useRootTree;

package/lib/components/FlatTree/useFlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = useRootTree;\n"],"names":["React","useRootTree","useFlatTree_unstable"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAGtD,OAAO,MAAMC,uBAA6FD,YAAY"}

package/lib/{hooks → components/FlatTree}/useFlatTreeNavigation.js

@@ -1,12 +1,12 @@
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
-import { treeDataTypes } from '../utils/tokens';
-import { treeItemFilter } from '../utils/treeItemFilter';
-import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
-import { useRovingTabIndex } from './useRovingTabIndexes';
-import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../utils/getTreeItemValueFromElement';
-export function useFlatTreeNavigation(flatTreeItems) {
+import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
+import { treeDataTypes } from '../../utils/tokens';
+import { treeItemFilter } from '../../utils/treeItemFilter';
+import { useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
+import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../../utils/getTreeItemValueFromElement';
+export function useFlatTreeNavigation(virtualTree) {
     const { targetDocument  } = useFluent_unstable();
     const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);
     const [{ rove  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
@@ -22,7 +22,7 @@ export function useFlatTreeNavigation(flatTreeItems) {
                 treeItemWalker.currentElement = data.target;
                 return nextTypeAheadElement(treeItemWalker, data.event.key);
             case treeDataTypes.ArrowLeft:
-                return parentElement(flatTreeItems, data.target, treeItemWalker);
+                return parentElement(virtualTree, data.target, treeItemWalker);
             case treeDataTypes.ArrowRight:
                 treeItemWalker.currentElement = data.target;
                 return firstChild(data.target, treeItemWalker);
@@ -64,14 +64,14 @@ function firstChild(target, treeWalker) {
     }
     return null;
 }
-function parentElement(flatTreeItems, target, treeWalker) {
+function parentElement(virtualTreeItems, target, treeWalker) {
     const value = getTreeItemValueFromElement(target);
     if (value === null) {
         return null;
     }
-    const flatTreeItem = flatTreeItems.get(value);
-    if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {
-        return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}="${flatTreeItem.parentValue}"]`);
+    const virtualTreeItem = virtualTreeItems.get(value);
+    if (virtualTreeItem === null || virtualTreeItem === void 0 ? void 0 : virtualTreeItem.parentValue) {
+        return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}="${virtualTreeItem.parentValue}"]`);
     }
     return null;
 }

package/lib/components/FlatTree/useFlatTreeNavigation.js.map

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

package/lib/components/FlatTree/useFlatTreeStyles.styles.js

@@ -0,0 +1,30 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const flatTreeClassNames = {
+  root: 'fui-FlatTree'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Belr9w4: "f1j0q4x9"
+  },
+  subtree: {
+    Bh6795r: "fqerorx",
+    Bnnss6s: "f1neuvcm",
+    xawz: "f1s4axba",
+    Ijaq50: "f1na4k6z",
+    Br312pm: "fwt6ga",
+    nk6f5a: "fi45nfw",
+    Bw0ie65: "f10ort2y"
+  }
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1s4axba{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;}", ".f1na4k6z{-ms-grid-row:subtree;grid-row-start:subtree;}", ".fwt6ga{-ms-grid-column:subtree;grid-column-start:subtree;}", ".fi45nfw{-ms-grid-row-span:subtree;grid-row-end:subtree;}", ".f10ort2y{-ms-grid-column-span:subtree;grid-column-end:subtree;}"]
+});
+export const useFlatTreeStyles_unstable = state => {
+  const styles = useStyles();
+  const isSubTree = state.level > 0;
+  state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useFlatTreeStyles.styles.js.map

package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","flatTreeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","Bh6795r","Bnnss6s","xawz","Ijaq50","Br312pm","nk6f5a","Bw0ie65","d","useFlatTreeStyles_unstable","state","styles","isSubTree","level","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n    root: 'fui-FlatTree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    },\n    subtree: {\n        ...shorthands.flex(1, 1, '100%'),\n        ...shorthands.gridArea('subtree')\n    }\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const isSubTree = state.level > 0;\n    state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUjB,CAAC;AACF,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1B,MAAMgB,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACf,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEiB,SAAS,IAAID,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACf,IAAI,CAACmB,SAAS,CAAC;EAC5H,OAAOJ,KAAK;AAChB,CAAC"}

package/lib/{hooks/useFlatTree.js → components/FlatTree/useHeadlessFlatTree.js}

@@ -1,10 +1,10 @@
 import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { createFlatTreeItems } from '../utils/createFlatTreeItems';
-import { treeDataTypes } from '../utils/tokens';
+import { createHeadlessTree } from '../../utils/createHeadlessTree';
+import { treeDataTypes } from '../../utils/tokens';
 import { useFlatTreeNavigation } from './useFlatTreeNavigation';
-import { createNextOpenItems, useControllableOpenItems } from './useControllableOpenItems';
-import { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';
+import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -17,8 +17,8 @@ import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './u
  *
  * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
- */ export function useFlatTree_unstable(flatTreeItemProps, options = {}) {
-    const flatTreeItems = React.useMemo(()=>createFlatTreeItems(flatTreeItemProps), [
+ */ export function useHeadlessFlatTree_unstable(flatTreeItemProps, options = {}) {
+    const flatTreeItems = React.useMemo(()=>createHeadlessTree(flatTreeItemProps), [
         flatTreeItemProps
     ]);
     const [openItems, setOpenItems] = useControllableOpenItems(options);
@@ -28,10 +28,7 @@ import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './u
     const handleOpenChange = useEventCallback((event, data)=>{
         var _options_onOpenChange;
         (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
-        if (!event.isDefaultPrevented()) {
-            setOpenItems(createNextOpenItems(data, openItems));
-        }
-        event.preventDefault();
+        setOpenItems(createNextOpenItems(data, openItems));
     });
     const handleCheckedChange = useEventCallback((event, data)=>{
         var _options_onCheckedChange;
@@ -41,10 +38,7 @@ import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './u
     const handleNavigation = useEventCallback((event, data)=>{
         var _options_onNavigation_unstable;
         (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);
-        if (!event.isDefaultPrevented()) {
-            navigate(data);
-        }
-        event.preventDefault();
+        navigate(data);
     });
     const getNextNavigableItem = useEventCallback((visibleItems, data)=>{
         const item = flatTreeItems.get(data.value);

package/lib/components/FlatTree/useHeadlessFlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useHeadlessFlatTree.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { HeadlessTreeItem, HeadlessTreeItemProps, createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport type { TreeItemValue } from '../../TreeItem';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\nimport { FlatTreeProps } from './FlatTree.types';\nimport {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree/Tree.types';\n\nexport type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;\nexport type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;\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 HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {\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(): Required<\n    Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>\n  > & {\n    ref: React.Ref<HTMLDivElement>;\n    openItems: ImmutableSet<TreeItemValue>;\n  };\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && tree.getElementFromItem(nextItem)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: HeadlessTreeItem<Props>[],\n    data: TreeNavigationData_unstable,\n  ): HeadlessTreeItem<Props> | undefined;\n  /**\n   * similar to getElementById but for FlatTreeItems\n   */\n  getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<HeadlessTreeItem<Props>>;\n};\n\nexport type HeadlessFlatTreeOptions = Pick<\n  FlatTreeProps,\n  'onOpenChange' | 'onNavigation_unstable' | 'selectionMode' | 'onCheckedChange'\n> &\n  Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems' | 'defaultChecked'>;\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 useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(\n  flatTreeItemProps: Props[],\n  options: HeadlessFlatTreeOptions = {},\n): HeadlessFlatTree<Props> {\n  const flatTreeItems = React.useMemo(() => createHeadlessTree(flatTreeItemProps), [flatTreeItemProps]);\n  const [openItems, setOpenItems] = useControllableOpenItems(options);\n  const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n  const treeRef = React.useRef<HTMLDivElement>(null);\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    options.onOpenChange?.(event, data);\n    setOpenItems(createNextOpenItems(data, openItems));\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    options.onCheckedChange?.(event, data);\n    setCheckedItems(createNextFlatCheckedItems(data, checkedItems, flatTreeItems));\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      options.onNavigation_unstable?.(event, data);\n      navigate(data);\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable) => {\n      const item = flatTreeItems.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return flatTreeItems.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getElementFromItem = React.useCallback((item: HeadlessTreeItem<Props>) => {\n    return treeRef.current?.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`) as HTMLElement | null;\n  }, []);\n\n  const ref = useMergedRefs<HTMLDivElement>(treeRef, navigationRef as React.Ref<HTMLDivElement>);\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref,\n      openItems,\n      selectionMode: options.selectionMode,\n      checkedItems,\n      onOpenChange: handleOpenChange,\n      onCheckedChange: handleCheckedChange,\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, checkedItems],\n  );\n\n  const items = React.useCallback(() => flatTreeItems.visibleItems(openItems), [openItems, flatTreeItems]);\n\n  return React.useMemo<HeadlessFlatTree<Props>>(\n    () => ({ navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items }),\n    [navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items],\n  );\n}\n"],"names":["useEventCallback","useMergedRefs","React","createHeadlessTree","treeDataTypes","useFlatTreeNavigation","createNextOpenItems","useControllableOpenItems","dataTreeItemValueAttrName","createNextFlatCheckedItems","useFlatControllableCheckedItems","useHeadlessFlatTree_unstable","flatTreeItemProps","options","flatTreeItems","useMemo","openItems","setOpenItems","checkedItems","setCheckedItems","navigate","navigationRef","treeRef","useRef","handleOpenChange","event","data","onOpenChange","handleCheckedChange","onCheckedChange","handleNavigation","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","current","querySelector","ref","getTreeProps","selectionMode","items"],"mappings":"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"}

package/lib/components/Tree/Tree.js

@@ -1,19 +1,14 @@
 import * as React from 'react';
 import { useTree_unstable } from './useTree';
-import { renderTree_unstable } from './renderTree';
-import { useTreeStyles_unstable } from './useTreeStyles.styles';
 import { useTreeContextValues_unstable } from './useTreeContextValues';
+import { useTreeStyles_unstable } from './useTreeStyles.styles';
+import { renderTree_unstable } from './renderTree';
 /**
- * A tree view widget presents a hierarchical list.
- * Any item in the hierarchy may have child items,
- * and items that have children may be expanded or collapsed to show or hide the children.
- * For example, in a file system navigator that uses a tree view to display folders and files,
- * an item representing a folder can be expanded to reveal the contents of the folder,
- * which may be files, folders, or both.
+ * Tree component - TODO: add more docs
  */ export const Tree = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useTree_unstable(props, ref);
-    useTreeStyles_unstable(state);
     const contextValues = useTreeContextValues_unstable(state);
+    useTreeStyles_unstable(state);
     return renderTree_unstable(state, contextValues);
 });
 Tree.displayName = 'Tree';

package/lib/components/Tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTree_unstable } from './useTree';\nimport { renderTree_unstable } from './renderTree';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\nimport type { TreeProps } from './Tree.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\n\n/**\n * A tree view widget presents a hierarchical list.\n * Any item in the hierarchy may have child items,\n * and items that have children may be expanded or collapsed to show or hide the children.\n * For example, in a file system navigator that uses a tree view to display folders and files,\n * an item representing a folder can be expanded to reveal the contents of the folder,\n * which may be files, folders, or both.\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  useTreeStyles_unstable(state);\n  const contextValues = useTreeContextValues_unstable(state);\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnF,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtCL,uBAAuBM;IACvB,MAAMC,gBAAgBN,8BAA8BK;IACpD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
+{"version":3,"sources":["Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTree_unstable } from './useTree';\nimport type { TreeProps } from './Tree.types';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\nimport { renderTree_unstable } from './renderTree';\n\n/**\n * Tree component - TODO: add more docs\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  const contextValues = useTreeContextValues_unstable(state);\n  useTreeStyles_unstable(state);\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"names":["React","useTree_unstable","useTreeContextValues_unstable","useTreeStyles_unstable","renderTree_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,mBAAmB,QAAQ,eAAe;AAEnD;;CAEC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnF,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBR,8BAA8BO;IACpDN,uBAAuBM;IACvB,OAAOL,oBAAoBK,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue } from '../../contexts/treeContext';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\nexport type MultiSelectValue = NonNullable<CheckboxProps['checked']>;\nexport type SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = { target: HTMLElement; value: TreeItemValue } & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Default value for the uncontrolled state of open tree items.\n   * These property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Default value for the uncontrolled state of checked tree items.\n   * These property is ignored for subtrees.\n   */\n  defaultCheckedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAyJI"}
+{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue } from '../../contexts/treeContext';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = { target: HTMLElement; value: TreeItemValue } & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * This refers to a list of ids of default checked items, or a list of tuples of ids and checked state.\n   * These property is ignored for subtrees.\n   */\n  defaultCheckedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAuJI"}

package/lib/components/Tree/index.js

@@ -1,6 +1,6 @@
 export * from './Tree';
 export * from './Tree.types';
-export * from './renderTree';
 export * from './useTree';
-export * from './useTreeStyles.styles';
 export * from './useTreeContextValues';
+export * from './useTreeStyles.styles';
+export * from './renderTree';

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Tree';\nexport * from './Tree.types';\nexport * from './renderTree';\nexport * from './useTree';\nexport * from './useTreeStyles.styles';\nexport * from './useTreeContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,yBAAyB;AACvC,cAAc,yBAAyB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Tree';\nexport * from './Tree.types';\nexport * from './useTree';\nexport * from './useTreeContextValues';\nexport * from './useTreeStyles.styles';\nexport * from './renderTree';\n"],"names":[],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,eAAe"}

package/lib/components/Tree/renderTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTree.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeState, TreeSlots, TreeContextValues } from './Tree.types';\nimport { TreeProvider } from '../../contexts';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>}\n    </TreeProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","TreeProvider","renderTree_unstable","state","contextValues","slots","slotProps","value","tree","open","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,gBAAqC;IACzF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAwBG;IACrD,qBACE,AAVJ,cAUKF;QAAaM,OAAOH,cAAcI,IAAI;OACpCL,MAAMM,IAAI,kBAAI,AAXrB,cAWsBJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,EAAGJ,UAAUI,IAAI,CAACC,QAAQ;AAG7E,EAAE"}
+{"version":3,"sources":["renderTree.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../../contexts';\nimport type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>}\n    </TreeProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","TreeProvider","renderTree_unstable","state","contextValues","slots","slotProps","value","tree","open","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,gBAAqC;IACzF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAwBG;IACrD,qBACE,AAVJ,cAUKF;QAAaM,OAAOH,cAAcI,IAAI;OACpCL,MAAMM,IAAI,kBAAI,AAXrB,cAWsBJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,EAAGJ,UAAUI,IAAI,CAACC,QAAQ;AAG7E,EAAE"}

package/lib/{hooks/useNestedControllableCheckedItems.js → components/Tree/useControllableCheckedItems.js}

@@ -1,27 +1,14 @@
 import { useControllableState } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { ImmutableMap } from '../utils/ImmutableMap';
-function initializeMap(iterable) {
-    const map = new Map();
-    if (iterable === undefined) {
-        return ImmutableMap.empty;
-    }
-    for (const item of iterable){
-        if (Array.isArray(item)) {
-            map.set(item[0], item[1]);
-        } else {
-            map.set(item, true);
-        }
-    }
-    return ImmutableMap.dangerouslyCreate_unstable(map);
-}
-export function useNestedControllableCheckedItems(props) {
+import { ImmutableMap } from '../../utils/ImmutableMap';
+import { createCheckedItems } from '../../utils/createCheckedItems';
+export function useControllableCheckedItems(props) {
     return useControllableState({
         initialState: ImmutableMap.empty,
-        state: React.useMemo(()=>props.checkedItems && initializeMap(props.checkedItems), [
+        state: React.useMemo(()=>props.checkedItems && createCheckedItems(props.checkedItems), [
             props.checkedItems
         ]),
-        defaultState: ()=>initializeMap(props.defaultCheckedItems)
+        defaultState: ()=>createCheckedItems(props.defaultCheckedItems)
     });
 } // export function useCheckedItemsState(props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems' | 'selectionMode'>) {
  //   const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);

package/lib/components/Tree/useControllableCheckedItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useControllableCheckedItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { TreeProps } from './Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\n\nexport type ControllableCheckedItemsOptions = {\n  checkedItems?: TreeProps['checkedItems'];\n  defaultCheckedItems?: TreeProps['checkedItems'];\n};\n\nexport function useControllableCheckedItems(props: ControllableCheckedItemsOptions) {\n  return useControllableState({\n    initialState: ImmutableMap.empty,\n    state: React.useMemo(() => props.checkedItems && createCheckedItems(props.checkedItems), [props.checkedItems]),\n    defaultState: () => createCheckedItems(props.defaultCheckedItems),\n  });\n}\n\n// export function useCheckedItemsState(props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems' | 'selectionMode'>) {\n//   const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n//   const selections = React.useMemo(() => initializeSelection(props.checkedItems ?? []), [props.checkedItems]);\n//   const defaultSelections = React.useMemo(\n//     () => initializeSelection(props.defaultCheckedItems ?? []),\n//     [props.defaultCheckedItems],\n//   );\n//   const [checkedSelection, checkedSelectionManager] = useSelection<TreeItemValue>({\n//     selectionMode: props.selectionMode ?? 'single',\n//     selectedItems: selections.checkedSelection,\n//     defaultSelectedItems: defaultSelections.checkedSelection,\n//   });\n//   const [mixedSelection, setMixedSelection] = useControllableState({\n//     initialState: ImmutableSet.empty,\n//     defaultState: React.useMemo(\n//       () => ImmutableSet.create(defaultSelections.mixedSelection),\n//       [defaultSelections.mixedSelection],\n//     ),\n//     state: React.useMemo(() => ImmutableSet.create(selections.mixedSelection), [selections.mixedSelection]),\n//   });\n\n//   const updateCheckedItems = useEventCallback((data: TreeCheckedChangeData) => {\n//     if (props.selectionMode === 'single') {\n//       checkedSelectionManager.selectItem(data.value);\n//       return;\n//     }\n//     if (walkerRef.current === null) {\n//       return;\n//     }\n//     const nextSelectedState = !checkedSelectionManager.isSelected(data.value);\n\n//     let treeItemValues = getAllSubTreeItemValues(data).add(data.value);\n\n//     let mixedValues: ImmutableSet<TreeItemValue> = ImmutableSet.empty;\n\n//     walkerRef.current.currentElement = data.event.currentTarget;\n//     while (walkerRef.current.parentElement() !== null) {\n//       const descendants = Array.from(\n//         walkerRef.current.currentElement.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n//       ).filter(item => item.getAttribute(dataTreeItemValueAttrName) !== data.value);\n//       const isAllSiblingsEqualSelectionState = descendants.every(item => {\n//         return (\n//           (item.getAttribute('aria-selected') === 'true') === nextSelectedState ||\n//           treeItemValues.has(item.getAttribute(dataTreeItemValueAttrName) as TreeItemValue)\n//         );\n//       });\n//       if (isAllSiblingsEqualSelectionState) {\n//         treeItemValues = treeItemValues.add(\n//           walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue,\n//         );\n//         mixedValues = mixedValues.delete(\n//           walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue,\n//         );\n//       } else {\n//         treeItemValues = treeItemValues\n//           .delete(walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue)\n//           .add(data.value);\n//         mixedValues = mixedValues.add(\n//           walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue,\n//         );\n//       }\n//     }\n//     unstable_batchedUpdates(() => {\n//       nextSelectedState\n//         ? checkedSelectionManager.selectItems(treeItemValues)\n//         : checkedSelectionManager.deselectItems(treeItemValues);\n//       let nextMixedSelection = ImmutableSet.create(mixedSelection);\n//       for (const value of mixedValues) {\n//         nextMixedSelection = nextMixedSelection.add(value);\n//       }\n//       for (const value of treeItemValues) {\n//         nextMixedSelection = nextMixedSelection.delete(value);\n//       }\n//       setMixedSelection(nextMixedSelection);\n//     });\n//   });\n//   return [checkedSelection, mixedSelection, updateCheckedItems, rootRef] as const;\n// }\n\n// function getAllSubTreeItemValues(data: TreeCheckedChangeData) {\n//   const subTreeItems = Array.from(data.event.currentTarget.querySelectorAll('[role=\"treeitem\"]'));\n//   const values = new Set<TreeItemValue>();\n//   for (const item of subTreeItems) {\n//     values.add(item.getAttribute(dataTreeItemValueAttrName) as TreeItemValue);\n//   }\n//   return ImmutableSet.dangerouslyCreate(values);\n// }\n"],"names":["useControllableState","React","ImmutableMap","createCheckedItems","useControllableCheckedItems","props","initialState","empty","state","useMemo","checkedItems","defaultState","defaultCheckedItems"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AACjE,YAAYC,WAAW,QAAQ;AAE/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,kBAAkB,QAAQ,iCAAiC;AAOpE,OAAO,SAASC,4BAA4BC,KAAsC,EAAE;IAClF,OAAOL,qBAAqB;QAC1BM,cAAcJ,aAAaK,KAAK;QAChCC,OAAOP,MAAMQ,OAAO,CAAC,IAAMJ,MAAMK,YAAY,IAAIP,mBAAmBE,MAAMK,YAAY,GAAG;YAACL,MAAMK,YAAY;SAAC;QAC7GC,cAAc,IAAMR,mBAAmBE,MAAMO,mBAAmB;IAClE;AACF,CAAC,CAED,2HAA2H;CAC3H,0EAA0E;CAC1E,iHAAiH;CACjH,6CAA6C;CAC7C,kEAAkE;CAClE,mCAAmC;CACnC,OAAO;CACP,sFAAsF;CACtF,sDAAsD;CACtD,kDAAkD;CAClD,gEAAgE;CAChE,QAAQ;CACR,uEAAuE;CACvE,wCAAwC;CACxC,mCAAmC;CACnC,qEAAqE;CACrE,4CAA4C;CAC5C,SAAS;CACT,+GAA+G;CAC/G,QAAQ;CAER,mFAAmF;CACnF,8CAA8C;CAC9C,wDAAwD;CACxD,gBAAgB;CAChB,QAAQ;CACR,wCAAwC;CACxC,gBAAgB;CAChB,QAAQ;CACR,iFAAiF;CAEjF,0EAA0E;CAE1E,yEAAyE;CAEzE,mEAAmE;CACnE,2DAA2D;CAC3D,wCAAwC;CACxC,+FAA+F;CAC/F,uFAAuF;CACvF,6EAA6E;CAC7E,mBAAmB;CACnB,qFAAqF;CACrF,8FAA8F;CAC9F,aAAa;CACb,YAAY;CACZ,gDAAgD;CAChD,+CAA+C;CAC/C,uGAAuG;CACvG,aAAa;CACb,4CAA4C;CAC5C,uGAAuG;CACvG,aAAa;CACb,iBAAiB;CACjB,0CAA0C;CAC1C,+GAA+G;CAC/G,8BAA8B;CAC9B,yCAAyC;CACzC,uGAAuG;CACvG,aAAa;CACb,UAAU;CACV,QAAQ;CACR,sCAAsC;CACtC,0BAA0B;CAC1B,gEAAgE;CAChE,mEAAmE;CACnE,sEAAsE;CACtE,2CAA2C;CAC3C,8DAA8D;CAC9D,UAAU;CACV,8CAA8C;CAC9C,iEAAiE;CACjE,UAAU;CACV,+CAA+C;CAC/C,UAAU;CACV,QAAQ;CACR,qFAAqF;CACrF,IAAI;CAEJ,kEAAkE;CAClE,qGAAqG;CACrG,6CAA6C;CAC7C,uCAAuC;CACvC,iFAAiF;CACjF,MAAM;CACN,mDAAmD;CACnD,IAAI"}

package/lib/components/Tree/useTree.js

@@ -1,19 +1,43 @@
 import * as React from 'react';
-import { useTreeContext_unstable } from '../../contexts';
-import { useSubtree } from './useSubtree';
-import { useRootTree } from './useRootTree';
-/**
- * Create the state required to render Tree.
- *
- * The returned state can be modified with hooks such as useTreeStyles_unstable,
- * before being passed to renderTree_unstable.
- *
- * @param props - props from this instance of Tree
- * @param ref - reference to root HTMLElement of Tree
- */ export const useTree_unstable = (props, ref)=>{
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
+import { useTreeNavigation } from './useTreeNavigation';
+import { useControllableCheckedItems } from './useControllableCheckedItems';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { useRootTree } from '../../hooks/useRootTree';
+import { useSubtree } from '../../hooks/useSubtree';
+export const useTree_unstable = (props, ref)=>{
+    const [openItems, setOpenItems] = useControllableOpenItems(props);
+    const [checkedItems] = useControllableCheckedItems(props);
+    const [navigate, navigationRef] = useTreeNavigation();
+    const handleOpenChange = useEventCallback((event, data)=>{
+        var _props_onOpenChange;
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
+        setOpenItems(createNextOpenItems(data, openItems));
+    });
+    const handleCheckedChange = useEventCallback((event, data)=>{
+        var _props_onCheckedChange;
+        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, data);
+    // TODO: implement next checked items for  tree
+    });
+    const handleNavigation = useEventCallback((event, data)=>{
+        var _props_onNavigation_unstable;
+        (_props_onNavigation_unstable = props.onNavigation_unstable) === null || _props_onNavigation_unstable === void 0 ? void 0 : _props_onNavigation_unstable.call(props, event, data);
+        navigate(data);
+    });
+    const baseProps = {
+        ...props,
+        openItems,
+        checkedItems,
+        onOpenChange: handleOpenChange,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onNavigation_unstable: handleNavigation,
+        onCheckedChange: handleCheckedChange
+    };
+    const baseRef = useMergedRefs(ref, navigationRef);
     const isSubtree = useTreeContext_unstable((ctx)=>ctx.level > 0);
-    // as isSubtree is static, this doesn't break rule of hooks
+    // as isSubTree is static, this doesn't break rule of hooks
     // and if this becomes an issue later on, this can be easily converted
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    return isSubtree ? useSubtree(props, ref) : useRootTree(props, ref);
+    return isSubtree ? useSubtree(baseProps, baseRef) : useRootTree(baseProps, baseRef);
 };

package/lib/components/Tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from './Tree.types';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { useSubtree } from './useSubtree';\nimport { useRootTree } from './useRootTree';\n\n/**\n * Create the state required to render Tree.\n *\n * The returned state can be modified with hooks such as useTreeStyles_unstable,\n * before being passed to renderTree_unstable.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isSubtree = useTreeContext_unstable(ctx => ctx.level > 0);\n  // as isSubtree is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isSubtree ? useSubtree(props, ref) : useRootTree(props, ref);\n};\n"],"names":["React","useTreeContext_unstable","useSubtree","useRootTree","useTree_unstable","props","ref","isSubtree","ctx","level"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,WAAW,QAAQ,gBAAgB;AAE5C;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC,MAA2C;IAC5F,MAAMC,YAAYN,wBAAwBO,CAAAA,MAAOA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,YAAYL,WAAWG,OAAOC,OAAOH,YAAYE,OAAOC,IAAI;AACrE,EAAE"}
+{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeState,\n} from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useControllableCheckedItems } from './useControllableCheckedItems';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const [checkedItems] = useControllableCheckedItems(props);\n  const [navigate, navigationRef] = useTreeNavigation();\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    props.onOpenChange?.(event, data);\n    setOpenItems(createNextOpenItems(data, openItems));\n  });\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    props.onCheckedChange?.(event, data);\n    // TODO: implement next checked items for  tree\n  });\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      props.onNavigation_unstable?.(event, data);\n      navigate(data);\n    },\n  );\n\n  const baseProps = {\n    ...props,\n    openItems,\n    checkedItems,\n    onOpenChange: handleOpenChange,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    onNavigation_unstable: handleNavigation,\n    onCheckedChange: handleCheckedChange,\n  };\n\n  const baseRef = useMergedRefs(ref, navigationRef);\n\n  const isSubtree = useTreeContext_unstable(ctx => ctx.level > 0);\n  // as isSubTree is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isSubtree ? useSubtree(baseProps, baseRef) : useRootTree(baseProps, baseRef);\n};\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","useTreeNavigation","useControllableCheckedItems","useTreeContext_unstable","useRootTree","useSubtree","useTree_unstable","props","ref","openItems","setOpenItems","checkedItems","navigate","navigationRef","handleOpenChange","event","data","onOpenChange","handleCheckedChange","onCheckedChange","handleNavigation","onNavigation_unstable","baseProps","baseRef","isSubtree","ctx","level"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAW5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC,MAA2C;IAC5F,MAAM,CAACC,WAAWC,aAAa,GAAGV,yBAAyBO;IAC3D,MAAM,CAACI,aAAa,GAAGT,4BAA4BK;IACnD,MAAM,CAACK,UAAUC,cAAc,GAAGZ;IAElC,MAAMa,mBAAmBjB,iBAAiB,CAACkB,OAA4BC,OAA6B;YAClGT;QAAAA,CAAAA,sBAAAA,MAAMU,YAAY,cAAlBV,iCAAAA,KAAAA,IAAAA,oBAAAA,KAAAA,OAAqBQ,OAAOC;QAC5BN,aAAaX,oBAAoBiB,MAAMP;IACzC;IACA,MAAMS,sBAAsBrB,iBAAiB,CAACkB,OAA+BC,OAAgC;YAC3GT;QAAAA,CAAAA,yBAAAA,MAAMY,eAAe,cAArBZ,oCAAAA,KAAAA,IAAAA,uBAAAA,KAAAA,OAAwBQ,OAAOC;IAC/B,+CAA+C;IACjD;IACA,MAAMI,mBAAmBvB,iBACvB,CAACkB,OAAqCC,OAAsC;YAC1ET;QAAAA,CAAAA,+BAAAA,MAAMc,qBAAqB,cAA3Bd,0CAAAA,KAAAA,IAAAA,6BAAAA,KAAAA,OAA8BQ,OAAOC;QACrCJ,SAASI;IACX;IAGF,MAAMM,YAAY;QAChB,GAAGf,KAAK;QACRE;QACAE;QACAM,cAAcH;QACd,gEAAgE;QAChEO,uBAAuBD;QACvBD,iBAAiBD;IACnB;IAEA,MAAMK,UAAUzB,cAAcU,KAAKK;IAEnC,MAAMW,YAAYrB,wBAAwBsB,CAAAA,MAAOA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,YAAYnB,WAAWiB,WAAWC,WAAWnB,YAAYkB,WAAWC,QAAQ;AACrF,EAAE"}

package/lib/components/Tree/useTreeContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    size,\n    level,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    requestTreeResponse,\n  };\n\n  return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB,EAAqB;IACjF,MAAM,EAAEC,UAAS,EAAEC,aAAY,EAAEC,cAAa,EAAEC,MAAK,EAAEC,WAAU,EAAEC,KAAI,EAAEC,oBAAmB,EAAE,GAAGP;IACjG;;;GAGC,GACD,MAAMQ,OAAyB;QAC7BF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    size,\n    level,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    requestTreeResponse,\n  };\n\n  return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB,EAAqB;IACjF,MAAM,EAAEC,UAAS,EAAEC,aAAY,EAAEC,cAAa,EAAEC,MAAK,EAAEC,WAAU,EAAEC,KAAI,EAAEC,oBAAmB,EAAE,GAAGP;IACjG;;;GAGC,GACD,MAAMQ,OAAyB;QAC7BF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,CAAC"}

package/lib/{hooks/useNestedTreeNavigation.js → components/Tree/useTreeNavigation.js}

@@ -1,10 +1,10 @@
 import { useMergedRefs } from '@fluentui/react-utilities';
-import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
-import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
-import { treeDataTypes } from '../utils/tokens';
-import { treeItemFilter } from '../utils/treeItemFilter';
-import { useRovingTabIndex } from './useRovingTabIndexes';
-export function useNestedTreeNavigation() {
+import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
+import { treeDataTypes } from '../../utils/tokens';
+import { treeItemFilter } from '../../utils/treeItemFilter';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
+import { useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';
+export function useTreeNavigation() {
     const [{ rove  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
     const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);
     const getNextElement = (data)=>{

package/lib/components/Tree/useTreeNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from './Tree.types';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';\n\nexport function useTreeNavigation() {\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n  const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return;\n    }\n    const treeItemWalker = walkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.parentElement();\n      case treeDataTypes.ArrowRight:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.End:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return lastChildRecursive(treeItemWalker);\n      case treeDataTypes.Home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.ArrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.ArrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return [navigate, useMergedRefs(rootRef, rovingRootRef)] as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useHTMLElementWalkerRef","useTreeNavigation","rove","rovingRootRef","walkerRef","rootRef","getNextElement","data","current","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAA4BC,uBAAuB,QAAQ,mCAAmC;AAE9F,OAAO,SAASC,oBAAoB;IAClC,MAAM,CAAC,EAAEC,KAAI,EAAE,EAAEC,cAAc,GAAGJ,kBAAkBD;IACpD,MAAM,CAACM,WAAWC,QAAQ,GAAGL,wBAAwBF;IAErD,MAAMQ,iBAAiB,CAACC,OAAsC;QAC5D,IAAI,CAACH,UAAUI,OAAO,EAAE;YACtB;QACF,CAAC;QACD,MAAMC,iBAAiBL,UAAUI,OAAO;QACxC,OAAQD,KAAKG,IAAI;YACf,KAAKb,cAAcc,KAAK;gBACtB,OAAOJ,KAAKK,MAAM;YACpB,KAAKf,cAAcgB,SAAS;gBAC1BJ,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOhB,qBAAqBa,gBAAgBF,KAAKQ,KAAK,CAACC,GAAG;YAC5D,KAAKnB,cAAcoB,SAAS;gBAC1BR,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeS,aAAa;YACrC,KAAKrB,cAAcsB,UAAU;gBAC3BV,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeW,UAAU;YAClC,KAAKvB,cAAcwB,GAAG;gBACpBZ,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOC,mBAAmBd;YAC5B,KAAKZ,cAAc2B,IAAI;gBACrBf,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOb,eAAeW,UAAU;YAClC,KAAKvB,cAAc4B,SAAS;gBAC1BhB,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeiB,WAAW;YACnC,KAAK7B,cAAc8B,OAAO;gBACxBlB,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAemB,eAAe;QACzC;IACF;IACA,SAASC,SAAStB,IAAiC,EAAE;QACnD,MAAMmB,cAAcpB,eAAeC;QACnC,IAAImB,aAAa;YACfxB,KAAKwB;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUlC,cAAcU,SAASF;KAAe;AAC1D,CAAC;AAED,SAASoB,mBAAmBO,MAAyB,EAAE;IACrD,IAAIC,cAAkC,IAAI;IAC1C,IAAIL,cAAkC,IAAI;IAC1C,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}

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

@@ -23,8 +23,8 @@ const useStyles = /*#__PURE__*/__styles({
 });
 export const useTreeStyles_unstable = state => {
   const styles = useStyles();
-  const isSubtree = state.level > 0;
-  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubtree && styles.subtree, state.root.className);
+  const isSubTree = state.level > 0;
+  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
   return state;
 };
 //# sourceMappingURL=useTreeStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","Bh6795r","Bnnss6s","xawz","Ijaq50","Br312pm","nk6f5a","Bw0ie65","d","useTreeStyles_unstable","state","styles","isSubtree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    },\n    subtree: {\n        ...shorthands.flex(1, 1, '100%'),\n        ...shorthands.gridArea('subtree')\n    }\n});\nexport const useTreeStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const isSubtree = state.level > 0;\n    state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubtree && styles.subtree, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1B,MAAMgB,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACf,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,cAAc,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEiB,SAAS,IAAID,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACf,IAAI,CAACmB,SAAS,CAAC;EACxH,OAAOJ,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","Bh6795r","Bnnss6s","xawz","Ijaq50","Br312pm","nk6f5a","Bw0ie65","d","useTreeStyles_unstable","state","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    },\n    subtree: {\n        ...shorthands.flex(1, 1, '100%'),\n        ...shorthands.gridArea('subtree')\n    }\n});\nexport const useTreeStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const isSubTree = state.level > 0;\n    state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1B,MAAMgB,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACf,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,cAAc,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEiB,SAAS,IAAID,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACf,IAAI,CAACmB,SAAS,CAAC;EACxH,OAAOJ,KAAK;AAChB,CAAC"}