@fluentui/react-tree 9.0.0-beta.16 → 9.0.0-beta.18

package/lib/hooks/useFlatTree.js

@@ -15,63 +15,72 @@ import { useOpenItemsState } from './useOpenItemsState';
  *
  * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
- */
-export function useFlatTree_unstable(flatTreeItemProps, options = {}) {
-  const [openItems, updateOpenItems] = useOpenItemsState(options);
-  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);
-  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
-  const handleOpenChange = useEventCallback((event, data) => {
-    var _options_onOpenChange;
-    (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
-    if (!event.isDefaultPrevented()) {
-      updateOpenItems(data);
-    }
-    event.preventDefault();
-  });
-  const handleNavigation = useEventCallback((event, data) => {
-    var _options_onNavigation_unstable;
-    (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);
-    if (!event.isDefaultPrevented()) {
-      navigate(data);
-    }
-    event.preventDefault();
-  });
-  const getNextNavigableItem = useEventCallback((visibleItems, data) => {
-    const item = flatTreeItems.get(data.value);
-    if (item) {
-      switch (data.type) {
-        case treeDataTypes.TypeAhead:
-          return item;
-        case treeDataTypes.ArrowLeft:
-          return flatTreeItems.get(item.parentValue);
-        case treeDataTypes.ArrowRight:
-          return visibleItems[item.index + 1];
-        case treeDataTypes.End:
-          return visibleItems[visibleItems.length - 1];
-        case treeDataTypes.Home:
-          return visibleItems[0];
-        case treeDataTypes.ArrowDown:
-          return visibleItems[item.index + 1];
-        case treeDataTypes.ArrowUp:
-          return visibleItems[item.index - 1];
-      }
-    }
-  });
-  const getTreeProps = React.useCallback(() => ({
-    ref: navigationRef,
-    openItems,
-    onOpenChange: handleOpenChange,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    onNavigation_unstable: handleNavigation
-  }),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [openItems]);
-  const items = React.useCallback(() => VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [openItems, flatTreeItems]);
-  return React.useMemo(() => ({
-    navigate,
-    getTreeProps,
-    getNextNavigableItem,
-    items
-  }), [navigate, getTreeProps, getNextNavigableItem, items]);
+ */ export function useFlatTree_unstable(flatTreeItemProps, options = {}) {
+    const [openItems, updateOpenItems] = useOpenItemsState(options);
+    const flatTreeItems = React.useMemo(()=>createFlatTreeItems(flatTreeItemProps), [
+        flatTreeItemProps
+    ]);
+    const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
+    const handleOpenChange = useEventCallback((event, data)=>{
+        var _options_onOpenChange;
+        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
+        if (!event.isDefaultPrevented()) {
+            updateOpenItems(data);
+        }
+        event.preventDefault();
+    });
+    const handleNavigation = useEventCallback((event, data)=>{
+        var _options_onNavigation_unstable;
+        (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);
+        if (!event.isDefaultPrevented()) {
+            navigate(data);
+        }
+        event.preventDefault();
+    });
+    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{
+        const item = flatTreeItems.get(data.value);
+        if (item) {
+            switch(data.type){
+                case treeDataTypes.TypeAhead:
+                    return item;
+                case treeDataTypes.ArrowLeft:
+                    return flatTreeItems.get(item.parentValue);
+                case treeDataTypes.ArrowRight:
+                    return visibleItems[item.index + 1];
+                case treeDataTypes.End:
+                    return visibleItems[visibleItems.length - 1];
+                case treeDataTypes.Home:
+                    return visibleItems[0];
+                case treeDataTypes.ArrowDown:
+                    return visibleItems[item.index + 1];
+                case treeDataTypes.ArrowUp:
+                    return visibleItems[item.index - 1];
+            }
+        }
+    });
+    const getTreeProps = React.useCallback(()=>({
+            ref: navigationRef,
+            openItems,
+            onOpenChange: handleOpenChange,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            onNavigation_unstable: handleNavigation
+        }), // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        openItems
+    ]);
+    const items = React.useCallback(()=>VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [
+        openItems,
+        flatTreeItems
+    ]);
+    return React.useMemo(()=>({
+            navigate,
+            getTreeProps,
+            getNextNavigableItem,
+            items
+        }), [
+        navigate,
+        getTreeProps,
+        getNextNavigableItem,
+        items
+    ]);
 }
-//# sourceMappingURL=useFlatTree.js.map

package/lib/hooks/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEventCallback","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","handleOpenChange","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getTreeProps","useCallback","ref","items"],"sources":["../../src/hooks/useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\nimport type {\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree';\nimport type { TreeItemProps } from '../TreeItem';\nimport { ImmutableSet } from '../utils/ImmutableSet';\n\nexport type FlatTreeItemProps<Value = string> = Omit<TreeItemProps<Value>, 'itemType'> &\n  Partial<Pick<TreeItemProps<Value>, 'itemType'>> & {\n    value: Value;\n    parentValue?: Value;\n  };\n\n/**\n * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to\n * `useFlatTree` but with extra information that might be useful on flat tree scenarios\n */\nexport type FlatTreeItem<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {\n  index: number;\n  level: number;\n  childrenSize: number;\n  value: Props['value'];\n  parentValue: Props['parentValue'];\n  /**\n   * A reference to the element that will render the `TreeItem`,\n   * this is necessary for nodes with parents (to ensure child to parent navigation),\n   * if a node has no parent then this reference will be null.\n   */\n  ref: React.RefObject<HTMLDivElement>;\n  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &\n    Omit<Props, 'parentValue'>;\n};\n\nexport type FlatTreeProps<Value = string> = Required<\n  Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>\n> & {\n  ref: React.Ref<HTMLDivElement>;\n  openItems: ImmutableSet<Value>;\n};\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): FlatTreeProps<Props['value']>;\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && document.getElementById(nextItem.id)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable<Props['value']>): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: FlatTreeItem<Props>[],\n    data: TreeNavigationData_unstable<Props['value']>,\n  ): FlatTreeItem<Props> | undefined;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<FlatTreeItem<Props>>;\n};\n\ntype FlatTreeOptions<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = Pick<\n  TreeProps<Props['value']>,\n  'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'\n>;\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(\n  flatTreeItemProps: Props[],\n  options: FlatTreeOptions<Props> = {},\n): FlatTree<Props> {\n  const [openItems, updateOpenItems] = useOpenItemsState<Props['value']>(options);\n  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData<Props['value']>) => {\n    options.onOpenChange?.(event, data);\n    if (!event.isDefaultPrevented()) {\n      updateOpenItems(data);\n    }\n    event.preventDefault();\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Props['value']>) => {\n      options.onNavigation_unstable?.(event, data);\n      if (!event.isDefaultPrevented()) {\n        navigate(data);\n      }\n      event.preventDefault();\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable<Props['value']>) => {\n      const item = flatTreeItems.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return flatTreeItems.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref: navigationRef as React.Ref<HTMLDivElement>,\n      openItems,\n      onOpenChange: handleOpenChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems],\n  );\n\n  const items = React.useCallback(\n    () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),\n    [openItems, flatTreeItems],\n  );\n\n  return React.useMemo(\n    () => ({ navigate, getTreeProps, getNextNavigableItem, items }),\n    [navigate, getTreeProps, getNextNavigableItem, items],\n  );\n}\n"],"mappings":"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"}
+{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\nimport type {\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree';\nimport type { TreeItemProps } from '../TreeItem';\nimport { ImmutableSet } from '../utils/ImmutableSet';\n\nexport type FlatTreeItemProps<Value = string> = Omit<TreeItemProps<Value>, 'itemType'> &\n  Partial<Pick<TreeItemProps<Value>, 'itemType'>> & {\n    value: Value;\n    parentValue?: Value;\n  };\n\n/**\n * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to\n * `useFlatTree` but with extra information that might be useful on flat tree scenarios\n */\nexport type FlatTreeItem<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {\n  index: number;\n  level: number;\n  childrenSize: number;\n  value: Props['value'];\n  parentValue: Props['parentValue'];\n  /**\n   * A reference to the element that will render the `TreeItem`,\n   * this is necessary for nodes with parents (to ensure child to parent navigation),\n   * if a node has no parent then this reference will be null.\n   */\n  ref: React.RefObject<HTMLDivElement>;\n  getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> &\n    Omit<Props, 'parentValue'>;\n};\n\nexport type FlatTreeProps<Value = string> = Required<\n  Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>\n> & {\n  ref: React.Ref<HTMLDivElement>;\n  openItems: ImmutableSet<Value>;\n};\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): FlatTreeProps<Props['value']>;\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && document.getElementById(nextItem.id)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable<Props['value']>): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: FlatTreeItem<Props>[],\n    data: TreeNavigationData_unstable<Props['value']>,\n  ): FlatTreeItem<Props> | undefined;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<FlatTreeItem<Props>>;\n};\n\ntype FlatTreeOptions<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = Pick<\n  TreeProps<Props['value']>,\n  'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'\n>;\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(\n  flatTreeItemProps: Props[],\n  options: FlatTreeOptions<Props> = {},\n): FlatTree<Props> {\n  const [openItems, updateOpenItems] = useOpenItemsState<Props['value']>(options);\n  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData<Props['value']>) => {\n    options.onOpenChange?.(event, data);\n    if (!event.isDefaultPrevented()) {\n      updateOpenItems(data);\n    }\n    event.preventDefault();\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Props['value']>) => {\n      options.onNavigation_unstable?.(event, data);\n      if (!event.isDefaultPrevented()) {\n        navigate(data);\n      }\n      event.preventDefault();\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable<Props['value']>) => {\n      const item = flatTreeItems.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return flatTreeItems.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref: navigationRef as React.Ref<HTMLDivElement>,\n      openItems,\n      onOpenChange: handleOpenChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems],\n  );\n\n  const items = React.useCallback(\n    () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),\n    [openItems, flatTreeItems],\n  );\n\n  return React.useMemo(\n    () => ({ navigate, getTreeProps, getNextNavigableItem, items }),\n    [navigate, getTreeProps, getNextNavigableItem, items],\n  );\n}\n"],"names":["useEventCallback","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","handleOpenChange","event","data","onOpenChange","isDefaultPrevented","preventDefault","handleNavigation","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getTreeProps","useCallback","ref","items"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ,+BAA+B;AACjG,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,iBAAiB,QAAQ,sBAAsB;AA2GxD;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,qBACdC,iBAA0B,EAC1BC,UAAkC,CAAC,CAAC,EACnB;IACjB,MAAM,CAACC,WAAWC,gBAAgB,GAAGL,kBAAkCG;IACvE,MAAMG,gBAAgBX,MAAMY,OAAO,CAAC,IAAMX,oBAAoBM,oBAAoB;QAACA;KAAkB;IACrG,MAAM,CAACM,UAAUC,cAAc,GAAGV,sBAAsBO;IAExD,MAAMI,mBAAmBhB,iBAAiB,CAACiB,OAA4BC,OAA6C;YAClHT;QAAAA,CAAAA,wBAAAA,QAAQU,YAAY,cAApBV,mCAAAA,KAAAA,IAAAA,sBAAAA,KAAAA,SAAuBQ,OAAOC;QAC9B,IAAI,CAACD,MAAMG,kBAAkB,IAAI;YAC/BT,gBAAgBO;QAClB,CAAC;QACDD,MAAMI,cAAc;IACtB;IAEA,MAAMC,mBAAmBtB,iBACvB,CAACiB,OAAqCC,OAAsD;YAC1FT;QAAAA,CAAAA,iCAAAA,QAAQc,qBAAqB,cAA7Bd,4CAAAA,KAAAA,IAAAA,+BAAAA,KAAAA,SAAgCQ,OAAOC;QACvC,IAAI,CAACD,MAAMG,kBAAkB,IAAI;YAC/BN,SAASI;QACX,CAAC;QACDD,MAAMI,cAAc;IACtB;IAGF,MAAMG,uBAAuBxB,iBAC3B,CAACyB,cAAqCP,OAAsD;QAC1F,MAAMQ,OAAOd,cAAce,GAAG,CAACT,KAAKU,KAAK;QACzC,IAAIF,MAAM;YACR,OAAQR,KAAKW,IAAI;gBACf,KAAKzB,cAAc0B,SAAS;oBAC1B,OAAOJ;gBACT,KAAKtB,cAAc2B,SAAS;oBAC1B,OAAOnB,cAAce,GAAG,CAACD,KAAKM,WAAW;gBAC3C,KAAK5B,cAAc6B,UAAU;oBAC3B,OAAOR,YAAY,CAACC,KAAKQ,KAAK,GAAG,EAAE;gBACrC,KAAK9B,cAAc+B,GAAG;oBACpB,OAAOV,YAAY,CAACA,aAAaW,MAAM,GAAG,EAAE;gBAC9C,KAAKhC,cAAciC,IAAI;oBACrB,OAAOZ,YAAY,CAAC,EAAE;gBACxB,KAAKrB,cAAckC,SAAS;oBAC1B,OAAOb,YAAY,CAACC,KAAKQ,KAAK,GAAG,EAAE;gBACrC,KAAK9B,cAAcmC,OAAO;oBACxB,OAAOd,YAAY,CAACC,KAAKQ,KAAK,GAAG,EAAE;YACvC;QACF,CAAC;IACH;IAGF,MAAMM,eAAevC,MAAMwC,WAAW,CACpC,IAAO,CAAA;YACLC,KAAK3B;YACLL;YACAS,cAAcH;YACd,gEAAgE;YAChEO,uBAAuBD;QACzB,CAAA,GACA,uDAAuD;IACvD;QAACZ;KAAU;IAGb,MAAMiC,QAAQ1C,MAAMwC,WAAW,CAC7B,IAAMtC,6BAA6BO,WAAWE,gBAC9C;QAACF;QAAWE;KAAc;IAG5B,OAAOX,MAAMY,OAAO,CAClB,IAAO,CAAA;YAAEC;YAAU0B;YAAchB;YAAsBmB;QAAM,CAAA,GAC7D;QAAC7B;QAAU0B;QAAchB;QAAsBmB;KAAM;AAEzD,CAAC"}

package/lib/hooks/useFlatTreeNavigation.js

@@ -6,71 +6,69 @@ import { treeItemFilter } from '../utils/treeItemFilter';
 import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
 import { useRovingTabIndex } from './useRovingTabIndexes';
 export function useFlatTreeNavigation(flatTreeItems) {
-  const {
-    targetDocument
-  } = useFluent_unstable();
-  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);
-  const [{
-    rove
-  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
-  function getNextElement(data) {
-    if (!targetDocument || !treeItemWalkerRef.current) {
-      return null;
+    const { targetDocument  } = useFluent_unstable();
+    const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);
+    const [{ rove  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
+    function getNextElement(data) {
+        if (!targetDocument || !treeItemWalkerRef.current) {
+            return null;
+        }
+        const treeItemWalker = treeItemWalkerRef.current;
+        switch(data.type){
+            case treeDataTypes.Click:
+                return data.target;
+            case treeDataTypes.TypeAhead:
+                treeItemWalker.currentElement = data.target;
+                return nextTypeAheadElement(treeItemWalker, data.event.key);
+            case treeDataTypes.ArrowLeft:
+                return parentElement(flatTreeItems, data.value);
+            case treeDataTypes.ArrowRight:
+                treeItemWalker.currentElement = data.target;
+                return firstChild(data.target, treeItemWalker);
+            case treeDataTypes.End:
+                treeItemWalker.currentElement = treeItemWalker.root;
+                return treeItemWalker.lastChild();
+            case treeDataTypes.Home:
+                treeItemWalker.currentElement = treeItemWalker.root;
+                return treeItemWalker.firstChild();
+            case treeDataTypes.ArrowDown:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.nextElement();
+            case treeDataTypes.ArrowUp:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.previousElement();
+        }
     }
-    const treeItemWalker = treeItemWalkerRef.current;
-    switch (data.type) {
-      case treeDataTypes.Click:
-        return data.target;
-      case treeDataTypes.TypeAhead:
-        treeItemWalker.currentElement = data.target;
-        return nextTypeAheadElement(treeItemWalker, data.event.key);
-      case treeDataTypes.ArrowLeft:
-        return parentElement(flatTreeItems, data.value);
-      case treeDataTypes.ArrowRight:
-        treeItemWalker.currentElement = data.target;
-        return firstChild(data.target, treeItemWalker);
-      case treeDataTypes.End:
-        treeItemWalker.currentElement = treeItemWalker.root;
-        return treeItemWalker.lastChild();
-      case treeDataTypes.Home:
-        treeItemWalker.currentElement = treeItemWalker.root;
-        return treeItemWalker.firstChild();
-      case treeDataTypes.ArrowDown:
-        treeItemWalker.currentElement = data.target;
-        return treeItemWalker.nextElement();
-      case treeDataTypes.ArrowUp:
-        treeItemWalker.currentElement = data.target;
-        return treeItemWalker.previousElement();
-    }
-  }
-  const navigate = useEventCallback(data => {
-    const nextElement = getNextElement(data);
-    if (nextElement) {
-      rove(nextElement);
-    }
-  });
-  return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)];
+    const navigate = useEventCallback((data)=>{
+        const nextElement = getNextElement(data);
+        if (nextElement) {
+            rove(nextElement);
+        }
+    });
+    return [
+        navigate,
+        useMergedRefs(treeItemWalkerRootRef, rovingRootRef)
+    ];
 }
 function firstChild(target, treeWalker) {
-  const nextElement = treeWalker.nextElement();
-  if (!nextElement) {
+    const nextElement = treeWalker.nextElement();
+    if (!nextElement) {
+        return null;
+    }
+    const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');
+    const nextElementAriaLevel = nextElement.getAttribute('aria-level');
+    const targetAriaLevel = target.getAttribute('aria-level');
+    if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {
+        return nextElement;
+    }
     return null;
-  }
-  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');
-  const nextElementAriaLevel = nextElement.getAttribute('aria-level');
-  const targetAriaLevel = target.getAttribute('aria-level');
-  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {
-    return nextElement;
-  }
-  return null;
 }
 function parentElement(flatTreeItems, value) {
-  const flatTreeItem = flatTreeItems.get(value);
-  if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {
-    const parentItem = flatTreeItems.get(flatTreeItem.parentValue);
-    var _parentItem_ref_current;
-    return (_parentItem_ref_current = parentItem === null || parentItem === void 0 ? void 0 : parentItem.ref.current) !== null && _parentItem_ref_current !== void 0 ? _parentItem_ref_current : null;
-  }
-  return null;
+    const flatTreeItem = flatTreeItems.get(value);
+    if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {
+        const parentItem = flatTreeItems.get(flatTreeItem.parentValue);
+        var _parentItem_ref_current;
+        return (_parentItem_ref_current = parentItem === null || parentItem === void 0 ? void 0 : parentItem.ref.current) !== null && _parentItem_ref_current !== void 0 ? _parentItem_ref_current : null;
+    }
+    return null;
 }
-//# sourceMappingURL=useFlatTreeNavigation.js.map

package/lib/hooks/useFlatTreeNavigation.js.map

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

package/lib/hooks/useHTMLElementWalker.js

@@ -1,80 +1,82 @@
 import { isHTMLElement } from '@fluentui/react-utilities';
 import * as React from 'react';
-export function createHTMLElementWalker(root, filter = () => NodeFilter.FILTER_ACCEPT) {
-  let temporaryFilter;
-  const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-    acceptNode(node) {
-      if (!isHTMLElement(node)) {
-        return NodeFilter.FILTER_REJECT;
-      }
-      const filterResult = filter(node);
-      var _temporaryFilter;
-      return filterResult === NodeFilter.FILTER_ACCEPT ? (_temporaryFilter = temporaryFilter === null || temporaryFilter === void 0 ? void 0 : temporaryFilter(node)) !== null && _temporaryFilter !== void 0 ? _temporaryFilter : filterResult : filterResult;
-    }
-  });
-  return {
-    get root() {
-      return treeWalker.root;
-    },
-    get currentElement() {
-      return treeWalker.currentNode;
-    },
-    set currentElement(element) {
-      treeWalker.currentNode = element;
-    },
-    firstChild: localFilter => {
-      temporaryFilter = localFilter;
-      const result = treeWalker.firstChild();
-      temporaryFilter = undefined;
-      return result;
-    },
-    lastChild: localFilter => {
-      temporaryFilter = localFilter;
-      const result = treeWalker.lastChild();
-      temporaryFilter = undefined;
-      return result;
-    },
-    nextElement: localFilter => {
-      temporaryFilter = localFilter;
-      const result = treeWalker.nextNode();
-      temporaryFilter = undefined;
-      return result;
-    },
-    nextSibling: localFilter => {
-      temporaryFilter = localFilter;
-      const result = treeWalker.nextSibling();
-      temporaryFilter = undefined;
-      return result;
-    },
-    parentElement: localFilter => {
-      temporaryFilter = localFilter;
-      const result = treeWalker.parentNode();
-      temporaryFilter = undefined;
-      return result;
-    },
-    previousElement: localFilter => {
-      temporaryFilter = localFilter;
-      const result = treeWalker.previousNode();
-      temporaryFilter = undefined;
-      return result;
-    },
-    previousSibling: localFilter => {
-      temporaryFilter = localFilter;
-      const result = treeWalker.previousSibling();
-      temporaryFilter = undefined;
-      return result;
-    }
-  };
+export function createHTMLElementWalker(root, filter = ()=>NodeFilter.FILTER_ACCEPT) {
+    let temporaryFilter;
+    const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+        acceptNode (node) {
+            if (!isHTMLElement(node)) {
+                return NodeFilter.FILTER_REJECT;
+            }
+            const filterResult = filter(node);
+            var _temporaryFilter;
+            return filterResult === NodeFilter.FILTER_ACCEPT ? (_temporaryFilter = temporaryFilter === null || temporaryFilter === void 0 ? void 0 : temporaryFilter(node)) !== null && _temporaryFilter !== void 0 ? _temporaryFilter : filterResult : filterResult;
+        }
+    });
+    return {
+        get root () {
+            return treeWalker.root;
+        },
+        get currentElement () {
+            return treeWalker.currentNode;
+        },
+        set currentElement (element){
+            treeWalker.currentNode = element;
+        },
+        firstChild: (localFilter)=>{
+            temporaryFilter = localFilter;
+            const result = treeWalker.firstChild();
+            temporaryFilter = undefined;
+            return result;
+        },
+        lastChild: (localFilter)=>{
+            temporaryFilter = localFilter;
+            const result = treeWalker.lastChild();
+            temporaryFilter = undefined;
+            return result;
+        },
+        nextElement: (localFilter)=>{
+            temporaryFilter = localFilter;
+            const result = treeWalker.nextNode();
+            temporaryFilter = undefined;
+            return result;
+        },
+        nextSibling: (localFilter)=>{
+            temporaryFilter = localFilter;
+            const result = treeWalker.nextSibling();
+            temporaryFilter = undefined;
+            return result;
+        },
+        parentElement: (localFilter)=>{
+            temporaryFilter = localFilter;
+            const result = treeWalker.parentNode();
+            temporaryFilter = undefined;
+            return result;
+        },
+        previousElement: (localFilter)=>{
+            temporaryFilter = localFilter;
+            const result = treeWalker.previousNode();
+            temporaryFilter = undefined;
+            return result;
+        },
+        previousSibling: (localFilter)=>{
+            temporaryFilter = localFilter;
+            const result = treeWalker.previousSibling();
+            temporaryFilter = undefined;
+            return result;
+        }
+    };
 }
-export const useHTMLElementWalkerRef = filter => {
-  const walkerRef = React.useRef();
-  const rootRefCallback = element1 => {
-    if (!element1) {
-      walkerRef.current = undefined;
-      return;
-    }
-    walkerRef.current = createHTMLElementWalker(element1, filter);
-  };
-  return [walkerRef, rootRefCallback];
+export const useHTMLElementWalkerRef = (filter)=>{
+    const walkerRef = React.useRef();
+    const rootRefCallback = (element1)=>{
+        if (!element1) {
+            walkerRef.current = undefined;
+            return;
+        }
+        walkerRef.current = createHTMLElementWalker(element1, filter);
+    };
+    return [
+        walkerRef,
+        rootRefCallback
+    ];
 };
-//# sourceMappingURL=useHTMLElementWalker.js.map

package/lib/hooks/useHTMLElementWalker.js.map

@@ -1 +1 @@
-{"version":3,"names":["isHTMLElement","React","createHTMLElementWalker","root","filter","NodeFilter","FILTER_ACCEPT","temporaryFilter","treeWalker","document","createTreeWalker","SHOW_ELEMENT","acceptNode","node","FILTER_REJECT","filterResult","_temporaryFilter","currentElement","currentNode","element","firstChild","localFilter","result","undefined","lastChild","nextElement","nextNode","nextSibling","parentElement","parentNode","previousElement","previousNode","previousSibling","useHTMLElementWalkerRef","walkerRef","useRef","rootRefCallback","element1","current"],"sources":["../../src/hooks/useHTMLElementWalker.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport interface HTMLElementWalker {\n  readonly root: HTMLElement;\n  currentElement: HTMLElement;\n  firstChild(filter?: HTMLElementFilter): HTMLElement | null;\n  lastChild(filter?: HTMLElementFilter): HTMLElement | null;\n  nextElement(filter?: HTMLElementFilter): HTMLElement | null;\n  nextSibling(filter?: HTMLElementFilter): HTMLElement | null;\n  parentElement(filter?: HTMLElementFilter): HTMLElement | null;\n  previousElement(filter?: HTMLElementFilter): HTMLElement | null;\n  previousSibling(filter?: HTMLElementFilter): HTMLElement | null;\n}\n\nexport type HTMLElementFilter = (element: HTMLElement) => number;\n\nexport function createHTMLElementWalker(\n  root: HTMLElement,\n  filter: HTMLElementFilter = () => NodeFilter.FILTER_ACCEPT,\n): HTMLElementWalker {\n  let temporaryFilter: HTMLElementFilter | undefined;\n  const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {\n    acceptNode(node: Node) {\n      if (!isHTMLElement(node)) {\n        return NodeFilter.FILTER_REJECT;\n      }\n      const filterResult = filter(node);\n      return filterResult === NodeFilter.FILTER_ACCEPT ? temporaryFilter?.(node) ?? filterResult : filterResult;\n    },\n  });\n  return {\n    get root() {\n      return treeWalker.root as HTMLElement;\n    },\n    get currentElement() {\n      return treeWalker.currentNode as HTMLElement;\n    },\n    set currentElement(element) {\n      treeWalker.currentNode = element;\n    },\n    firstChild: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.firstChild() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    lastChild: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.lastChild() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    nextElement: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.nextNode() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    nextSibling: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.nextSibling() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    parentElement: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.parentNode() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    previousElement: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.previousNode() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    previousSibling: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.previousSibling() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n  };\n}\n\nexport const useHTMLElementWalkerRef = (filter?: HTMLElementFilter) => {\n  const walkerRef = React.useRef<HTMLElementWalker>();\n\n  const rootRefCallback = (element?: HTMLElement) => {\n    if (!element) {\n      walkerRef.current = undefined;\n      return;\n    }\n    walkerRef.current = createHTMLElementWalker(element, filter);\n  };\n  return [walkerRef as React.RefObject<HTMLElementWalker>, rootRefCallback as React.Ref<HTMLElement>] as const;\n};\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAC9B,YAAYC,KAAA,MAAW;AAgBvB,OAAO,SAASC,wBACdC,IAAiB,EACjBC,MAAA,GAA4BA,CAAA,KAAMC,UAAA,CAAWC,aAAa,EACvC;EACnB,IAAIC,eAAA;EACJ,MAAMC,UAAA,GAAaC,QAAA,CAASC,gBAAgB,CAACP,IAAA,EAAME,UAAA,CAAWM,YAAY,EAAE;IAC1EC,WAAWC,IAAU,EAAE;MACrB,IAAI,CAACb,aAAA,CAAca,IAAA,GAAO;QACxB,OAAOR,UAAA,CAAWS,aAAa;MACjC;MACA,MAAMC,YAAA,GAAeX,MAAA,CAAOS,IAAA;UACuBG,gBAAA;MAAnD,OAAOD,YAAA,KAAiBV,UAAA,CAAWC,aAAa,GAAG,CAAAU,gBAAA,GAAAT,eAAA,aAAAA,eAAA,uBAAAA,eAAA,CAAkBM,IAAA,eAAlBG,gBAAA,cAAAA,gBAAA,GAA2BD,YAAY,GAAGA,YAAY;IAC3G;EACF;EACA,OAAO;IACL,IAAIZ,KAAA,EAAO;MACT,OAAOK,UAAA,CAAWL,IAAI;IACxB;IACA,IAAIc,eAAA,EAAiB;MACnB,OAAOT,UAAA,CAAWU,WAAW;IAC/B;IACA,IAAID,eAAeE,OAAA,EAAS;MAC1BX,UAAA,CAAWU,WAAW,GAAGC,OAAA;IAC3B;IACAC,UAAA,EAAYC,WAAA,IAAe;MACzBd,eAAA,GAAkBc,WAAA;MAClB,MAAMC,MAAA,GAASd,UAAA,CAAWY,UAAU;MACpCb,eAAA,GAAkBgB,SAAA;MAClB,OAAOD,MAAA;IACT;IACAE,SAAA,EAAWH,WAAA,IAAe;MACxBd,eAAA,GAAkBc,WAAA;MAClB,MAAMC,MAAA,GAASd,UAAA,CAAWgB,SAAS;MACnCjB,eAAA,GAAkBgB,SAAA;MAClB,OAAOD,MAAA;IACT;IACAG,WAAA,EAAaJ,WAAA,IAAe;MAC1Bd,eAAA,GAAkBc,WAAA;MAClB,MAAMC,MAAA,GAASd,UAAA,CAAWkB,QAAQ;MAClCnB,eAAA,GAAkBgB,SAAA;MAClB,OAAOD,MAAA;IACT;IACAK,WAAA,EAAaN,WAAA,IAAe;MAC1Bd,eAAA,GAAkBc,WAAA;MAClB,MAAMC,MAAA,GAASd,UAAA,CAAWmB,WAAW;MACrCpB,eAAA,GAAkBgB,SAAA;MAClB,OAAOD,MAAA;IACT;IACAM,aAAA,EAAeP,WAAA,IAAe;MAC5Bd,eAAA,GAAkBc,WAAA;MAClB,MAAMC,MAAA,GAASd,UAAA,CAAWqB,UAAU;MACpCtB,eAAA,GAAkBgB,SAAA;MAClB,OAAOD,MAAA;IACT;IACAQ,eAAA,EAAiBT,WAAA,IAAe;MAC9Bd,eAAA,GAAkBc,WAAA;MAClB,MAAMC,MAAA,GAASd,UAAA,CAAWuB,YAAY;MACtCxB,eAAA,GAAkBgB,SAAA;MAClB,OAAOD,MAAA;IACT;IACAU,eAAA,EAAiBX,WAAA,IAAe;MAC9Bd,eAAA,GAAkBc,WAAA;MAClB,MAAMC,MAAA,GAASd,UAAA,CAAWwB,eAAe;MACzCzB,eAAA,GAAkBgB,SAAA;MAClB,OAAOD,MAAA;IACT;EACF;AACF;AAEA,OAAO,MAAMW,uBAAA,GAA2B7B,MAAA,IAA+B;EACrE,MAAM8B,SAAA,GAAYjC,KAAA,CAAMkC,MAAM;EAE9B,MAAMC,eAAA,GAAmBC,QAAA,IAA0B;IACjD,IAAI,CAACA,QAAA,EAAS;MACZH,SAAA,CAAUI,OAAO,GAAGf,SAAA;MACpB;IACF;IACAW,SAAA,CAAUI,OAAO,GAAGpC,uBAAA,CAAwBmC,QAAA,EAASjC,MAAA;EACvD;EACA,OAAO,CAAC8B,SAAA,EAAiDE,eAAA,CAA0C;AACrG"}
+{"version":3,"sources":["useHTMLElementWalker.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport interface HTMLElementWalker {\n  readonly root: HTMLElement;\n  currentElement: HTMLElement;\n  firstChild(filter?: HTMLElementFilter): HTMLElement | null;\n  lastChild(filter?: HTMLElementFilter): HTMLElement | null;\n  nextElement(filter?: HTMLElementFilter): HTMLElement | null;\n  nextSibling(filter?: HTMLElementFilter): HTMLElement | null;\n  parentElement(filter?: HTMLElementFilter): HTMLElement | null;\n  previousElement(filter?: HTMLElementFilter): HTMLElement | null;\n  previousSibling(filter?: HTMLElementFilter): HTMLElement | null;\n}\n\nexport type HTMLElementFilter = (element: HTMLElement) => number;\n\nexport function createHTMLElementWalker(\n  root: HTMLElement,\n  filter: HTMLElementFilter = () => NodeFilter.FILTER_ACCEPT,\n): HTMLElementWalker {\n  let temporaryFilter: HTMLElementFilter | undefined;\n  const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {\n    acceptNode(node: Node) {\n      if (!isHTMLElement(node)) {\n        return NodeFilter.FILTER_REJECT;\n      }\n      const filterResult = filter(node);\n      return filterResult === NodeFilter.FILTER_ACCEPT ? temporaryFilter?.(node) ?? filterResult : filterResult;\n    },\n  });\n  return {\n    get root() {\n      return treeWalker.root as HTMLElement;\n    },\n    get currentElement() {\n      return treeWalker.currentNode as HTMLElement;\n    },\n    set currentElement(element) {\n      treeWalker.currentNode = element;\n    },\n    firstChild: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.firstChild() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    lastChild: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.lastChild() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    nextElement: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.nextNode() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    nextSibling: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.nextSibling() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    parentElement: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.parentNode() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    previousElement: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.previousNode() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n    previousSibling: localFilter => {\n      temporaryFilter = localFilter;\n      const result = treeWalker.previousSibling() as HTMLElement | null;\n      temporaryFilter = undefined;\n      return result;\n    },\n  };\n}\n\nexport const useHTMLElementWalkerRef = (filter?: HTMLElementFilter) => {\n  const walkerRef = React.useRef<HTMLElementWalker>();\n\n  const rootRefCallback = (element?: HTMLElement) => {\n    if (!element) {\n      walkerRef.current = undefined;\n      return;\n    }\n    walkerRef.current = createHTMLElementWalker(element, filter);\n  };\n  return [walkerRef as React.RefObject<HTMLElementWalker>, rootRefCallback as React.Ref<HTMLElement>] as const;\n};\n"],"names":["isHTMLElement","React","createHTMLElementWalker","root","filter","NodeFilter","FILTER_ACCEPT","temporaryFilter","treeWalker","document","createTreeWalker","SHOW_ELEMENT","acceptNode","node","FILTER_REJECT","filterResult","currentElement","currentNode","element","firstChild","localFilter","result","undefined","lastChild","nextElement","nextNode","nextSibling","parentElement","parentNode","previousElement","previousNode","previousSibling","useHTMLElementWalkerRef","walkerRef","useRef","rootRefCallback","current"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,YAAYC,WAAW,QAAQ;AAgB/B,OAAO,SAASC,wBACdC,IAAiB,EACjBC,SAA4B,IAAMC,WAAWC,aAAa,EACvC;IACnB,IAAIC;IACJ,MAAMC,aAAaC,SAASC,gBAAgB,CAACP,MAAME,WAAWM,YAAY,EAAE;QAC1EC,YAAWC,IAAU,EAAE;YACrB,IAAI,CAACb,cAAca,OAAO;gBACxB,OAAOR,WAAWS,aAAa;YACjC,CAAC;YACD,MAAMC,eAAeX,OAAOS;gBACuBN;YAAnD,OAAOQ,iBAAiBV,WAAWC,aAAa,GAAGC,CAAAA,mBAAAA,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAkBM,mBAAlBN,8BAAAA,mBAA2BQ,YAAY,GAAGA,YAAY;QAC3G;IACF;IACA,OAAO;QACL,IAAIZ,QAAO;YACT,OAAOK,WAAWL,IAAI;QACxB;QACA,IAAIa,kBAAiB;YACnB,OAAOR,WAAWS,WAAW;QAC/B;QACA,IAAID,gBAAeE,QAAS;YAC1BV,WAAWS,WAAW,GAAGC;QAC3B;QACAC,YAAYC,CAAAA,cAAe;YACzBb,kBAAkBa;YAClB,MAAMC,SAASb,WAAWW,UAAU;YACpCZ,kBAAkBe;YAClB,OAAOD;QACT;QACAE,WAAWH,CAAAA,cAAe;YACxBb,kBAAkBa;YAClB,MAAMC,SAASb,WAAWe,SAAS;YACnChB,kBAAkBe;YAClB,OAAOD;QACT;QACAG,aAAaJ,CAAAA,cAAe;YAC1Bb,kBAAkBa;YAClB,MAAMC,SAASb,WAAWiB,QAAQ;YAClClB,kBAAkBe;YAClB,OAAOD;QACT;QACAK,aAAaN,CAAAA,cAAe;YAC1Bb,kBAAkBa;YAClB,MAAMC,SAASb,WAAWkB,WAAW;YACrCnB,kBAAkBe;YAClB,OAAOD;QACT;QACAM,eAAeP,CAAAA,cAAe;YAC5Bb,kBAAkBa;YAClB,MAAMC,SAASb,WAAWoB,UAAU;YACpCrB,kBAAkBe;YAClB,OAAOD;QACT;QACAQ,iBAAiBT,CAAAA,cAAe;YAC9Bb,kBAAkBa;YAClB,MAAMC,SAASb,WAAWsB,YAAY;YACtCvB,kBAAkBe;YAClB,OAAOD;QACT;QACAU,iBAAiBX,CAAAA,cAAe;YAC9Bb,kBAAkBa;YAClB,MAAMC,SAASb,WAAWuB,eAAe;YACzCxB,kBAAkBe;YAClB,OAAOD;QACT;IACF;AACF,CAAC;AAED,OAAO,MAAMW,0BAA0B,CAAC5B,SAA+B;IACrE,MAAM6B,YAAYhC,MAAMiC,MAAM;IAE9B,MAAMC,kBAAkB,CAACjB,WAA0B;QACjD,IAAI,CAACA,UAAS;YACZe,UAAUG,OAAO,GAAGd;YACpB;QACF,CAAC;QACDW,UAAUG,OAAO,GAAGlC,wBAAwBgB,UAASd;IACvD;IACA,OAAO;QAAC6B;QAAiDE;KAA0C;AACrG,EAAE"}