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

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","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","get","id","parentId","getElementById"],"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(flatTreeItems: FlatTreeItems) {\n  const { targetDocument } = useFluent_unstable();\n  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!targetDocument || !treeItemWalkerRef.current) {\n      return null;\n    }\n    const treeItemWalker = treeItemWalkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.click:\n        return data.target;\n      case treeDataTypes.typeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.arrowLeft:\n        return parentElement(flatTreeItems, data.target, targetDocument);\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(flatTreeItems: FlatTreeItems, target: HTMLElement, document: Document) {\n  const flatTreeItem = flatTreeItems.get(target.id);\n  if (flatTreeItem && flatTreeItem.parentId) {\n    return document.getElementById(flatTreeItem.parentId);\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';\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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"}

package/lib/hooks/useNestedTreeNavigation.js

@@ -1,9 +1,9 @@
+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';
-import { useMergedRefs } from '@fluentui/react-utilities';
 export function useNestedTreeNavigation() {
   const [{
     rove

package/lib/hooks/useNestedTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"names":["useHTMLElementWalkerRef","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useMergedRefs","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 { 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';\nimport { useMergedRefs } from '@fluentui/react-utilities';\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":"AACA,SAA4BA,uBAAuB,QAAQ;AAC3D,SAASC,oBAAoB,QAAQ;AACrC,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,aAAa,QAAQ;AAE9B,OAAO,SAASC,wBAAA,EAA0B;EACxC,MAAM,CAAC;IAAEC;EAAI,CAAE,EAAEC,aAAA,CAAc,GAAGJ,iBAAA,CAAkBD,cAAA;EACpD,MAAM,CAACM,SAAA,EAAWC,OAAA,CAAQ,GAAGV,uBAAA,CAAwBG,cAAA;EAErD,MAAMQ,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,KAAKb,aAAA,CAAcc,KAAK;QACtB,OAAOJ,IAAA,CAAKK,MAAM;MACpB,KAAKf,aAAA,CAAcgB,SAAS;QAC1BJ,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOhB,oBAAA,CAAqBa,cAAA,EAAgBF,IAAA,CAAKQ,KAAK,CAACC,GAAG;MAC5D,KAAKnB,aAAA,CAAcoB,SAAS;QAC1BR,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeS,aAAa;MACrC,KAAKrB,aAAA,CAAcsB,UAAU;QAC3BV,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeW,UAAU;MAClC,KAAKvB,aAAA,CAAcwB,GAAG;QACpBZ,cAAA,CAAeK,cAAc,GAAGL,cAAA,CAAea,IAAI;QACnD,OAAOC,kBAAA,CAAmBd,cAAA;MAC5B,KAAKZ,aAAA,CAAc2B,IAAI;QACrBf,cAAA,CAAeK,cAAc,GAAGL,cAAA,CAAea,IAAI;QACnD,OAAOb,cAAA,CAAeW,UAAU;MAClC,KAAKvB,aAAA,CAAc4B,SAAS;QAC1BhB,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeiB,WAAW;MACnC,KAAK7B,aAAA,CAAc8B,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,EAAU7B,aAAA,CAAcK,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) => {\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"}

package/lib/hooks/useOpenItemsState.js

@@ -11,12 +11,11 @@ export function useOpenItemsState(props) {
   return [openItems, updateOpenItems];
 }
 function createNextOpenItems(data, previousOpenItems) {
-  const id = data.target.id;
-  const previousOpenItemsHasId = previousOpenItems.has(id);
+  const previousOpenItemsHasId = previousOpenItems.has(data.value);
   if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {
     return previousOpenItems;
   }
   const nextOpenItems = createImmutableSet(previousOpenItems);
-  return data.open ? nextOpenItems.add(id) : nextOpenItems.delete(id);
+  return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);
 }
 //# sourceMappingURL=useOpenItemsState.js.map

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","id","target","previousOpenItemsHasId","has","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 { TreeItemId } from '../TreeItem';\nimport type { TreeOpenChangeData, TreeProps } from '../Tree';\n\nexport function useOpenItemsState(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n  const [openItems, setOpenItems] = useControllableState({\n    state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),\n    defaultState: React.useMemo(\n      () => props.defaultOpenItems && createImmutableSet(props.defaultOpenItems),\n      [props.defaultOpenItems],\n    ),\n    initialState: emptyImmutableSet,\n  });\n  const updateOpenItems = useEventCallback((data: TreeOpenChangeData) =>\n    setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)),\n  );\n  return [openItems, updateOpenItems] as const;\n}\n\nfunction createNextOpenItems(\n  data: TreeOpenChangeData,\n  previousOpenItems: ImmutableSet<TreeItemId>,\n): ImmutableSet<TreeItemId> {\n  const id = data.target.id;\n  const previousOpenItemsHasId = previousOpenItems.has(id);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = createImmutableSet(previousOpenItems);\n  return data.open ? nextOpenItems.add(id) : nextOpenItems.delete(id);\n}\n"],"mappings":"AAAA,SAASA,oBAAoB,EAAEC,gBAAgB,QAAQ;AACvD,YAAYC,KAAA,MAAW;AACvB,SAASC,kBAAkB,EAAEC,iBAAiB,QAAsB;AAIpE,OAAO,SAASC,kBAAkBC,KAAwD,EAAE;EAC1F,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,IAAwB,EACxBG,iBAA2C,EACjB;EAC1B,MAAMC,EAAA,GAAKJ,IAAA,CAAKK,MAAM,CAACD,EAAE;EACzB,MAAME,sBAAA,GAAyBH,iBAAA,CAAkBI,GAAG,CAACH,EAAA;EACrD,IAAIJ,IAAA,CAAKQ,IAAI,GAAGF,sBAAA,GAAyB,CAACA,sBAAsB,EAAE;IAChE,OAAOH,iBAAA;EACT;EACA,MAAMM,aAAA,GAAgBrB,kBAAA,CAAmBe,iBAAA;EACzC,OAAOH,IAAA,CAAKQ,IAAI,GAAGC,aAAA,CAAcC,GAAG,CAACN,EAAA,IAAMK,aAAA,CAAcE,MAAM,CAACP,EAAA,CAAG;AACrE"}
+{"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"}

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

package/lib/utils/createFlatTreeItems.js

@@ -1,17 +1,19 @@
+import * as React from 'react';
 /**
  * creates a list of flat tree items
  * and provides a map to access each item by id
- */export function createFlatTreeItems(flatTreeItemProps) {
+ */
+export function createFlatTreeItems(flatTreeItemProps) {
   const root = createFlatTreeRootItem();
-  const itemsPerId = new Map([[flatTreeRootId, root]]);
+  const itemsPerValue = new Map([[flatTreeRootId, root]]);
   const items = [];
   for (let index = 0; index < flatTreeItemProps.length; index++) {
     const {
-      parentId = flatTreeRootId,
+      parentValue = flatTreeRootId,
       ...treeItemProps
     } = flatTreeItemProps[index];
     const nextItemProps = flatTreeItemProps[index + 1];
-    const currentParent = itemsPerId.get(parentId);
+    const currentParent = itemsPerValue.get(parentValue);
     if (!currentParent) {
       if (process.env.NODE_ENV === 'development') {
         // eslint-disable-next-line no-console
@@ -19,46 +21,53 @@
       }
       break;
     }
-    const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentId) !== treeItemProps.id;
+    const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentValue) !== treeItemProps.value;
     var _currentParent_level;
     const currentLevel = ((_currentParent_level = currentParent.level) !== null && _currentParent_level !== void 0 ? _currentParent_level : 0) + 1;
     const currentChildrenSize = ++currentParent.childrenSize;
+    const ref = /*#__PURE__*/React.createRef();
     const flatTreeItem = {
-      id: treeItemProps.id,
+      value: treeItemProps.value,
       getTreeItemProps: () => ({
         ...treeItemProps,
         'aria-level': currentLevel,
         'aria-posinset': currentChildrenSize,
         'aria-setsize': currentParent.childrenSize,
-        leaf: isLeaf
+        leaf: isLeaf,
+        // a reference to every parent element is necessary to ensure navigation
+        ref: flatTreeItem.childrenSize > 0 ? ref : undefined
       }),
+      ref,
       level: currentLevel,
-      parentId,
+      parentValue,
       childrenSize: 0,
       index: -1
     };
-    itemsPerId.set(flatTreeItem.id, flatTreeItem);
+    itemsPerValue.set(flatTreeItem.value, flatTreeItem);
     items.push(flatTreeItem);
   }
   return {
     root,
     size: items.length,
     getByIndex: index => items[index],
-    get: id => itemsPerId.get(id),
-    set: (id, value) => itemsPerId.set(id, value)
+    get: id => itemsPerValue.get(id),
+    set: (id, value) => itemsPerValue.set(id, value)
   };
 }
 export const flatTreeRootId = '__fuiFlatTreeRoot';
 function createFlatTreeRootItem() {
   return {
-    id: flatTreeRootId,
+    ref: {
+      current: null
+    },
+    value: flatTreeRootId,
     getTreeItemProps: () => {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
         console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
       }
       return {
-        id: flatTreeRootId,
+        value: flatTreeRootId,
         'aria-setsize': -1,
         'aria-level': -1,
         'aria-posinset': -1,
@@ -81,7 +90,7 @@ 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.parentId ? (_flatTreeItems_get = flatTreeItems.get(item.parentId)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;
+    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;
@@ -94,11 +103,11 @@ function isItemVisible(item, openItems, flatTreeItems) {
   if (item.level === 1) {
     return true;
   }
-  while (item.parentId && item.parentId !== flatTreeItems.root.id) {
-    if (!openItems.has(item.parentId)) {
+  while (item.parentValue && item.parentValue !== flatTreeItems.root.value) {
+    if (!openItems.has(item.parentValue)) {
       return false;
     }
-    const parent = flatTreeItems.get(item.parentId);
+    const parent = flatTreeItems.get(item.parentValue);
     if (!parent) {
       return false;
     }

package/lib/utils/createFlatTreeItems.js.map

@@ -1 +1 @@
-{"version":3,"names":["createFlatTreeItems","flatTreeItemProps","root","createFlatTreeRootItem","itemsPerId","Map","flatTreeRootId","items","index","length","parentId","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","id","isLeaf","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","flatTreeItem","getTreeItemProps","leaf","set","push","size","getByIndex","value","VisibleFlatTreeItemGenerator","openItems","flatTreeItems","visibleIndex","item","_flatTreeItems_get","parent","isItemVisible","has"],"sources":["../../src/utils/createFlatTreeItems.ts"],"sourcesContent":["import type { TreeItemId } from '../TreeItem';\nimport type { ImmutableSet } from './ImmutableSet';\nimport type { FlatTreeItem, FlatTreeItemProps, MutableFlatTreeItem } from '../hooks/useFlatTree';\n\n/**\n * @internal\n */\nexport type FlatTreeItems = {\n  size: number;\n  root: FlatTreeItem;\n  get(id: string): FlatTreeItem | undefined;\n  set(id: string, value: FlatTreeItem): void;\n  getByIndex(index: number): FlatTreeItem;\n};\n\n/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */\nexport function createFlatTreeItems(flatTreeItemProps: FlatTreeItemProps[]): FlatTreeItems {\n  const root = createFlatTreeRootItem();\n  const itemsPerId = new Map<string, MutableFlatTreeItem>([[flatTreeRootId, root]]);\n  const items: MutableFlatTreeItem[] = [];\n\n  for (let index = 0; index < flatTreeItemProps.length; index++) {\n    const { parentId = flatTreeRootId, ...treeItemProps } = flatTreeItemProps[index];\n\n    const nextItemProps: FlatTreeItemProps | undefined = flatTreeItemProps[index + 1];\n    const currentParent = itemsPerId.get(parentId);\n    if (!currentParent) {\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(\n          `useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`,\n        );\n      }\n      break;\n    }\n    const isLeaf = nextItemProps?.parentId !== treeItemProps.id;\n    const currentLevel = (currentParent.level ?? 0) + 1;\n    const currentChildrenSize = ++currentParent.childrenSize;\n\n    const flatTreeItem: FlatTreeItem = {\n      id: treeItemProps.id,\n      getTreeItemProps: () => ({\n        ...treeItemProps,\n        'aria-level': currentLevel,\n        'aria-posinset': currentChildrenSize,\n        'aria-setsize': currentParent.childrenSize,\n        leaf: isLeaf,\n      }),\n      level: currentLevel,\n      parentId,\n      childrenSize: 0,\n      index: -1,\n    };\n    itemsPerId.set(flatTreeItem.id, flatTreeItem);\n    items.push(flatTreeItem);\n  }\n\n  return {\n    root,\n    size: items.length,\n    getByIndex: index => items[index],\n    get: id => itemsPerId.get(id),\n    set: (id, value) => itemsPerId.set(id, value),\n  };\n}\n\nexport const flatTreeRootId = '__fuiFlatTreeRoot';\n\nfunction createFlatTreeRootItem(): FlatTreeItem {\n  return {\n    id: flatTreeRootId,\n    getTreeItemProps: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return { id: flatTreeRootId, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };\n    },\n    childrenSize: 0,\n    get index() {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return -1;\n    },\n    level: 0,\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function* VisibleFlatTreeItemGenerator(openItems: ImmutableSet<TreeItemId>, flatTreeItems: FlatTreeItems) {\n  for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {\n    const item: MutableFlatTreeItem = flatTreeItems.getByIndex(index);\n    const parent = item.parentId ? flatTreeItems.get(item.parentId) ?? flatTreeItems.root : flatTreeItems.root;\n    if (isItemVisible(item, openItems, flatTreeItems)) {\n      item.index = visibleIndex++;\n      yield item;\n    } else {\n      index += parent.childrenSize - 1 + item.childrenSize;\n    }\n  }\n}\n\nfunction isItemVisible(item: FlatTreeItem, openItems: ImmutableSet<TreeItemId>, flatTreeItems: FlatTreeItems) {\n  if (item.level === 1) {\n    return true;\n  }\n  while (item.parentId && item.parentId !== flatTreeItems.root.id) {\n    if (!openItems.has(item.parentId)) {\n      return false;\n    }\n    const parent = flatTreeItems.get(item.parentId);\n    if (!parent) {\n      return false;\n    }\n    item = parent;\n  }\n  return true;\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","createFlatTreeItems","flatTreeItemProps","root","createFlatTreeRootItem","itemsPerValue","Map","flatTreeRootId","items","index","length","parentValue","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","id","isLeaf","value","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","ref","createRef","flatTreeItem","getTreeItemProps","leaf","undefined","set","push","size","getByIndex","current","VisibleFlatTreeItemGenerator","openItems","flatTreeItems","visibleIndex","item","_flatTreeItems_get","parent","isItemVisible","has"],"sources":["../../src/utils/createFlatTreeItems.ts"],"sourcesContent":["import type { ImmutableSet } from './ImmutableSet';\nimport type { FlatTreeItem, FlatTreeItemProps, MutableFlatTreeItem } from '../hooks/useFlatTree';\nimport * as React from 'react';\n\n/**\n * @internal\n */\nexport type FlatTreeItems<Value = string> = {\n  size: number;\n  root: FlatTreeItem<Value>;\n  get(key: Value): FlatTreeItem<Value> | undefined;\n  set(key: Value, value: FlatTreeItem<Value>): void;\n  getByIndex(index: number): FlatTreeItem<Value>;\n};\n\n/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */\nexport function createFlatTreeItems<Value = string>(\n  flatTreeItemProps: FlatTreeItemProps<Value>[],\n): FlatTreeItems<Value> {\n  const root = createFlatTreeRootItem<Value>();\n  const itemsPerValue = new Map<Value, MutableFlatTreeItem<Value>>([[flatTreeRootId as Value, root]]);\n  const items: MutableFlatTreeItem<Value>[] = [];\n\n  for (let index = 0; index < flatTreeItemProps.length; index++) {\n    const { parentValue = flatTreeRootId as Value, ...treeItemProps } = flatTreeItemProps[index];\n\n    const nextItemProps: FlatTreeItemProps<Value> | undefined = flatTreeItemProps[index + 1];\n    const currentParent = itemsPerValue.get(parentValue);\n    if (!currentParent) {\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(\n          `useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`,\n        );\n      }\n      break;\n    }\n    const isLeaf = nextItemProps?.parentValue !== treeItemProps.value;\n    const currentLevel = (currentParent.level ?? 0) + 1;\n    const currentChildrenSize = ++currentParent.childrenSize;\n    const ref = React.createRef<HTMLDivElement>();\n\n    const flatTreeItem: MutableFlatTreeItem<Value> = {\n      value: treeItemProps.value,\n      getTreeItemProps: () => ({\n        ...treeItemProps,\n        'aria-level': currentLevel,\n        'aria-posinset': currentChildrenSize,\n        'aria-setsize': currentParent.childrenSize,\n        leaf: isLeaf,\n        // a reference to every parent element is necessary to ensure navigation\n        ref: flatTreeItem.childrenSize > 0 ? ref : undefined,\n      }),\n      ref,\n      level: currentLevel,\n      parentValue,\n      childrenSize: 0,\n      index: -1,\n    };\n    itemsPerValue.set(flatTreeItem.value, flatTreeItem);\n    items.push(flatTreeItem);\n  }\n\n  return {\n    root,\n    size: items.length,\n    getByIndex: index => items[index],\n    get: id => itemsPerValue.get(id),\n    set: (id, value) => itemsPerValue.set(id, value),\n  };\n}\n\nexport const flatTreeRootId = '__fuiFlatTreeRoot' as unknown;\n\nfunction createFlatTreeRootItem<Value = string>(): FlatTreeItem<Value> {\n  return {\n    ref: { current: null },\n    value: flatTreeRootId as Value,\n    getTreeItemProps: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return { value: flatTreeRootId as Value, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };\n    },\n    childrenSize: 0,\n    get index() {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return -1;\n    },\n    level: 0,\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function* VisibleFlatTreeItemGenerator<Value = string>(\n  openItems: ImmutableSet<Value>,\n  flatTreeItems: FlatTreeItems<Value>,\n) {\n  for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {\n    const item: MutableFlatTreeItem<Value> = flatTreeItems.getByIndex(index);\n    const parent = item.parentValue ? flatTreeItems.get(item.parentValue) ?? flatTreeItems.root : flatTreeItems.root;\n    if (isItemVisible(item, openItems, flatTreeItems)) {\n      item.index = visibleIndex++;\n      yield item;\n    } else {\n      index += parent.childrenSize - 1 + item.childrenSize;\n    }\n  }\n}\n\nfunction isItemVisible<Value>(\n  item: FlatTreeItem<Value>,\n  openItems: ImmutableSet<Value>,\n  flatTreeItems: FlatTreeItems<Value>,\n) {\n  if (item.level === 1) {\n    return true;\n  }\n  while (item.parentValue && item.parentValue !== flatTreeItems.root.value) {\n    if (!openItems.has(item.parentValue)) {\n      return false;\n    }\n    const parent = flatTreeItems.get(item.parentValue);\n    if (!parent) {\n      return false;\n    }\n    item = parent;\n  }\n  return true;\n}\n"],"mappings":"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"}

package/lib/utils/flattenTree.js

@@ -6,12 +6,14 @@ function flattenTreeRecursive(items, parent, level = 1) {
     ...item
   }, index) => {
     var _item_id;
+    const id = (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : `fui-FlatTreeItem-${count++}`;
+    var _item_value;
     const flatTreeItem = {
       'aria-level': level,
       'aria-posinset': index + 1,
       'aria-setsize': items.length,
-      parentId: parent === null || parent === void 0 ? void 0 : parent.id,
-      id: (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : `fui-FlatTreeItem-${count++}`,
+      parentValue: parent === null || parent === void 0 ? void 0 : parent.value,
+      value: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : id,
       leaf: subtree === undefined,
       ...item
     };
@@ -71,12 +73,14 @@ export const flattenTreeFromElement = (root, parent, level = 1) => {
   return children.reduce((acc, curr, index) => {
     const [content, subtree] = React.Children.toArray(curr.props.children);
     var _curr_props_id;
+    const id = (_curr_props_id = curr.props.id) !== null && _curr_props_id !== void 0 ? _curr_props_id : `fui-FlatTreeItem-${count++}`;
+    var _curr_props_value;
     const flatTreeItem = {
       'aria-level': level,
       'aria-posinset': index + 1,
       'aria-setsize': children.length,
-      parentId: parent === null || parent === void 0 ? void 0 : parent.id,
-      id: (_curr_props_id = curr.props.id) !== null && _curr_props_id !== void 0 ? _curr_props_id : `fui-FlatTreeItem-${count++}`,
+      parentValue: parent === null || parent === void 0 ? void 0 : parent.value,
+      value: (_curr_props_value = curr.props.value) !== null && _curr_props_value !== void 0 ? _curr_props_value : id,
       leaf: subtree === undefined,
       ...curr.props,
       children: content

package/lib/utils/flattenTree.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","count","flattenTreeRecursive","items","parent","level","reduce","acc","subtree","item","index","_item_id","flatTreeItem","length","parentId","id","leaf","undefined","push","flattenTree_unstable","flattenTreeFromElement","root","children","Children","toArray","props","curr","content","_curr_props_id"],"sources":["../../src/utils/flattenTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { FlatTreeItemProps } from '../hooks/useFlatTree';\nimport { TreeItemProps } from '../TreeItem';\n\nexport type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {\n  subtree?: NestedTreeItem[];\n};\n\nlet count = 1;\nfunction flattenTreeRecursive(items: NestedTreeItem[], parent?: FlatTreeItemProps, level = 1): FlatTreeItemProps[] {\n  return items.reduce<FlatTreeItemProps[]>((acc, { subtree, ...item }, index) => {\n    const flatTreeItem: FlatTreeItemProps = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': items.length,\n      parentId: parent?.id,\n      id: item.id ?? `fui-FlatTreeItem-${count++}`,\n      leaf: subtree === undefined,\n      ...item,\n    };\n    acc.push(flatTreeItem);\n    if (subtree !== undefined) {\n      acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1));\n    }\n    return acc;\n  }, []);\n}\n\n/**\n * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`\n * @example\n * ```tsx\n * const defaultItems = flattenTree_unstable([\n *  {\n *    children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,\n *    subtree: [\n *      {\n *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n *      },\n *      {\n *        children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,\n *      },\n *      {\n *        children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,\n *      },\n *    ],\n *  },\n *  {\n *    children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,\n *    subtree: [\n *      {\n *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n *        subtree: [\n *          {\n *            children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,\n *            subtree: [\n *              {\n *                children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,\n *              },\n *            ],\n *          },\n *        ],\n *      },\n *    ],\n *  },\n * ]);\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable = (items: NestedTreeItem[]): FlatTreeItemProps[] => flattenTreeRecursive(items);\n\n/**\n * @internal\n */\nexport const flattenTreeFromElement = (\n  root: React.ReactElement<{\n    children?: React.ReactElement<TreeItemProps> | React.ReactElement<TreeItemProps>[];\n  }>,\n  parent?: FlatTreeItemProps,\n  level = 1,\n): FlatTreeItemProps[] => {\n  const children = React.Children.toArray(root.props.children) as React.ReactElement<TreeItemProps>[];\n  return children.reduce<FlatTreeItemProps[]>((acc, curr, index) => {\n    const [content, subtree] = React.Children.toArray(curr.props.children) as [\n      React.ReactNode,\n      typeof root | undefined,\n    ];\n    const flatTreeItem: FlatTreeItemProps = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': children.length,\n      parentId: parent?.id,\n      id: curr.props.id ?? `fui-FlatTreeItem-${count++}`,\n      leaf: subtree === undefined,\n      ...curr.props,\n      children: content,\n    };\n    acc.push(flatTreeItem);\n    if (subtree !== undefined) {\n      acc.push(...flattenTreeFromElement(subtree, flatTreeItem, level + 1));\n    }\n    return acc;\n  }, []);\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAQvB,IAAIC,KAAA,GAAQ;AACZ,SAASC,qBAAqBC,KAAuB,EAAEC,MAA0B,EAAEC,KAAA,GAAQ,CAAC,EAAuB;EACjH,OAAOF,KAAA,CAAMG,MAAM,CAAsB,CAACC,GAAA,EAAK;IAAEC,OAAA;IAAS,GAAGC;EAAA,CAAM,EAAEC,KAAA,KAAU;QAMvEC,QAAA;IALN,MAAMC,YAAA,GAAkC;MACtC,cAAcP,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBP,KAAA,CAAMU,MAAM;MAC5BC,QAAA,EAAUV,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQW,EAAE;MACpBA,EAAA,EAAI,CAAAJ,QAAA,GAAAF,IAAA,CAAKM,EAAE,cAAPJ,QAAA,cAAAA,QAAA,GAAY,oBAAmBV,KAAA,EAAQ,EAAC;MAC5Ce,IAAA,EAAMR,OAAA,KAAYS,SAAA;MAClB,GAAGR;IACL;IACAF,GAAA,CAAIW,IAAI,CAACN,YAAA;IACT,IAAIJ,OAAA,KAAYS,SAAA,EAAW;MACzBV,GAAA,CAAIW,IAAI,IAAIhB,oBAAA,CAAqBM,OAAA,EAASI,YAAA,EAAcP,KAAA,GAAQ;IAClE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAA,CAwCA;AACA,OAAO,MAAMY,oBAAA,GAAwBhB,KAAA,IAAiDD,oBAAA,CAAqBC,KAAA;AAE3G;;;AAGA,OAAO,MAAMiB,sBAAA,GAAyBA,CACpCC,IAAA,EAGAjB,MAAA,EACAC,KAAA,GAAQ,CAAC,KACe;EACxB,MAAMiB,QAAA,GAAWtB,KAAA,CAAMuB,QAAQ,CAACC,OAAO,CAACH,IAAA,CAAKI,KAAK,CAACH,QAAQ;EAC3D,OAAOA,QAAA,CAAShB,MAAM,CAAsB,CAACC,GAAA,EAAKmB,IAAA,EAAMhB,KAAA,KAAU;IAChE,MAAM,CAACiB,OAAA,EAASnB,OAAA,CAAQ,GAAGR,KAAA,CAAMuB,QAAQ,CAACC,OAAO,CAACE,IAAA,CAAKD,KAAK,CAACH,QAAQ;QAS/DM,cAAA;IALN,MAAMhB,YAAA,GAAkC;MACtC,cAAcP,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBY,QAAA,CAAST,MAAM;MAC/BC,QAAA,EAAUV,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQW,EAAE;MACpBA,EAAA,EAAI,CAAAa,cAAA,GAAAF,IAAA,CAAKD,KAAK,CAACV,EAAE,cAAba,cAAA,cAAAA,cAAA,GAAkB,oBAAmB3B,KAAA,EAAQ,EAAC;MAClDe,IAAA,EAAMR,OAAA,KAAYS,SAAA;MAClB,GAAGS,IAAA,CAAKD,KAAK;MACbH,QAAA,EAAUK;IACZ;IACApB,GAAA,CAAIW,IAAI,CAACN,YAAA;IACT,IAAIJ,OAAA,KAAYS,SAAA,EAAW;MACzBV,GAAA,CAAIW,IAAI,IAAIE,sBAAA,CAAuBZ,OAAA,EAASI,YAAA,EAAcP,KAAA,GAAQ;IACpE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP"}
+{"version":3,"names":["React","count","flattenTreeRecursive","items","parent","level","reduce","acc","subtree","item","index","_item_id","id","_item_value","flatTreeItem","length","parentValue","value","leaf","undefined","push","flattenTree_unstable","flattenTreeFromElement","root","children","Children","toArray","props","curr","content","_curr_props_id","_curr_props_value"],"sources":["../../src/utils/flattenTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { FlatTreeItemProps } from '../hooks/useFlatTree';\nimport { TreeItemProps } from '../TreeItem';\n\nexport type NestedTreeItem<Value = string> = Omit<TreeItemProps<Value>, 'subtree'> & {\n  subtree?: NestedTreeItem<Value>[];\n};\n\nlet count = 1;\nfunction flattenTreeRecursive<Value = string>(\n  items: NestedTreeItem<Value>[],\n  parent?: FlatTreeItemProps<Value>,\n  level = 1,\n): FlatTreeItemProps<Value>[] {\n  return items.reduce<FlatTreeItemProps<Value>[]>((acc, { subtree, ...item }, index) => {\n    const id = item.id ?? `fui-FlatTreeItem-${count++}`;\n    const flatTreeItem: FlatTreeItemProps<Value> = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': items.length,\n      parentValue: parent?.value,\n      value: item.value ?? (id as unknown as Value),\n      leaf: subtree === undefined,\n      ...item,\n    };\n    acc.push(flatTreeItem);\n    if (subtree !== undefined) {\n      acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1));\n    }\n    return acc;\n  }, []);\n}\n\n/**\n * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`\n * @example\n * ```tsx\n * const defaultItems = flattenTree_unstable([\n *  {\n *    children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,\n *    subtree: [\n *      {\n *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n *      },\n *      {\n *        children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,\n *      },\n *      {\n *        children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,\n *      },\n *    ],\n *  },\n *  {\n *    children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,\n *    subtree: [\n *      {\n *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n *        subtree: [\n *          {\n *            children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,\n *            subtree: [\n *              {\n *                children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,\n *              },\n *            ],\n *          },\n *        ],\n *      },\n *    ],\n *  },\n * ]);\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable = <Value = string>(items: NestedTreeItem<Value>[]): FlatTreeItemProps<Value>[] =>\n  flattenTreeRecursive(items);\n\n/**\n * @internal\n */\nexport const flattenTreeFromElement = <Value = string>(\n  root: React.ReactElement<{\n    children?: React.ReactElement<TreeItemProps<Value>> | React.ReactElement<TreeItemProps<Value>>[];\n  }>,\n  parent?: FlatTreeItemProps<Value>,\n  level = 1,\n): FlatTreeItemProps<Value>[] => {\n  const children = React.Children.toArray(root.props.children) as React.ReactElement<TreeItemProps<Value>>[];\n  return children.reduce<FlatTreeItemProps<Value>[]>((acc, curr, index) => {\n    const [content, subtree] = React.Children.toArray(curr.props.children) as [\n      React.ReactNode,\n      typeof root | undefined,\n    ];\n    const id = curr.props.id ?? `fui-FlatTreeItem-${count++}`;\n    const flatTreeItem: FlatTreeItemProps<Value> = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': children.length,\n      parentValue: parent?.value,\n      value: curr.props.value ?? (id as unknown as Value),\n      leaf: subtree === undefined,\n      ...curr.props,\n      children: content,\n    };\n    acc.push(flatTreeItem);\n    if (subtree !== undefined) {\n      acc.push(...flattenTreeFromElement(subtree, flatTreeItem, level + 1));\n    }\n    return acc;\n  }, []);\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAQvB,IAAIC,KAAA,GAAQ;AACZ,SAASC,qBACPC,KAA8B,EAC9BC,MAAiC,EACjCC,KAAA,GAAQ,CAAC,EACmB;EAC5B,OAAOF,KAAA,CAAMG,MAAM,CAA6B,CAACC,GAAA,EAAK;IAAEC,OAAA;IAAS,GAAGC;EAAA,CAAM,EAAEC,KAAA,KAAU;QACzEC,QAAA;IAAX,MAAMC,EAAA,GAAK,CAAAD,QAAA,GAAAF,IAAA,CAAKG,EAAE,cAAPD,QAAA,cAAAA,QAAA,GAAY,oBAAmBV,KAAA,EAAQ,EAAC;QAM1CY,WAAA;IALT,MAAMC,YAAA,GAAyC;MAC7C,cAAcT,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBP,KAAA,CAAMY,MAAM;MAC5BC,WAAA,EAAaZ,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQa,KAAK;MAC1BA,KAAA,EAAO,CAAAJ,WAAA,GAAAJ,IAAA,CAAKQ,KAAK,cAAVJ,WAAA,cAAAA,WAAA,GAAeD,EAAuB;MAC7CM,IAAA,EAAMV,OAAA,KAAYW,SAAA;MAClB,GAAGV;IACL;IACAF,GAAA,CAAIa,IAAI,CAACN,YAAA;IACT,IAAIN,OAAA,KAAYW,SAAA,EAAW;MACzBZ,GAAA,CAAIa,IAAI,IAAIlB,oBAAA,CAAqBM,OAAA,EAASM,YAAA,EAAcT,KAAA,GAAQ;IAClE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAA,CAwCA;AACA,OAAO,MAAMc,oBAAA,GAAwClB,KAAA,IACnDD,oBAAA,CAAqBC,KAAA;AAEvB;;;AAGA,OAAO,MAAMmB,sBAAA,GAAyBA,CACpCC,IAAA,EAGAnB,MAAA,EACAC,KAAA,GAAQ,CAAC,KACsB;EAC/B,MAAMmB,QAAA,GAAWxB,KAAA,CAAMyB,QAAQ,CAACC,OAAO,CAACH,IAAA,CAAKI,KAAK,CAACH,QAAQ;EAC3D,OAAOA,QAAA,CAASlB,MAAM,CAA6B,CAACC,GAAA,EAAKqB,IAAA,EAAMlB,KAAA,KAAU;IACvE,MAAM,CAACmB,OAAA,EAASrB,OAAA,CAAQ,GAAGR,KAAA,CAAMyB,QAAQ,CAACC,OAAO,CAACE,IAAA,CAAKD,KAAK,CAACH,QAAQ;QAI1DM,cAAA;IAAX,MAAMlB,EAAA,GAAK,CAAAkB,cAAA,GAAAF,IAAA,CAAKD,KAAK,CAACf,EAAE,cAAbkB,cAAA,cAAAA,cAAA,GAAkB,oBAAmB7B,KAAA,EAAQ,EAAC;QAMhD8B,iBAAA;IALT,MAAMjB,YAAA,GAAyC;MAC7C,cAAcT,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBc,QAAA,CAAST,MAAM;MAC/BC,WAAA,EAAaZ,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQa,KAAK;MAC1BA,KAAA,EAAO,CAAAc,iBAAA,GAAAH,IAAA,CAAKD,KAAK,CAACV,KAAK,cAAhBc,iBAAA,cAAAA,iBAAA,GAAqBnB,EAAuB;MACnDM,IAAA,EAAMV,OAAA,KAAYW,SAAA;MAClB,GAAGS,IAAA,CAAKD,KAAK;MACbH,QAAA,EAAUK;IACZ;IACAtB,GAAA,CAAIa,IAAI,CAACN,YAAA;IACT,IAAIN,OAAA,KAAYW,SAAA,EAAW;MACzBZ,GAAA,CAAIa,IAAI,IAAIE,sBAAA,CAAuBd,OAAA,EAASM,YAAA,EAAcT,KAAA,GAAQ;IACpE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP"}

package/lib-commonjs/components/Tree/renderTree.js

@@ -1,4 +1,4 @@
-"use strict";
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -6,15 +6,14 @@ Object.defineProperty(exports, "renderTree_unstable", {
     enumerable: true,
     get: ()=>renderTree_unstable
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _contexts = require("../../contexts");
 const renderTree_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(_contexts.TreeProvider, {
+    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_contexts.TreeProvider, {
         value: contextValues.tree
-    }, /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, slotProps.root.children));
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slotProps.root.children));
 }; //# sourceMappingURL=renderTree.js.map
 
 //# sourceMappingURL=renderTree.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Tree/renderTree.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../../contexts';\nexport const renderTree_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(TreeProvider, {\n    value: contextValues.tree\n  }, /*#__PURE__*/React.createElement(slots.root, slotProps.root, slotProps.root.children));\n};\n//# sourceMappingURL=renderTree.js.map"],"names":["renderTree_unstable","state","contextValues","slots","slotProps","getSlots","React","createElement","TreeProvider","value","tree","root","children"],"mappings":";;;;+BAGaA;;aAAAA;;;6DAHU;gCACE;0BACI;AACtB,MAAMA,sBAAsB,CAACC,OAAOC,gBAAkB;IAC3D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACC,sBAAY,EAAE;QACpDC,OAAOP,cAAcQ,IAAI;IAC3B,GAAG,WAAW,GAAEJ,OAAMC,aAAa,CAACJ,MAAMQ,IAAI,EAAEP,UAAUO,IAAI,EAAEP,UAAUO,IAAI,CAACC,QAAQ;AACzF,GACA,sCAAsC"}
+{"version":3,"sources":["../../../lib/components/Tree/renderTree.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../../contexts';\nexport const renderTree_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlotsNext(state);\n  return /*#__PURE__*/createElement(TreeProvider, {\n    value: contextValues.tree\n  }, /*#__PURE__*/createElement(slots.root, slotProps.root, slotProps.root.children));\n};\n//# sourceMappingURL=renderTree.js.map"],"names":["renderTree_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","TreeProvider","value","tree","root","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAGrCA;;aAAAA;;iCAHqE;gCACrD;0BACA;AACtB,MAAMA,sBAAsB,CAACC,OAAOC,gBAAkB;IAC3D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACJ;IACjB,OAAO,WAAW,GAAEK,IAAAA,8BAAa,EAACC,sBAAY,EAAE;QAC9CC,OAAON,cAAcO,IAAI;IAC3B,GAAG,WAAW,GAAEH,IAAAA,8BAAa,EAACH,MAAMO,IAAI,EAAEN,UAAUM,IAAI,EAAEN,UAAUM,IAAI,CAACC,QAAQ;AACnF,GACA,sCAAsC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItem/TreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nsted child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\nTreeItem.displayName = 'TreeItem';\n//# sourceMappingURL=TreeItem.js.map"],"names":["TreeItem","React","forwardRef","props","ref","state","useTreeItem_unstable","useTreeItemStyles_unstable","contextValues","useTreeItemContextValues_unstable","renderTreeItem_unstable","displayName"],"mappings":";;;;+BAiBaA;;aAAAA;;;6DAjBU;6BACc;gCACG;mCACG;0CACO;AAa3C,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1CG,IAAAA,6CAA0B,EAACF;IAC3B,MAAMG,gBAAgBC,IAAAA,2DAAiC,EAACJ;IACxD,OAAOK,IAAAA,uCAAuB,EAACL,OAAOG;AACxC;AACAR,SAASW,WAAW,GAAG,YACvB,oCAAoC"}
+{"version":3,"sources":["../../../lib/components/TreeItem/TreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\nTreeItem.displayName = 'TreeItem';\n//# sourceMappingURL=TreeItem.js.map"],"names":["TreeItem","React","forwardRef","props","ref","state","useTreeItem_unstable","useTreeItemStyles_unstable","contextValues","useTreeItemContextValues_unstable","renderTreeItem_unstable","displayName"],"mappings":";;;;+BAiBaA;;aAAAA;;;6DAjBU;6BACc;gCACG;mCACG;0CACO;AAa3C,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1CG,IAAAA,6CAA0B,EAACF;IAC3B,MAAMG,gBAAgBC,IAAAA,2DAAiC,EAACJ;IACxD,OAAOK,IAAAA,uCAAuB,EAACL,OAAOG;AACxC;AACAR,SAASW,WAAW,GAAG,YACvB,oCAAoC"}

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

@@ -1,4 +1,4 @@
-"use strict";
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -6,18 +6,17 @@ Object.defineProperty(exports, "renderTreeItem_unstable", {
     enumerable: true,
     get: ()=>renderTreeItem_unstable
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _contexts = require("../../contexts");
 const _reactButton = require("@fluentui/react-button");
 const renderTreeItem_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(_contexts.TreeItemProvider, {
+    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_contexts.TreeItemProvider, {
         value: contextValues.treeItem
-    }, /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, /*#__PURE__*/ _react.createElement(slots.content, slotProps.content, slots.expandIcon && /*#__PURE__*/ _react.createElement(slots.expandIcon, slotProps.expandIcon), slotProps.content.children, /*#__PURE__*/ _react.createElement(_reactButton.ButtonContextProvider, {
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, slotProps.content, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slotProps.content.children, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactButton.ButtonContextProvider, {
         value: contextValues.button
-    }, slots.actions && /*#__PURE__*/ _react.createElement(slots.actions, slotProps.actions))), state.open && slots.subtree && /*#__PURE__*/ _react.createElement(slots.subtree, slotProps.subtree)));
+    }, slots.actions && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.actions, slotProps.actions))), state.open && slots.subtree && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.subtree, slotProps.subtree)));
 }; //# sourceMappingURL=renderTreeItem.js.map
 
 //# sourceMappingURL=renderTreeItem.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItem/renderTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { TreeItemProvider } from '../../contexts';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(TreeItemProvider, {\n    value: contextValues.treeItem\n  }, /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.content, slotProps.content, slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, slotProps.expandIcon), slotProps.content.children, /*#__PURE__*/React.createElement(ButtonContextProvider, {\n    value: contextValues.button\n  }, slots.actions && /*#__PURE__*/React.createElement(slots.actions, slotProps.actions))), state.open && slots.subtree && /*#__PURE__*/React.createElement(slots.subtree, slotProps.subtree)));\n};\n//# sourceMappingURL=renderTreeItem.js.map"],"names":["renderTreeItem_unstable","state","contextValues","slots","slotProps","getSlots","React","createElement","TreeItemProvider","value","treeItem","root","content","expandIcon","children","ButtonContextProvider","button","actions","open","subtree"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;gCACE;0BACQ;6BACK;AAI/B,MAAMA,0BAA0B,CAACC,OAAOC,gBAAkB;IAC/D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACC,0BAAgB,EAAE;QACxDC,OAAOP,cAAcQ,QAAQ;IAC/B,GAAG,WAAW,GAAEJ,OAAMC,aAAa,CAACJ,MAAMQ,IAAI,EAAEP,UAAUO,IAAI,EAAE,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMS,OAAO,EAAER,UAAUQ,OAAO,EAAET,MAAMU,UAAU,IAAI,WAAW,GAAEP,OAAMC,aAAa,CAACJ,MAAMU,UAAU,EAAET,UAAUS,UAAU,GAAGT,UAAUQ,OAAO,CAACE,QAAQ,EAAE,WAAW,GAAER,OAAMC,aAAa,CAACQ,kCAAqB,EAAE;QACnTN,OAAOP,cAAcc,MAAM;IAC7B,GAAGb,MAAMc,OAAO,IAAI,WAAW,GAAEX,OAAMC,aAAa,CAACJ,MAAMc,OAAO,EAAEb,UAAUa,OAAO,KAAKhB,MAAMiB,IAAI,IAAIf,MAAMgB,OAAO,IAAI,WAAW,GAAEb,OAAMC,aAAa,CAACJ,MAAMgB,OAAO,EAAEf,UAAUe,OAAO;AAC5L,GACA,0CAA0C"}
+{"version":3,"sources":["../../../lib/components/TreeItem/renderTreeItem.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TreeItemProvider } from '../../contexts';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlotsNext(state);\n  return /*#__PURE__*/createElement(TreeItemProvider, {\n    value: contextValues.treeItem\n  }, /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.content, slotProps.content, slots.expandIcon && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon), slotProps.content.children, /*#__PURE__*/createElement(ButtonContextProvider, {\n    value: contextValues.button\n  }, slots.actions && /*#__PURE__*/createElement(slots.actions, slotProps.actions))), state.open && slots.subtree && /*#__PURE__*/createElement(slots.subtree, slotProps.subtree)));\n};\n//# sourceMappingURL=renderTreeItem.js.map"],"names":["renderTreeItem_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","TreeItemProvider","value","treeItem","root","content","expandIcon","children","ButtonContextProvider","button","actions","open","subtree"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAOrCA;;aAAAA;;iCAPqE;gCACrD;0BACI;6BACK;AAI/B,MAAMA,0BAA0B,CAACC,OAAOC,gBAAkB;IAC/D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACJ;IACjB,OAAO,WAAW,GAAEK,IAAAA,8BAAa,EAACC,0BAAgB,EAAE;QAClDC,OAAON,cAAcO,QAAQ;IAC/B,GAAG,WAAW,GAAEH,IAAAA,8BAAa,EAACH,MAAMO,IAAI,EAAEN,UAAUM,IAAI,EAAE,WAAW,GAAEJ,IAAAA,8BAAa,EAACH,MAAMQ,OAAO,EAAEP,UAAUO,OAAO,EAAER,MAAMS,UAAU,IAAI,WAAW,GAAEN,IAAAA,8BAAa,EAACH,MAAMS,UAAU,EAAER,UAAUQ,UAAU,GAAGR,UAAUO,OAAO,CAACE,QAAQ,EAAE,WAAW,GAAEP,IAAAA,8BAAa,EAACQ,kCAAqB,EAAE;QAC3RN,OAAON,cAAca,MAAM;IAC7B,GAAGZ,MAAMa,OAAO,IAAI,WAAW,GAAEV,IAAAA,8BAAa,EAACH,MAAMa,OAAO,EAAEZ,UAAUY,OAAO,KAAKf,MAAMgB,IAAI,IAAId,MAAMe,OAAO,IAAI,WAAW,GAAEZ,IAAAA,8BAAa,EAACH,MAAMe,OAAO,EAAEd,UAAUc,OAAO;AAChL,GACA,0CAA0C"}

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

@@ -16,15 +16,15 @@ const _keyboardKeys = require("@fluentui/keyboard-keys");
 const _reactPortal = require("@fluentui/react-portal");
 const _index = require("../../contexts/index");
 const _tokens = require("../../utils/tokens");
-const useTreeItem_unstable = (props, ref)=>{
+function useTreeItem_unstable(props, ref) {
     const [children, subtreeChildren] = _react.Children.toArray(props.children);
     const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
-    const { content , subtree , expandIcon , leaf: isLeaf = subtreeChildren === undefined , actions , as ='div' , onClick , onKeyDown , ['aria-level']: level = contextLevel , ...rest } = props;
+    const id = (0, _reactUtilities.useId)('fui-TreeItem-', props.id);
+    const { content , subtree , expandIcon , leaf: isLeaf = subtreeChildren === undefined , actions , as ='div' , onClick , onKeyDown , ['aria-level']: level = contextLevel , value =id , ...rest } = props;
     const requestOpenChange = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestOpenChange);
     const requestNavigation = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestNavigation);
-    const id = (0, _reactUtilities.useId)('fui-TreeItem-', props.id);
     const isBranch = !isLeaf;
-    const open = (0, _index.useTreeContext_unstable)((ctx)=>isBranch && ctx.openItems.has(id));
+    const open = (0, _index.useTreeContext_unstable)((ctx)=>isBranch && ctx.openItems.has(value));
     const { dir , targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
     const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
     const actionsRef = _react.useRef(null);
@@ -34,6 +34,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (!open && isBranch) {
             return requestOpenChange({
                 event,
+                value,
                 open: true,
                 type: _tokens.treeDataTypes.arrowRight,
                 target: event.currentTarget
@@ -42,6 +43,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (open && isBranch) {
             return requestNavigation({
                 event,
+                value,
                 type: _tokens.treeDataTypes.arrowRight,
                 target: event.currentTarget
             });
@@ -51,6 +53,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (open && isBranch) {
             return requestOpenChange({
                 event,
+                value,
                 open: false,
                 type: _tokens.treeDataTypes.arrowLeft,
                 target: event.currentTarget
@@ -59,6 +62,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (!open && level > 1) {
             return requestNavigation({
                 event,
+                value,
                 target: event.currentTarget,
                 type: _tokens.treeDataTypes.arrowLeft
             });
@@ -67,6 +71,7 @@ const useTreeItem_unstable = (props, ref)=>{
     const handleEnter = (event)=>{
         requestOpenChange({
             event,
+            value,
             open: isLeaf ? open : !open,
             type: _tokens.treeDataTypes.enter,
             target: event.currentTarget
@@ -85,12 +90,14 @@ const useTreeItem_unstable = (props, ref)=>{
         const isFromExpandIcon = expandIconRef.current && (0, _reactPortal.elementContains)(expandIconRef.current, event.target);
         requestOpenChange({
             event,
+            value,
             open: isLeaf ? open : !open,
             type: isFromExpandIcon ? _tokens.treeDataTypes.expandIconClick : _tokens.treeDataTypes.click,
             target: event.currentTarget
         });
         requestNavigation({
             event,
+            value,
             target: event.currentTarget,
             type: _tokens.treeDataTypes.click
         });
@@ -113,24 +120,28 @@ const useTreeItem_unstable = (props, ref)=>{
             case _keyboardKeys.End:
                 return requestNavigation({
                     event,
+                    value,
                     type: _tokens.treeDataTypes.end,
                     target: event.currentTarget
                 });
             case _keyboardKeys.Home:
                 return requestNavigation({
                     event,
+                    value,
                     type: _tokens.treeDataTypes.home,
                     target: event.currentTarget
                 });
             case _keyboardKeys.ArrowUp:
                 return requestNavigation({
                     event,
+                    value,
                     type: _tokens.treeDataTypes.arrowUp,
                     target: event.currentTarget
                 });
             case _keyboardKeys.ArrowDown:
                 return requestNavigation({
                     event,
+                    value,
                     type: _tokens.treeDataTypes.arrowDown,
                     target: event.currentTarget
                 });
@@ -139,6 +150,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (isTypeAheadCharacter) {
             return requestNavigation({
                 event,
+                value,
                 target: event.currentTarget,
                 type: _tokens.treeDataTypes.typeAhead
             });
@@ -232,6 +244,6 @@ const useTreeItem_unstable = (props, ref)=>{
             }
         })
     };
-}; //# sourceMappingURL=useTreeItem.js.map
+} //# sourceMappingURL=useTreeItem.js.map
 
 //# sourceMappingURL=useTreeItem.js.map