@fluentui/react-tree 9.4.12 → 9.4.14

package/lib/hooks/useRootTree.js

@@ -18,29 +18,41 @@ import { createNextOpenItems } from './useControllableOpenItems';
     const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [
         props.checkedItems
     ]);
-    const requestOpenChange = (data)=>{
+    const requestOpenChange = (request)=>{
         var _props_onOpenChange;
-        const nextOpenItems = createNextOpenItems(data, openItems);
-        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {
-            ...data,
+        const open = request.itemType === 'branch' && !openItems.has(request.value);
+        const nextOpenItems = createNextOpenItems({
+            value: request.value,
+            open
+        }, openItems);
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, request.event, {
+            ...request,
+            open,
             openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
         });
     };
-    const requestCheckedChange = (data)=>{
+    const requestCheckedChange = (request)=>{
         var _props_onCheckedChange;
-        return (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, data.event, data);
+        if (selectionMode === 'none') {
+            return;
+        }
+        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, request.event, {
+            ...request,
+            selectionMode,
+            checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()
+        });
     };
-    const requestNavigation = (data)=>{
+    const requestNavigation = (request)=>{
         var _props_onNavigation;
-        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, data.event, data);
-        switch(data.type){
+        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, request);
+        switch(request.type){
             case treeDataTypes.ArrowDown:
             case treeDataTypes.ArrowUp:
             case treeDataTypes.Home:
             case treeDataTypes.End:
                 // stop the default behavior of the event
                 // which is to scroll the page
-                data.event.preventDefault();
+                request.event.preventDefault();
         }
     };
     const requestTreeResponse = useEventCallback((request)=>{
@@ -48,17 +60,9 @@ import { createNextOpenItems } from './useControllableOpenItems';
             case 'navigate':
                 return requestNavigation(request);
             case 'open':
-                return requestOpenChange({
-                    ...request,
-                    open: request.itemType === 'branch' && !openItems.has(request.value),
-                    openItems: openItems.dangerouslyGetInternalSet_unstable()
-                });
+                return requestOpenChange(request);
             case 'selection':
-                return requestCheckedChange({
-                    ...request,
-                    selectionMode: selectionMode,
-                    checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()
-                });
+                return requestCheckedChange(request);
         }
     });
     return {

package/lib/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(data.event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n  };\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation?.(data.event, data);\n    switch (data.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange({\n          ...request,\n          open: request.itemType === 'branch' && !openItems.has(request.value),\n          openItems: openItems.dangerouslyGetInternalSet_unstable(),\n        });\n      case 'selection':\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n        } as TreeCheckedChangeData);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    contextType: 'root',\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getIntrinsicElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","nextOpenItems","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAAwBA,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAQ5G,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAAgB,EAChBC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IACrG,MAAMC,oBAAoB,CAACC;YAEzBV;QADA,MAAMW,gBAAgBb,oBAAoBY,MAAMJ;SAChDN,sBAAAA,MAAMY,YAAY,cAAlBZ,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAE;YAC/B,GAAGH,IAAI;YACPJ,WAAWK,cAAcG,kCAAkC;QAC7D;IACF;IAEA,MAAMC,uBAAuB,CAACL;YAAgCV;gBAAAA,yBAAAA,MAAMgB,eAAe,cAArBhB,6CAAAA,4BAAAA,OAAwBU,KAAKG,KAAK,EAAEH;;IAElG,MAAMO,oBAAoB,CAACP;YACzBV;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAEH;QACjC,OAAQA,KAAKS,IAAI;YACf,KAAKtB,cAAcuB,SAAS;YAC5B,KAAKvB,cAAcwB,OAAO;YAC1B,KAAKxB,cAAcyB,IAAI;YACvB,KAAKzB,cAAc0B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bb,KAAKG,KAAK,CAACW,cAAc;QAC7B;IACF;IAEA,MAAMC,sBAAsBjC,iBAAiB,CAACkC;QAC5C,OAAQA,QAAQC,WAAW;YACzB,KAAK;gBACH,OAAOV,kBAAkBS;YAC3B,KAAK;gBACH,OAAOjB,kBAAkB;oBACvB,GAAGiB,OAAO;oBACVE,MAAMF,QAAQG,QAAQ,KAAK,YAAY,CAACvB,UAAUwB,GAAG,CAACJ,QAAQK,KAAK;oBACnEzB,WAAWA,UAAUQ,kCAAkC;gBACzD;YACF,KAAK;gBACH,OAAOC,qBAAqB;oBAC1B,GAAGW,OAAO;oBACVrB,eAAeA;oBACfG,cAAcA,aAAawB,kCAAkC;gBAC/D;QACJ;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAC,aAAa;QACb9B;QACAuB,MAAM;QACNzB;QACAC;QACAgC,OAAO;QACP9B;QACAE;QACAiB;QACAS,MAAMzC,KAAK4C,MAAM,CACf9C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FU,KAAKA;YACLqC,MAAM;YACN,wBAAwBjC,kBAAkB,gBAAgB,OAAOkC;YACjE,GAAGvC,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;IAEzB;AACF;AAEA,SAAStC,4BAA4BF,KAAwD;IAC3F,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAAC3C,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtC4C,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n  const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n    const open = request.itemType === 'branch' && !openItems.has(request.value);\n    const nextOpenItems = createNextOpenItems({ value: request.value, open }, openItems);\n    props.onOpenChange?.(request.event, {\n      ...request,\n      open,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n  };\n\n  const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n    if (selectionMode === 'none') {\n      return;\n    }\n    props.onCheckedChange?.(request.event, {\n      ...request,\n      selectionMode,\n      checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n      // Casting is required here due to selection | multiselection spreading the union problem\n    } as TreeCheckedChangeData);\n  };\n\n  const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n    props.onNavigation?.(request.event, request);\n    switch (request.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        request.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange(request);\n      case 'selection':\n        return requestCheckedChange(request);\n    }\n  });\n\n  return {\n    components: { root: 'div' },\n    contextType: 'root',\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getIntrinsicElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","request","open","itemType","has","value","nextOpenItems","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","dangerouslyGetInternalMap_unstable","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","requestType","components","root","contextType","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAE7F,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAAgB,EAChBC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IAErG,MAAMC,oBAAoB,CAACC;YAGzBV;QAFA,MAAMW,OAAOD,QAAQE,QAAQ,KAAK,YAAY,CAACN,UAAUO,GAAG,CAACH,QAAQI,KAAK;QAC1E,MAAMC,gBAAgBjB,oBAAoB;YAAEgB,OAAOJ,QAAQI,KAAK;YAAEH;QAAK,GAAGL;SAC1EN,sBAAAA,MAAMgB,YAAY,cAAlBhB,0CAAAA,yBAAAA,OAAqBU,QAAQO,KAAK,EAAE;YAClC,GAAGP,OAAO;YACVC;YACAL,WAAWS,cAAcG,kCAAkC;QAC7D;IACF;IAEA,MAAMC,uBAAuB,CAACT;YAI5BV;QAHA,IAAIK,kBAAkB,QAAQ;YAC5B;QACF;SACAL,yBAAAA,MAAMoB,eAAe,cAArBpB,6CAAAA,4BAAAA,OAAwBU,QAAQO,KAAK,EAAE;YACrC,GAAGP,OAAO;YACVL;YACAG,cAAcA,aAAaa,kCAAkC;QAE/D;IACF;IAEA,MAAMC,oBAAoB,CAACZ;YACzBV;SAAAA,sBAAAA,MAAMuB,YAAY,cAAlBvB,0CAAAA,yBAAAA,OAAqBU,QAAQO,KAAK,EAAEP;QACpC,OAAQA,QAAQc,IAAI;YAClB,KAAK3B,cAAc4B,SAAS;YAC5B,KAAK5B,cAAc6B,OAAO;YAC1B,KAAK7B,cAAc8B,IAAI;YACvB,KAAK9B,cAAc+B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9BlB,QAAQO,KAAK,CAACY,cAAc;QAChC;IACF;IAEA,MAAMC,sBAAsBtC,iBAAiB,CAACkB;QAC5C,OAAQA,QAAQqB,WAAW;YACzB,KAAK;gBACH,OAAOT,kBAAkBZ;YAC3B,KAAK;gBACH,OAAOD,kBAAkBC;YAC3B,KAAK;gBACH,OAAOS,qBAAqBT;QAChC;IACF;IAEA,OAAO;QACLsB,YAAY;YAAEC,MAAM;QAAM;QAC1BC,aAAa;QACb7B;QACAM,MAAM;QACNR;QACAC;QACA+B,OAAO;QACP7B;QACAE;QACAsB;QACAG,MAAMxC,KAAK2C,MAAM,CACf7C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FU,KAAKA;YACLoC,MAAM;YACN,wBAAwBhC,kBAAkB,gBAAgB,OAAOiC;YACjE,GAAGtC,KAAK;QACV,IACA;YAAEuC,aAAa;QAAM;IAEzB;AACF;AAEA,SAASrC,4BAA4BF,KAAwD;IAC3F,IAAIwC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAAC1C,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtC2C,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}

package/lib/hooks/useRovingTabIndexes.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 /**
  * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
- */ export function useRovingTabIndex(filter) {
+ */ export function useRovingTabIndex() {
     const currentElementRef = React.useRef();
     const initialize = React.useCallback((walker)=>{
         walker.currentElement = walker.root;

package/lib/hooks/useRovingTabIndexes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { HTMLElementFilter, HTMLElementWalker } from '../utils/createHTMLElementWalker';\n\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex(filter?: HTMLElementFilter) {\n  const currentElementRef = React.useRef<HTMLElement>();\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  const rove = React.useCallback((nextElement: HTMLElement) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus();\n    currentElementRef.current = nextElement;\n  }, []);\n\n  return {\n    rove,\n    initialize,\n  };\n}\n"],"names":["React","useRovingTabIndex","filter","currentElementRef","useRef","initialize","useCallback","walker","currentElement","root","tabbableChild","firstChild","element","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","current","nextElement","rove","focus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,SAASC,kBAAkBC,MAA0B;IAC1D,MAAMC,oBAAoBH,MAAMI,MAAM;IAEtC,MAAMC,aAAaL,MAAMM,WAAW,CAAC,CAACC;QACpCA,OAAOC,cAAc,GAAGD,OAAOE,IAAI;QACnC,IAAIC,gBAAgBH,OAAOI,UAAU,CAACC,CAAAA,UACpCA,QAAQC,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5ET,OAAOC,cAAc,GAAGD,OAAOE,IAAI;QACnCC,0BAAAA,2BAAAA,gBAAAA,gBAAkBH,OAAOI,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcG,QAAQ,GAAG;QACzBV,kBAAkBc,OAAO,GAAGP;QAC5B,IAAIQ,cAAkC;QACtC,MAAO,AAACA,CAAAA,cAAcX,OAAOW,WAAW,EAAC,KAAMA,gBAAgBR,cAAe;YAC5EQ,YAAYL,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMM,OAAOnB,MAAMM,WAAW,CAAC,CAACY;QAC9B,IAAI,CAACf,kBAAkBc,OAAO,EAAE;YAC9B;QACF;QACAd,kBAAkBc,OAAO,CAACJ,QAAQ,GAAG,CAAC;QACtCK,YAAYL,QAAQ,GAAG;QACvBK,YAAYE,KAAK;QACjBjB,kBAAkBc,OAAO,GAAGC;IAC9B,GAAG,EAAE;IAEL,OAAO;QACLC;QACAd;IACF;AACF"}
+{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\n\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex() {\n  const currentElementRef = React.useRef<HTMLElement>();\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  const rove = React.useCallback((nextElement: HTMLElement) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus();\n    currentElementRef.current = nextElement;\n  }, []);\n\n  return {\n    rove,\n    initialize,\n  };\n}\n"],"names":["React","useRovingTabIndex","currentElementRef","useRef","initialize","useCallback","walker","currentElement","root","tabbableChild","firstChild","element","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","current","nextElement","rove","focus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,oBAAoBF,MAAMG,MAAM;IAEtC,MAAMC,aAAaJ,MAAMK,WAAW,CAAC,CAACC;QACpCA,OAAOC,cAAc,GAAGD,OAAOE,IAAI;QACnC,IAAIC,gBAAgBH,OAAOI,UAAU,CAACC,CAAAA,UACpCA,QAAQC,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5ET,OAAOC,cAAc,GAAGD,OAAOE,IAAI;QACnCC,0BAAAA,2BAAAA,gBAAAA,gBAAkBH,OAAOI,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcG,QAAQ,GAAG;QACzBV,kBAAkBc,OAAO,GAAGP;QAC5B,IAAIQ,cAAkC;QACtC,MAAO,AAACA,CAAAA,cAAcX,OAAOW,WAAW,EAAC,KAAMA,gBAAgBR,cAAe;YAC5EQ,YAAYL,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMM,OAAOlB,MAAMK,WAAW,CAAC,CAACY;QAC9B,IAAI,CAACf,kBAAkBc,OAAO,EAAE;YAC9B;QACF;QACAd,kBAAkBc,OAAO,CAACJ,QAAQ,GAAG,CAAC;QACtCK,YAAYL,QAAQ,GAAG;QACvBK,YAAYE,KAAK;QACjBjB,kBAAkBc,OAAO,GAAGC;IAC9B,GAAG,EAAE;IAEL,OAAO;QACLC;QACAd;IACF;AACF"}

package/lib/hooks/useTreeNavigation.js

@@ -0,0 +1,66 @@
+import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
+import { treeDataTypes } from '../utils/tokens';
+import { useRovingTabIndex } from './useRovingTabIndexes';
+import * as React from 'react';
+import { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';
+import { useMergedRefs } from '@fluentui/react-utilities';
+export function useTreeNavigation() {
+    const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();
+    const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();
+    const rootRefCallback = React.useCallback((root)=>{
+        if (root && walkerRef.current) {
+            initializeRovingTabIndex(walkerRef.current);
+        }
+    }, [
+        walkerRef,
+        initializeRovingTabIndex
+    ]);
+    const getNextElement = (data)=>{
+        if (!walkerRef.current) {
+            return null;
+        }
+        switch(data.type){
+            case treeDataTypes.Click:
+                return data.target;
+            case treeDataTypes.TypeAhead:
+                walkerRef.current.currentElement = data.target;
+                return nextTypeAheadElement(walkerRef.current, data.event.key);
+            case treeDataTypes.ArrowLeft:
+                walkerRef.current.currentElement = data.target;
+                return walkerRef.current.parentElement();
+            case treeDataTypes.ArrowRight:
+                walkerRef.current.currentElement = data.target;
+                return walkerRef.current.firstChild();
+            case treeDataTypes.End:
+                walkerRef.current.currentElement = walkerRef.current.root;
+                return lastChildRecursive(walkerRef.current);
+            case treeDataTypes.Home:
+                walkerRef.current.currentElement = walkerRef.current.root;
+                return walkerRef.current.firstChild();
+            case treeDataTypes.ArrowDown:
+                walkerRef.current.currentElement = data.target;
+                return walkerRef.current.nextElement();
+            case treeDataTypes.ArrowUp:
+                walkerRef.current.currentElement = data.target;
+                return walkerRef.current.previousElement();
+        }
+    };
+    function navigate(data) {
+        const nextElement = getNextElement(data);
+        if (nextElement) {
+            rove(nextElement);
+        }
+    }
+    return {
+        navigate,
+        rootRef: useMergedRefs(walkerRootRef, rootRefCallback)
+    };
+}
+function lastChildRecursive(walker) {
+    let lastElement = null;
+    let nextElement = null;
+    while(nextElement = walker.lastChild()){
+        lastElement = nextElement;
+    }
+    return lastElement;
+}

package/lib/hooks/useTreeNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\nexport function useTreeNavigation() {\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      case treeDataTypes.ArrowRight:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return lastChildRecursive(walkerRef.current);\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.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, rootRef: useMergedRefs(walkerRootRef, rootRefCallback) } 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":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","useTreeNavigation","rove","initialize","initializeRovingTabIndex","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC;IACd,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGP;IACvD,MAAM,EAAEQ,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGR;IAE9C,MAAMS,kBAAkDV,MAAMW,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQL,UAAUM,OAAO,EAAE;YAC7BP,yBAAyBC,UAAUM,OAAO;QAC5C;IACF,GACA;QAACN;QAAWD;KAAyB;IAGvC,MAAMQ,iBAAiB,CAACC;QACtB,IAAI,CAACR,UAAUM,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKlB,cAAcmB,KAAK;gBACtB,OAAOF,KAAKG,MAAM;YACpB,KAAKpB,cAAcqB,SAAS;gBAC1BZ,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOrB,qBAAqBU,UAAUM,OAAO,EAAEE,KAAKM,KAAK,CAACC,GAAG;YAC/D,KAAKxB,cAAcyB,SAAS;gBAC1BhB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACW,aAAa;YACxC,KAAK1B,cAAc2B,UAAU;gBAC3BlB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAc6B,GAAG;gBACpBpB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOgB,mBAAmBrB,UAAUM,OAAO;YAC7C,KAAKf,cAAc+B,IAAI;gBACrBtB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOL,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAcgC,SAAS;gBAC1BvB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACkB,WAAW;YACtC,KAAKjC,cAAckC,OAAO;gBACxBzB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACoB,eAAe;QAC5C;IACF;IACA,SAASC,SAASnB,IAAiC;QACjD,MAAMgB,cAAcjB,eAAeC;QACnC,IAAIgB,aAAa;YACf3B,KAAK2B;QACP;IACF;IACA,OAAO;QAAEG;QAAU1B,SAASN,cAAcO,eAAeC;IAAiB;AAC5E;AAEA,SAASkB,mBAAmBO,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIL,cAAkC;IACtC,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}

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

@@ -11,11 +11,8 @@ Object.defineProperty(exports, "useFlatTree_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useRootTree = require("../../hooks/useRootTree");
-const _useFlatTreeNavigation = require("./useFlatTreeNavigation");
-const _createHTMLElementWalker = require("../../utils/createHTMLElementWalker");
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
-const _treeItemFilter = require("../../utils/treeItemFilter");
 const _reactutilities = require("@fluentui/react-utilities");
+const _useFlatTreeNavigation = require("../../hooks/useFlatTreeNavigation");
 const _useSubtree = require("../../hooks/useSubtree");
 const _ImmutableSet = require("../../utils/ImmutableSet");
 const _ImmutableMap = require("../../utils/ImmutableMap");
@@ -28,32 +25,19 @@ const useFlatTree_unstable = (props, ref)=>{
     return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);
 };
 function useRootFlatTree(props, ref) {
-    const { navigate, initialize } = (0, _useFlatTreeNavigation.useFlatTreeNavigation)();
-    const walkerRef = _react.useRef();
-    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const initializeWalker = _react.useCallback((root)=>{
-        if (root && targetDocument) {
-            walkerRef.current = (0, _createHTMLElementWalker.createHTMLElementWalker)(root, targetDocument, _treeItemFilter.treeItemFilter);
-            initialize(walkerRef.current);
-        }
-    }, [
-        initialize,
-        targetDocument
-    ]);
-    const handleNavigation = (0, _reactutilities.useEventCallback)((event, data)=>{
-        var _props_onNavigation;
-        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
-        if (walkerRef.current && !event.isDefaultPrevented()) {
-            navigate(data, walkerRef.current);
-        }
+    const navigation = (0, _useFlatTreeNavigation.useFlatTreeNavigation)();
+    return Object.assign((0, _useRootTree.useRootTree)({
+        ...props,
+        onNavigation: (0, _reactutilities.useEventCallback)((event, data)=>{
+            var _props_onNavigation;
+            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
+            if (!event.isDefaultPrevented()) {
+                navigation.navigate(data);
+            }
+        })
+    }, (0, _reactutilities.useMergedRefs)(ref, navigation.rootRef)), {
+        treeType: 'flat'
     });
-    return {
-        treeType: 'flat',
-        ...(0, _useRootTree.useRootTree)({
-            ...props,
-            onNavigation: handleNavigation
-        }, (0, _reactutilities.useMergedRefs)(ref, initializeWalker))
-    };
 }
 function useSubFlatTree(props, ref) {
     if (process.env.NODE_ENV === 'development') {

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

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nexport const useFlatTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level 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 isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\nfunction useRootFlatTree(props, ref) {\n    const { navigate, initialize } = useFlatTreeNavigation();\n    const walkerRef = React.useRef();\n    const { targetDocument } = useFluent_unstable();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n        if (walkerRef.current && !event.isDefaultPrevented()) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    return {\n        treeType: 'flat',\n        ...useRootTree({\n            ...props,\n            onNavigation: handleNavigation\n        }, useMergedRefs(ref, initializeWalker))\n    };\n}\nfunction useSubFlatTree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        throw new Error(`@fluentui/react-tree [useFlatTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!`);\n    }\n    return {\n        ...useSubtree(props, ref),\n        // ------ defaultTreeContextValue\n        level: 0,\n        contextType: 'root',\n        treeType: 'nested',\n        selectionMode: 'none',\n        openItems: ImmutableSet.empty,\n        checkedItems: ImmutableMap.empty,\n        requestTreeResponse: noop,\n        appearance: 'subtle',\n        size: 'medium',\n        // ------ defaultTreeContextValue\n        open: false\n    };\n}\nfunction noop() {\n/* do nothing */ }\n"],"names":["useFlatTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useRootFlatTree","useSubFlatTree","navigate","initialize","useFlatTreeNavigation","walkerRef","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleNavigation","useEventCallback","event","data","_props_onNavigation","onNavigation","call","isDefaultPrevented","treeType","useRootTree","useMergedRefs","process","env","NODE_ENV","Error","useSubtree","level","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open"],"mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;6BACK;uCACU;yCACE;qCACL;gCACJ;gCACiB;4BACrB;8BACE;8BACA;gCACE;AACxB,MAAMA,uBAAuB,CAACC,OAAOC;IACxC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,gBAAgBP,OAAOC,OAAOO,eAAeR,OAAOC;AACxE;AACA,SAASM,gBAAgBP,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEQ,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,4CAAqB;IACtD,MAAMC,YAAYT,OAAMU,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBb,OAAMc,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBF,UAAUO,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFX,WAAWE,UAAUO,OAAO;QAChC;IACJ,GAAG;QACCT;QACAI;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACHA,CAAAA,sBAAsB1B,MAAM2B,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAAC5B,OAAOwB,OAAOC;QACxI,IAAIb,UAAUO,OAAO,IAAI,CAACK,MAAMK,kBAAkB,IAAI;YAClDpB,SAASgB,MAAMb,UAAUO,OAAO;QACpC;IACJ;IACA,OAAO;QACHW,UAAU;QACV,GAAGC,IAAAA,wBAAW,EAAC;YACX,GAAG/B,KAAK;YACR2B,cAAcL;QAClB,GAAGU,IAAAA,6BAAa,EAAC/B,KAAKe,kBAAkB;IAC5C;AACJ;AACA,SAASR,eAAeR,KAAK,EAAEC,GAAG;IAC9B,IAAIgC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,MAAM,IAAIC,MAAM,CAAC;;0FAEiE,CAAC;IACvF;IACA,OAAO;QACH,GAAGC,IAAAA,sBAAU,EAACrC,OAAOC,IAAI;QACzB,iCAAiC;QACjCqC,OAAO;QACPC,aAAa;QACbT,UAAU;QACVU,eAAe;QACfC,WAAWC,0BAAY,CAACC,KAAK;QAC7BC,cAAcC,0BAAY,CAACF,KAAK;QAChCG,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACV;AACJ;AACA,SAASH;AACT,cAAc,GAAG"}
+{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nexport const useFlatTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level 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 isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\nfunction useRootFlatTree(props, ref) {\n    const navigation = useFlatTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data);\n            }\n        })\n    }, useMergedRefs(ref, navigation.rootRef)), {\n        treeType: 'flat'\n    });\n}\nfunction useSubFlatTree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        throw new Error(`@fluentui/react-tree [useFlatTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!`);\n    }\n    return {\n        ...useSubtree(props, ref),\n        // ------ defaultTreeContextValue\n        level: 0,\n        contextType: 'root',\n        treeType: 'nested',\n        selectionMode: 'none',\n        openItems: ImmutableSet.empty,\n        checkedItems: ImmutableMap.empty,\n        requestTreeResponse: noop,\n        appearance: 'subtle',\n        size: 'medium',\n        // ------ defaultTreeContextValue\n        open: false\n    };\n}\nfunction noop() {\n/* do nothing */ }\n"],"names":["useFlatTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useRootFlatTree","useSubFlatTree","navigation","useFlatTreeNavigation","Object","assign","useRootTree","onNavigation","useEventCallback","event","data","_props_onNavigation","call","isDefaultPrevented","navigate","useMergedRefs","rootRef","treeType","process","env","NODE_ENV","Error","useSubtree","level","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open"],"mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;6BACK;gCACoB;uCACV;4BACX;8BACE;8BACA;gCACE;AACxB,MAAMA,uBAAuB,CAACC,OAAOC;IACxC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,gBAAgBP,OAAOC,OAAOO,eAAeR,OAAOC;AACxE;AACA,SAASM,gBAAgBP,KAAK,EAAEC,GAAG;IAC/B,MAAMQ,aAAaC,IAAAA,4CAAqB;IACxC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGb,KAAK;QACRc,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACHA,CAAAA,sBAAsBlB,MAAMc,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,IAAI,CAACnB,OAAOgB,OAAOC;YACxI,IAAI,CAACD,MAAMI,kBAAkB,IAAI;gBAC7BX,WAAWY,QAAQ,CAACJ;YACxB;QACJ;IACJ,GAAGK,IAAAA,6BAAa,EAACrB,KAAKQ,WAAWc,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAAShB,eAAeR,KAAK,EAAEC,GAAG;IAC9B,IAAIwB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,MAAM,IAAIC,MAAM,CAAC;;0FAEiE,CAAC;IACvF;IACA,OAAO;QACH,GAAGC,IAAAA,sBAAU,EAAC7B,OAAOC,IAAI;QACzB,iCAAiC;QACjC6B,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAWC,0BAAY,CAACC,KAAK;QAC7BC,cAAcC,0BAAY,CAACF,KAAK;QAChCG,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACV;AACJ;AACA,SAASH;AACT,cAAc,GAAG"}

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

@@ -13,31 +13,17 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _createHeadlessTree = require("../../utils/createHeadlessTree");
 const _tokens = require("../../utils/tokens");
-const _useFlatTreeNavigation = require("./useFlatTreeNavigation");
+const _useFlatTreeNavigation = require("../../hooks/useFlatTreeNavigation");
 const _useControllableOpenItems = require("../../hooks/useControllableOpenItems");
 const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
 const _useFlatControllableCheckedItems = require("./useFlatControllableCheckedItems");
-const _createHTMLElementWalker = require("../../utils/createHTMLElementWalker");
-const _treeItemFilter = require("../../utils/treeItemFilter");
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 function useHeadlessFlatTree_unstable(props, options = {}) {
     const headlessTree = _react.useMemo(()=>(0, _createHeadlessTree.createHeadlessTree)(props), [
         props
     ]);
     const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(options);
     const [checkedItems, setCheckedItems] = (0, _useFlatControllableCheckedItems.useFlatControllableCheckedItems)(options, headlessTree);
-    const { initialize, navigate } = (0, _useFlatTreeNavigation.useFlatTreeNavigation)();
-    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const walkerRef = _react.useRef();
-    const initializeWalker = _react.useCallback((root)=>{
-        if (root && targetDocument) {
-            walkerRef.current = (0, _createHTMLElementWalker.createHTMLElementWalker)(root, targetDocument, _treeItemFilter.treeItemFilter);
-            initialize(walkerRef.current);
-        }
-    }, [
-        initialize,
-        targetDocument
-    ]);
+    const navigation = (0, _useFlatTreeNavigation.useFlatTreeNavigation)();
     const treeRef = _react.useRef(null);
     const handleOpenChange = (0, _reactutilities.useEventCallback)((event, data)=>{
         var _options_onOpenChange;
@@ -82,7 +68,7 @@ function useHeadlessFlatTree_unstable(props, options = {}) {
         var _treeRef_current;
         return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${_getTreeItemValueFromElement.dataTreeItemValueAttrName}="${item.value}"]`);
     }, []);
-    const ref = (0, _reactutilities.useMergedRefs)(treeRef, initializeWalker);
+    const ref = (0, _reactutilities.useMergedRefs)(treeRef, navigation.rootRef);
     const getTreeProps = _react.useCallback(()=>{
         var _options_onNavigation;
         return {
@@ -105,17 +91,13 @@ function useHeadlessFlatTree_unstable(props, options = {}) {
         headlessTree
     ]);
     return _react.useMemo(()=>({
-            navigate: (data)=>{
-                if (walkerRef.current) {
-                    navigate(data, walkerRef.current);
-                }
-            },
+            navigate: navigation.navigate,
             getTreeProps,
             getNextNavigableItem,
             getElementFromItem,
             items
         }), [
-        navigate,
+        navigation.navigate,
         getTreeProps,
         getNextNavigableItem,
         getElementFromItem,

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

@@ -1 +1 @@
-{"version":3,"sources":["useHeadlessFlatTree.js"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\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 props - a list of tree items\n * @param options - in case control over the internal openItems is required\n */ export function useHeadlessFlatTree_unstable(props, options = {}) {\n    const headlessTree = React.useMemo(()=>createHeadlessTree(props), [\n        props\n    ]);\n    const [openItems, setOpenItems] = useControllableOpenItems(options);\n    const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n    const { initialize, navigate } = useFlatTreeNavigation();\n    const { targetDocument } = useFluent_unstable();\n    const walkerRef = React.useRef();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _options_onCheckedChange;\n        const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {\n            ...data,\n            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n        });\n        setCheckedItems(nextCheckedItems);\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\n        const item = headlessTree.get(data.value);\n        if (item) {\n            switch(data.type){\n                case treeDataTypes.TypeAhead:\n                    return item;\n                case treeDataTypes.ArrowLeft:\n                    return headlessTree.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    const getElementFromItem = React.useCallback((item)=>{\n        var _treeRef_current;\n        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`);\n    }, []);\n    const ref = useMergedRefs(treeRef, initializeWalker);\n    const getTreeProps = React.useCallback(()=>{\n        var _options_onNavigation;\n        return {\n            ref,\n            openItems,\n            selectionMode: options.selectionMode,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onCheckedChange: handleCheckedChange,\n            onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop\n        };\n    }, // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems,\n        checkedItems,\n        options.selectionMode,\n        options.onNavigation\n    ]);\n    const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [\n        openItems,\n        headlessTree\n    ]);\n    return React.useMemo(()=>({\n            navigate: (data)=>{\n                if (walkerRef.current) {\n                    navigate(data, walkerRef.current);\n                }\n            },\n            getTreeProps,\n            getNextNavigableItem,\n            getElementFromItem,\n            items\n        }), [\n        navigate,\n        getTreeProps,\n        getNextNavigableItem,\n        getElementFromItem,\n        items\n    ]);\n}\nfunction noop() {\n/* noop */ }\n"],"names":["useHeadlessFlatTree_unstable","props","options","headlessTree","React","useMemo","createHeadlessTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","setCheckedItems","useFlatControllableCheckedItems","initialize","navigate","useFlatTreeNavigation","targetDocument","useFluent_unstable","walkerRef","useRef","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","treeRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_options_onCheckedChange","nextCheckedItems","createNextFlatCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","_treeRef_current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","getTreeProps","_options_onNavigation","selectionMode","onNavigation","noop","items"],"mappings":";;;;+BAsBoBA;;;eAAAA;;;;gCAtB4B;iEACzB;oCACY;wBACL;uCACQ;0CACwB;6CACpB;iDACkC;yCACpC;gCACT;qCACI;AAYxB,SAASA,6BAA6BC,KAAK,EAAEC,UAAU,CAAC,CAAC;IAChE,MAAMC,eAAeC,OAAMC,OAAO,CAAC,IAAIC,IAAAA,sCAAkB,EAACL,QAAQ;QAC9DA;KACH;IACD,MAAM,CAACM,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACP;IAC3D,MAAM,CAACQ,cAAcC,gBAAgB,GAAGC,IAAAA,gEAA+B,EAACV,SAASC;IACjF,MAAM,EAAEU,UAAU,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB;IACtD,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,YAAYd,OAAMe,MAAM;IAC9B,MAAMC,mBAAmBhB,OAAMiB,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQN,gBAAgB;YACxBE,UAAUK,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMN,gBAAgBS,8BAAc;YAChFZ,WAAWK,UAAUK,OAAO;QAChC;IACJ,GAAG;QACCV;QACAG;KACH;IACD,MAAMU,UAAUtB,OAAMe,MAAM,CAAC;IAC7B,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMvB;QAC/CwB,CAAAA,wBAAwB7B,QAAQgC,YAAY,AAAD,MAAO,QAAQH,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBI,IAAI,CAACjC,SAAS2B,OAAO;YAC9I,GAAGC,IAAI;YACPvB,WAAWyB,cAAcI,kCAAkC;QAC/D;QACA5B,aAAawB;IACjB;IACA,MAAMK,sBAAsBT,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QACjD,IAAIQ;QACJ,MAAMC,mBAAmBC,IAAAA,2DAA0B,EAACV,MAAMpB,cAAcP;QACvEmC,CAAAA,2BAA2BpC,QAAQuC,eAAe,AAAD,MAAO,QAAQH,6BAA6B,KAAK,IAAI,KAAK,IAAIA,yBAAyBH,IAAI,CAACjC,SAAS2B,OAAO;YAC1J,GAAGC,IAAI;YACPpB,cAAc6B,iBAAiBG,kCAAkC;QACrE;QACA/B,gBAAgB4B;IACpB;IACA,MAAMI,uBAAuBf,IAAAA,gCAAgB,EAAC,CAACgB,cAAcd;QACzD,MAAMe,OAAO1C,aAAa2C,GAAG,CAAChB,KAAKiB,KAAK;QACxC,IAAIF,MAAM;YACN,OAAOf,KAAKkB,IAAI;gBACZ,KAAKC,qBAAa,CAACC,SAAS;oBACxB,OAAOL;gBACX,KAAKI,qBAAa,CAACE,SAAS;oBACxB,OAAOhD,aAAa2C,GAAG,CAACD,KAAKO,WAAW;gBAC5C,KAAKH,qBAAa,CAACI,UAAU;oBACzB,OAAOT,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;gBACvC,KAAKL,qBAAa,CAACM,GAAG;oBAClB,OAAOX,YAAY,CAACA,aAAaY,MAAM,GAAG,EAAE;gBAChD,KAAKP,qBAAa,CAACQ,IAAI;oBACnB,OAAOb,YAAY,CAAC,EAAE;gBAC1B,KAAKK,qBAAa,CAACS,SAAS;oBACxB,OAAOd,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;gBACvC,KAAKL,qBAAa,CAACU,OAAO;oBACtB,OAAOf,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;YAC3C;QACJ;IACJ;IACA,MAAMM,qBAAqBxD,OAAMiB,WAAW,CAAC,CAACwB;QAC1C,IAAIgB;QACJ,OAAO,AAACA,CAAAA,mBAAmBnC,QAAQH,OAAO,AAAD,MAAO,QAAQsC,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBC,aAAa,CAAC,CAAC,CAAC,EAAEC,sDAAyB,CAAC,EAAE,EAAElB,KAAKE,KAAK,CAAC,EAAE,CAAC;IAClL,GAAG,EAAE;IACL,MAAMiB,MAAMC,IAAAA,6BAAa,EAACvC,SAASN;IACnC,MAAM8C,eAAe9D,OAAMiB,WAAW,CAAC;QACnC,IAAI8C;QACJ,OAAO;YACHH;YACAzD;YACA6D,eAAelE,QAAQkE,aAAa;YACpC1D;YACAwB,cAAcP;YACdc,iBAAiBJ;YACjBgC,cAAc,AAACF,CAAAA,wBAAwBjE,QAAQmE,YAAY,AAAD,MAAO,QAAQF,0BAA0B,KAAK,IAAIA,wBAAwBG;QACxI;IACJ,GACA;QACI/D;QACAG;QACAR,QAAQkE,aAAa;QACrBlE,QAAQmE,YAAY;KACvB;IACD,MAAME,QAAQnE,OAAMiB,WAAW,CAAC,IAAIlB,aAAayC,YAAY,CAACrC,YAAY;QACtEA;QACAJ;KACH;IACD,OAAOC,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClBS,UAAU,CAACgB;gBACP,IAAIZ,UAAUK,OAAO,EAAE;oBACnBT,SAASgB,MAAMZ,UAAUK,OAAO;gBACpC;YACJ;YACA2C;YACAvB;YACAiB;YACAW;QACJ,CAAA,GAAI;QACJzD;QACAoD;QACAvB;QACAiB;QACAW;KACH;AACL;AACA,SAASD;AACT,QAAQ,GAAG"}
+{"version":3,"sources":["useHeadlessFlatTree.js"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\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 props - a list of tree items\n * @param options - in case control over the internal openItems is required\n */ export function useHeadlessFlatTree_unstable(props, options = {}) {\n    const headlessTree = React.useMemo(()=>createHeadlessTree(props), [\n        props\n    ]);\n    const [openItems, setOpenItems] = useControllableOpenItems(options);\n    const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n    const navigation = useFlatTreeNavigation();\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _options_onCheckedChange;\n        const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {\n            ...data,\n            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n        });\n        setCheckedItems(nextCheckedItems);\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\n        const item = headlessTree.get(data.value);\n        if (item) {\n            switch(data.type){\n                case treeDataTypes.TypeAhead:\n                    return item;\n                case treeDataTypes.ArrowLeft:\n                    return headlessTree.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    const getElementFromItem = React.useCallback((item)=>{\n        var _treeRef_current;\n        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`);\n    }, []);\n    const ref = useMergedRefs(treeRef, navigation.rootRef);\n    const getTreeProps = React.useCallback(()=>{\n        var _options_onNavigation;\n        return {\n            ref,\n            openItems,\n            selectionMode: options.selectionMode,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onCheckedChange: handleCheckedChange,\n            onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop\n        };\n    }, // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems,\n        checkedItems,\n        options.selectionMode,\n        options.onNavigation\n    ]);\n    const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [\n        openItems,\n        headlessTree\n    ]);\n    return React.useMemo(()=>({\n            navigate: navigation.navigate,\n            getTreeProps,\n            getNextNavigableItem,\n            getElementFromItem,\n            items\n        }), [\n        navigation.navigate,\n        getTreeProps,\n        getNextNavigableItem,\n        getElementFromItem,\n        items\n    ]);\n}\nfunction noop() {\n/* noop */ }\n"],"names":["useHeadlessFlatTree_unstable","props","options","headlessTree","React","useMemo","createHeadlessTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","setCheckedItems","useFlatControllableCheckedItems","navigation","useFlatTreeNavigation","treeRef","useRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_options_onCheckedChange","nextCheckedItems","createNextFlatCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","_treeRef_current","current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","rootRef","getTreeProps","_options_onNavigation","selectionMode","onNavigation","noop","items","navigate"],"mappings":"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"}

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

@@ -16,10 +16,7 @@ const _useNestedControllableCheckedItems = require("./useNestedControllableCheck
 const _subtreeContext = require("../../contexts/subtreeContext");
 const _useRootTree = require("../../hooks/useRootTree");
 const _useSubtree = require("../../hooks/useSubtree");
-const _createHTMLElementWalker = require("../../utils/createHTMLElementWalker");
-const _treeItemFilter = require("../../utils/treeItemFilter");
-const _useTreeNavigation = require("./useTreeNavigation");
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useTreeNavigation = require("../../hooks/useTreeNavigation");
 const _treeContext = require("../../contexts/treeContext");
 const useTree_unstable = (props, ref)=>{
     const isRoot = _react.useContext(_subtreeContext.SubtreeContext) === undefined;
@@ -31,55 +28,38 @@ const useTree_unstable = (props, ref)=>{
 function useNestedRootTree(props, ref) {
     const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
     const checkedItems = (0, _useNestedControllableCheckedItems.useNestedCheckedItems)(props);
-    const { navigate, initialize } = (0, _useTreeNavigation.useTreeNavigation)();
-    const walkerRef = _react.useRef();
-    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const initializeWalker = _react.useCallback((root)=>{
-        if (root && targetDocument) {
-            walkerRef.current = (0, _createHTMLElementWalker.createHTMLElementWalker)(root, targetDocument, _treeItemFilter.treeItemFilter);
-            initialize(walkerRef.current);
-        }
-    }, [
-        initialize,
-        targetDocument
-    ]);
-    const handleOpenChange = (0, _reactutilities.useEventCallback)((event, data)=>{
-        var _props_onOpenChange;
-        const nextOpenItems = (0, _useControllableOpenItems.createNextOpenItems)(data, openItems);
-        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {
-            ...data,
-            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
-        });
-        setOpenItems(nextOpenItems);
-    });
-    const handleCheckedChange = (0, _reactutilities.useEventCallback)((event, data)=>{
-        if (walkerRef.current) {
+    const navigation = (0, _useTreeNavigation.useTreeNavigation)();
+    return Object.assign((0, _useRootTree.useRootTree)({
+        ...props,
+        openItems,
+        checkedItems,
+        onOpenChange: (0, _reactutilities.useEventCallback)((event, data)=>{
+            var _props_onOpenChange;
+            const nextOpenItems = (0, _useControllableOpenItems.createNextOpenItems)(data, openItems);
+            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {
+                ...data,
+                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
+            });
+            setOpenItems(nextOpenItems);
+        }),
+        onNavigation: (0, _reactutilities.useEventCallback)((event, data)=>{
+            var _props_onNavigation;
+            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
+            if (!event.isDefaultPrevented()) {
+                navigation.navigate(data);
+            }
+        }),
+        onCheckedChange: (0, _reactutilities.useEventCallback)((event, data)=>{
             var _props_onCheckedChange;
             const nextCheckedItems = (0, _useNestedControllableCheckedItems.createNextNestedCheckedItems)(data, checkedItems);
             (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {
                 ...data,
                 checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
             });
-        }
-    });
-    const handleNavigation = (0, _reactutilities.useEventCallback)((event, data)=>{
-        var _props_onNavigation;
-        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
-        if (walkerRef.current && !event.isDefaultPrevented()) {
-            navigate(data, walkerRef.current);
-        }
+        })
+    }, (0, _reactutilities.useMergedRefs)(ref, navigation.rootRef)), {
+        treeType: 'nested'
     });
-    return {
-        treeType: 'nested',
-        ...(0, _useRootTree.useRootTree)({
-            ...props,
-            openItems,
-            checkedItems,
-            onOpenChange: handleOpenChange,
-            onNavigation: handleNavigation,
-            onCheckedChange: handleCheckedChange
-        }, (0, _reactutilities.useMergedRefs)(ref, initializeWalker))
-    };
 }
 function useNestedSubtree(props, ref) {
     if (process.env.NODE_ENV === 'development') {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level 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 isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const { navigate, initialize } = useTreeNavigation();\n    const walkerRef = React.useRef();\n    const { targetDocument } = useFluent_unstable();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _props_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        if (walkerRef.current) {\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        }\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n        if (walkerRef.current && !event.isDefaultPrevented()) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    return {\n        treeType: 'nested',\n        ...useRootTree({\n            ...props,\n            openItems,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onNavigation: handleNavigation,\n            onCheckedChange: handleCheckedChange\n        }, useMergedRefs(ref, initializeWalker))\n    };\n}\nfunction useNestedSubtree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        // this doesn't break rule of hooks, as environment is a static value\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n        if (treeType === 'flat') {\n            throw new Error(`@fluentui/react-tree [useTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <Tree> component inside of a <FlatTree> component!`);\n        }\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigate","initialize","useTreeNavigation","walkerRef","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","_props_onNavigation","onNavigation","isDefaultPrevented","treeType","useRootTree","useMergedRefs","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"mappings":"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"}
+{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level 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 isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const navigation = useTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data)=>{\n            var _props_onOpenChange;\n            const nextOpenItems = createNextOpenItems(data, openItems);\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n                ...data,\n                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n            });\n            setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data);\n            }\n        }),\n        onCheckedChange: useEventCallback((event, data)=>{\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        })\n    }, useMergedRefs(ref, navigation.rootRef)), {\n        treeType: 'nested'\n    });\n}\nfunction useNestedSubtree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        // this doesn't break rule of hooks, as environment is a static value\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n        if (treeType === 'flat') {\n            throw new Error(`@fluentui/react-tree [useTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <Tree> component inside of a <FlatTree> component!`);\n        }\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigation","useTreeNavigation","Object","assign","useRootTree","onOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","call","dangerouslyGetInternalSet_unstable","onNavigation","_props_onNavigation","isDefaultPrevented","navigate","onCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","dangerouslyGetInternalMap_unstable","useMergedRefs","rootRef","treeType","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACyB;0CACc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;AACjC,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC5E;AACA,SAASM,kBAAkBP,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAiB;IACpC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMb;YAC/Cc,CAAAA,sBAAsBvB,MAAMmB,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,IAAI,CAAC1B,OAAOqB,OAAO;gBACpI,GAAGC,IAAI;gBACPb,WAAWe,cAAcG,kCAAkC;YAC/D;YACAjB,aAAac;QACjB;QACAI,cAAcR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIO;YACHA,CAAAA,sBAAsB7B,MAAM4B,YAAY,AAAD,MAAO,QAAQC,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBH,IAAI,CAAC1B,OAAOqB,OAAOC;YACxI,IAAI,CAACD,MAAMS,kBAAkB,IAAI;gBAC7BhB,WAAWiB,QAAQ,CAACT;YACxB;QACJ;QACAU,iBAAiBZ,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACtC,IAAIW;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACb,MAAMV;YAC3DqB,CAAAA,yBAAyBjC,MAAMgC,eAAe,AAAD,MAAO,QAAQC,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBP,IAAI,CAAC1B,OAAOqB,OAAO;gBAChJ,GAAGC,IAAI;gBACPV,cAAcsB,iBAAiBE,kCAAkC;YACrE;QACJ;IACJ,GAAGC,IAAAA,6BAAa,EAACpC,KAAKa,WAAWwB,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAAS/B,iBAAiBR,KAAK,EAAEC,GAAG;IAChC,IAAIuC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAWI,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACrB,MAAM,IAAIM,MAAM,CAAC;;mEAEsC,CAAC;QAC5D;IACJ;IACA,OAAOC,IAAAA,sBAAU,EAAC9C,OAAOC;AAC7B"}