@fluentui/react-tree 9.0.0-beta.24 → 9.0.0-beta.25

package/lib/components/TreeItem/renderTreeItem.js

@@ -1,11 +1,13 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
-import { TreeItemProvider } from '../../contexts';
+import { TreeItemProvider, TreeItemSlotsProvider } from '../../contexts';
 /**
  * Render the final JSX of TreeItem
  */ 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));
+    }, /*#__PURE__*/ createElement(TreeItemSlotsProvider, {
+        value: contextValues.treeItemSlots
+    }, slotProps.root.children)));
 };

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

@@ -1 +1 @@
-{"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, TreeItemSlots, TreeItemContextValues } 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"}
+{"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, TreeItemInternalSlot } from './TreeItem.types';\nimport { TreeItemProvider, TreeItemSlotsProvider } 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<TreeItemInternalSlot>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TreeItemProvider value={contextValues.treeItem}>\n        <TreeItemSlotsProvider value={contextValues.treeItemSlots}>{slotProps.root.children}</TreeItemSlotsProvider>\n      </TreeItemProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","TreeItemProvider","TreeItemSlotsProvider","renderTreeItem_unstable","state","contextValues","slots","slotProps","root","value","treeItem","treeItemSlots","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,gBAAgB,EAAEC,qBAAqB,QAAQ,iBAAiB;AAEzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAmCI;IAEhE,qBACE,AAdJ,cAcKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeOP;QAAiBQ,OAAOJ,cAAcK,QAAQ;qBAC7C,AAhBR,cAgBSR;QAAsBO,OAAOJ,cAAcM,aAAa;OAAGJ,UAAUC,IAAI,CAACI,QAAQ;AAI3F,EAAE"}

package/lib/components/TreeItem/useTreeItem.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useControllableState, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useEventCallback } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
 import { useTreeContext_unstable } from '../../contexts/index';
 import { treeDataTypes } from '../../utils/tokens';
 import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
+import { TreeItemChevron } from '../TreeItemChevron';
 /**
  * Create the state required to render TreeItem.
  *
@@ -17,18 +18,34 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
     var _props_value;
     const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
     const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
-    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
+    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , expandIcon , aside , ...rest } = props;
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
-    const [isActionsVisible, setActionsVisible] = React.useState(false);
+    const [isActionsVisibleExternal, actions] = isResolvedShorthand(props.actions) ? [
+        props.actions.visible,
+        {
+            ...props.actions,
+            visible: undefined
+        }
+    ] : [
+        undefined,
+        props.actions
+    ];
+    const [isActionsVisible, setActionsVisible] = useControllableState({
+        state: isActionsVisibleExternal,
+        defaultState: false,
+        initialState: false
+    });
     const [isAsideVisible, setAsideVisible] = React.useState(true);
-    const handleActionsRef = (actions)=>{
-        setAsideVisible(actions === null);
+    const handleActionsRef = (actionsElement)=>{
+        setAsideVisible(actionsElement === null);
     };
     const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));
     const actionsRef = React.useRef(null);
     const expandIconRef = React.useRef(null);
     const layoutRef = React.useRef(null);
     const subtreeRef = React.useRef(null);
+    const actionsRefs = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, handleActionsRef, actionsRef);
+    const expandIconRefs = useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef);
     const handleClick = useEventCallback((event)=>{
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (event.isDefaultPrevented()) {
@@ -45,17 +62,16 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
         requestTreeResponse({
             event,
-            itemType,
             value,
+            itemType,
+            target: event.currentTarget,
             type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click
         });
     });
     const handleKeyDown = useEventCallback((event)=>{
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-        if (event.isDefaultPrevented()) {
-            return;
-        }
-        if (event.currentTarget !== event.target) {
+        // Ignore keyboard events that do not originate from the current tree item.
+        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
             return;
         }
         switch(event.key){
@@ -68,6 +84,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             case treeDataTypes.ArrowRight:
                 return requestTreeResponse({
                     event,
+                    target: event.currentTarget,
                     value,
                     itemType,
                     type: event.key
@@ -77,6 +94,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         if (isTypeAheadCharacter) {
             requestTreeResponse({
                 event,
+                target: event.currentTarget,
                 value,
                 itemType,
                 type: treeDataTypes.TypeAhead
@@ -99,16 +117,37 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             return setActionsVisible(false);
         }
     });
+    const isBranch = itemType === 'branch';
+    const actionsSlot = React.useMemo(()=>isActionsVisible ? resolveShorthand(actions) : undefined, [
+        actions,
+        isActionsVisible
+    ]);
+    if (actionsSlot) {
+        actionsSlot.ref = actionsRefs;
+    }
+    const asideSlot = React.useMemo(()=>isAsideVisible ? resolveShorthand(aside) : undefined, [
+        aside,
+        isAsideVisible
+    ]);
+    const expandIconSlot = React.useMemo(()=>resolveShorthand(expandIcon, {
+            required: isBranch,
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),
+                'aria-hidden': true
+            }
+        }), [
+        expandIcon,
+        isBranch
+    ]);
+    if (expandIconSlot) {
+        expandIconSlot.ref = expandIconRefs;
+    }
     return {
         value,
         open,
         subtreeRef,
-        actionsRef: useMergedRefs(actionsRef, handleActionsRef),
-        expandIconRef,
         layoutRef,
         itemType,
-        isActionsVisible,
-        isAsideVisible,
         level,
         components: {
             root: 'div'
@@ -120,13 +159,16 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             role: 'treeitem',
             'aria-level': level,
             [dataTreeItemValueAttrName]: value,
-            'aria-expanded': itemType === 'branch' ? open : undefined,
+            'aria-expanded': isBranch ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
             onMouseOver: handleActionsVisible,
             onFocus: handleActionsVisible,
             onMouseOut: handleActionsInvisible,
             onBlur: handleActionsInvisible
-        })
+        }),
+        actions: actionsSlot,
+        aside: asideSlot,
+        expandIcon: expandIconSlot
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = (actions: HTMLDivElement | null) => {\n    setAsideVisible(actions === null);\n  };\n\n  const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestTreeResponse({\n      event,\n      itemType,\n      value,\n      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.Enter:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowLeft:\n      case treeDataTypes.ArrowRight:\n        return requestTreeResponse({ event, value, itemType, type: event.key });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({ event, value, itemType, type: treeDataTypes.TypeAhead });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  return {\n    value,\n    open,\n    subtreeRef,\n    actionsRef: useMergedRefs(actionsRef, handleActionsRef),\n    expandIconRef,\n    layoutRef,\n    itemType,\n    isActionsVisible,\n    isAsideVisible,\n    level,\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(as, {\n      tabIndex: -1,\n      ...rest,\n      ref,\n      role: 'treeitem',\n      'aria-level': level,\n      [dataTreeItemValueAttrName]: value,\n      'aria-expanded': itemType === 'branch' ? open : undefined,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: handleActionsVisible,\n      onFocus: handleActionsVisible,\n      onMouseOut: handleActionsInvisible,\n      onBlur: handleActionsInvisible,\n    }),\n  };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","treeDataTypes","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","actions","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isFromExpandIcon","type","ExpandIconClick","Click","handleKeyDown","currentTarget","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","components","root","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  isResolvedShorthand,\n  resolveShorthand,\n  useControllableState,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const {\n    onClick,\n    onKeyDown,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    expandIcon,\n    aside,\n    ...rest\n  } = props;\n\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const [isActionsVisibleExternal, actions]: [boolean | undefined, TreeItemSlots['actions']] = isResolvedShorthand(\n    props.actions,\n  )\n    ? // .visible prop should not be propagated to the DOM\n      [props.actions.visible, { ...props.actions, visible: undefined }]\n    : [undefined, props.actions];\n\n  const [isActionsVisible, setActionsVisible] = useControllableState({\n    state: isActionsVisibleExternal,\n    defaultState: false,\n    initialState: false,\n  });\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = (actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  };\n\n  const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n\n  const actionsRefs = useMergedRefs(\n    isResolvedShorthand(actions) ? actions.ref : undefined,\n    handleActionsRef,\n    actionsRef,\n  );\n  const expandIconRefs = useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestTreeResponse({\n      event,\n      value,\n      itemType,\n      target: event.currentTarget,\n      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.Enter:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowLeft:\n      case treeDataTypes.ArrowRight:\n        return requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: event.key });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: treeDataTypes.TypeAhead });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const isBranch = itemType === 'branch';\n\n  const actionsSlot = React.useMemo(\n    () => (isActionsVisible ? resolveShorthand(actions) : undefined),\n    [actions, isActionsVisible],\n  );\n  if (actionsSlot) {\n    actionsSlot.ref = actionsRefs;\n  }\n  const asideSlot = React.useMemo(\n    () => (isAsideVisible ? resolveShorthand(aside) : undefined),\n    [aside, isAsideVisible],\n  );\n  const expandIconSlot = React.useMemo(\n    () =>\n      resolveShorthand(expandIcon, {\n        required: isBranch,\n        defaultProps: {\n          children: <TreeItemChevron />,\n          'aria-hidden': true,\n        },\n      }),\n    [expandIcon, isBranch],\n  );\n  if (expandIconSlot) {\n    expandIconSlot.ref = expandIconRefs;\n  }\n\n  return {\n    value,\n    open,\n    subtreeRef,\n    layoutRef,\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(as, {\n      tabIndex: -1,\n      ...rest,\n      ref,\n      role: 'treeitem',\n      'aria-level': level,\n      [dataTreeItemValueAttrName]: value,\n      'aria-expanded': isBranch ? open : undefined,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: handleActionsVisible,\n      onFocus: handleActionsVisible,\n      onMouseOut: handleActionsInvisible,\n      onBlur: handleActionsInvisible,\n    }),\n    actions: actionsSlot,\n    aside: asideSlot,\n    expandIcon: expandIconSlot,\n  };\n}\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useControllableState","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","treeDataTypes","dataTreeItemValueAttrName","TreeItemChevron","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","expandIcon","aside","rest","requestTreeResponse","isActionsVisibleExternal","actions","visible","undefined","isActionsVisible","setActionsVisible","state","defaultState","initialState","isAsideVisible","setAsideVisible","useState","handleActionsRef","actionsElement","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","actionsRefs","expandIconRefs","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","isBranch","actionsSlot","useMemo","asideSlot","expandIconSlot","required","defaultProps","children","components","root","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}

package/lib/components/TreeItem/useTreeItemContextValues.js

@@ -1,20 +1,27 @@
+import * as React from 'react';
 export function useTreeItemContextValues_unstable(state) {
-    const { value , isActionsVisible , isAsideVisible , actionsRef , itemType , layoutRef , subtreeRef , expandIconRef , open  } = state;
+    const { value , itemType , layoutRef , subtreeRef , open , actions , aside , expandIcon  } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
    */ const treeItem = {
-        isActionsVisible,
-        isAsideVisible,
         value,
-        actionsRef,
         itemType,
         layoutRef,
         subtreeRef,
-        expandIconRef,
         open
     };
+    const treeItemSlots = React.useMemo(()=>({
+            actions,
+            aside,
+            expandIcon
+        }), [
+        actions,
+        aside,
+        expandIcon
+    ]);
     return {
-        treeItem
+        treeItem,
+        treeItemSlots
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValue } from '../../contexts';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\n\nexport function useTreeItemContextValues_unstable(\n  state: Pick<TreeItemState, keyof TreeItemContextValue>,\n): TreeItemContextValues {\n  const { value, isActionsVisible, isAsideVisible, actionsRef, itemType, layoutRef, subtreeRef, expandIconRef, open } =\n    state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    isActionsVisible,\n    isAsideVisible,\n    value,\n    actionsRef,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    expandIconRef,\n    open,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","isActionsVisible","isAsideVisible","actionsRef","itemType","layoutRef","subtreeRef","expandIconRef","open","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCACdC,KAAsD,EAC/B;IACvB,MAAM,EAAEC,MAAK,EAAEC,iBAAgB,EAAEC,eAAc,EAAEC,WAAU,EAAEC,SAAQ,EAAEC,UAAS,EAAEC,WAAU,EAAEC,cAAa,EAAEC,KAAI,EAAE,GACjHT;IAEF;;;GAGC,GACD,MAAMU,WAAiC;QACrCR;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAS;AACpB,CAAC"}
+{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue, TreeItemSlotsContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const { value, itemType, layoutRef, subtreeRef, open, actions, aside, expandIcon } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    value,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n  };\n\n  const treeItemSlots: TreeItemSlotsContextValue = React.useMemo(\n    () => ({ actions, aside, expandIcon }),\n    [actions, aside, expandIcon],\n  );\n\n  return { treeItem, treeItemSlots };\n}\n"],"names":["React","useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","actions","aside","expandIcon","treeItem","treeItemSlots","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,UAAS,EAAEC,WAAU,EAAEC,KAAI,EAAEC,QAAO,EAAEC,MAAK,EAAEC,WAAU,EAAE,GAAGR;IAErF;;;GAGC,GACD,MAAMS,WAAiC;QACrCR;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAMK,gBAA2CZ,MAAMa,OAAO,CAC5D,IAAO,CAAA;YAAEL;YAASC;YAAOC;QAAW,CAAA,GACpC;QAACF;QAASC;QAAOC;KAAW;IAG9B,OAAO;QAAEC;QAAUC;IAAc;AACnC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'div'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'div'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  aside?: Slot<'div'>;\n  /**\n   * actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   */\n  actions?: Slot<\n    ExtractSlotProps<\n      Slot<'div'> & {\n        /**\n         * Forces visibility of the aside/action content\n         */\n        visible?: boolean;\n      }\n    >\n  >;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAiDE"}
+{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemSlots } from '../TreeItem/TreeItem.types';\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'div'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'div'>;\n};\n\nexport type TreeItemLayoutInternalSlots = TreeItemLayoutSlots & Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutInternalSlots> & {\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAgCE"}

package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      <slots.content {...slotProps.content}>{slotProps.root.children}</slots.content>\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","iconBefore","content","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAkCG;IAE/D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAf3B,cAe4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,UAAU,kBAAI,AAhB3B,cAgB4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU,iBAC/D,AAjBN,cAiBOJ,MAAMK,OAAO,EAAKJ,UAAUI,OAAO,EAAGJ,UAAUC,IAAI,CAACI,QAAQ,GAC7DN,MAAMO,SAAS,kBAAI,AAlB1B,cAkB2BP,MAAMO,SAAS,EAAKN,UAAUM,SAAS,iBAC5D,AAnBN,cAmBOV;QAAsBW,OAAOT,MAAMU,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AApB1B,cAoB2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AArBxB,cAqByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}
+{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutInternalSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutInternalSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      <slots.content {...slotProps.content}>{slotProps.root.children}</slots.content>\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","iconBefore","content","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAA0CG;IAEvE,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAf3B,cAe4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,UAAU,kBAAI,AAhB3B,cAgB4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU,iBAC/D,AAjBN,cAiBOJ,MAAMK,OAAO,EAAKJ,UAAUI,OAAO,EAAGJ,UAAUC,IAAI,CAACI,QAAQ,GAC7DN,MAAMO,SAAS,kBAAI,AAlB1B,cAkB2BP,MAAMO,SAAS,EAAKN,UAAUM,SAAS,iBAC5D,AAnBN,cAmBOV;QAAsBW,OAAOT,MAAMU,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AApB1B,cAoB2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AArBxB,cAqByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
-import { TreeItemChevron } from '../TreeItemChevron';
+import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsContext';
 /**
  * Create the state required to render TreeItemLayout.
  *
@@ -11,15 +11,9 @@ import { TreeItemChevron } from '../TreeItemChevron';
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
-    const { content , iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;
+    const { content , iconAfter , iconBefore , as ='span'  } = props;
+    const { actions , aside , expandIcon  } = useTreeItemSlotsContext_unstable();
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
-    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
-    const isActionsVisibleContext = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible);
-    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);
-    var _ref;
-    const isActionsVisible = (_ref = isResolvedShorthand(actions) ? actions.visible : undefined) !== null && _ref !== void 0 ? _ref : isActionsVisibleContext;
-    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');
-    const actionsRef = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, useTreeItemContext_unstable((ctx)=>ctx.actionsRef));
     return {
         components: {
             root: 'div',
@@ -50,23 +44,8 @@ import { TreeItemChevron } from '../TreeItemChevron';
                 'aria-hidden': true
             }
         }),
-        aside: isAsideVisible ? resolveShorthand(aside) : undefined,
-        actions: isActionsVisible ? resolveShorthand(// visible props should not be propagated to the DOM
-        isResolvedShorthand(actions) ? {
-            ...actions,
-            visible: undefined
-        } : actions, {
-            defaultProps: {
-                ref: actionsRef
-            }
-        }) : undefined,
-        expandIcon: resolveShorthand(expandIcon, {
-            required: isBranch,
-            defaultProps: {
-                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),
-                'aria-hidden': true,
-                ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
-            }
-        })
+        aside: resolveShorthand(aside),
+        actions: resolveShorthand(actions),
+        expandIcon: resolveShorthand(expandIcon)
     };
 };

package/lib/components/TreeItemLayout/useTreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getNativeElementProps,\n  isResolvedShorthand,\n  resolveShorthand,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { content, iconAfter, iconBefore, expandIcon, as = 'span', aside, actions } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const isActionsVisibleContext = useTreeItemContext_unstable(ctx => ctx.isActionsVisible);\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n  const isActionsVisible = (isResolvedShorthand(actions) ? actions.visible : undefined) ?? isActionsVisibleContext;\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n  const actionsRef = useMergedRefs(\n    isResolvedShorthand(actions) ? actions.ref : undefined,\n    useTreeItemContext_unstable(ctx => ctx.actionsRef),\n  );\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      content: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n    },\n    buttonContextValue: { size: 'small' },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    content: resolveShorthand(content, { required: true }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: isAsideVisible ? resolveShorthand(aside) : undefined,\n    actions: isActionsVisible\n      ? resolveShorthand<ExtractSlotProps<TreeItemLayoutSlots['actions']>>(\n          // visible props should not be propagated to the DOM\n          isResolvedShorthand(actions) ? { ...actions, visible: undefined } : actions,\n          {\n            defaultProps: { ref: actionsRef },\n          },\n        )\n      : undefined,\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: <TreeItemChevron />,\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","expandIcon","as","aside","actions","layoutRef","ctx","expandIconRef","isActionsVisibleContext","isActionsVisible","isAsideVisible","visible","undefined","isBranch","itemType","actionsRef","components","root","buttonContextValue","size","defaultProps","required","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAEEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAQ,qBAAqB;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,QAAO,EAAEC,UAAS,EAAEC,WAAU,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAEC,MAAK,EAAEC,QAAO,EAAE,GAAGR;IAEpF,MAAMS,YAAYZ,4BAA4Ba,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBd,4BAA4Ba,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,0BAA0Bf,4BAA4Ba,CAAAA,MAAOA,IAAIG,gBAAgB;IACvF,MAAMC,iBAAiBjB,4BAA4Ba,CAAAA,MAAOA,IAAII,cAAc;QAClDpB;IAA1B,MAAMmB,mBAAmB,CAACnB,OAAAA,oBAAoBc,WAAWA,QAAQO,OAAO,GAAGC,SAAS,cAA1DtB,kBAAAA,OAA+DkB,uBAAuB;IAChH,MAAMK,WAAWpB,4BAA4Ba,CAAAA,MAAOA,IAAIQ,QAAQ,KAAK;IACrE,MAAMC,aAAavB,cACjBF,oBAAoBc,WAAWA,QAAQP,GAAG,GAAGe,SAAS,EACtDnB,4BAA4Ba,CAAAA,MAAOA,IAAIS,UAAU;IAGnD,OAAO;QACLC,YAAY;YACVC,MAAM;YACNhB,YAAY;YACZD,YAAY;YACZF,SAAS;YACTC,WAAW;YACXK,SAAS;YACTD,OAAO;QACT;QACAe,oBAAoB;YAAEC,MAAM;QAAQ;QACpCF,MAAM5B,sBAAsBa,IAAI;YAAE,GAAGN,KAAK;YAAEC,KAAKL,cAAcK,KAAKQ;QAAW;QAC/EL,YAAYT,iBAAiBS,YAAY;YAAEoB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFtB,SAASP,iBAAiBO,SAAS;YAAEuB,UAAU,IAAI;QAAC;QACpDtB,WAAWR,iBAAiBQ,WAAW;YAAEqB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/EjB,OAAOO,iBAAiBnB,iBAAiBY,SAASS,SAAS;QAC3DR,SAASK,mBACLlB,iBACE,oDAAoD;QACpDD,oBAAoBc,WAAW;YAAE,GAAGA,OAAO;YAAEO,SAASC;QAAU,IAAIR,OAAO,EAC3E;YACEgB,cAAc;gBAAEvB,KAAKkB;YAAW;QAClC,KAEFH,SAAS;QACbX,YAAYV,iBAAiBU,YAAY;YACvCoB,UAAUR;YACVO,cAAc;gBACZE,wBAAU,oBAAC5B;gBACX,eAAe,IAAI;gBACnBG,KAAKL,cAAcF,oBAAoBW,cAAcA,WAAWJ,GAAG,GAAGe,SAAS,EAAEL;YACnF;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTreeItemLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsContext';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { content, iconAfter, iconBefore, as = 'span' } = props;\n\n  const { actions, aside, expandIcon } = useTreeItemSlotsContext_unstable();\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      content: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n    },\n    buttonContextValue: { size: 'small' },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    content: resolveShorthand(content, { required: true }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: resolveShorthand(aside),\n    actions: resolveShorthand(actions),\n    expandIcon: resolveShorthand(expandIcon),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","useTreeItemSlotsContext_unstable","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","actions","aside","expandIcon","layoutRef","ctx","components","root","buttonContextValue","size","defaultProps","required"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAEnG,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,gCAAgC,QAAQ,sCAAsC;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,QAAO,EAAEC,UAAS,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAE,GAAGL;IAExD,MAAM,EAAEM,QAAO,EAAEC,MAAK,EAAEC,WAAU,EAAE,GAAGV;IAEvC,MAAMW,YAAYZ,4BAA4Ba,CAAAA,MAAOA,IAAID,SAAS;IAElE,OAAO;QACLE,YAAY;YACVC,MAAM;YACNJ,YAAY;YACZJ,YAAY;YACZF,SAAS;YACTC,WAAW;YACXG,SAAS;YACTC,OAAO;QACT;QACAM,oBAAoB;YAAEC,MAAM;QAAQ;QACpCF,MAAMlB,sBAAsBW,IAAI;YAAE,GAAGL,KAAK;YAAEC,KAAKL,cAAcK,KAAKQ;QAAW;QAC/EL,YAAYT,iBAAiBS,YAAY;YAAEW,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFb,SAASP,iBAAiBO,SAAS;YAAEc,UAAU,IAAI;QAAC;QACpDb,WAAWR,iBAAiBQ,WAAW;YAAEY,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/ER,OAAOZ,iBAAiBY;QACxBD,SAASX,iBAAiBW;QAC1BE,YAAYb,iBAAiBa;IAC/B;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon'> & {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the content\n   */\n  description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n  avatarSize: AvatarSize;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAoCE"}
+{"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemSlots } from '../TreeItem/TreeItem.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the content\n   */\n  description?: Slot<'div'>;\n};\n\nexport type TreeItemPersonaLayoutInternalSlots = TreeItemPersonaLayoutSlots &\n  Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutInternalSlots> & {\n  avatarSize: AvatarSize;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAuCE"}

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.content {...slotProps.content} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","content","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAyCI;IAEtE,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,iBAC/D,AAxBN,cAwBOR;QAAsBS,OAAOL,cAAcM,MAAM;qBAChD,AAzBR,cAyBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,kBAElC,AA3BN,cA2BON,MAAMO,OAAO,EAAKN,UAAUM,OAAO,GACnCP,MAAMQ,WAAW,kBAAI,AA5B5B,cA4B6BR,MAAMQ,WAAW,EAAKP,UAAUO,WAAW,iBAClE,AA7BN,cA6BOZ;QAAsBQ,OAAON,MAAMW,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AA9B1B,cA8B2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AA/BxB,cA+ByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}
+{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutInternalSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutInternalSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.content {...slotProps.content} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","content","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAiDI;IAE9E,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,iBAC/D,AAxBN,cAwBOR;QAAsBS,OAAOL,cAAcM,MAAM;qBAChD,AAzBR,cAyBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,kBAElC,AA3BN,cA2BON,MAAMO,OAAO,EAAKN,UAAUM,OAAO,GACnCP,MAAMQ,WAAW,kBAAI,AA5B5B,cA4B6BR,MAAMQ,WAAW,EAAKP,UAAUO,WAAW,iBAClE,AA7BN,cA6BOZ;QAAsBQ,OAAON,MAAMW,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AA9B1B,cA8B2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AA/BxB,cA+ByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, content, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    content: resolveShorthand(content, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","children","content","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","aside","actions","avatarSize","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC,MAC+B;IAC/B,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,QAAO,EAAEC,YAAW,EAAE,GAAGL;IAElD,MAAMM,sBAAsBR,2BAC1B;QACE,GAAGE,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOb,wBAAwBc,CAAAA,MAAOA,IAAID,IAAI;IACpD,OAAO;QACL,GAAGH,mBAAmB;QACtBK,YAAY;YACVC,YAAY;YACZR,SAAS;YACTC,aAAa;YACbQ,MAAM;YACNX,OAAO;YACPY,OAAO;YACPC,SAAS;QACX;QACAC,YAAYnB,cAAc,CAACY,KAAK;QAChCL,SAAST,iBAAiBS,SAAS;YAAEa,UAAU,IAAI;YAAEC,cAAc;gBAAEf;YAAS;QAAE;QAChFD,OAAOP,iBAAiBO,OAAO;YAAEe,UAAU,IAAI;QAAC;QAChDZ,aAAaV,iBAAiBU;IAChC;AACF,EAAE"}
+{"version":3,"sources":["useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, content, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    content: resolveShorthand(content, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","children","content","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","aside","actions","avatarSize","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC,MAC+B;IAC/B,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,QAAO,EAAEC,YAAW,EAAE,GAAGL;IAElD,MAAMM,sBAAsBR,2BAC1B;QACE,GAAGE,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOb,wBAAwBc,CAAAA,MAAOA,IAAID,IAAI;IACpD,OAAO;QACL,GAAGH,mBAAmB;QACtBK,YAAY;YACVC,YAAY;YACZR,SAAS;YACTC,aAAa;YACbQ,MAAM;YACNX,OAAO;YACPY,OAAO;YACPC,SAAS;QACX;QACAC,YAAYnB,cAAc,CAACY,KAAK;QAChCL,SAAST,iBAAiBS,SAAS;YAAEa,UAAU,IAAI;YAAEC,cAAc;gBAAEf;YAAS;QAAE;QAChFD,OAAOP,iBAAiBO,OAAO;YAAEe,UAAU,IAAI;QAAC;QAChDZ,aAAaV,iBAAiBU;IAChC;AACF,EAAE"}

package/lib/contexts/index.js

@@ -1,2 +1,3 @@
 export * from './treeContext';
 export * from './treeItemContext';
+export * from './treeItemSlotsContext';

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\nexport * from './treeItemSlotsContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,yBAAyB"}

package/lib/contexts/treeContext.js

@@ -1,8 +1,8 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-import { emptyImmutableSet } from '../utils/ImmutableSet';
+import { ImmutableSet } from '../utils/ImmutableSet';
 const defaultContextValue = {
     level: 0,
-    openItems: emptyImmutableSet,
+    openItems: ImmutableSet.empty,
     requestTreeResponse: noop,
     appearance: 'subtle',
     size: 'medium'

package/lib/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'target'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable, 'target'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,iBAAiB,QAAsB,wBAAwB;AAsBxE,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,WAAWH;IACXI,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDV,cAChEW,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCd,mBAAmBS,aAAa,CAACM,MAAMb,mBAAmB,GAAKY,SAASC,MAAM"}
+{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { ImmutableSet } from '../utils/ImmutableSet';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemValue>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'>\n  | TreeNavigationData_unstable\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: ImmutableSet.empty,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","defaultContextValue","level","openItems","empty","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AAqBrD,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,WAAWH,aAAaI,KAAK;IAC7BC,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDX,cAChEY,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCf,mBAAmBU,aAAa,CAACM,MAAMd,mBAAmB,GAAKa,SAASC,MAAM"}

package/lib/contexts/treeItemContext.js

@@ -2,10 +2,6 @@ import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 const defaultContextValue = {
     value: '',
-    isActionsVisible: false,
-    isAsideVisible: true,
-    actionsRef: React.createRef(),
-    expandIconRef: React.createRef(),
     layoutRef: React.createRef(),
     subtreeRef: React.createRef(),
     itemType: 'leaf',

package/lib/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  itemType: TreeItemType;\n  value: string;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: '',\n  isActionsVisible: false,\n  isAsideVisible: true,\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","isActionsVisible","isAsideVisible","actionsRef","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAe/G,MAAMC,sBAA4C;IAChDC,OAAO;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,YAAYP,MAAMQ,SAAS;IAC3BC,eAAeT,MAAMQ,SAAS;IAC9BE,WAAWV,MAAMQ,SAAS;IAC1BG,YAAYX,MAAMQ,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6Db,cAExEc,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,iBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7CjB,mBAAmBY,iBAAiB,CAACM,MAAMjB,mBAAmB,GAAKgB,SAASC,MAAM"}
+{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  itemType: TreeItemType;\n  value: string;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: '',\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","layoutRef","createRef","subtreeRef","itemType","open","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAW/G,MAAMC,sBAA4C;IAChDC,OAAO;IACPC,WAAWL,MAAMM,SAAS;IAC1BC,YAAYP,MAAMM,SAAS;IAC3BE,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6DT,cAExEU,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,iBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7Cb,mBAAmBQ,iBAAiB,CAACM,MAAMb,mBAAmB,GAAKY,SAASC,MAAM"}

package/lib/contexts/treeItemSlotsContext.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+const defaultContextValue = {
+    actions: undefined,
+    aside: undefined,
+    expandIcon: undefined
+};
+export const TreeItemSlotsContext = React.createContext(undefined);
+export const { Provider: TreeItemSlotsProvider  } = TreeItemSlotsContext;
+export const useTreeItemSlotsContext_unstable = ()=>React.useContext(TreeItemSlotsContext) || defaultContextValue;

package/lib/contexts/treeItemSlotsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["treeItemSlotsContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemSlots } from '../TreeItem';\n\nexport type TreeItemSlotsContextValue = Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;\n\nconst defaultContextValue: TreeItemSlotsContextValue = {\n  actions: undefined,\n  aside: undefined,\n  expandIcon: undefined,\n};\n\nexport const TreeItemSlotsContext: React.Context<TreeItemSlotsContextValue | undefined> = React.createContext<\n  TreeItemSlotsContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemSlotsProvider } = TreeItemSlotsContext;\nexport const useTreeItemSlotsContext_unstable = (): TreeItemSlotsContextValue =>\n  React.useContext(TreeItemSlotsContext) || defaultContextValue;\n"],"names":["React","defaultContextValue","actions","undefined","aside","expandIcon","TreeItemSlotsContext","createContext","Provider","TreeItemSlotsProvider","useTreeItemSlotsContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAK/B,MAAMC,sBAAiD;IACrDC,SAASC;IACTC,OAAOD;IACPE,YAAYF;AACd;AAEA,OAAO,MAAMG,uBAA6EN,MAAMO,aAAa,CAE3GJ,WAAW;AAEb,OAAO,MAAM,EAAEK,UAAUC,sBAAqB,EAAE,GAAGH,qBAAqB;AACxE,OAAO,MAAMI,mCAAmC,IAC9CV,MAAMW,UAAU,CAACL,yBAAyBL,oBAAoB"}

package/lib/hooks/index.js

@@ -1,3 +1,3 @@
 export * from './useFlatTree';
 export * from './useNestedTreeNavigation';
-export * from './useOpenItemsState';
+export * from './useControllableOpenItems';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useControllableOpenItems';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,6BAA6B"}

package/lib/hooks/useControllableOpenItems.js

@@ -0,0 +1,25 @@
+import { useControllableState } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { ImmutableSet } from '../utils/ImmutableSet';
+/**
+ * @internal
+ */ export function useControllableOpenItems(props) {
+    return useControllableState({
+        state: React.useMemo(()=>props.openItems && ImmutableSet.create(props.openItems), [
+            props.openItems
+        ]),
+        defaultState: props.defaultOpenItems && (()=>ImmutableSet.create(props.defaultOpenItems)),
+        initialState: ImmutableSet.empty
+    });
+}
+export function createNextOpenItems(data, previousOpenItems) {
+    if (data.value === null) {
+        return previousOpenItems;
+    }
+    const previousOpenItemsHasId = previousOpenItems.has(data.value);
+    if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {
+        return previousOpenItems;
+    }
+    const nextOpenItems = ImmutableSet.create(previousOpenItems);
+    return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);
+}

package/lib/hooks/useControllableOpenItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useControllableOpenItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeOpenChangeData, TreeProps } from '../components/Tree/Tree.types';\nimport type { TreeItemValue } from '../components/TreeItem/TreeItem.types';\n\n/**\n * @internal\n */\nexport function useControllableOpenItems(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n  return useControllableState({\n    state: React.useMemo(() => props.openItems && ImmutableSet.create(props.openItems), [props.openItems]),\n    defaultState: props.defaultOpenItems && (() => ImmutableSet.create(props.defaultOpenItems)),\n    initialState: ImmutableSet.empty,\n  });\n}\n\nexport function createNextOpenItems(\n  data: Pick<TreeOpenChangeData, 'value' | 'open'>,\n  previousOpenItems: ImmutableSet<TreeItemValue>,\n): ImmutableSet<TreeItemValue> {\n  if (data.value === null) {\n    return previousOpenItems;\n  }\n  const previousOpenItemsHasId = previousOpenItems.has(data.value);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = ImmutableSet.create(previousOpenItems);\n  return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableState","React","ImmutableSet","useControllableOpenItems","props","state","useMemo","openItems","create","defaultState","defaultOpenItems","initialState","empty","createNextOpenItems","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","add","delete"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AACjE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,wBAAwB;AAIrD;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwD,EAAE;IACjG,OAAOJ,qBAAqB;QAC1BK,OAAOJ,MAAMK,OAAO,CAAC,IAAMF,MAAMG,SAAS,IAAIL,aAAaM,MAAM,CAACJ,MAAMG,SAAS,GAAG;YAACH,MAAMG,SAAS;SAAC;QACrGE,cAAcL,MAAMM,gBAAgB,IAAK,CAAA,IAAMR,aAAaM,MAAM,CAACJ,MAAMM,gBAAgB,CAAA;QACzFC,cAAcT,aAAaU,KAAK;IAClC;AACF,CAAC;AAED,OAAO,SAASC,oBACdC,IAAgD,EAChDC,iBAA8C,EACjB;IAC7B,IAAID,KAAKE,KAAK,KAAK,IAAI,EAAE;QACvB,OAAOD;IACT,CAAC;IACD,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACJ,KAAKE,KAAK;IAC/D,IAAIF,KAAKK,IAAI,GAAGF,yBAAyB,CAACA,sBAAsB,EAAE;QAChE,OAAOF;IACT,CAAC;IACD,MAAMK,gBAAgBlB,aAAaM,MAAM,CAACO;IAC1C,OAAOD,KAAKK,IAAI,GAAGC,cAAcC,GAAG,CAACP,KAAKE,KAAK,IAAII,cAAcE,MAAM,CAACR,KAAKE,KAAK,CAAC;AACrF,CAAC"}

package/lib/hooks/useFlatTree.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';
 import { treeDataTypes } from '../utils/tokens';
 import { useFlatTreeNavigation } from './useFlatTreeNavigation';
-import { useOpenItemsState } from './useOpenItemsState';
+import { useControllableOpenItems } from './useControllableOpenItems';
 import { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -17,17 +17,17 @@ import { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement'
  * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
  */ export function useFlatTree_unstable(flatTreeItemProps, options = {}) {
-    const [openItems, updateOpenItems] = useOpenItemsState(options);
     const flatTreeItems = React.useMemo(()=>createFlatTreeItems(flatTreeItemProps), [
         flatTreeItemProps
     ]);
+    const [openItems, setOpenItems] = useControllableOpenItems(options);
     const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
     const treeRef = React.useRef(null);
     const handleOpenChange = useEventCallback((event, data)=>{
         var _options_onOpenChange;
         (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
         if (!event.isDefaultPrevented()) {
-            updateOpenItems(data);
+            setOpenItems(data.openItems);
         }
         event.preventDefault();
     });