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

package/lib/components/Tree/useControllableCheckedItems.js

@@ -0,0 +1,94 @@
+import { useControllableState } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { ImmutableMap } from '../../utils/ImmutableMap';
+import { createCheckedItems } from '../../utils/createCheckedItems';
+export function useControllableCheckedItems(props) {
+    return useControllableState({
+        initialState: ImmutableMap.empty,
+        state: React.useMemo(()=>props.checkedItems && createCheckedItems(props.checkedItems), [
+            props.checkedItems
+        ]),
+        defaultState: ()=>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/components/Tree/useControllableCheckedItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useControllableCheckedItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { TreeProps } from './Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\n\nexport type ControllableCheckedItemsOptions = {\n  checkedItems?: TreeProps['checkedItems'];\n  defaultCheckedItems?: TreeProps['checkedItems'];\n};\n\nexport function useControllableCheckedItems(props: ControllableCheckedItemsOptions) {\n  return useControllableState({\n    initialState: ImmutableMap.empty,\n    state: React.useMemo(() => props.checkedItems && createCheckedItems(props.checkedItems), [props.checkedItems]),\n    defaultState: () => createCheckedItems(props.defaultCheckedItems),\n  });\n}\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\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\n//     let treeItemValues = getAllSubTreeItemValues(data).add(data.value);\n\n//     let mixedValues: ImmutableSet<TreeItemValue> = ImmutableSet.empty;\n\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\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":["useControllableState","React","ImmutableMap","createCheckedItems","useControllableCheckedItems","props","initialState","empty","state","useMemo","checkedItems","defaultState","defaultCheckedItems"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AACjE,YAAYC,WAAW,QAAQ;AAE/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,kBAAkB,QAAQ,iCAAiC;AAOpE,OAAO,SAASC,4BAA4BC,KAAsC,EAAE;IAClF,OAAOL,qBAAqB;QAC1BM,cAAcJ,aAAaK,KAAK;QAChCC,OAAOP,MAAMQ,OAAO,CAAC,IAAMJ,MAAMK,YAAY,IAAIP,mBAAmBE,MAAMK,YAAY,GAAG;YAACL,MAAMK,YAAY;SAAC;QAC7GC,cAAc,IAAMR,mBAAmBE,MAAMO,mBAAmB;IAClE;AACF,CAAC,CAED,2HAA2H;CAC3H,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;CAER,mFAAmF;CACnF,8CAA8C;CAC9C,wDAAwD;CACxD,gBAAgB;CAChB,QAAQ;CACR,wCAAwC;CACxC,gBAAgB;CAChB,QAAQ;CACR,iFAAiF;CAEjF,0EAA0E;CAE1E,yEAAyE;CAEzE,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;CAEJ,kEAAkE;CAClE,qGAAqG;CACrG,6CAA6C;CAC7C,uCAAuC;CACvC,iFAAiF;CACjF,MAAM;CACN,mDAAmD;CACnD,IAAI"}

package/lib/components/Tree/useTree.js

@@ -1,113 +1,56 @@
-import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { useTreeContext_unstable } from '../../contexts';
-import { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';
-import { treeDataTypes } from '../../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
- */
-export const useTree_unstable = (props, ref) => {
-  const isSubtree = 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);
+import * as React from 'react';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
+import { useTreeNavigation } from './useTreeNavigation';
+import { useControllableCheckedItems } from './useControllableCheckedItems';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { useRootTree } from '../../hooks/useRootTree';
+import { useSubtree } from '../../hooks/useSubtree';
+import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
+import { treeItemFilter } from '../../utils/treeItemFilter';
+export const useTree_unstable = (props, ref)=>{
+    const [openItems, setOpenItems] = useControllableOpenItems(props);
+    const [checkedItems] = useControllableCheckedItems(props);
+    const { navigate , initialize  } = useTreeNavigation();
+    const walkerRef = React.useRef();
+    const initializeWalker = React.useCallback((root)=>{
+        if (root) {
+            walkerRef.current = createHTMLElementWalker(root, treeItemFilter);
+            initialize(walkerRef.current);
+        }
+    }, [
+        initialize
+    ]);
+    const handleOpenChange = useEventCallback((event, data)=>{
+        var _props_onOpenChange;
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
+        setOpenItems(createNextOpenItems(data, openItems));
+    });
+    const handleCheckedChange = 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 = 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 = useMergedRefs(ref, initializeWalker);
+    const isSubtree = 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(baseProps, baseRef) : useRootTree(baseProps, baseRef);
 };
-/**
- * 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 = useTreeContext_unstable(ctx => ctx.appearance);
-  const contextSize = 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 = useTreeContext_unstable(ctx => ctx.level);
-  const openItems = useTreeContext_unstable(ctx => ctx.openItems);
-  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);
-  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);
-  return {
-    components: {
-      root: 'div'
-    },
-    appearance,
-    size,
-    level: parentLevel + 1,
-    root: 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] = useOpenItemsState(props);
-  const [navigate, navigationRef] = useNestedTreeNavigation();
-  const requestOpenChange = 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 = 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 === treeDataTypes.arrowDown || data.type === treeDataTypes.arrowUp) {
-      data.event.preventDefault();
-    }
-  });
-  return {
-    components: {
-      root: 'div'
-    },
-    appearance,
-    size,
-    level: 1,
-    openItems,
-    requestOpenChange,
-    requestNavigation,
-    root: getNativeElementProps('div', {
-      ref: 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/components/Tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"names":["getNativeElementProps","useEventCallback","useMergedRefs","useTreeContext_unstable","useNestedTreeNavigation","useOpenItemsState","treeDataTypes","useTree_unstable","props","ref","isSubtree","ctx","level","useSubtree","useRootTree","contextAppearance","appearance","contextSize","size","parentLevel","openItems","requestOpenChange","requestNavigation","components","root","role","warnIfNoProperPropsRootTree","updateOpenItems","navigate","navigationRef","data","_a","onOpenChange","call","event","isDefaultPrevented","onNavigation_unstable","type","arrowDown","arrowUp","preventDefault","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.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeState,\n} from './Tree.types';\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 { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const [checkedItems] = useControllableCheckedItems(props);\n  const { navigate, initialize } = useTreeNavigation();\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root) {\n        walkerRef.current = createHTMLElementWalker(root, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize],\n  );\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    props.onOpenChange?.(event, data);\n    setOpenItems(createNextOpenItems(data, openItems));\n  });\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    props.onCheckedChange?.(event, data);\n    // TODO: implement next checked items for  tree\n  });\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      props.onNavigation_unstable?.(event, data);\n      if (walkerRef.current) {\n        navigate(data, walkerRef.current);\n      }\n    },\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\n  const baseRef = useMergedRefs(ref, initializeWalker);\n\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":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","useTreeNavigation","useControllableCheckedItems","useTreeContext_unstable","useRootTree","useSubtree","createHTMLElementWalker","treeItemFilter","useTree_unstable","props","ref","openItems","setOpenItems","checkedItems","navigate","initialize","walkerRef","useRef","initializeWalker","useCallback","root","current","handleOpenChange","event","data","onOpenChange","handleCheckedChange","onCheckedChange","handleNavigation","onNavigation_unstable","baseProps","baseRef","isSubtree","ctx","level"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAW5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC,MAA2C;IAC5F,MAAM,CAACC,WAAWC,aAAa,GAAGZ,yBAAyBS;IAC3D,MAAM,CAACI,aAAa,GAAGX,4BAA4BO;IACnD,MAAM,EAAEK,SAAQ,EAAEC,WAAU,EAAE,GAAGd;IACjC,MAAMe,YAAYpB,MAAMqB,MAAM;IAC9B,MAAMC,mBAAmBtB,MAAMuB,WAAW,CACxC,CAACC,OAA6B;QAC5B,IAAIA,MAAM;YACRJ,UAAUK,OAAO,GAAGf,wBAAwBc,MAAMb;YAClDQ,WAAWC,UAAUK,OAAO;QAC9B,CAAC;IACH,GACA;QAACN;KAAW;IAGd,MAAMO,mBAAmBzB,iBAAiB,CAAC0B,OAA4BC,OAA6B;YAClGf;QAAAA,CAAAA,sBAAAA,MAAMgB,YAAY,cAAlBhB,iCAAAA,KAAAA,IAAAA,oBAAAA,KAAAA,OAAqBc,OAAOC;QAC5BZ,aAAab,oBAAoByB,MAAMb;IACzC;IACA,MAAMe,sBAAsB7B,iBAAiB,CAAC0B,OAA+BC,OAAgC;YAC3Gf;QAAAA,CAAAA,yBAAAA,MAAMkB,eAAe,cAArBlB,oCAAAA,KAAAA,IAAAA,uBAAAA,KAAAA,OAAwBc,OAAOC;IAC/B,+CAA+C;IACjD;IACA,MAAMI,mBAAmB/B,iBACvB,CAAC0B,OAAqCC,OAAsC;YAC1Ef;QAAAA,CAAAA,+BAAAA,MAAMoB,qBAAqB,cAA3BpB,0CAAAA,KAAAA,IAAAA,6BAAAA,KAAAA,OAA8Bc,OAAOC;QACrC,IAAIR,UAAUK,OAAO,EAAE;YACrBP,SAASU,MAAMR,UAAUK,OAAO;QAClC,CAAC;IACH;IAGF,MAAMS,YAAY;QAChB,GAAGrB,KAAK;QACRE;QACAE;QACAY,cAAcH;QACd,gEAAgE;QAChEO,uBAAuBD;QACvBD,iBAAiBD;IACnB;IAEA,MAAMK,UAAUjC,cAAcY,KAAKQ;IAEnC,MAAMc,YAAY7B,wBAAwB8B,CAAAA,MAAOA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,YAAY3B,WAAWyB,WAAWC,WAAW3B,YAAY0B,WAAWC,QAAQ;AACrF,EAAE"}

package/lib/components/Tree/useTreeContextValues.js

@@ -1,26 +1,18 @@
 export 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
+    };
 }
-//# sourceMappingURL=useTreeContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useTreeContextValues_unstable","state","openItems","level","appearance","size","requestOpenChange","requestNavigation","tree"],"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,OAAM,SAAUA,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"}
+{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\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   */\n  const tree: TreeContextValue = {\n    size,\n    level,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    requestTreeResponse,\n  };\n\n  return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB,EAAqB;IACjF,MAAM,EAAEC,UAAS,EAAEC,aAAY,EAAEC,cAAa,EAAEC,MAAK,EAAEC,WAAU,EAAEC,KAAI,EAAEC,oBAAmB,EAAE,GAAGP;IACjG;;;GAGC,GACD,MAAMQ,OAAyB;QAC7BF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,CAAC"}

package/lib/components/Tree/useTreeNavigation.js

@@ -0,0 +1,52 @@
+import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
+import { treeDataTypes } from '../../utils/tokens';
+import { treeItemFilter } from '../../utils/treeItemFilter';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
+export function useTreeNavigation() {
+    const { rove , initialize  } = useRovingTabIndex(treeItemFilter);
+    const getNextElement = (data, treeItemWalker)=>{
+        switch(data.type){
+            case treeDataTypes.Click:
+                return data.target;
+            case treeDataTypes.TypeAhead:
+                treeItemWalker.currentElement = data.target;
+                return nextTypeAheadElement(treeItemWalker, data.event.key);
+            case treeDataTypes.ArrowLeft:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.parentElement();
+            case treeDataTypes.ArrowRight:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.firstChild();
+            case treeDataTypes.End:
+                treeItemWalker.currentElement = treeItemWalker.root;
+                return lastChildRecursive(treeItemWalker);
+            case treeDataTypes.Home:
+                treeItemWalker.currentElement = treeItemWalker.root;
+                return treeItemWalker.firstChild();
+            case treeDataTypes.ArrowDown:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.nextElement();
+            case treeDataTypes.ArrowUp:
+                treeItemWalker.currentElement = data.target;
+                return treeItemWalker.previousElement();
+        }
+    };
+    function navigate(data, 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/components/Tree/useTreeNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from './Tree.types';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { HTMLElementWalker } from '../../utils/createHTMLElementWalker';\n\nexport function useTreeNavigation() {\n  const { rove, initialize } = useRovingTabIndex(treeItemFilter);\n\n  const getNextElement = (data: TreeNavigationData_unstable, treeItemWalker: HTMLElementWalker) => {\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: TreeNavigationData_unstable, walker: HTMLElementWalker) {\n    const nextElement = getNextElement(data, walker);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return { navigate, initialize } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useTreeNavigation","rove","initialize","getNextElement","data","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,kCAAkC;AAGpE,OAAO,SAASC,oBAAoB;IAClC,MAAM,EAAEC,KAAI,EAAEC,WAAU,EAAE,GAAGH,kBAAkBD;IAE/C,MAAMK,iBAAiB,CAACC,MAAmCC,iBAAsC;QAC/F,OAAQD,KAAKE,IAAI;YACf,KAAKT,cAAcU,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,KAAKX,cAAcY,SAAS;gBAC1BJ,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOZ,qBAAqBS,gBAAgBD,KAAKO,KAAK,CAACC,GAAG;YAC5D,KAAKf,cAAcgB,SAAS;gBAC1BR,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeS,aAAa;YACrC,KAAKjB,cAAckB,UAAU;gBAC3BV,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeW,UAAU;YAClC,KAAKnB,cAAcoB,GAAG;gBACpBZ,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOC,mBAAmBd;YAC5B,KAAKR,cAAcuB,IAAI;gBACrBf,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOb,eAAeW,UAAU;YAClC,KAAKnB,cAAcwB,SAAS;gBAC1BhB,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeiB,WAAW;YACnC,KAAKzB,cAAc0B,OAAO;gBACxBlB,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAemB,eAAe;QACzC;IACF;IACA,SAASC,SAASrB,IAAiC,EAAEsB,MAAyB,EAAE;QAC9E,MAAMJ,cAAcnB,eAAeC,MAAMsB;QACzC,IAAIJ,aAAa;YACfrB,KAAKqB;QACP,CAAC;IACH;IACA,OAAO;QAAEG;QAAUvB;IAAW;AAChC,CAAC;AAED,SAASiB,mBAAmBO,MAAyB,EAAE;IACrD,IAAIC,cAAkC,IAAI;IAC1C,IAAIL,cAAkC,IAAI;IAC1C,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}

package/lib/components/Tree/{useTreeStyles.js → useTreeStyles.styles.js}

@@ -8,13 +8,17 @@ const useStyles = /*#__PURE__*/__styles({
     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);}"]
+  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);}"]
 });
 export const useTreeStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(treeClassNames.root, styles.root, state.root.className);
+  const isSubTree = state.level > 1;
+  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
   return state;
 };
-//# sourceMappingURL=useTreeStyles.js.map
+//# sourceMappingURL=useTreeStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","z8tnut","d","useTreeStyles_unstable","state","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    },\n    subtree: {\n        paddingTop: tokens.spacingVerticalXXS\n    }\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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAMU,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACT,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEW,SAAS,IAAID,MAAM,CAACL,OAAO,EAAEI,KAAK,CAACT,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOJ,KAAK;AAChB,CAAC"}

package/lib/components/TreeItem/TreeItem.js

@@ -1,16 +1,23 @@
 import * as React from 'react';
 import { useTreeItem_unstable } from './useTreeItem';
 import { renderTreeItem_unstable } from './renderTreeItem';
-import { useTreeItemStyles_unstable } from './useTreeItemStyles';
+import { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';
 import { useTreeItemContextValues_unstable } from './useTreeItemContextValues';
 /**
- * TreeItem component - TODO: add more docs
- */
-export const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useTreeItem_unstable(props, ref);
-  useTreeItemStyles_unstable(state);
-  const contextValues = useTreeItemContextValues_unstable(state);
-  return renderTreeItem_unstable(state, contextValues);
+ * The `TreeItem` component represents a single item in a tree.
+ * It expects a certain order of children to work properly: the first child should be the node itself,
+ * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.
+ * This order follows the same order as document traversal for the TreeWalker API in JavaScript:
+ * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.
+ * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
+ * which should be used as a direct child of TreeItem.
+ *
+ * When a TreeItem has nested child subtree, an expand/collapse control is displayed,
+ * allowing the user to show or hide the children.
+ */ export const TreeItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTreeItem_unstable(props, ref);
+    useTreeItemStyles_unstable(state);
+    const contextValues = useTreeItemContextValues_unstable(state);
+    return renderTreeItem_unstable(state, contextValues);
 });
 TreeItem.displayName = 'TreeItem';
-//# sourceMappingURL=TreeItem.js.map

package/lib/components/TreeItem/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * TreeItem component - TODO: add more docs\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAGhE,SAASC,iCAAiC,QAAQ,4BAA4B;AAE9E;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGR,oBAAoB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE9CL,0BAA0B,CAACM,KAAK,CAAC;EACjC,MAAMC,aAAa,GAAGN,iCAAiC,CAACK,KAAK,CAAC;EAC9D,OAAOP,uBAAuB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFL,QAAQ,CAACM,WAAW,GAAG,UAAU"}
+{"version":3,"sources":["TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAE/E;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAC3B,MAAMC,gBAAgBN,kCAAkCK;IACxD,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/TreeItem/TreeItem.types.js

@@ -1,2 +1 @@
-import { treeItemLevelToken } from '../../utils/tokens';
-//# sourceMappingURL=TreeItem.types.js.map
+import * as React from 'react';

package/lib/components/TreeItem/TreeItem.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n  content: NonNullable<Slot<'div'>>;\n  subtree?: Slot<'span'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * Actions slot that renders on the end of tree item\n   * when the item is hovered/focused\n   */\n  actions?: Slot<'span'>;\n};\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n  button: ButtonContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  /**\n   * If a TreeItem is a leaf, it'll not present the `expandIcon` slot by default.\n   * This attribute is used to force the decision if a TreeItem is a leaf or not. By not providing this property\n   * this will be inferred by the presence of a subtree as part of the TreeItem children.\n   */\n  leaf?: boolean;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> & {\n  open: boolean;\n  isLeaf: boolean;\n  level: number;\n  /**\n   * By design, a button included on the actions slot should be small\n   */\n  buttonSize: 'small';\n  isActionsVisible: boolean;\n};\n"]}
+{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  itemType: TreeItemType;\n  value?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n  TreeItemContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}

package/lib/components/TreeItem/index.js

@@ -2,5 +2,5 @@ export * from './TreeItem';
 export * from './TreeItem.types';
 export * from './renderTreeItem';
 export * from './useTreeItem';
-export * from './useTreeItemStyles';
-//# sourceMappingURL=index.js.map
+export * from './useTreeItemStyles.styles';
+export * from './useTreeItemContextValues';

package/lib/components/TreeItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/TreeItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\nexport * from './useTreeItemContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B;AAC3C,cAAc,6BAA6B"}

package/lib/components/TreeItem/renderTreeItem.js

@@ -1,29 +1,11 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import { TreeItemProvider } from '../../contexts';
-import { ButtonContextProvider } from '@fluentui/react-button';
 /**
  * Render the final JSX of TreeItem
- */
-export const renderTreeItem_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(TreeItemProvider, {
-    value: contextValues.treeItem
-  }, /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.content, {
-    ...slotProps.content
-  }, slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, {
-    ...slotProps.expandIcon
-  }), slotProps.content.children, /*#__PURE__*/React.createElement(ButtonContextProvider, {
-    value: contextValues.button
-  }, slots.actions && /*#__PURE__*/React.createElement(slots.actions, {
-    ...slotProps.actions
-  }))), state.open && slots.subtree && /*#__PURE__*/React.createElement(slots.subtree, {
-    ...slotProps.subtree
-  })));
+ */ export const renderTreeItem_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(TreeItemProvider, {
+        value: contextValues.treeItem
+    }, slotProps.root.children));
 };
-//# sourceMappingURL=renderTreeItem.js.map

package/lib/components/TreeItem/renderTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","TreeItemProvider","ButtonContextProvider","renderTreeItem_unstable","state","contextValues","slots","slotProps","createElement","value","treeItem","root","content","expandIcon","children","button","actions","open","subtree"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemSlots, TreeItemContextValues } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {\n  const { slots, slotProps } = getSlots<TreeItemSlots>(state);\n\n  return (\n    <TreeItemProvider value={contextValues.treeItem}>\n      <slots.root {...slotProps.root}>\n        <slots.content {...slotProps.content}>\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n          {slotProps.content.children}\n          <ButtonContextProvider value={contextValues.button}>\n            {slots.actions && <slots.actions {...slotProps.actions} />}\n          </ButtonContextProvider>\n        </slots.content>\n        {state.open && slots.subtree && <slots.subtree {...slotProps.subtree} />}\n      </slots.root>\n    </TreeItemProvider>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D;;;AAGA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGP,QAAQ,CAAgBI,KAAK,CAAC;EAE3D,oBACEL,KAAA,CAAAS,aAAA,CAACP,gBAAgB;IAACQ,KAAK,EAAEJ,aAAa,CAACK;EAAQ,gBAC7CX,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,gBAC5BZ,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACM,OAAO;IAAA,GAAKL,SAAS,CAACK;EAAO,GACjCN,KAAK,CAACO,UAAU,iBAAId,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACO,UAAU;IAAA,GAAKN,SAAS,CAACM;EAAU,EAAI,EAClEN,SAAS,CAACK,OAAO,CAACE,QAAQ,eAC3Bf,KAAA,CAAAS,aAAA,CAACN,qBAAqB;IAACO,KAAK,EAAEJ,aAAa,CAACU;EAAM,GAC/CT,KAAK,CAACU,OAAO,iBAAIjB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACU,OAAO;IAAA,GAAKT,SAAS,CAACS;EAAO,EAAI,CACpC,CACV,EACfZ,KAAK,CAACa,IAAI,IAAIX,KAAK,CAACY,OAAO,iBAAInB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACY,OAAO;IAAA,GAAKX,SAAS,CAACW;EAAO,EAAI,CAC7D,CACI;AAEvB,CAAC"}
+{"version":3,"sources":["renderTreeItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemContextValues, TreeItemSlots } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TreeItemProvider value={contextValues.treeItem}>{slotProps.root.children}</TreeItemProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","TreeItemProvider","renderTreeItem_unstable","state","contextValues","slots","slotProps","root","value","treeItem","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAdJ,cAcKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeON;QAAiBO,OAAOJ,cAAcK,QAAQ;OAAGH,UAAUC,IAAI,CAACG,QAAQ;AAG/E,EAAE"}