@fluentui/react-tree 9.0.0-beta.2 → 9.0.0-beta.20

package/lib/contexts/index.js

@@ -1,3 +1,2 @@
 export * from './treeContext';
 export * from './treeItemContext';
-//# sourceMappingURL=index.js.map

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB"}

package/lib/contexts/treeContext.js

@@ -1,19 +1,14 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import { emptyImmutableSet } from '../utils/ImmutableSet';
 const defaultContextValue = {
-  level: 0,
-  openItems: emptyImmutableSet,
-  requestOpenChange: noop,
-  requestNavigation: noop,
-  appearance: 'subtle',
-  size: 'medium'
+    level: 0,
+    openItems: emptyImmutableSet,
+    requestTreeResponse: noop,
+    appearance: 'subtle',
+    size: 'medium'
 };
 function noop() {
-  /* noop */
-}
-export const TreeContext = /*#__PURE__*/createContext(undefined);
-export const {
-  Provider: TreeProvider
-} = TreeContext;
-export const useTreeContext_unstable = selector => useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));
-//# sourceMappingURL=treeContext.js.map
+/* noop */ }
+export const TreeContext = createContext(undefined);
+export const { Provider: TreeProvider  } = TreeContext;
+export const useTreeContext_unstable = (selector)=>useContextSelector(TreeContext, (ctx = defaultContextValue)=>selector(ctx));

package/lib/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestOpenChange","noop","requestNavigation","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"sources":["../src/packages/react-components/react-tree/src/contexts/treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemId, TreeOpenChangeData, TreeNavigationData_unstable } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemId>;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange(data: TreeOpenChangeData): void;\n  requestNavigation(data: TreeNavigationData_unstable): void;\n};\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestOpenChange: noop,\n  requestNavigation: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAE9G,SAASC,iBAAiB,QAAsB,uBAAuB;AAcvE,MAAMC,mBAAmB,GAAqB;EAC5CC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAEH,iBAAiB;EAC5BI,iBAAiB,EAAEC,IAAI;EACvBC,iBAAiB,EAAED,IAAI;EACvBE,UAAU,EAAE,QAAQ;EACpBC,IAAI,EAAE;CACP;AAED,SAASH,IAAIA,CAAA;EACX;AAAA;AAGF,OAAO,MAAMI,WAAW,gBAA0CX,aAAa,CAC7EY,SAAS,CACV;AAED,OAAO,MAAM;EAAEC,QAAQ,EAAEC;AAAY,CAAE,GAAGH,WAAW;AACrD,OAAO,MAAMI,uBAAuB,GAAOC,QAA8C,IACvFf,kBAAkB,CAACU,WAAW,EAAE,CAACM,GAAG,GAAGd,mBAAmB,KAAKa,QAAQ,CAACC,GAAG,CAAC,CAAC"}
+{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest<unknown>): void;\n};\n\nexport type TreeItemRequest<Value> = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData<Value>, 'open' | 'target'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable<Value>, 'target'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,iBAAiB,QAAsB,wBAAwB;AAsBxE,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,WAAWH;IACXI,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDV,cAChEW,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCd,mBAAmBS,aAAa,CAACM,MAAMb,mBAAmB,GAAKY,SAASC,MAAM"}

package/lib/contexts/treeItemContext.js

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

package/lib/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","defaultContextValue","isActionsVisible","TreeItemContext","createContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","_a","useContext"],"sources":["../src/packages/react-components/react-tree/src/contexts/treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  isActionsVisible: false,\n};\n\nexport const TreeItemContext: React.Context<TreeItemContextValue | undefined> = React.createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = (): TreeItemContextValue =>\n  React.useContext(TreeItemContext) ?? defaultContextValue;\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAM9B,MAAMC,mBAAmB,GAAyB;EAChDC,gBAAgB,EAAE;CACnB;AAED,OAAO,MAAMC,eAAe,gBAAoDH,KAAK,CAACI,aAAa,CAEjGC,SAAS,CAAC;AAEZ,OAAO,MAAM;EAAEC,QAAQ,EAAEC;AAAgB,CAAE,GAAGJ,eAAe;AAC7D,OAAO,MAAMK,2BAA2B,GAAGA,CAAA,KAA2B;EAAA,IAAAC,EAAA;EACpE,QAAAA,EAAA,GAAAT,KAAK,CAACU,UAAU,CAACP,eAAe,CAAC,cAAAM,EAAA,cAAAA,EAAA,GAAIR,mBAAmB;AAAA"}
+{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  value: unknown;\n  itemType: TreeItemType;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: undefined,\n  isActionsVisible: false,\n  isAsideVisible: true,\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","undefined","isActionsVisible","isAsideVisible","actionsRef","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","TreeItemContext","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAe/G,MAAMC,sBAA4C;IAChDC,OAAOC;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,YAAYR,MAAMS,SAAS;IAC3BC,eAAeV,MAAMS,SAAS;IAC9BE,WAAWX,MAAMS,SAAS;IAC1BG,YAAYZ,MAAMS,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6Dd,cAExEI,WAAW;AAEb,OAAO,MAAM,EAAEW,UAAUC,iBAAgB,EAAE,GAAGF,gBAAgB;AAC9D,OAAO,MAAMG,8BAA8B,CAAIC,WAC7CjB,mBAAmBa,iBAAiB,CAACK,MAAMjB,mBAAmB,GAAKgB,SAASC,MAAM"}

package/lib/hooks/index.js

@@ -1,4 +1,3 @@
 export * from './useFlatTree';
 export * from './useNestedTreeNavigation';
 export * from './useOpenItemsState';
-//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB"}

package/lib/hooks/useFlatTree.js

@@ -1,7 +1,7 @@
 import { useEventCallback } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { createUnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';
-import { createVisibleFlatTree } from '../utils/createVisibleFlatTree';
+import { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';
+import { treeDataTypes } from '../utils/tokens';
 import { useFlatTreeNavigation } from './useFlatTreeNavigation';
 import { useOpenItemsState } from './useOpenItemsState';
 /**
@@ -13,37 +13,74 @@ import { useOpenItemsState } from './useOpenItemsState';
  * It should be used on cases where more complex interactions with a Tree is required.
  * On simple scenarios it is advised to simply use a nested structure instead.
  *
- * @param items - a list of tree items
+ * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
- */
-export function useFlatTree_unstable(items, options = {}) {
-  const [openItems, updateOpenItems] = useOpenItemsState(options);
-  const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree(items), [items]);
-  const [navigate, navigationRef] = useFlatTreeNavigation(unfilteredFlatTree);
-  const visibleFlatTree = React.useMemo(() => createVisibleFlatTree(unfilteredFlatTree, openItems), [unfilteredFlatTree, openItems]);
-  const handleOpenChange = useEventCallback((event, data) => {
-    event.preventDefault();
-    updateOpenItems(data);
-  });
-  const handleNavigation = useEventCallback((event, data) => {
-    event.preventDefault();
-    navigate(data);
-  });
-  const flatTree = {
-    ...visibleFlatTree,
-    getTreeProps: () => ({
-      ref: navigationRef,
-      openItems,
-      onOpenChange: handleOpenChange,
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      onNavigation_unstable: handleNavigation
-    }),
-    navigate,
-    getItem: id => {
-      var _a;
-      return (_a = unfilteredFlatTree.itemsPerId.get(id)) !== null && _a !== void 0 ? _a : null;
-    }
-  };
-  return flatTree;
+ */ 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","createUnfilteredFlatTree","createVisibleFlatTree","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","items","options","openItems","updateOpenItems","unfilteredFlatTree","useMemo","navigate","navigationRef","visibleFlatTree","handleOpenChange","event","data","preventDefault","handleNavigation","flatTree","getTreeProps","ref","onOpenChange","onNavigation_unstable","getItem","id","_a","itemsPerId","get"],"sources":["../src/packages/react-components/react-tree/src/hooks/useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree';\nimport { TreeItemProps } from '../TreeItem';\nimport { createUnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { createVisibleFlatTree } from '../utils/createVisibleFlatTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\n\nexport type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id'>> &\n  TreeItemProps & {\n    parentId?: string;\n  };\n\nexport type FlatTreeItem = {\n  getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> &\n    TreeItemProps;\n  parentId?: string;\n  childrenSize: number;\n  index: number;\n  id: string;\n  level: number;\n};\n\nexport type FlatTreeProps = Required<\n  Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { ref: React.Ref<HTMLDivElement> }\n>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree = {\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;\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 && !targetDocument.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): 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  getNextNavigableItem(data: TreeNavigationData_unstable): FlatTreeItem | null;\n  /**\n   * returns a single flat tree item by id without iterating over the whole collection\n   */\n  getItem(id: string): FlatTreeItem | null;\n  /**\n   * returns an iterable containing all visually available flat tree items\n   */\n  items(): Iterable<FlatTreeItem>;\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 items - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(\n  items: FlatTreeItemProps[],\n  options: Pick<TreeProps, 'openItems' | 'defaultOpenItems'> = {},\n): FlatTree {\n  const [openItems, updateOpenItems] = useOpenItemsState(options);\n  const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree(items), [items]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(unfilteredFlatTree);\n  const visibleFlatTree = React.useMemo(\n    () => createVisibleFlatTree(unfilteredFlatTree, openItems),\n    [unfilteredFlatTree, openItems],\n  );\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    event.preventDefault();\n    updateOpenItems(data);\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      event.preventDefault();\n      navigate(data);\n    },\n  );\n\n  const flatTree: FlatTree = {\n    ...visibleFlatTree,\n    getTreeProps: () => ({\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    navigate,\n    getItem: id => unfilteredFlatTree.itemsPerId.get(id) ?? null,\n  };\n  return flatTree;\n}\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,2BAA2B;AAC5D,OAAO,KAAKC,KAAK,MAAM,OAAO;AAS9B,SAASC,wBAAwB,QAAQ,mCAAmC;AAC5E,SAASC,qBAAqB,QAAQ,gCAAgC;AACtE,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,iBAAiB,QAAQ,qBAAqB;AA8EvD;;;;;;;;;;;;AAYA,OAAM,SAAUC,oBAAoBA,CAClCC,KAA0B,EAC1BC,OAAA,GAA6D,EAAE;EAE/D,MAAM,CAACC,SAAS,EAAEC,eAAe,CAAC,GAAGL,iBAAiB,CAACG,OAAO,CAAC;EAC/D,MAAMG,kBAAkB,GAAGV,KAAK,CAACW,OAAO,CAAC,MAAMV,wBAAwB,CAACK,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACxF,MAAM,CAACM,QAAQ,EAAEC,aAAa,CAAC,GAAGV,qBAAqB,CAACO,kBAAkB,CAAC;EAC3E,MAAMI,eAAe,GAAGd,KAAK,CAACW,OAAO,CACnC,MAAMT,qBAAqB,CAACQ,kBAAkB,EAAEF,SAAS,CAAC,EAC1D,CAACE,kBAAkB,EAAEF,SAAS,CAAC,CAChC;EAED,MAAMO,gBAAgB,GAAGhB,gBAAgB,CAAC,CAACiB,KAA0B,EAAEC,IAAwB,KAAI;IACjGD,KAAK,CAACE,cAAc,EAAE;IACtBT,eAAe,CAACQ,IAAI,CAAC;EACvB,CAAC,CAAC;EAEF,MAAME,gBAAgB,GAAGpB,gBAAgB,CACvC,CAACiB,KAAmC,EAAEC,IAAiC,KAAI;IACzED,KAAK,CAACE,cAAc,EAAE;IACtBN,QAAQ,CAACK,IAAI,CAAC;EAChB,CAAC,CACF;EAED,MAAMG,QAAQ,GAAa;IACzB,GAAGN,eAAe;IAClBO,YAAY,EAAEA,CAAA,MAAO;MACnBC,GAAG,EAAET,aAA0C;MAC/CL,SAAS;MACTe,YAAY,EAAER,gBAAgB;MAC9B;MACAS,qBAAqB,EAAEL;KACxB,CAAC;IACFP,QAAQ;IACRa,OAAO,EAAEC,EAAE,IAAG;MAAA,IAAAC,EAAA;MAAC,QAAAA,EAAA,GAAAjB,kBAAkB,CAACkB,UAAU,CAACC,GAAG,CAACH,EAAE,CAAC,cAAAC,EAAA,cAAAA,EAAA,GAAI,IAAI;IAAA;GAC7D;EACD,OAAOP,QAAQ;AACjB"}
+{"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

@@ -1,74 +1,74 @@
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { useMergedRefs } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
 import { treeDataTypes } from '../utils/tokens';
 import { treeItemFilter } from '../utils/treeItemFilter';
 import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
 import { useRovingTabIndex } from './useRovingTabIndexes';
-export function useFlatTreeNavigation(flatTree) {
-  const {
-    targetDocument
-  } = useFluent_unstable();
-  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);
-  const [{
-    rove
-  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
-  function getNextElement(data) {
-    if (!targetDocument || !treeItemWalkerRef.current) {
-      return null;
+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 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(flatTree, data.target, targetDocument);
-      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();
-    }
-  }
-  function navigate(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(flatTree, target, document) {
-  const flatTreeItem = flatTree.itemsPerId.get(target.id);
-  if (flatTreeItem && flatTreeItem.parentId) {
-    return document.getElementById(flatTreeItem.parentId);
-  }
-  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;
 }
-//# sourceMappingURL=useFlatTreeNavigation.js.map

package/lib/hooks/useFlatTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"names":["useFluent_unstable","useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useHTMLElementWalkerRef","useRovingTabIndex","useFlatTreeNavigation","flatTree","targetDocument","treeItemWalkerRef","treeItemWalkerRootRef","rove","rovingRootRef","getNextElement","data","current","treeItemWalker","type","click","target","typeAhead","currentElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","itemsPerId","get","id","parentId","getElementById"],"sources":["../src/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { UnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useFlatTreeNavigation(flatTree: UnfilteredFlatTree) {\n  const { targetDocument } = useFluent_unstable();\n  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!targetDocument || !treeItemWalkerRef.current) {\n      return null;\n    }\n    const treeItemWalker = treeItemWalkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.click:\n        return data.target;\n      case treeDataTypes.typeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.arrowLeft:\n        return parentElement(flatTree, data.target, targetDocument);\n      case treeDataTypes.arrowRight:\n        treeItemWalker.currentElement = data.target;\n        return firstChild(data.target, treeItemWalker);\n      case treeDataTypes.end:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.lastChild();\n      case treeDataTypes.home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.arrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.arrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  }\n  function navigate(data: TreeNavigationData_unstable) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(flatTree: UnfilteredFlatTree, target: HTMLElement, document: Document) {\n  const flatTreeItem = flatTree.itemsPerId.get(target.id);\n  if (flatTreeItem && flatTreeItem.parentId) {\n    return document.getElementById(flatTreeItem.parentId);\n  }\n  return null;\n}\n"],"mappings":"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"}
+{"version":3,"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) {
-      var _a;
-      if (!isHTMLElement(node)) {
-        return NodeFilter.FILTER_REJECT;
-      }
-      const filterResult = filter(node);
-      return filterResult === NodeFilter.FILTER_ACCEPT ? (_a = temporaryFilter === null || temporaryFilter === void 0 ? void 0 : temporaryFilter(node)) !== null && _a !== void 0 ? _a : 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 = element => {
-    if (!element) {
-      walkerRef.current = undefined;
-      return;
-    }
-    walkerRef.current = createHTMLElementWalker(element, 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