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

package/lib/components/Tree/renderTree.js

@@ -1,15 +1,9 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 import { TreeProvider } from '../../contexts';
-export const renderTree_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(TreeProvider, {
-    value: contextValues.tree
-  }, /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, slotProps.root.children));
+export const renderTree_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(TreeProvider, {
+        value: contextValues.tree
+    }, state.open && /*#__PURE__*/ createElement(state.root, null, state.root.children));
 };
-//# sourceMappingURL=renderTree.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","TreeProvider","renderTree_unstable","state","contextValues","slots","slotProps","createElement","value","tree","root","children"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,OAAO,MAAMC,mBAAmB,GAAGA,CAACC,KAAgB,EAAEC,aAAgC,KAAI;EACxF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAYG,KAAK,CAAC;EAEvD,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,YAAY;IAACO,KAAK,EAAEJ,aAAa,CAACK;EAAI,gBACrCV,KAAA,CAAAQ,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAAGJ,SAAS,CAACI,IAAI,CAACC,QAAQ,CAAc,CACzD;AAEnB,CAAC"}
+{"version":3,"sources":["renderTree.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../../contexts';\nimport type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  assertSlots<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <state.root>{state.root.children}</state.root>}\n    </TreeProvider>\n  );\n};\n"],"names":["createElement","assertSlots","TreeProvider","renderTree_unstable","state","contextValues","value","tree","open","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,gBAAqC;IACzFJ,YAAuBG;IACvB,qBACE,AAVJ,cAUKF;QAAaI,OAAOD,cAAcE,IAAI;OACpCH,MAAMI,IAAI,kBAAI,AAXrB,cAWsBJ,MAAMK,IAAI,QAAEL,MAAMK,IAAI,CAACC,QAAQ;AAGrD,EAAE"}

package/lib/components/Tree/useNestedControllableCheckedItems.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ImmutableMap } from '../../utils/ImmutableMap';
+import { createCheckedItems } from '../../utils/createCheckedItems';
+export function useNestedCheckedItems(props) {
+    return React.useMemo(()=>createCheckedItems(props.checkedItems), [
+        props.checkedItems
+    ]);
+}
+export function createNextNestedCheckedItems(data, previousCheckedItems) {
+    if (data.selectionMode === 'single') {
+        return ImmutableMap.create([
+            [
+                data.value,
+                data.checked
+            ]
+        ]);
+    }
+    if (data.selectionMode === 'multiselect') {
+        return previousCheckedItems.set(data.value, data.checked);
+    }
+    return previousCheckedItems;
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useNestedControllableCheckedItems.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeCheckedChangeData, TreeProps } from './Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport { TreeItemValue } from '../TreeItem/TreeItem.types';\n\nexport function useNestedCheckedItems(props: Pick<TreeProps, 'checkedItems'>) {\n  return React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n}\n\nexport function createNextNestedCheckedItems(\n  data: TreeCheckedChangeData,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.create([[data.value, data.checked]]);\n  }\n  if (data.selectionMode === 'multiselect') {\n    return previousCheckedItems.set(data.value, data.checked);\n  }\n  return previousCheckedItems;\n}\n"],"names":["React","ImmutableMap","createCheckedItems","useNestedCheckedItems","props","useMemo","checkedItems","createNextNestedCheckedItems","data","previousCheckedItems","selectionMode","create","value","checked","set"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE,OAAO,SAASC,sBAAsBC,KAAsC,EAAE;IAC5E,OAAOJ,MAAMK,OAAO,CAAC,IAAMH,mBAAmBE,MAAME,YAAY,GAAG;QAACF,MAAME,YAAY;KAAC;AACzF,CAAC;AAED,OAAO,SAASC,6BACdC,IAA2B,EAC3BC,oBAAoE,EACpB;IAChD,IAAID,KAAKE,aAAa,KAAK,UAAU;QACnC,OAAOT,aAAaU,MAAM,CAAC;YAAC;gBAACH,KAAKI,KAAK;gBAAEJ,KAAKK,OAAO;aAAC;SAAC;IACzD,CAAC;IACD,IAAIL,KAAKE,aAAa,KAAK,eAAe;QACxC,OAAOD,qBAAqBK,GAAG,CAACN,KAAKI,KAAK,EAAEJ,KAAKK,OAAO;IAC1D,CAAC;IACD,OAAOJ;AACT,CAAC"}

package/lib/components/Tree/useTree.js

@@ -1,113 +1,66 @@
-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 { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';
+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';
+import { useTreeNavigation } from './useTreeNavigation';
+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) : useNestedRootTree(props, ref);
 };
-/**
- * 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
-  };
+function useNestedRootTree(props, ref) {
+    const [openItems, setOpenItems] = useControllableOpenItems(props);
+    const checkedItems = useNestedCheckedItems(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;
+        const nextOpenItems = createNextOpenItems(data, openItems);
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {
+            ...data,
+            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
+        });
+        setOpenItems(nextOpenItems);
+    });
+    const handleCheckedChange = useEventCallback((event, data)=>{
+        if (walkerRef.current) {
+            var _props_onCheckedChange;
+            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);
+            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {
+                ...data,
+                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
+            });
+        }
+    });
+    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);
+        }
+    });
+    return useRootTree({
+        ...props,
+        openItems,
+        checkedItems,
+        onOpenChange: handleOpenChange,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onNavigation_unstable: handleNavigation,
+        onCheckedChange: handleCheckedChange
+    }, useMergedRefs(ref, initializeWalker));
 }
-/**
- * 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 { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\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';\nimport { useTreeNavigation } from './useTreeNavigation';\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) : useNestedRootTree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(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    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n    setOpenItems(nextOpenItems);\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    if (walkerRef.current) {\n      const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n      props.onCheckedChange?.(event, {\n        ...data,\n        checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n      });\n    }\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  return useRootTree(\n    {\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    useMergedRefs(ref, initializeWalker),\n  );\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","useTreeContext_unstable","useRootTree","useSubtree","createHTMLElementWalker","treeItemFilter","useTreeNavigation","useTree_unstable","props","ref","isSubtree","ctx","level","useNestedRootTree","openItems","setOpenItems","checkedItems","navigate","initialize","walkerRef","useRef","initializeWalker","useCallback","root","current","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation_unstable"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAW5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,4BAA4B,EAAEC,qBAAqB,QAAQ,sCAAsC;AAC1G,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC,MAA2C;IAC5F,MAAMC,YAAYT,wBAAwBU,CAAAA,MAAOA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,YAAYP,WAAWK,OAAOC,OAAOI,kBAAkBL,OAAOC,IAAI;AAC3E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B,EAAa;IACnF,MAAM,CAACK,WAAWC,aAAa,GAAGjB,yBAAyBU;IAC3D,MAAMQ,eAAehB,sBAAsBQ;IAC3C,MAAM,EAAES,SAAQ,EAAEC,WAAU,EAAE,GAAGZ;IACjC,MAAMa,YAAYzB,MAAM0B,MAAM;IAC9B,MAAMC,mBAAmB3B,MAAM4B,WAAW,CACxC,CAACC,OAA6B;QAC5B,IAAIA,MAAM;YACRJ,UAAUK,OAAO,GAAGpB,wBAAwBmB,MAAMlB;YAClDa,WAAWC,UAAUK,OAAO;QAC9B,CAAC;IACH,GACA;QAACN;KAAW;IAGd,MAAMO,mBAAmB9B,iBAAiB,CAAC+B,OAA4BC,OAA6B;YAElGnB;QADA,MAAMoB,gBAAgB/B,oBAAoB8B,MAAMb;QAChDN,CAAAA,sBAAAA,MAAMqB,YAAY,cAAlBrB,iCAAAA,KAAAA,IAAAA,oBAAAA,KAAAA,OAAqBkB,OAAO;YAC1B,GAAGC,IAAI;YACPb,WAAWc,cAAcE,kCAAkC;QAC7D;QACAf,aAAaa;IACf;IAEA,MAAMG,sBAAsBpC,iBAAiB,CAAC+B,OAA+BC,OAAgC;QAC3G,IAAIR,UAAUK,OAAO,EAAE;gBAErBhB;YADA,MAAMwB,mBAAmBjC,6BAA6B4B,MAAMX;YAC5DR,CAAAA,yBAAAA,MAAMyB,eAAe,cAArBzB,oCAAAA,KAAAA,IAAAA,uBAAAA,KAAAA,OAAwBkB,OAAO;gBAC7B,GAAGC,IAAI;gBACPX,cAAcgB,iBAAiBE,kCAAkC;YACnE;QACF,CAAC;IACH;IACA,MAAMC,mBAAmBxC,iBACvB,CAAC+B,OAAqCC,OAAsC;YAC1EnB;QAAAA,CAAAA,+BAAAA,MAAM4B,qBAAqB,cAA3B5B,0CAAAA,KAAAA,IAAAA,6BAAAA,KAAAA,OAA8BkB,OAAOC;QACrC,IAAIR,UAAUK,OAAO,EAAE;YACrBP,SAASU,MAAMR,UAAUK,OAAO;QAClC,CAAC;IACH;IAGF,OAAOtB,YACL;QACE,GAAGM,KAAK;QACRM;QACAE;QACAa,cAAcJ;QACd,gEAAgE;QAChEW,uBAAuBD;QACvBF,iBAAiBF;IACnB,GACAnC,cAAca,KAAKY;AAEvB"}

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:flex;}", ".f1vx9l62{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 { assertSlots } 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)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(TreeItemProvider, {
+        value: contextValues.treeItem
+    }, state.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 { assertSlots } 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  assertSlots<TreeItemSlots>(state);\n\n  return (\n    <state.root>\n      <TreeItemProvider value={contextValues.treeItem}>{state.root.children}</TreeItemProvider>\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","TreeItemProvider","renderTreeItem_unstable","state","contextValues","root","value","treeItem","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrGJ,YAA2BG;IAE3B,qBACE,AAdJ,cAcKA,MAAME,IAAI,sBACT,AAfN,cAeOJ;QAAiBK,OAAOF,cAAcG,QAAQ;OAAGJ,MAAME,IAAI,CAACG,QAAQ;AAG3E,EAAE"}