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

package/lib-commonjs/contexts/treeContext.js

@@ -1,24 +1,29 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useTreeContext_unstable = exports.TreeProvider = exports.TreeContext = void 0;
-const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
-const ImmutableSet_1 = /*#__PURE__*/require("../utils/ImmutableSet");
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TreeContext: ()=>TreeContext,
+    TreeProvider: ()=>TreeProvider,
+    useTreeContext_unstable: ()=>useTreeContext_unstable
+});
+const _reactContextSelector = require("@fluentui/react-context-selector");
+const _immutableSet = require("../utils/ImmutableSet");
 const defaultContextValue = {
-  level: 0,
-  openItems: ImmutableSet_1.emptyImmutableSet,
-  requestOpenChange: noop,
-  requestNavigation: noop,
-  appearance: 'subtle',
-  size: 'medium'
+    level: 0,
+    openItems: _immutableSet.emptyImmutableSet,
+    requestTreeResponse: noop,
+    appearance: 'subtle',
+    size: 'medium'
 };
 function noop() {
-  /* noop */
-}
-exports.TreeContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
-exports.TreeProvider = exports.TreeContext.Provider;
-const useTreeContext_unstable = selector => react_context_selector_1.useContextSelector(exports.TreeContext, (ctx = defaultContextValue) => selector(ctx));
-exports.useTreeContext_unstable = useTreeContext_unstable;
-//# sourceMappingURL=treeContext.js.map
+/* noop */ }
+const TreeContext = (0, _reactContextSelector.createContext)(undefined);
+const { Provider: TreeProvider  } = TreeContext;
+const useTreeContext_unstable = (selector)=>(0, _reactContextSelector.useContextSelector)(TreeContext, (ctx = defaultContextValue)=>selector(ctx));

package/lib-commonjs/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["react_context_selector_1","require","ImmutableSet_1","defaultContextValue","level","openItems","emptyImmutableSet","requestOpenChange","noop","requestNavigation","appearance","size","exports","TreeContext","createContext","undefined","TreeProvider","Provider","useTreeContext_unstable","selector","useContextSelector","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,MAAAA,wBAAA,gBAAAC,OAAA;AAEA,MAAAC,cAAA,gBAAAD,OAAA;AAcA,MAAME,mBAAmB,GAAqB;EAC5CC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAEH,cAAA,CAAAI,iBAAiB;EAC5BC,iBAAiB,EAAEC,IAAI;EACvBC,iBAAiB,EAAED,IAAI;EACvBE,UAAU,EAAE,QAAQ;EACpBC,IAAI,EAAE;CACP;AAED,SAASH,IAAIA,CAAA;EACX;AAAA;AAGWI,OAAA,CAAAC,WAAW,gBAA0Cb,wBAAA,CAAAc,aAAa,CAC7EC,SAAS,CACV;AAEwBH,OAAA,CAAAI,YAAY,GAAKJ,OAAA,CAAAC,WAAW,CAAAI,QAAA;AAC9C,MAAMC,uBAAuB,GAAOC,QAA8C,IACvFnB,wBAAA,CAAAoB,kBAAkB,CAACR,OAAA,CAAAC,WAAW,EAAE,CAACQ,GAAG,GAAGlB,mBAAmB,KAAKgB,QAAQ,CAACE,GAAG,CAAC,CAAC;AADlET,OAAA,CAAAM,uBAAuB,GAAAA,uBAAA"}
+{"version":3,"sources":["treeContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { emptyImmutableSet } from '../utils/ImmutableSet';\nconst defaultContextValue = {\n    level: 0,\n    openItems: emptyImmutableSet,\n    requestTreeResponse: noop,\n    appearance: 'subtle',\n    size: 'medium'\n};\nfunction noop() {\n/* noop */ }\nexport const TreeContext = createContext(undefined);\nexport const { Provider: TreeProvider  } = TreeContext;\nexport const useTreeContext_unstable = (selector)=>useContextSelector(TreeContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeContext","TreeProvider","useTreeContext_unstable","defaultContextValue","level","openItems","emptyImmutableSet","requestTreeResponse","noop","appearance","size","createContext","undefined","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAWaA,WAAW,MAAXA;IACYC,YAAY,MAAZA;IACZC,uBAAuB,MAAvBA;;sCAbqC;8BAChB;AAClC,MAAMC,sBAAsB;IACxBC,OAAO;IACPC,WAAWC,+BAAiB;IAC5BC,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACV;AACA,SAASF,OAAO;AAChB,QAAQ,GAAG;AACJ,MAAMR,cAAcW,IAAAA,mCAAa,EAACC;AAClC,MAAM,EAAEC,UAAUZ,aAAY,EAAG,GAAGD;AACpC,MAAME,0BAA0B,CAACY,WAAWC,IAAAA,wCAAkB,EAACf,aAAa,CAACgB,MAAMb,mBAAmB,GAAGW,SAASE"}

package/lib-commonjs/contexts/treeItemContext.js

@@ -1,18 +1,32 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useTreeItemContext_unstable = exports.TreeItemProvider = exports.TreeItemContext = void 0;
-const React = /*#__PURE__*/require("react");
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TreeItemContext: ()=>TreeItemContext,
+    TreeItemProvider: ()=>TreeItemProvider,
+    useTreeItemContext_unstable: ()=>useTreeItemContext_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactContextSelector = require("@fluentui/react-context-selector");
 const defaultContextValue = {
-  isActionsVisible: false
-};
-exports.TreeItemContext = /*#__PURE__*/React.createContext(undefined);
-exports.TreeItemProvider = exports.TreeItemContext.Provider;
-const useTreeItemContext_unstable = () => {
-  var _a;
-  return (_a = React.useContext(exports.TreeItemContext)) !== null && _a !== void 0 ? _a : defaultContextValue;
+    value: '',
+    isActionsVisible: false,
+    isAsideVisible: true,
+    actionsRef: /*#__PURE__*/ _react.createRef(),
+    expandIconRef: /*#__PURE__*/ _react.createRef(),
+    layoutRef: /*#__PURE__*/ _react.createRef(),
+    subtreeRef: /*#__PURE__*/ _react.createRef(),
+    itemType: 'leaf',
+    open: false
 };
-exports.useTreeItemContext_unstable = useTreeItemContext_unstable;
-//# sourceMappingURL=treeItemContext.js.map
+const TreeItemContext = (0, _reactContextSelector.createContext)(undefined);
+const { Provider: TreeItemProvider  } = TreeItemContext;
+const useTreeItemContext_unstable = (selector)=>(0, _reactContextSelector.useContextSelector)(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));

package/lib-commonjs/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","require","defaultContextValue","isActionsVisible","exports","TreeItemContext","createContext","undefined","TreeItemProvider","Provider","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,MAAAA,KAAA,gBAAAC,OAAA;AAMA,MAAMC,mBAAmB,GAAyB;EAChDC,gBAAgB,EAAE;CACnB;AAEYC,OAAA,CAAAC,eAAe,gBAAoDL,KAAK,CAACM,aAAa,CAEjGC,SAAS,CAAC;AAEaH,OAAA,CAAAI,gBAAgB,GAAKJ,OAAA,CAAAC,eAAe,CAAAI,QAAA;AACtD,MAAMC,2BAA2B,GAAGA,CAAA,KAA2B;EAAA,IAAAC,EAAA;EACpE,QAAAA,EAAA,GAAAX,KAAK,CAACY,UAAU,CAACR,OAAA,CAAAC,eAAe,CAAC,cAAAM,EAAA,cAAAA,EAAA,GAAIT,mBAAmB;AAAA;AAD7CE,OAAA,CAAAM,2BAA2B,GAAAA,2BAAA"}
+{"version":3,"sources":["treeItemContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst defaultContextValue = {\n    value: '',\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};\nexport const TreeItemContext = createContext(undefined);\nexport const { Provider: TreeItemProvider  } = TreeItemContext;\nexport const useTreeItemContext_unstable = (selector)=>useContextSelector(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeItemContext","TreeItemProvider","useTreeItemContext_unstable","defaultContextValue","value","isActionsVisible","isAsideVisible","actionsRef","React","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","createContext","undefined","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAaaA,eAAe,MAAfA;IACYC,gBAAgB,MAAhBA;IACZC,2BAA2B,MAA3BA;;;6DAfU;sCAC2B;AAClD,MAAMC,sBAAsB;IACxBC,OAAO;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,0BAAYC,OAAMC,SAAS;IAC3BC,6BAAeF,OAAMC,SAAS;IAC9BE,yBAAWH,OAAMC,SAAS;IAC1BG,0BAAYJ,OAAMC,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACf;AACO,MAAMd,kBAAkBe,IAAAA,mCAAa,EAACC;AACtC,MAAM,EAAEC,UAAUhB,iBAAgB,EAAG,GAAGD;AACxC,MAAME,8BAA8B,CAACgB,WAAWC,IAAAA,wCAAkB,EAACnB,iBAAiB,CAACoB,MAAMjB,mBAAmB,GAAGe,SAASE"}

package/lib-commonjs/hooks/index.js

@@ -1,10 +1,8 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-const tslib_1 = /*#__PURE__*/require("tslib");
-tslib_1.__exportStar(require("./useFlatTree"), exports);
-tslib_1.__exportStar(require("./useNestedTreeNavigation"), exports);
-tslib_1.__exportStar(require("./useOpenItemsState"), exports);
-//# sourceMappingURL=index.js.map
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./useFlatTree"), exports);
+_exportStar(require("./useNestedTreeNavigation"), exports);
+_exportStar(require("./useOpenItemsState"), exports);

package/lib-commonjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-tree/src/hooks/index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA"}

package/lib-commonjs/hooks/useFlatTree.js

@@ -1,56 +1,92 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useFlatTree_unstable = void 0;
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const React = /*#__PURE__*/require("react");
-const createUnfilteredFlatTree_1 = /*#__PURE__*/require("../utils/createUnfilteredFlatTree");
-const createVisibleFlatTree_1 = /*#__PURE__*/require("../utils/createVisibleFlatTree");
-const useFlatTreeNavigation_1 = /*#__PURE__*/require("./useFlatTreeNavigation");
-const useOpenItemsState_1 = /*#__PURE__*/require("./useOpenItemsState");
-/**
- * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
- * in multiple scenarios including virtualization.
- *
- * !!A flat tree is an unofficial spec for tree!!
- *
- * 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 options - in case control over the internal openItems is required
- */
-function useFlatTree_unstable(items, options = {}) {
-  const [openItems, updateOpenItems] = useOpenItemsState_1.useOpenItemsState(options);
-  const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree_1.createUnfilteredFlatTree(items), [items]);
-  const [navigate, navigationRef] = useFlatTreeNavigation_1.useFlatTreeNavigation(unfilteredFlatTree);
-  const visibleFlatTree = React.useMemo(() => createVisibleFlatTree_1.createVisibleFlatTree(unfilteredFlatTree, openItems), [unfilteredFlatTree, openItems]);
-  const handleOpenChange = react_utilities_1.useEventCallback((event, data) => {
-    event.preventDefault();
-    updateOpenItems(data);
-  });
-  const handleNavigation = react_utilities_1.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;
+Object.defineProperty(exports, "useFlatTree_unstable", {
+    enumerable: true,
+    get: ()=>useFlatTree_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _reactUtilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _createFlatTreeItems = require("../utils/createFlatTreeItems");
+const _tokens = require("../utils/tokens");
+const _useFlatTreeNavigation = require("./useFlatTreeNavigation");
+const _useOpenItemsState = require("./useOpenItemsState");
+const _getTreeItemValueFromElement = require("../utils/getTreeItemValueFromElement");
+function useFlatTree_unstable(flatTreeItemProps, options = {}) {
+    const [openItems, updateOpenItems] = (0, _useOpenItemsState.useOpenItemsState)(options);
+    const flatTreeItems = _react.useMemo(()=>(0, _createFlatTreeItems.createFlatTreeItems)(flatTreeItemProps), [
+        flatTreeItemProps
+    ]);
+    const [navigate, navigationRef] = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(flatTreeItems);
+    const treeRef = _react.useRef(null);
+    const handleOpenChange = (0, _reactUtilities.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 = (0, _reactUtilities.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 = (0, _reactUtilities.useEventCallback)((visibleItems, data)=>{
+        const item = flatTreeItems.get(data.value);
+        if (item) {
+            switch(data.type){
+                case _tokens.treeDataTypes.TypeAhead:
+                    return item;
+                case _tokens.treeDataTypes.ArrowLeft:
+                    return flatTreeItems.get(item.parentValue);
+                case _tokens.treeDataTypes.ArrowRight:
+                    return visibleItems[item.index + 1];
+                case _tokens.treeDataTypes.End:
+                    return visibleItems[visibleItems.length - 1];
+                case _tokens.treeDataTypes.Home:
+                    return visibleItems[0];
+                case _tokens.treeDataTypes.ArrowDown:
+                    return visibleItems[item.index + 1];
+                case _tokens.treeDataTypes.ArrowUp:
+                    return visibleItems[item.index - 1];
+            }
+        }
+    });
+    const getElementFromItem = _react.useCallback((item)=>{
+        var _treeRef_current;
+        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${_getTreeItemValueFromElement.dataTreeItemValueAttrName}="${item.value}"]`);
+    }, []);
+    const ref = (0, _reactUtilities.useMergedRefs)(treeRef, navigationRef);
+    const getTreeProps = _react.useCallback(()=>({
+            ref,
+            openItems,
+            onOpenChange: handleOpenChange,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            onNavigation_unstable: handleNavigation
+        }), [
+        openItems
+    ]);
+    const items = _react.useCallback(()=>(0, _createFlatTreeItems.VisibleFlatTreeItemGenerator)(openItems, flatTreeItems), [
+        openItems,
+        flatTreeItems
+    ]);
+    return _react.useMemo(()=>({
+            navigate,
+            getTreeProps,
+            getNextNavigableItem,
+            getElementFromItem,
+            items
+        }), [
+        navigate,
+        getTreeProps,
+        getNextNavigableItem,
+        getElementFromItem,
+        items
+    ]);
 }
-exports.useFlatTree_unstable = useFlatTree_unstable;
-//# sourceMappingURL=useFlatTree.js.map

package/lib-commonjs/hooks/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"names":["react_utilities_1","require","React","createUnfilteredFlatTree_1","createVisibleFlatTree_1","useFlatTreeNavigation_1","useOpenItemsState_1","useFlatTree_unstable","items","options","openItems","updateOpenItems","useOpenItemsState","unfilteredFlatTree","useMemo","createUnfilteredFlatTree","navigate","navigationRef","useFlatTreeNavigation","visibleFlatTree","createVisibleFlatTree","handleOpenChange","useEventCallback","event","data","preventDefault","handleNavigation","flatTree","getTreeProps","ref","onOpenChange","onNavigation_unstable","getItem","id","_a","itemsPerId","get","exports"],"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,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,KAAA,gBAAAD,OAAA;AASA,MAAAE,0BAAA,gBAAAF,OAAA;AACA,MAAAG,uBAAA,gBAAAH,OAAA;AACA,MAAAI,uBAAA,gBAAAJ,OAAA;AACA,MAAAK,mBAAA,gBAAAL,OAAA;AA8EA;;;;;;;;;;;;AAYA,SAAgBM,oBAAoBA,CAClCC,KAA0B,EAC1BC,OAAA,GAA6D,EAAE;EAE/D,MAAM,CAACC,SAAS,EAAEC,eAAe,CAAC,GAAGL,mBAAA,CAAAM,iBAAiB,CAACH,OAAO,CAAC;EAC/D,MAAMI,kBAAkB,GAAGX,KAAK,CAACY,OAAO,CAAC,MAAMX,0BAAA,CAAAY,wBAAwB,CAACP,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACxF,MAAM,CAACQ,QAAQ,EAAEC,aAAa,CAAC,GAAGZ,uBAAA,CAAAa,qBAAqB,CAACL,kBAAkB,CAAC;EAC3E,MAAMM,eAAe,GAAGjB,KAAK,CAACY,OAAO,CACnC,MAAMV,uBAAA,CAAAgB,qBAAqB,CAACP,kBAAkB,EAAEH,SAAS,CAAC,EAC1D,CAACG,kBAAkB,EAAEH,SAAS,CAAC,CAChC;EAED,MAAMW,gBAAgB,GAAGrB,iBAAA,CAAAsB,gBAAgB,CAAC,CAACC,KAA0B,EAAEC,IAAwB,KAAI;IACjGD,KAAK,CAACE,cAAc,EAAE;IACtBd,eAAe,CAACa,IAAI,CAAC;EACvB,CAAC,CAAC;EAEF,MAAME,gBAAgB,GAAG1B,iBAAA,CAAAsB,gBAAgB,CACvC,CAACC,KAAmC,EAAEC,IAAiC,KAAI;IACzED,KAAK,CAACE,cAAc,EAAE;IACtBT,QAAQ,CAACQ,IAAI,CAAC;EAChB,CAAC,CACF;EAED,MAAMG,QAAQ,GAAa;IACzB,GAAGR,eAAe;IAClBS,YAAY,EAAEA,CAAA,MAAO;MACnBC,GAAG,EAAEZ,aAA0C;MAC/CP,SAAS;MACToB,YAAY,EAAET,gBAAgB;MAC9B;MACAU,qBAAqB,EAAEL;KACxB,CAAC;IACFV,QAAQ;IACRgB,OAAO,EAAEC,EAAE,IAAG;MAAA,IAAAC,EAAA;MAAC,QAAAA,EAAA,GAAArB,kBAAkB,CAACsB,UAAU,CAACC,GAAG,CAACH,EAAE,CAAC,cAAAC,EAAA,cAAAA,EAAA,GAAI,IAAI;IAAA;GAC7D;EACD,OAAOP,QAAQ;AACjB;AArCAU,OAAA,CAAA9B,oBAAA,GAAAA,oBAAA"}
+{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import { useEventCallback, useMergedRefs } 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 { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\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 */ export function useFlatTree_unstable(flatTreeItemProps, options = {}) {\n    const [openItems, updateOpenItems] = useOpenItemsState(options);\n    const flatTreeItems = React.useMemo(()=>createFlatTreeItems(flatTreeItemProps), [\n        flatTreeItemProps\n    ]);\n    const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);\n        if (!event.isDefaultPrevented()) {\n            updateOpenItems(data);\n        }\n        event.preventDefault();\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _options_onNavigation_unstable;\n        (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);\n        if (!event.isDefaultPrevented()) {\n            navigate(data);\n        }\n        event.preventDefault();\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\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    const getElementFromItem = React.useCallback((item)=>{\n        var _treeRef_current;\n        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`);\n    }, []);\n    const ref = useMergedRefs(treeRef, navigationRef);\n    const getTreeProps = React.useCallback(()=>({\n            ref,\n            openItems,\n            onOpenChange: handleOpenChange,\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            onNavigation_unstable: handleNavigation\n        }), // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems\n    ]);\n    const items = React.useCallback(()=>VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [\n        openItems,\n        flatTreeItems\n    ]);\n    return React.useMemo(()=>({\n            navigate,\n            getTreeProps,\n            getNextNavigableItem,\n            getElementFromItem,\n            items\n        }), [\n        navigate,\n        getTreeProps,\n        getNextNavigableItem,\n        getElementFromItem,\n        items\n    ]);\n}\n"],"names":["useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","useOpenItemsState","flatTreeItems","React","useMemo","createFlatTreeItems","navigate","navigationRef","useFlatTreeNavigation","treeRef","useRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","_treeRef_current","current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","getTreeProps","items","VisibleFlatTreeItemGenerator"],"mappings":"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"}

package/lib-commonjs/hooks/useFlatTreeNavigation.js

@@ -1,81 +1,85 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useFlatTreeNavigation = void 0;
-const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const nextTypeAheadElement_1 = /*#__PURE__*/require("../utils/nextTypeAheadElement");
-const tokens_1 = /*#__PURE__*/require("../utils/tokens");
-const treeItemFilter_1 = /*#__PURE__*/require("../utils/treeItemFilter");
-const useHTMLElementWalker_1 = /*#__PURE__*/require("./useHTMLElementWalker");
-const useRovingTabIndexes_1 = /*#__PURE__*/require("./useRovingTabIndexes");
-function useFlatTreeNavigation(flatTree) {
-  const {
-    targetDocument
-  } = react_shared_contexts_1.useFluent_unstable();
-  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalker_1.useHTMLElementWalkerRef(treeItemFilter_1.treeItemFilter);
-  const [{
-    rove
-  }, rovingRootRef] = useRovingTabIndexes_1.useRovingTabIndex(treeItemFilter_1.treeItemFilter);
-  function getNextElement(data) {
-    if (!targetDocument || !treeItemWalkerRef.current) {
-      return null;
-    }
-    const treeItemWalker = treeItemWalkerRef.current;
-    switch (data.type) {
-      case tokens_1.treeDataTypes.click:
-        return data.target;
-      case tokens_1.treeDataTypes.typeAhead:
-        treeItemWalker.currentElement = data.target;
-        return nextTypeAheadElement_1.nextTypeAheadElement(treeItemWalker, data.event.key);
-      case tokens_1.treeDataTypes.arrowLeft:
-        return parentElement(flatTree, data.target, targetDocument);
-      case tokens_1.treeDataTypes.arrowRight:
-        treeItemWalker.currentElement = data.target;
-        return firstChild(data.target, treeItemWalker);
-      case tokens_1.treeDataTypes.end:
-        treeItemWalker.currentElement = treeItemWalker.root;
-        return treeItemWalker.lastChild();
-      case tokens_1.treeDataTypes.home:
-        treeItemWalker.currentElement = treeItemWalker.root;
-        return treeItemWalker.firstChild();
-      case tokens_1.treeDataTypes.arrowDown:
-        treeItemWalker.currentElement = data.target;
-        return treeItemWalker.nextElement();
-      case tokens_1.treeDataTypes.arrowUp:
-        treeItemWalker.currentElement = data.target;
-        return treeItemWalker.previousElement();
-    }
-  }
-  function navigate(data) {
-    const nextElement = getNextElement(data);
-    if (nextElement) {
-      rove(nextElement);
+Object.defineProperty(exports, "useFlatTreeNavigation", {
+    enumerable: true,
+    get: ()=>useFlatTreeNavigation
+});
+const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const _reactUtilities = require("@fluentui/react-utilities");
+const _nextTypeAheadElement = require("../utils/nextTypeAheadElement");
+const _tokens = require("../utils/tokens");
+const _treeItemFilter = require("../utils/treeItemFilter");
+const _useHTMLElementWalker = require("./useHTMLElementWalker");
+const _useRovingTabIndexes = require("./useRovingTabIndexes");
+const _getTreeItemValueFromElement = require("../utils/getTreeItemValueFromElement");
+function useFlatTreeNavigation(flatTreeItems) {
+    const { targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
+    const [treeItemWalkerRef, treeItemWalkerRootRef] = (0, _useHTMLElementWalker.useHTMLElementWalkerRef)(_treeItemFilter.treeItemFilter);
+    const [{ rove  }, rovingRootRef] = (0, _useRovingTabIndexes.useRovingTabIndex)(_treeItemFilter.treeItemFilter);
+    function getNextElement(data) {
+        if (!targetDocument || !treeItemWalkerRef.current) {
+            return null;
+        }
+        const treeItemWalker = treeItemWalkerRef.current;
+        switch(data.type){
+            case _tokens.treeDataTypes.Click:
+                return data.target;
+            case _tokens.treeDataTypes.TypeAhead:
+                treeItemWalker.currentElement = data.target;
+                return (0, _nextTypeAheadElement.nextTypeAheadElement)(treeItemWalker, data.event.key);
+            case _tokens.treeDataTypes.ArrowLeft:
+                return parentElement(flatTreeItems, data.target, treeItemWalker);
+            case _tokens.treeDataTypes.ArrowRight:
+                treeItemWalker.currentElement = data.target;
+                return firstChild(data.target, treeItemWalker);
+            case _tokens.treeDataTypes.End:
+                treeItemWalker.currentElement = treeItemWalker.root;
+                return treeItemWalker.lastChild();
+            case _tokens.treeDataTypes.Home:
+                treeItemWalker.currentElement = treeItemWalker.root;
+                return treeItemWalker.firstChild();
+            case _tokens.treeDataTypes.ArrowDown:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.nextElement();
+            case _tokens.treeDataTypes.ArrowUp:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.previousElement();
+        }
     }
-  }
-  return [navigate, react_utilities_1.useMergedRefs(treeItemWalkerRootRef, rovingRootRef)];
+    const navigate = (0, _reactUtilities.useEventCallback)((data)=>{
+        const nextElement = getNextElement(data);
+        if (nextElement) {
+            rove(nextElement);
+        }
+    });
+    return [
+        navigate,
+        (0, _reactUtilities.useMergedRefs)(treeItemWalkerRootRef, rovingRootRef)
+    ];
 }
-exports.useFlatTreeNavigation = useFlatTreeNavigation;
 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, target, treeWalker) {
+    const value = (0, _getTreeItemValueFromElement.getTreeItemValueFromElement)(target);
+    if (value === null) {
+        return null;
+    }
+    const flatTreeItem = flatTreeItems.get(value);
+    if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {
+        return treeWalker.root.querySelector(`[${_getTreeItemValueFromElement.dataTreeItemValueAttrName}="${flatTreeItem.parentValue}"]`);
+    }
+    return null;
 }
-//# sourceMappingURL=useFlatTreeNavigation.js.map

package/lib-commonjs/hooks/useFlatTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"names":["react_shared_contexts_1","require","react_utilities_1","nextTypeAheadElement_1","tokens_1","treeItemFilter_1","useHTMLElementWalker_1","useRovingTabIndexes_1","useFlatTreeNavigation","flatTree","targetDocument","useFluent_unstable","treeItemWalkerRef","treeItemWalkerRootRef","useHTMLElementWalkerRef","treeItemFilter","rove","rovingRootRef","useRovingTabIndex","getNextElement","data","current","treeItemWalker","type","treeDataTypes","click","target","typeAhead","currentElement","nextTypeAheadElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","useMergedRefs","exports","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.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../utils/getTreeItemValueFromElement';\nexport function useFlatTreeNavigation(flatTreeItems) {\n    const { targetDocument  } = useFluent_unstable();\n    const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n    const [{ rove  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n    function getNextElement(data) {\n        if (!targetDocument || !treeItemWalkerRef.current) {\n            return null;\n        }\n        const treeItemWalker = treeItemWalkerRef.current;\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                treeItemWalker.currentElement = data.target;\n                return nextTypeAheadElement(treeItemWalker, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                return parentElement(flatTreeItems, data.target, treeItemWalker);\n            case treeDataTypes.ArrowRight:\n                treeItemWalker.currentElement = data.target;\n                return firstChild(data.target, treeItemWalker);\n            case treeDataTypes.End:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return treeItemWalker.lastChild();\n            case treeDataTypes.Home:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return treeItemWalker.firstChild();\n            case treeDataTypes.ArrowDown:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.nextElement();\n            case treeDataTypes.ArrowUp:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.previousElement();\n        }\n    }\n    const navigate = useEventCallback((data)=>{\n        const nextElement = getNextElement(data);\n        if (nextElement) {\n            rove(nextElement);\n        }\n    });\n    return [\n        navigate,\n        useMergedRefs(treeItemWalkerRootRef, rovingRootRef)\n    ];\n}\nfunction firstChild(target, treeWalker) {\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}\nfunction parentElement(flatTreeItems, target, treeWalker) {\n    const value = getTreeItemValueFromElement(target);\n    if (value === null) {\n        return null;\n    }\n    const flatTreeItem = flatTreeItems.get(value);\n    if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {\n        return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}=\"${flatTreeItem.parentValue}\"]`);\n    }\n    return null;\n}\n"],"names":["useFlatTreeNavigation","flatTreeItems","targetDocument","useFluent_unstable","treeItemWalkerRef","treeItemWalkerRootRef","useHTMLElementWalkerRef","treeItemFilter","rove","rovingRootRef","useRovingTabIndex","getNextElement","data","current","treeItemWalker","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChild","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","useEventCallback","useMergedRefs","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","value","getTreeItemValueFromElement","flatTreeItem","get","parentValue","querySelector","dataTreeItemValueAttrName"],"mappings":";;;;+BAQgBA;;aAAAA;;qCARmB;gCACa;sCACX;wBACP;gCACC;sCACS;qCACN;6CACqC;AAChE,SAASA,sBAAsBC,aAAa,EAAE;IACjD,MAAM,EAAEC,eAAc,EAAG,GAAGC,IAAAA,uCAAkB;IAC9C,MAAM,CAACC,mBAAmBC,sBAAsB,GAAGC,IAAAA,6CAAuB,EAACC,8BAAc;IACzF,MAAM,CAAC,EAAEC,KAAI,EAAG,EAAEC,cAAc,GAAGC,IAAAA,sCAAiB,EAACH,8BAAc;IACnE,SAASI,eAAeC,IAAI,EAAE;QAC1B,IAAI,CAACV,kBAAkB,CAACE,kBAAkBS,OAAO,EAAE;YAC/C,OAAO,IAAI;QACf,CAAC;QACD,MAAMC,iBAAiBV,kBAAkBS,OAAO;QAChD,OAAOD,KAAKG,IAAI;YACZ,KAAKC,qBAAa,CAACC,KAAK;gBACpB,OAAOL,KAAKM,MAAM;YACtB,KAAKF,qBAAa,CAACG,SAAS;gBACxBL,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOG,IAAAA,0CAAoB,EAACP,gBAAgBF,KAAKU,KAAK,CAACC,GAAG;YAC9D,KAAKP,qBAAa,CAACQ,SAAS;gBACxB,OAAOC,cAAcxB,eAAeW,KAAKM,MAAM,EAAEJ;YACrD,KAAKE,qBAAa,CAACU,UAAU;gBACzBZ,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOS,WAAWf,KAAKM,MAAM,EAAEJ;YACnC,KAAKE,qBAAa,CAACY,GAAG;gBAClBd,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAegB,SAAS;YACnC,KAAKd,qBAAa,CAACe,IAAI;gBACnBjB,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAea,UAAU;YACpC,KAAKX,qBAAa,CAACgB,SAAS;gBACxBlB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAemB,WAAW;YACrC,KAAKjB,qBAAa,CAACkB,OAAO;gBACtBpB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAeqB,eAAe;QAC7C;IACJ;IACA,MAAMC,WAAWC,IAAAA,gCAAgB,EAAC,CAACzB,OAAO;QACtC,MAAMqB,cAActB,eAAeC;QACnC,IAAIqB,aAAa;YACbzB,KAAKyB;QACT,CAAC;IACL;IACA,OAAO;QACHG;QACAE,IAAAA,6BAAa,EAACjC,uBAAuBI;KACxC;AACL;AACA,SAASkB,WAAWT,MAAM,EAAEqB,UAAU,EAAE;IACpC,MAAMN,cAAcM,WAAWN,WAAW;IAC1C,IAAI,CAACA,aAAa;QACd,OAAO,IAAI;IACf,CAAC;IACD,MAAMO,0BAA0BP,YAAYQ,YAAY,CAAC;IACzD,MAAMC,uBAAuBT,YAAYQ,YAAY,CAAC;IACtD,MAAME,kBAAkBzB,OAAOuB,YAAY,CAAC;IAC5C,IAAID,4BAA4B,OAAOI,OAAOF,0BAA0BE,OAAOD,mBAAmB,GAAG;QACjG,OAAOV;IACX,CAAC;IACD,OAAO,IAAI;AACf;AACA,SAASR,cAAcxB,aAAa,EAAEiB,MAAM,EAAEqB,UAAU,EAAE;IACtD,MAAMM,QAAQC,IAAAA,wDAA2B,EAAC5B;IAC1C,IAAI2B,UAAU,IAAI,EAAE;QAChB,OAAO,IAAI;IACf,CAAC;IACD,MAAME,eAAe9C,cAAc+C,GAAG,CAACH;IACvC,IAAIE,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaE,WAAW,EAAE;QACtF,OAAOV,WAAWV,IAAI,CAACqB,aAAa,CAAC,CAAC,CAAC,EAAEC,sDAAyB,CAAC,EAAE,EAAEJ,aAAaE,WAAW,CAAC,EAAE,CAAC;IACvG,CAAC;IACD,OAAO,IAAI;AACf"}