@fluentui/react-tree 9.0.0-beta.3 → 9.0.0-beta.30

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

@@ -1 +1 @@
-{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-tree/src/components/Tree/index.ts"],"sourcesContent":["export * from './Tree';\nexport * from './Tree.types';\nexport * from './renderTree';\nexport * from './useTree';\nexport * from './useTreeStyles';\nexport * from './useTreeContextValues';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,YAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,eAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Tree';\nexport * from './Tree.types';\nexport * from './useTree';\nexport * from './useTreeContextValues';\nexport * from './useTreeStyles.styles';\nexport * from './renderTree';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA"}

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

@@ -1,22 +1,17 @@
-"use strict";
-
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.renderTree_unstable = void 0;
-const React = /*#__PURE__*/require("react");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const contexts_1 = /*#__PURE__*/require("../../contexts");
-const renderTree_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = react_utilities_1.getSlots(state);
-  return React.createElement(contexts_1.TreeProvider, {
-    value: contextValues.tree
-  }, React.createElement(slots.root, {
-    ...slotProps.root
-  }, slotProps.root.children));
+Object.defineProperty(exports, "renderTree_unstable", {
+    enumerable: true,
+    get: ()=>renderTree_unstable
+});
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
+const _reactUtilities = require("@fluentui/react-utilities");
+const _contexts = require("../../contexts");
+const renderTree_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_contexts.TreeProvider, {
+        value: contextValues.tree
+    }, state.open && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slotProps.root.children));
 };
-exports.renderTree_unstable = renderTree_unstable;
-//# sourceMappingURL=renderTree.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_utilities_1","contexts_1","renderTree_unstable","state","contextValues","slots","slotProps","getSlots","createElement","TreeProvider","value","tree","root","children","exports"],"sources":["../src/packages/react-components/react-tree/src/components/Tree/renderTree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TreeState, TreeSlots, TreeContextValues } from './Tree.types';\nimport { TreeProvider } from '../../contexts';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  const { slots, slotProps } = getSlots<TreeSlots>(state);\n\n  return (\n    <TreeProvider value={contextValues.tree}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </TreeProvider>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,UAAA,gBAAAF,OAAA;AAEO,MAAMG,mBAAmB,GAAGA,CAACC,KAAgB,EAAEC,aAAgC,KAAI;EACxF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,iBAAA,CAAAO,QAAQ,CAAYJ,KAAK,CAAC;EAEvD,OACEL,KAAA,CAAAU,aAAA,CAACP,UAAA,CAAAQ,YAAY;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAI,GACrCb,KAAA,CAAAU,aAAA,CAACH,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,GAAGN,SAAS,CAACM,IAAI,CAACC,QAAQ,CAAc,CACzD;AAEnB,CAAC;AARYC,OAAA,CAAAZ,mBAAmB,GAAAA,mBAAA"}
+{"version":3,"sources":["renderTree.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../../contexts';\nexport const renderTree_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(TreeProvider, {\n        value: contextValues.tree\n    }, state.open && /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children));\n};\n"],"names":["renderTree_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","TreeProvider","value","tree","open","root","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAGrCA;;aAAAA;;iCAHsE;gCACtD;0BACA;AACtB,MAAMA,sBAAsB,CAACC,OAAOC,gBAAgB;IACvD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACC,sBAAY,EAAE;QAC7CC,OAAON,cAAcO,IAAI;IAC7B,GAAGR,MAAMS,IAAI,IAAI,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMQ,IAAI,EAAEP,UAAUO,IAAI,EAAEP,UAAUO,IAAI,CAACC,QAAQ;AACpG"}

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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useControllableCheckedItems", {
+    enumerable: true,
+    get: ()=>useControllableCheckedItems
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _reactUtilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _immutableMap = require("../../utils/ImmutableMap");
+const _createCheckedItems = require("../../utils/createCheckedItems");
+function useControllableCheckedItems(props) {
+    return (0, _reactUtilities.useControllableState)({
+        initialState: _immutableMap.ImmutableMap.empty,
+        state: _react.useMemo(()=>props.checkedItems && (0, _createCheckedItems.createCheckedItems)(props.checkedItems), [
+            props.checkedItems
+        ]),
+        defaultState: ()=>(0, _createCheckedItems.createCheckedItems)(props.defaultCheckedItems)
+    });
+} // export function useCheckedItemsState(props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems' | 'selectionMode'>) {
+ //   const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);
+ //   const selections = React.useMemo(() => initializeSelection(props.checkedItems ?? []), [props.checkedItems]);
+ //   const defaultSelections = React.useMemo(
+ //     () => initializeSelection(props.defaultCheckedItems ?? []),
+ //     [props.defaultCheckedItems],
+ //   );
+ //   const [checkedSelection, checkedSelectionManager] = useSelection<TreeItemValue>({
+ //     selectionMode: props.selectionMode ?? 'single',
+ //     selectedItems: selections.checkedSelection,
+ //     defaultSelectedItems: defaultSelections.checkedSelection,
+ //   });
+ //   const [mixedSelection, setMixedSelection] = useControllableState({
+ //     initialState: ImmutableSet.empty,
+ //     defaultState: React.useMemo(
+ //       () => ImmutableSet.create(defaultSelections.mixedSelection),
+ //       [defaultSelections.mixedSelection],
+ //     ),
+ //     state: React.useMemo(() => ImmutableSet.create(selections.mixedSelection), [selections.mixedSelection]),
+ //   });
+ //   const updateCheckedItems = useEventCallback((data: TreeCheckedChangeData) => {
+ //     if (props.selectionMode === 'single') {
+ //       checkedSelectionManager.selectItem(data.value);
+ //       return;
+ //     }
+ //     if (walkerRef.current === null) {
+ //       return;
+ //     }
+ //     const nextSelectedState = !checkedSelectionManager.isSelected(data.value);
+ //     let treeItemValues = getAllSubTreeItemValues(data).add(data.value);
+ //     let mixedValues: ImmutableSet<TreeItemValue> = ImmutableSet.empty;
+ //     walkerRef.current.currentElement = data.event.currentTarget;
+ //     while (walkerRef.current.parentElement() !== null) {
+ //       const descendants = Array.from(
+ //         walkerRef.current.currentElement.querySelectorAll<HTMLElement>('[role="treeitem"]'),
+ //       ).filter(item => item.getAttribute(dataTreeItemValueAttrName) !== data.value);
+ //       const isAllSiblingsEqualSelectionState = descendants.every(item => {
+ //         return (
+ //           (item.getAttribute('aria-selected') === 'true') === nextSelectedState ||
+ //           treeItemValues.has(item.getAttribute(dataTreeItemValueAttrName) as TreeItemValue)
+ //         );
+ //       });
+ //       if (isAllSiblingsEqualSelectionState) {
+ //         treeItemValues = treeItemValues.add(
+ //           walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue,
+ //         );
+ //         mixedValues = mixedValues.delete(
+ //           walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue,
+ //         );
+ //       } else {
+ //         treeItemValues = treeItemValues
+ //           .delete(walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue)
+ //           .add(data.value);
+ //         mixedValues = mixedValues.add(
+ //           walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue,
+ //         );
+ //       }
+ //     }
+ //     unstable_batchedUpdates(() => {
+ //       nextSelectedState
+ //         ? checkedSelectionManager.selectItems(treeItemValues)
+ //         : checkedSelectionManager.deselectItems(treeItemValues);
+ //       let nextMixedSelection = ImmutableSet.create(mixedSelection);
+ //       for (const value of mixedValues) {
+ //         nextMixedSelection = nextMixedSelection.add(value);
+ //       }
+ //       for (const value of treeItemValues) {
+ //         nextMixedSelection = nextMixedSelection.delete(value);
+ //       }
+ //       setMixedSelection(nextMixedSelection);
+ //     });
+ //   });
+ //   return [checkedSelection, mixedSelection, updateCheckedItems, rootRef] as const;
+ // }
+ // function getAllSubTreeItemValues(data: TreeCheckedChangeData) {
+ //   const subTreeItems = Array.from(data.event.currentTarget.querySelectorAll('[role="treeitem"]'));
+ //   const values = new Set<TreeItemValue>();
+ //   for (const item of subTreeItems) {
+ //     values.add(item.getAttribute(dataTreeItemValueAttrName) as TreeItemValue);
+ //   }
+ //   return ImmutableSet.dangerouslyCreate(values);
+ // }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useControllableCheckedItems.js"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nexport function useControllableCheckedItems(props) {\n    return useControllableState({\n        initialState: ImmutableMap.empty,\n        state: React.useMemo(()=>props.checkedItems && createCheckedItems(props.checkedItems), [\n            props.checkedItems\n        ]),\n        defaultState: ()=>createCheckedItems(props.defaultCheckedItems)\n    });\n} // export function useCheckedItemsState(props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems' | 'selectionMode'>) {\n //   const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n //   const selections = React.useMemo(() => initializeSelection(props.checkedItems ?? []), [props.checkedItems]);\n //   const defaultSelections = React.useMemo(\n //     () => initializeSelection(props.defaultCheckedItems ?? []),\n //     [props.defaultCheckedItems],\n //   );\n //   const [checkedSelection, checkedSelectionManager] = useSelection<TreeItemValue>({\n //     selectionMode: props.selectionMode ?? 'single',\n //     selectedItems: selections.checkedSelection,\n //     defaultSelectedItems: defaultSelections.checkedSelection,\n //   });\n //   const [mixedSelection, setMixedSelection] = useControllableState({\n //     initialState: ImmutableSet.empty,\n //     defaultState: React.useMemo(\n //       () => ImmutableSet.create(defaultSelections.mixedSelection),\n //       [defaultSelections.mixedSelection],\n //     ),\n //     state: React.useMemo(() => ImmutableSet.create(selections.mixedSelection), [selections.mixedSelection]),\n //   });\n //   const updateCheckedItems = useEventCallback((data: TreeCheckedChangeData) => {\n //     if (props.selectionMode === 'single') {\n //       checkedSelectionManager.selectItem(data.value);\n //       return;\n //     }\n //     if (walkerRef.current === null) {\n //       return;\n //     }\n //     const nextSelectedState = !checkedSelectionManager.isSelected(data.value);\n //     let treeItemValues = getAllSubTreeItemValues(data).add(data.value);\n //     let mixedValues: ImmutableSet<TreeItemValue> = ImmutableSet.empty;\n //     walkerRef.current.currentElement = data.event.currentTarget;\n //     while (walkerRef.current.parentElement() !== null) {\n //       const descendants = Array.from(\n //         walkerRef.current.currentElement.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n //       ).filter(item => item.getAttribute(dataTreeItemValueAttrName) !== data.value);\n //       const isAllSiblingsEqualSelectionState = descendants.every(item => {\n //         return (\n //           (item.getAttribute('aria-selected') === 'true') === nextSelectedState ||\n //           treeItemValues.has(item.getAttribute(dataTreeItemValueAttrName) as TreeItemValue)\n //         );\n //       });\n //       if (isAllSiblingsEqualSelectionState) {\n //         treeItemValues = treeItemValues.add(\n //           walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue,\n //         );\n //         mixedValues = mixedValues.delete(\n //           walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue,\n //         );\n //       } else {\n //         treeItemValues = treeItemValues\n //           .delete(walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue)\n //           .add(data.value);\n //         mixedValues = mixedValues.add(\n //           walkerRef.current.currentElement.getAttribute(dataTreeItemValueAttrName) as TreeItemValue,\n //         );\n //       }\n //     }\n //     unstable_batchedUpdates(() => {\n //       nextSelectedState\n //         ? checkedSelectionManager.selectItems(treeItemValues)\n //         : checkedSelectionManager.deselectItems(treeItemValues);\n //       let nextMixedSelection = ImmutableSet.create(mixedSelection);\n //       for (const value of mixedValues) {\n //         nextMixedSelection = nextMixedSelection.add(value);\n //       }\n //       for (const value of treeItemValues) {\n //         nextMixedSelection = nextMixedSelection.delete(value);\n //       }\n //       setMixedSelection(nextMixedSelection);\n //     });\n //   });\n //   return [checkedSelection, mixedSelection, updateCheckedItems, rootRef] as const;\n // }\n // function getAllSubTreeItemValues(data: TreeCheckedChangeData) {\n //   const subTreeItems = Array.from(data.event.currentTarget.querySelectorAll('[role=\"treeitem\"]'));\n //   const values = new Set<TreeItemValue>();\n //   for (const item of subTreeItems) {\n //     values.add(item.getAttribute(dataTreeItemValueAttrName) as TreeItemValue);\n //   }\n //   return ImmutableSet.dangerouslyCreate(values);\n // }\n"],"names":["useControllableCheckedItems","props","useControllableState","initialState","ImmutableMap","empty","state","React","useMemo","checkedItems","createCheckedItems","defaultState","defaultCheckedItems"],"mappings":";;;;+BAIgBA;;aAAAA;;;gCAJqB;6DACd;8BACM;oCACM;AAC5B,SAASA,4BAA4BC,KAAK,EAAE;IAC/C,OAAOC,IAAAA,oCAAoB,EAAC;QACxBC,cAAcC,0BAAY,CAACC,KAAK;QAChCC,OAAOC,OAAMC,OAAO,CAAC,IAAIP,MAAMQ,YAAY,IAAIC,IAAAA,sCAAkB,EAACT,MAAMQ,YAAY,GAAG;YACnFR,MAAMQ,YAAY;SACrB;QACDE,cAAc,IAAID,IAAAA,sCAAkB,EAACT,MAAMW,mBAAmB;IAClE;AACJ,EAAE,2HAA2H;CAC5H,0EAA0E;CAC1E,iHAAiH;CACjH,6CAA6C;CAC7C,kEAAkE;CAClE,mCAAmC;CACnC,OAAO;CACP,sFAAsF;CACtF,sDAAsD;CACtD,kDAAkD;CAClD,gEAAgE;CAChE,QAAQ;CACR,uEAAuE;CACvE,wCAAwC;CACxC,mCAAmC;CACnC,qEAAqE;CACrE,4CAA4C;CAC5C,SAAS;CACT,+GAA+G;CAC/G,QAAQ;CACR,mFAAmF;CACnF,8CAA8C;CAC9C,wDAAwD;CACxD,gBAAgB;CAChB,QAAQ;CACR,wCAAwC;CACxC,gBAAgB;CAChB,QAAQ;CACR,iFAAiF;CACjF,0EAA0E;CAC1E,yEAAyE;CACzE,mEAAmE;CACnE,2DAA2D;CAC3D,wCAAwC;CACxC,+FAA+F;CAC/F,uFAAuF;CACvF,6EAA6E;CAC7E,mBAAmB;CACnB,qFAAqF;CACrF,8FAA8F;CAC9F,aAAa;CACb,YAAY;CACZ,gDAAgD;CAChD,+CAA+C;CAC/C,uGAAuG;CACvG,aAAa;CACb,4CAA4C;CAC5C,uGAAuG;CACvG,aAAa;CACb,iBAAiB;CACjB,0CAA0C;CAC1C,+GAA+G;CAC/G,8BAA8B;CAC9B,yCAAyC;CACzC,uGAAuG;CACvG,aAAa;CACb,UAAU;CACV,QAAQ;CACR,sCAAsC;CACtC,0BAA0B;CAC1B,gEAAgE;CAChE,mEAAmE;CACnE,sEAAsE;CACtE,2CAA2C;CAC3C,8DAA8D;CAC9D,UAAU;CACV,8CAA8C;CAC9C,iEAAiE;CACjE,UAAU;CACV,+CAA+C;CAC/C,UAAU;CACV,QAAQ;CACR,qFAAqF;CACrF,IAAI;CACJ,kEAAkE;CAClE,qGAAqG;CACrG,6CAA6C;CAC7C,uCAAuC;CACvC,iFAAiF;CACjF,MAAM;CACN,mDAAmD;CACnD,IAAI"}

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

@@ -1,120 +1,65 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useTree_unstable = void 0;
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const contexts_1 = /*#__PURE__*/require("../../contexts");
-const hooks_1 = /*#__PURE__*/require("../../hooks");
-const tokens_1 = /*#__PURE__*/require("../../utils/tokens");
-/**
- * Create the state required to render Tree.
- *
- * The returned state can be modified with hooks such as useTreeStyles_unstable,
- * before being passed to renderTree_unstable.
- *
- * @param props - props from this instance of Tree
- * @param ref - reference to root HTMLElement of Tree
- */
-const useTree_unstable = (props, ref) => {
-  const isSubtree = contexts_1.useTreeContext_unstable(ctx => ctx.level > 0);
-  // as isSubtree is static, this doesn't break rule of hooks
-  // and if this becomes an issue later on, this can be easily converted
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return isSubtree ? useSubtree(props, ref) : useRootTree(props, ref);
+Object.defineProperty(exports, "useTree_unstable", {
+    enumerable: true,
+    get: ()=>useTree_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactUtilities = require("@fluentui/react-utilities");
+const _useControllableOpenItems = require("../../hooks/useControllableOpenItems");
+const _useTreeNavigation = require("./useTreeNavigation");
+const _useControllableCheckedItems = require("./useControllableCheckedItems");
+const _treeContext = require("../../contexts/treeContext");
+const _useRootTree = require("../../hooks/useRootTree");
+const _useSubtree = require("../../hooks/useSubtree");
+const _createHTMLElementWalker = require("../../utils/createHTMLElementWalker");
+const _treeItemFilter = require("../../utils/treeItemFilter");
+const useTree_unstable = (props, ref)=>{
+    const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
+    const [checkedItems] = (0, _useControllableCheckedItems.useControllableCheckedItems)(props);
+    const { navigate , initialize  } = (0, _useTreeNavigation.useTreeNavigation)();
+    const walkerRef = _react.useRef();
+    const initializeWalker = _react.useCallback((root)=>{
+        if (root) {
+            walkerRef.current = (0, _createHTMLElementWalker.createHTMLElementWalker)(root, _treeItemFilter.treeItemFilter);
+            initialize(walkerRef.current);
+        }
+    }, [
+        initialize
+    ]);
+    const handleOpenChange = (0, _reactUtilities.useEventCallback)((event, data)=>{
+        var _props_onOpenChange;
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
+        setOpenItems((0, _useControllableOpenItems.createNextOpenItems)(data, openItems));
+    });
+    const handleCheckedChange = (0, _reactUtilities.useEventCallback)((event, data)=>{
+        var _props_onCheckedChange;
+        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, data);
+    // TODO: implement next checked items for  tree
+    });
+    const handleNavigation = (0, _reactUtilities.useEventCallback)((event, data)=>{
+        var _props_onNavigation_unstable;
+        (_props_onNavigation_unstable = props.onNavigation_unstable) === null || _props_onNavigation_unstable === void 0 ? void 0 : _props_onNavigation_unstable.call(props, event, data);
+        if (walkerRef.current) {
+            navigate(data, walkerRef.current);
+        }
+    });
+    const baseProps = {
+        ...props,
+        openItems,
+        checkedItems,
+        onOpenChange: handleOpenChange,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onNavigation_unstable: handleNavigation,
+        onCheckedChange: handleCheckedChange
+    };
+    const baseRef = (0, _reactUtilities.useMergedRefs)(ref, initializeWalker);
+    const isSubtree = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.level > 0);
+    // as isSubTree is static, this doesn't break rule of hooks
+    // and if this becomes an issue later on, this can be easily converted
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return isSubtree ? (0, _useSubtree.useSubtree)(baseProps, baseRef) : (0, _useRootTree.useRootTree)(baseProps, baseRef);
 };
-exports.useTree_unstable = useTree_unstable;
-/**
- * Create the state required to render a sub-level Tree.
- *
- * @param props - props from this instance of Tree
- * @param ref - reference to root HTMLElement of Tree
- */
-function useSubtree(props, ref) {
-  const contextAppearance = contexts_1.useTreeContext_unstable(ctx => ctx.appearance);
-  const contextSize = contexts_1.useTreeContext_unstable(ctx => ctx.size);
-  const {
-    appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'subtle',
-    size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium'
-  } = props;
-  const parentLevel = contexts_1.useTreeContext_unstable(ctx => ctx.level);
-  const openItems = contexts_1.useTreeContext_unstable(ctx => ctx.openItems);
-  const requestOpenChange = contexts_1.useTreeContext_unstable(ctx => ctx.requestOpenChange);
-  const requestNavigation = contexts_1.useTreeContext_unstable(ctx => ctx.requestNavigation);
-  return {
-    components: {
-      root: 'div'
-    },
-    appearance,
-    size,
-    level: parentLevel + 1,
-    root: react_utilities_1.getNativeElementProps('div', {
-      ref,
-      role: 'group',
-      ...props
-    }),
-    openItems,
-    requestOpenChange,
-    requestNavigation
-  };
-}
-/**
- * Create the state required to render the root level Tree.
- *
- * @param props - props from this instance of Tree
- * @param ref - reference to root HTMLElement of Tree
- */
-function useRootTree(props, ref) {
-  warnIfNoProperPropsRootTree(props);
-  const {
-    appearance = 'subtle',
-    size = 'medium'
-  } = props;
-  const [openItems, updateOpenItems] = hooks_1.useOpenItemsState(props);
-  const [navigate, navigationRef] = hooks_1.useNestedTreeNavigation();
-  const requestOpenChange = react_utilities_1.useEventCallback(data => {
-    var _a;
-    (_a = props.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(props, data.event, data);
-    if (data.event.isDefaultPrevented()) {
-      return;
-    }
-    return updateOpenItems(data);
-  });
-  const requestNavigation = react_utilities_1.useEventCallback(data => {
-    var _a;
-    (_a = props.onNavigation_unstable) === null || _a === void 0 ? void 0 : _a.call(props, data.event, data);
-    if (data.event.isDefaultPrevented()) {
-      return;
-    }
-    navigate(data);
-    if (data.type === tokens_1.treeDataTypes.arrowDown || data.type === tokens_1.treeDataTypes.arrowUp) {
-      data.event.preventDefault();
-    }
-  });
-  return {
-    components: {
-      root: 'div'
-    },
-    appearance,
-    size,
-    level: 1,
-    openItems,
-    requestOpenChange,
-    requestNavigation,
-    root: react_utilities_1.getNativeElementProps('div', {
-      ref: react_utilities_1.useMergedRefs(navigationRef, ref),
-      role: 'tree',
-      ...props
-    })
-  };
-}
-function warnIfNoProperPropsRootTree(props) {
-  if (process.env.NODE_ENV === 'development') {
-    if (!props['aria-label'] && !props['aria-labelledby']) {
-      // eslint-disable-next-line no-console
-      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');
-    }
-  }
-}
-//# sourceMappingURL=useTree.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["react_utilities_1","require","contexts_1","hooks_1","tokens_1","useTree_unstable","props","ref","isSubtree","useTreeContext_unstable","ctx","level","useSubtree","useRootTree","exports","contextAppearance","appearance","contextSize","size","parentLevel","openItems","requestOpenChange","requestNavigation","components","root","getNativeElementProps","role","warnIfNoProperPropsRootTree","updateOpenItems","useOpenItemsState","navigate","navigationRef","useNestedTreeNavigation","useEventCallback","data","_a","onOpenChange","call","event","isDefaultPrevented","onNavigation_unstable","type","treeDataTypes","arrowDown","arrowUp","preventDefault","useMergedRefs","process","env","NODE_ENV","console","warn"],"sources":["../src/packages/react-components/react-tree/src/components/Tree/useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render Tree.\n *\n * The returned state can be modified with hooks such as useTreeStyles_unstable,\n * before being passed to renderTree_unstable.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isSubtree = useTreeContext_unstable(ctx => ctx.level > 0);\n  // as isSubtree is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isSubtree ? useSubtree(props, ref) : useRootTree(props, ref);\n};\n\n/**\n * Create the state required to render a sub-level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nfunction useSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    level: parentLevel + 1,\n    root: getNativeElementProps('div', {\n      ref,\n      role: 'group',\n      ...props,\n    }),\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n  };\n}\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nfunction useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, updateOpenItems] = useOpenItemsState(props);\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = useEventCallback((data: TreeOpenChangeData) => {\n    props.onOpenChange?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return updateOpenItems(data);\n  });\n\n  const requestNavigation = useEventCallback((data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.arrowDown || data.type === treeDataTypes.arrowUp) {\n      data.event.preventDefault();\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useControllableCheckedItems } from './useControllableCheckedItems';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nexport const useTree_unstable = (props, ref)=>{\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const [checkedItems] = useControllableCheckedItems(props);\n    const { navigate , initialize  } = useTreeNavigation();\n    const walkerRef = React.useRef();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root) {\n            walkerRef.current = createHTMLElementWalker(root, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize\n    ]);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _props_onOpenChange;\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n        setOpenItems(createNextOpenItems(data, openItems));\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _props_onCheckedChange;\n        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, data);\n    // TODO: implement next checked items for  tree\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation_unstable;\n        (_props_onNavigation_unstable = props.onNavigation_unstable) === null || _props_onNavigation_unstable === void 0 ? void 0 : _props_onNavigation_unstable.call(props, event, data);\n        if (walkerRef.current) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    const baseProps = {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: handleOpenChange,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        onNavigation_unstable: handleNavigation,\n        onCheckedChange: handleCheckedChange\n    };\n    const baseRef = useMergedRefs(ref, initializeWalker);\n    const isSubtree = useTreeContext_unstable((ctx)=>ctx.level > 0);\n    // as isSubTree is static, this doesn't break rule of hooks\n    // and if this becomes an issue later on, this can be easily converted\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return isSubtree ? useSubtree(baseProps, baseRef) : useRootTree(baseProps, baseRef);\n};\n"],"names":["useTree_unstable","props","ref","openItems","setOpenItems","useControllableOpenItems","checkedItems","useControllableCheckedItems","navigate","initialize","useTreeNavigation","walkerRef","React","useRef","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","onOpenChange","call","createNextOpenItems","handleCheckedChange","_props_onCheckedChange","onCheckedChange","handleNavigation","_props_onNavigation_unstable","onNavigation_unstable","baseProps","baseRef","useMergedRefs","isSubtree","useTreeContext_unstable","ctx","level","useSubtree","useRootTree"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;gCACyB;0CACc;mCAC5B;6CACU;6BACJ;6BACZ;4BACD;yCACa;gCACT;AACxB,MAAMA,mBAAmB,CAACC,OAAOC,MAAM;IAC1C,MAAM,CAACC,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACJ;IAC3D,MAAM,CAACK,aAAa,GAAGC,IAAAA,wDAA2B,EAACN;IACnD,MAAM,EAAEO,SAAQ,EAAGC,WAAU,EAAG,GAAGC,IAAAA,oCAAiB;IACpD,MAAMC,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,mBAAmBF,OAAMG,WAAW,CAAC,CAACC,OAAO;QAC/C,IAAIA,MAAM;YACNL,UAAUM,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMG,8BAAc;YAChEV,WAAWE,UAAUM,OAAO;QAChC,CAAC;IACL,GAAG;QACCR;KACH;IACD,MAAMW,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIC;QACHA,CAAAA,sBAAsBvB,MAAMwB,YAAY,AAAD,MAAO,IAAI,IAAID,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAACzB,OAAOqB,OAAOC,KAAK;QAC7InB,aAAauB,IAAAA,6CAAmB,EAACJ,MAAMpB;IAC3C;IACA,MAAMyB,sBAAsBP,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACxD,IAAIM;QACHA,CAAAA,yBAAyB5B,MAAM6B,eAAe,AAAD,MAAO,IAAI,IAAID,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBH,IAAI,CAACzB,OAAOqB,OAAOC,KAAK;IAC7J,+CAA+C;IAC/C;IACA,MAAMQ,mBAAmBV,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIS;QACHA,CAAAA,+BAA+B/B,MAAMgC,qBAAqB,AAAD,MAAO,IAAI,IAAID,iCAAiC,KAAK,IAAI,KAAK,IAAIA,6BAA6BN,IAAI,CAACzB,OAAOqB,OAAOC,KAAK;QACjL,IAAIZ,UAAUM,OAAO,EAAE;YACnBT,SAASe,MAAMZ,UAAUM,OAAO;QACpC,CAAC;IACL;IACA,MAAMiB,YAAY;QACd,GAAGjC,KAAK;QACRE;QACAG;QACAmB,cAAcL;QACd,gEAAgE;QAChEa,uBAAuBF;QACvBD,iBAAiBF;IACrB;IACA,MAAMO,UAAUC,IAAAA,6BAAa,EAAClC,KAAKY;IACnC,MAAMuB,YAAYC,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOH,YAAYI,IAAAA,sBAAU,EAACP,WAAWC,WAAWO,IAAAA,wBAAW,EAACR,WAAWC,QAAQ;AACvF"}

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

@@ -1,33 +1,26 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useTreeContextValues_unstable", {
+    enumerable: true,
+    get: ()=>useTreeContextValues_unstable
 });
-exports.useTreeContextValues_unstable = void 0;
 function useTreeContextValues_unstable(state) {
-  const {
-    openItems,
-    level,
-    appearance,
-    size,
-    requestOpenChange,
-    requestNavigation
-  } = state;
-  /**
+    const { openItems , checkedItems , selectionMode , level , appearance , size , requestTreeResponse  } = state;
+    /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
-   */
-  const tree = {
-    appearance,
-    size,
-    level,
-    openItems,
-    requestOpenChange,
-    requestNavigation
-  };
-  return {
-    tree
-  };
+   */ const tree = {
+        size,
+        level,
+        openItems,
+        appearance,
+        checkedItems,
+        selectionMode,
+        requestTreeResponse
+    };
+    return {
+        tree
+    };
 }
-exports.useTreeContextValues_unstable = useTreeContextValues_unstable;
-//# sourceMappingURL=useTreeContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useTreeContextValues_unstable","state","openItems","level","appearance","size","requestOpenChange","requestNavigation","tree","exports"],"sources":["../src/packages/react-components/react-tree/src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, level, appearance, size, requestOpenChange, requestNavigation } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    appearance,\n    size,\n    level,\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n  };\n\n  return { tree };\n}\n"],"mappings":";;;;;;AAGA,SAAgBA,6BAA6BA,CAACC,KAAgB;EAC5D,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,UAAU;IAAEC,IAAI;IAAEC,iBAAiB;IAAEC;EAAiB,CAAE,GAAGN,KAAK;EAC1F;;;;EAIA,MAAMO,IAAI,GAAqB;IAC7BJ,UAAU;IACVC,IAAI;IACJF,KAAK;IACLD,SAAS;IACTI,iBAAiB;IACjBC;GACD;EAED,OAAO;IAAEC;EAAI,CAAE;AACjB;AAhBAC,OAAA,CAAAT,6BAAA,GAAAA,6BAAA"}
+{"version":3,"sources":["useTreeContextValues.js"],"sourcesContent":["export function useTreeContextValues_unstable(state) {\n    const { openItems , checkedItems , selectionMode , level , appearance , size , requestTreeResponse  } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const tree = {\n        size,\n        level,\n        openItems,\n        appearance,\n        checkedItems,\n        selectionMode,\n        requestTreeResponse\n    };\n    return {\n        tree\n    };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","tree"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,8BAA8BC,KAAK,EAAE;IACjD,MAAM,EAAEC,UAAS,EAAGC,aAAY,EAAGC,cAAa,EAAGC,MAAK,EAAGC,WAAU,EAAGC,KAAI,EAAGC,oBAAmB,EAAG,GAAGP;IACxG;;;GAGD,GAAG,MAAMQ,OAAO;QACXF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACJ;IACA,OAAO;QACHC;IACJ;AACJ"}

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTreeNavigation", {
+    enumerable: true,
+    get: ()=>useTreeNavigation
+});
+const _nextTypeAheadElement = require("../../utils/nextTypeAheadElement");
+const _tokens = require("../../utils/tokens");
+const _treeItemFilter = require("../../utils/treeItemFilter");
+const _useRovingTabIndexes = require("../../hooks/useRovingTabIndexes");
+function useTreeNavigation() {
+    const { rove , initialize  } = (0, _useRovingTabIndexes.useRovingTabIndex)(_treeItemFilter.treeItemFilter);
+    const getNextElement = (data, treeItemWalker)=>{
+        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:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.parentElement();
+            case _tokens.treeDataTypes.ArrowRight:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.firstChild();
+            case _tokens.treeDataTypes.End:
+                treeItemWalker.currentElement = treeItemWalker.root;
+                return lastChildRecursive(treeItemWalker);
+            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();
+        }
+    };
+    function navigate(data, walker) {
+        const nextElement = getNextElement(data, walker);
+        if (nextElement) {
+            rove(nextElement);
+        }
+    }
+    return {
+        navigate,
+        initialize
+    };
+}
+function lastChildRecursive(walker) {
+    let lastElement = null;
+    let nextElement = null;
+    while(nextElement = walker.lastChild()){
+        lastElement = nextElement;
+    }
+    return lastElement;
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useTreeNavigation.js"],"sourcesContent":["import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nexport function useTreeNavigation() {\n    const { rove , initialize  } = useRovingTabIndex(treeItemFilter);\n    const getNextElement = (data, treeItemWalker)=>{\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                treeItemWalker.currentElement = data.target;\n                return nextTypeAheadElement(treeItemWalker, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.parentElement();\n            case treeDataTypes.ArrowRight:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.firstChild();\n            case treeDataTypes.End:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return lastChildRecursive(treeItemWalker);\n            case treeDataTypes.Home:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return treeItemWalker.firstChild();\n            case treeDataTypes.ArrowDown:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.nextElement();\n            case treeDataTypes.ArrowUp:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.previousElement();\n        }\n    };\n    function navigate(data, walker) {\n        const nextElement = getNextElement(data, walker);\n        if (nextElement) {\n            rove(nextElement);\n        }\n    }\n    return {\n        navigate,\n        initialize\n    };\n}\nfunction lastChildRecursive(walker) {\n    let lastElement = null;\n    let nextElement = null;\n    while(nextElement = walker.lastChild()){\n        lastElement = nextElement;\n    }\n    return lastElement;\n}\n"],"names":["useTreeNavigation","rove","initialize","useRovingTabIndex","treeItemFilter","getNextElement","data","treeItemWalker","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":";;;;+BAIgBA;;aAAAA;;sCAJqB;wBACP;gCACC;qCACG;AAC3B,SAASA,oBAAoB;IAChC,MAAM,EAAEC,KAAI,EAAGC,WAAU,EAAG,GAAGC,IAAAA,sCAAiB,EAACC,8BAAc;IAC/D,MAAMC,iBAAiB,CAACC,MAAMC,iBAAiB;QAC3C,OAAOD,KAAKE,IAAI;YACZ,KAAKC,qBAAa,CAACC,KAAK;gBACpB,OAAOJ,KAAKK,MAAM;YACtB,KAAKF,qBAAa,CAACG,SAAS;gBACxBL,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOG,IAAAA,0CAAoB,EAACP,gBAAgBD,KAAKS,KAAK,CAACC,GAAG;YAC9D,KAAKP,qBAAa,CAACQ,SAAS;gBACxBV,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOJ,eAAeW,aAAa;YACvC,KAAKT,qBAAa,CAACU,UAAU;gBACzBZ,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOJ,eAAea,UAAU;YACpC,KAAKX,qBAAa,CAACY,GAAG;gBAClBd,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOC,mBAAmBhB;YAC9B,KAAKE,qBAAa,CAACe,IAAI;gBACnBjB,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAea,UAAU;YACpC,KAAKX,qBAAa,CAACgB,SAAS;gBACxBlB,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOJ,eAAemB,WAAW;YACrC,KAAKjB,qBAAa,CAACkB,OAAO;gBACtBpB,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOJ,eAAeqB,eAAe;QAC7C;IACJ;IACA,SAASC,SAASvB,IAAI,EAAEwB,MAAM,EAAE;QAC5B,MAAMJ,cAAcrB,eAAeC,MAAMwB;QACzC,IAAIJ,aAAa;YACbzB,KAAKyB;QACT,CAAC;IACL;IACA,OAAO;QACHG;QACA3B;IACJ;AACJ;AACA,SAASqB,mBAAmBO,MAAM,EAAE;IAChC,IAAIC,cAAc,IAAI;IACtB,IAAIL,cAAc,IAAI;IACtB,MAAMA,cAAcI,OAAOE,SAAS,GAAG;QACnCD,cAAcL;IAClB;IACA,OAAOK;AACX"}

package/lib-commonjs/components/Tree/useTreeStyles.styles.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    treeClassNames: ()=>treeClassNames,
+    useTreeStyles_unstable: ()=>useTreeStyles_unstable
+});
+const _react = require("@griffel/react");
+const treeClassNames = {
+    root: 'fui-Tree'
+};
+const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    root: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        Belr9w4: "f1j0q4x9"
+    },
+    subtree: {
+        z8tnut: "fclwglc"
+    }
+}, {
+    d: [
+        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
+        ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}",
+        ".fclwglc{padding-top:var(--spacingVerticalXXS);}"
+    ]
+});
+const useTreeStyles_unstable = (state)=>{
+    const styles = useStyles();
+    const isSubTree = state.level > 1;
+    state.root.className = (0, _react.mergeClasses)(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
+    return state;
+}; //# sourceMappingURL=useTreeStyles.styles.js.map

package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n  root: 'fui-Tree'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Belr9w4: \"f1j0q4x9\"\n  },\n  subtree: {\n    z8tnut: \"fclwglc\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}\", \".fclwglc{padding-top:var(--spacingVerticalXXS);}\"]\n});\nexport const useTreeStyles_unstable = state => {\n  const styles = useStyles();\n  const isSubTree = state.level > 1;\n  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTreeStyles.styles.js.map"],"names":["treeClassNames","useTreeStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","Belr9w4","subtree","z8tnut","d","state","styles","isSubTree","level","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,cAAc,MAAdA;IAeAC,sBAAsB,MAAtBA;;uBAjB0B;AAEhC,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,SAAS;QACPC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAiD;KAAmD;AAC/R;AACO,MAAMT,yBAAyBU,CAAAA,QAAS;IAC7C,MAAMC,SAAST;IACf,MAAMU,YAAYF,MAAMG,KAAK,GAAG;IAChCH,MAAMT,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,eAAeE,IAAI,EAAEU,OAAOV,IAAI,EAAEW,aAAaD,OAAOJ,OAAO,EAAEG,MAAMT,IAAI,CAACa,SAAS;IACvH,OAAOJ;AACT,GACA,gDAAgD"}