@fluentui/react-tree 9.7.1 → 9.7.3

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\nexport * from './useTreeItemContextValues';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA"}
+{"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":[],"rangeMappings":";;;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItem.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TreeItemProvider } from '../../contexts';\n/**\n * Render the final JSX of TreeItem\n */ export const renderTreeItem_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsx(TreeItemProvider, {\n            value: contextValues.treeItem,\n            children: state.root.children\n        })\n    });\n};\n"],"names":["renderTreeItem_unstable","state","contextValues","assertSlots","_jsx","root","children","TreeItemProvider","value","treeItem"],"mappings":";;;;+BAKiBA;;;eAAAA;;;4BALa;gCACF;0BACK;AAGtB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACG,0BAAgB,EAAE;YAC3CC,OAAON,cAAcO,QAAQ;YAC7BH,UAAUL,MAAMI,IAAI,CAACC,QAAQ;QACjC;IACJ;AACJ"}
+{"version":3,"sources":["renderTreeItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @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":["renderTreeItem_unstable","state","contextValues","assertSlots","_jsx","root","TreeItemProvider","value","treeItem","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;0BAEK;AAK1B,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,0BAAAA,EAAAA;YAAiBC,OAAOL,cAAcM,QAAQ;sBAAGP,MAAMI,IAAI,CAACI,QAAQ;;;AAG3E"}

package/lib-commonjs/components/TreeItem/useTreeItem.js

@@ -16,7 +16,10 @@ const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _tokens = require("../../utils/tokens");
 const _contexts = require("../../contexts");
 const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
+const _reactcontextselector = require("@fluentui/react-context-selector");
+const _Tree = require("../../Tree");
 function useTreeItem_unstable(props, ref) {
+    'use no memo';
     const treeType = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.treeType);
     if (treeType === 'flat') {
         warnIfNoProperPropsFlatTreeItem(props);
@@ -39,6 +42,25 @@ function useTreeItem_unstable(props, ref) {
     const subtreeRef = _react.useRef(null);
     const selectionRef = _react.useRef(null);
     const treeItemRef = _react.useRef(null);
+    if (process.env.NODE_ENV !== 'production') {
+        // This is acceptable since the NODE_ENV will not change during runtime
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const hasTreeContext = (0, _reactcontextselector.useHasParentContext)(_contexts.TreeContext);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        _react.useEffect(()=>{
+            var _treeItemRef_current;
+            if (hasTreeContext) {
+                return;
+            }
+            if ((_treeItemRef_current = treeItemRef.current) === null || _treeItemRef_current === void 0 ? void 0 : _treeItemRef_current.querySelector(`.${_Tree.treeClassNames.root}`)) {
+                // eslint-disable-next-line no-console
+                console.error(`@fluentui/react-tree [useTreeItem]:
+<TreeItem> should be declared inside a <Tree> component.`);
+            }
+        }, [
+            hasTreeContext
+        ]);
+    }
     const open = (0, _contexts.useTreeContext_unstable)((ctx)=>{
         var _props_open;
         return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);
@@ -54,6 +76,9 @@ function useTreeItem_unstable(props, ref) {
         if (event.isDefaultPrevented()) {
             return;
         }
+        if (itemType === 'leaf') {
+            return;
+        }
         const isEventFromActions = actionsRef.current && (0, _reactutilities.elementContains)(actionsRef.current, event.target);
         if (isEventFromActions) {
             return;
@@ -125,6 +150,10 @@ function useTreeItem_unstable(props, ref) {
                 });
             case _tokens.treeDataTypes.ArrowLeft:
                 {
+                    // arrow left with alt key is reserved for history navigation
+                    if (event.altKey) {
+                        return;
+                    }
                     // do not navigate to parent if the item is on the top level
                     if (level === 1 && !open) {
                         return;
@@ -140,35 +169,43 @@ function useTreeItem_unstable(props, ref) {
                         var _props_onOpenChange;
                         (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
                     }
-                    return requestTreeResponse({
+                    requestTreeResponse({
                         ...data,
                         itemType,
                         parentValue,
                         requestType: open ? 'open' : 'navigate'
                     });
+                    return;
                 }
             case _tokens.treeDataTypes.ArrowRight:
-                // do not navigate or open if the item is a leaf
-                if (itemType === 'leaf') {
+                {
+                    // arrow right with alt key is reserved for history navigation
+                    if (event.altKey) {
+                        return;
+                    }
+                    // do not navigate or open if the item is a leaf
+                    if (itemType === 'leaf') {
+                        return;
+                    }
+                    const data = {
+                        value,
+                        event,
+                        open: getNextOpen(),
+                        type: event.key,
+                        target: event.currentTarget
+                    };
+                    if (!open) {
+                        var _props_onOpenChange1;
+                        (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
+                    }
+                    requestTreeResponse({
+                        ...data,
+                        itemType,
+                        parentValue,
+                        requestType: open ? 'navigate' : 'open'
+                    });
                     return;
                 }
-                const data = {
-                    value,
-                    event,
-                    open: getNextOpen(),
-                    type: event.key,
-                    target: event.currentTarget
-                };
-                if (!open) {
-                    var _props_onOpenChange1;
-                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
-                }
-                return requestTreeResponse({
-                    ...data,
-                    itemType,
-                    parentValue,
-                    requestType: open ? 'navigate' : 'open'
-                });
         }
         const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
         if (isTypeAheadCharacter) {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useEventCallback, slot, elementContains, useMergedRefs } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 */ export function useTreeItem_unstable(props, ref) {\n    const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n    if (treeType === 'flat') {\n        warnIfNoProperPropsFlatTreeItem(props);\n    }\n    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n    const { level: contextLevel } = useSubtreeContext_unstable();\n    const parentValue = useTreeItemContext_unstable((ctx)=>{\n        var _props_parentValue;\n        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;\n    });\n    // note, if the value is not externally provided,\n    // then selection and expansion will not work properly\n    const internalValue = useId('fuiTreeItemValue-');\n    var _props_value;\n    const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;\n    const { onClick, onKeyDown, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, 'aria-selected': ariaSelected, 'aria-expanded': ariaExpanded, ...rest } = props;\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const selectionRef = React.useRef(null);\n    const treeItemRef = React.useRef(null);\n    const open = useTreeContext_unstable((ctx)=>{\n        var _props_open;\n        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n    });\n    const getNextOpen = ()=>itemType === 'branch' ? !open : open;\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const checked = useTreeContext_unstable((ctx)=>{\n        var _ctx_checkedItems_get;\n        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n    });\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n        if (isEventFromSelection) {\n            return;\n        }\n        const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        ReactDOM.unstable_batchedUpdates(()=>{\n            var _props_onOpenChange;\n            const data = {\n                event,\n                value,\n                open: getNextOpen(),\n                target: event.currentTarget,\n                type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n            };\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n            requestTreeResponse({\n                ...data,\n                itemType,\n                requestType: 'open'\n            });\n            requestTreeResponse({\n                ...data,\n                itemType,\n                parentValue,\n                requestType: 'navigate',\n                type: treeDataTypes.Click\n            });\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : 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 Space:\n                if (selectionMode !== 'none') {\n                    var _selectionRef_current;\n                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n                    // Prevents the page from scrolling down when the spacebar is pressed\n                    event.preventDefault();\n                }\n                return;\n            case treeDataTypes.Enter:\n                {\n                    return event.currentTarget.click();\n                }\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n                return requestTreeResponse({\n                    requestType: 'navigate',\n                    event,\n                    value,\n                    itemType,\n                    parentValue,\n                    type: event.key,\n                    target: event.currentTarget\n                });\n            case treeDataTypes.ArrowLeft:\n                {\n                    // do not navigate to parent if the item is on the top level\n                    if (level === 1 && !open) {\n                        return;\n                    }\n                    const data = {\n                        value,\n                        event,\n                        open: getNextOpen(),\n                        type: event.key,\n                        target: event.currentTarget\n                    };\n                    if (open) {\n                        var _props_onOpenChange;\n                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n                    }\n                    return requestTreeResponse({\n                        ...data,\n                        itemType,\n                        parentValue,\n                        requestType: open ? 'open' : 'navigate'\n                    });\n                }\n            case treeDataTypes.ArrowRight:\n                // do not navigate or open if the item is a leaf\n                if (itemType === 'leaf') {\n                    return;\n                }\n                const data = {\n                    value,\n                    event,\n                    open: getNextOpen(),\n                    type: event.key,\n                    target: event.currentTarget\n                };\n                if (!open) {\n                    var _props_onOpenChange1;\n                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n                }\n                return requestTreeResponse({\n                    ...data,\n                    itemType,\n                    parentValue,\n                    requestType: open ? 'navigate' : 'open'\n                });\n        }\n        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n        if (isTypeAheadCharacter) {\n            requestTreeResponse({\n                requestType: 'navigate',\n                event,\n                target: event.currentTarget,\n                value,\n                itemType,\n                type: treeDataTypes.TypeAhead,\n                parentValue\n            });\n        }\n    });\n    const handleChange = useEventCallback((event)=>{\n        onChange === null || onChange === void 0 ? void 0 : onChange(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        requestTreeResponse({\n            requestType: 'selection',\n            event,\n            value,\n            itemType,\n            type: 'Change',\n            target: event.currentTarget,\n            checked: checked === 'mixed' ? true : !checked\n        });\n    });\n    return {\n        value,\n        open,\n        checked,\n        subtreeRef,\n        layoutRef,\n        selectionRef,\n        expandIconRef,\n        treeItemRef,\n        actionsRef,\n        itemType,\n        level,\n        components: {\n            root: 'div'\n        },\n        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n        isAsideVisible: false,\n        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n        isActionsVisible: false,\n        root: slot.always(getIntrinsicElementProps(as, {\n            tabIndex: -1,\n            [dataTreeItemValueAttrName]: value,\n            ...rest,\n            ref: useMergedRefs(ref, treeItemRef),\n            role: 'treeitem',\n            'aria-level': level,\n            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n            // Casting: when selectionMode is 'single', checked is a boolean\n            'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n            'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onChange: handleChange\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n            // eslint-disable-next-line no-console\n            console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n- \"aria-posinset\": the position of this treeitem in the current level of the tree.\n- \"aria-setsize\": the number of siblings in this level of the tree.\n- \"aria-level\": the current level of the treeitem.\n- \"parentValue\": the \"value\" property of the parent item of this item.`);\n        }\n    }\n}\n"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","internalValue","useId","_props_value","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","React","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","open","_props_open","openItems","has","getNextOpen","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleChange","components","root","isAsideVisible","isActionsVisible","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","useMergedRefs","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n  getIntrinsicElementProps,\n  useId,\n  useEventCallback,\n  slot,\n  elementContains,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState, TreeItemValue } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport {\n  useTreeContext_unstable,\n  useSubtreeContext_unstable,\n  useTreeItemContext_unstable,\n  TreeContext,\n} from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { treeClassNames } from '../../Tree';\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  'use no memo';\n\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const { level: contextLevel } = useSubtreeContext_unstable();\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const internalValue = useId('fuiTreeItemValue-');\n  const value: TreeItemValue = props.value ?? internalValue;\n\n  const {\n    onClick,\n    onKeyDown,\n    onChange,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    'aria-selected': ariaSelected,\n    'aria-expanded': ariaExpanded,\n    ...rest\n  } = props;\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  const selectionRef = React.useRef<HTMLInputElement>(null);\n  const treeItemRef = React.useRef<HTMLDivElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This is acceptable since the NODE_ENV will not change during runtime\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const hasTreeContext = useHasParentContext(TreeContext);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (hasTreeContext) {\n        return;\n      }\n\n      if (treeItemRef.current?.querySelector(`.${treeClassNames.root}`)) {\n        // eslint-disable-next-line no-console\n        console.error(/** #__DE-INDENT__ */ `\n      @fluentui/react-tree [useTreeItem]:\n      <TreeItem> should be declared inside a <Tree> component.\n    `);\n      }\n    }, [hasTreeContext]);\n  }\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const getNextOpen = () => (itemType === 'branch' ? !open : open);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (itemType === 'leaf') {\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 isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: getNextOpen(),\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\n      });\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\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 Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          // Prevents the page from scrolling down when the spacebar is pressed\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.Enter: {\n        return event.currentTarget.click();\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // arrow left with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'open' : 'navigate',\n        });\n        return;\n      }\n      case treeDataTypes.ArrowRight: {\n        // arrow right with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'navigate' : 'open',\n        });\n        return;\n      }\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    treeItemRef,\n    actionsRef,\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isAsideVisible: false,\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isActionsVisible: false,\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        ...rest,\n        ref: useMergedRefs(ref, treeItemRef),\n        role: 'treeitem',\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n        'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n      } as const),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","value","internalValue","useId","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","React","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","process","env","NODE_ENV","hasTreeContext","useHasParentContext","TreeContext","useEffect","current","querySelector","treeClassNames","root","console","error","open","openItems","has","getNextOpen","selectionMode","checked","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","Space","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","altKey","ArrowRight","isTypeAheadCharacter","length","match","ctrlKey","metaKey","TypeAhead","handleChange","components","isAsideVisible","isActionsVisible","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","useMergedRefs","role","undefined","elementType","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, treeItemRef, // eslint-disable-next-line deprecation/deprecation\n    isActionsVisible, // eslint-disable-next-line deprecation/deprecation\n    isAsideVisible, selectionRef, checked } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const treeItem = {\n        value,\n        checked,\n        itemType,\n        layoutRef,\n        subtreeRef,\n        open,\n        selectionRef,\n        isActionsVisible,\n        isAsideVisible,\n        actionsRef,\n        treeItemRef,\n        expandIconRef\n    };\n    return {\n        treeItem\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","treeItemRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,aAAa,EAAEC,UAAU,EAAEC,WAAW,EAC5FC,gBAAgB,EAChBC,cAAc,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGZ;IAC1C;;;GAGD,GAAG,MAAMa,WAAW;QACfZ;QACAW;QACAV;QACAC;QACAC;QACAC;QACAM;QACAF;QACAC;QACAH;QACAC;QACAF;IACJ;IACA,OAAO;QACHO;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const {\n    value,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    expandIconRef,\n    actionsRef,\n    treeItemRef,\n    // eslint-disable-next-line deprecation/deprecation\n    isActionsVisible,\n    // eslint-disable-next-line deprecation/deprecation\n    isAsideVisible,\n    selectionRef,\n    checked,\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    value,\n    checked,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    selectionRef,\n    isActionsVisible,\n    isAsideVisible,\n    actionsRef,\n    treeItemRef,\n    expandIconRef,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","treeItemRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;AAAT,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,UAAU,EACVC,WAAW,EAEXC,gBAAgB,EAEhBC,cAAc,EACdC,YAAY,EACZC,OAAO,EACR,GAAGZ;IAEJ;;;GAGC,GACD,MAAMa,WAAiC;QACrCZ;QACAW;QACAV;QACAC;QACAC;QACAC;QACAM;QACAF;QACAC;QACAH;QACAC;QACAF;IACF;IAEA,OAAO;QAAEO;IAAS;AACpB"}

package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js

@@ -76,6 +76,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useTreeItemStyles_unstable = (state)=>{
+    'use no memo';
     const baseStyles = useBaseStyles();
     const styles = useStyles();
     const { level } = state;

package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n  root: 'fui-TreeItem'\n};\nconst useBaseStyles = /*#__PURE__*/__resetStyles(\"r15xhw3a\", \"r2f6k57\", [\".r15xhw3a{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-right:var(--spacingHorizontalNone);}\", \".r15xhw3a:focus{outline-style:none;}\", \".r15xhw3a:focus-visible{outline-style:none;}\", \".r15xhw3a[data-fui-focus-visible]>.fui-TreeItemLayout,.r15xhw3a[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}\", \".r2f6k57{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-left:var(--spacingHorizontalNone);}\", \".r2f6k57:focus{outline-style:none;}\", \".r2f6k57:focus-visible{outline-style:none;}\", \".r2f6k57[data-fui-focus-visible]>.fui-TreeItemLayout,.r2f6k57[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  level1: {\n    iytv0q: \"f10bgyvd\"\n  },\n  level2: {\n    iytv0q: \"f1h0rod3\"\n  },\n  level3: {\n    iytv0q: \"fgoqafk\"\n  },\n  level4: {\n    iytv0q: \"f75dvuh\"\n  },\n  level5: {\n    iytv0q: \"fqk7yw6\"\n  },\n  level6: {\n    iytv0q: \"f1r3z17b\"\n  },\n  level7: {\n    iytv0q: \"f1hrpd1h\"\n  },\n  level8: {\n    iytv0q: \"f1iy65d0\"\n  },\n  level9: {\n    iytv0q: \"ftg42e5\"\n  },\n  level10: {\n    iytv0q: \"fyat3t\"\n  }\n}, {\n  d: [\".f10bgyvd{--fluent-TreeItem--level:1;}\", \".f1h0rod3{--fluent-TreeItem--level:2;}\", \".fgoqafk{--fluent-TreeItem--level:3;}\", \".f75dvuh{--fluent-TreeItem--level:4;}\", \".fqk7yw6{--fluent-TreeItem--level:5;}\", \".f1r3z17b{--fluent-TreeItem--level:6;}\", \".f1hrpd1h{--fluent-TreeItem--level:7;}\", \".f1iy65d0{--fluent-TreeItem--level:8;}\", \".ftg42e5{--fluent-TreeItem--level:9;}\", \".fyat3t{--fluent-TreeItem--level:10;}\"]\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = state => {\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n  const {\n    level\n  } = state;\n  state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n  return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n  return level >= 1 && level <= 10;\n}\n//# sourceMappingURL=useTreeItemStyles.styles.js.map"],"names":["treeItemClassNames","useTreeItemStyles_unstable","root","useBaseStyles","__resetStyles","useStyles","__styles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","state","baseStyles","styles","level","className","mergeClasses","isStaticallyDefinedLevel"],"mappings":";;;;;;;;;;;IAMaA,kBAAkB;eAAlBA;;IAyCAC,0BAA0B;eAA1BA;;;uBA/CyC;AAM/C,MAAMD,qBAAqB;IAChCE,MAAM;AACR;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,WAAW;IAAC;IAAuO;IAAwC;IAAgD;IAAsR;IAAqO;IAAuC;IAA+C;CAAmR;AAC5uC,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,QAAQ;QACNC,QAAQ;IACV;IACAC,QAAQ;QACND,QAAQ;IACV;IACAE,QAAQ;QACNF,QAAQ;IACV;IACAG,QAAQ;QACNH,QAAQ;IACV;IACAI,QAAQ;QACNJ,QAAQ;IACV;IACAK,QAAQ;QACNL,QAAQ;IACV;IACAM,QAAQ;QACNN,QAAQ;IACV;IACAO,QAAQ;QACNP,QAAQ;IACV;IACAQ,QAAQ;QACNR,QAAQ;IACV;IACAS,SAAS;QACPT,QAAQ;IACV;AACF,GAAG;IACDU,GAAG;QAAC;QAA0C;QAA0C;QAAyC;QAAyC;QAAyC;QAA0C;QAA0C;QAA0C;QAAyC;KAAwC;AACpa;AAIO,MAAMjB,6BAA6BkB,CAAAA;IACxC,MAAMC,aAAajB;IACnB,MAAMkB,SAAShB;IACf,MAAM,EACJiB,KAAK,EACN,GAAGH;IACJA,MAAMjB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,mBAAmBE,IAAI,EAAEkB,YAAYK,yBAAyBH,UAAUD,MAAM,CAAC,CAAC,KAAK,EAAEC,MAAM,CAAC,CAAC,EAAEH,MAAMjB,IAAI,CAACqB,SAAS;IACzJ,OAAOJ;AACT;AACA,SAASM,yBAAyBH,KAAK;IACrC,OAAOA,SAAS,KAAKA,SAAS;AAChC,EACA,oDAAoD"}
+{"version":3,"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n    ':focus': {\n        outlineStyle: 'none'\n    },\n    ':focus-visible': {\n        outlineStyle: 'none'\n    },\n    // This adds the focus outline for the TreeItemLayout element\n    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusMedium,\n        outlineColor: tokens.colorStrokeFocus2,\n        outlineRadius: tokens.borderRadiusMedium,\n        // FIXME: tokens.strokeWidthThick causes some weird bugs\n        outlineWidth: '2px',\n        outlineStyle: 'solid'\n    }, {\n        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n    })\n});\nconst useStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const { level } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"names":["treeItemClassNames","useTreeItemStyles_unstable","root","useBaseStyles","__resetStyles","useStyles","__styles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","state","baseStyles","styles","level","className","mergeClasses","isStaticallyDefinedLevel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,kBAAkB;eAAlBA;;IA2CIC,0BAA0B;eAA1BA;;;uBAjDyC;AAMnD,MAAMD,qBAAqB;IAC9BE,MAAM;AACV;AACA,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CA2BrB;AACD,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,QAAA;QAAAD,QAAA;IAAA;IAAAE,QAAA;QAAAF,QAAA;IAAA;IAAAG,QAAA;QAAAH,QAAA;IAAA;IAAAI,QAAA;QAAAJ,QAAA;IAAA;IAAAK,QAAA;QAAAL,QAAA;IAAA;IAAAM,QAAA;QAAAN,QAAA;IAAA;IAAAO,QAAA;QAAAP,QAAA;IAAA;IAAAQ,QAAA;QAAAR,QAAA;IAAA;IAAAS,SAAA;QAAAT,QAAA;IAAA;AAAA,GAAA;IAAAU,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAYP,MAAMjB,6BAA8BkB,CAAAA;IAC3C;IACA,MAAMC,aAAajB;IACnB,MAAMkB,SAAShB;IACf,MAAM,EAAEiB,KAAAA,EAAO,GAAGH;IAClBA,MAAMjB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,mBAAmBE,IAAI,EAAEkB,YAAYK,yBAAyBH,UAAUD,MAAM,CAAC,CAAA,KAAA,EAAQC,MAAK,CAAE,CAAC,EAAEH,MAAMjB,IAAI,CAACqB,SAAS;IACzJ,OAAOJ;AACX;AACA,SAASM,yBAAyBH,KAAK;IACnC,OAAOA,SAAS,KAAKA,SAAS;AAClC"}

package/lib-commonjs/components/TreeItemChevron.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemChevron.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\nexport const TreeItemChevron = /*#__PURE__*/ React.memo(()=>{\n    const open = useTreeItemContext_unstable((ctx)=>ctx.open);\n    const { dir } = useFluent_unstable();\n    const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n    return /*#__PURE__*/ React.createElement(ChevronRight12Regular, {\n        style: expandIconInlineStyles[expandIconRotation]\n    });\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\nconst expandIconInlineStyles = {\n    90: {\n        transform: `rotate(90deg)`\n    },\n    0: {\n        transform: `rotate(0deg)`\n    },\n    180: {\n        transform: `rotate(180deg)`\n    }\n};\n"],"names":["TreeItemChevron","React","memo","open","useTreeItemContext_unstable","ctx","dir","useFluent_unstable","expandIconRotation","createElement","ChevronRight12Regular","style","expandIconInlineStyles","displayName","transform"],"mappings":";;;;+BAIaA;;;eAAAA;;;;iEAJU;qCACY;4BACG;iCACM;AACrC,MAAMA,kBAAkB,WAAW,GAAGC,OAAMC,IAAI,CAAC;IACpD,MAAMC,OAAOC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIF,IAAI;IACxD,MAAM,EAAEG,GAAG,EAAE,GAAGC,IAAAA,uCAAkB;IAClC,MAAMC,qBAAqBL,OAAO,KAAKG,QAAQ,QAAQ,IAAI;IAC3D,OAAO,WAAW,GAAGL,OAAMQ,aAAa,CAACC,iCAAqB,EAAE;QAC5DC,OAAOC,sBAAsB,CAACJ,mBAAmB;IACrD;AACJ;AACAR,gBAAgBa,WAAW,GAAG;AAC9B,MAAMD,yBAAyB;IAC3B,IAAI;QACAE,WAAW,CAAC,aAAa,CAAC;IAC9B;IACA,GAAG;QACCA,WAAW,CAAC,YAAY,CAAC;IAC7B;IACA,KAAK;QACDA,WAAW,CAAC,cAAc,CAAC;IAC/B;AACJ"}
+{"version":3,"sources":["TreeItemChevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  const { dir } = useFluent_unstable();\n\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  return <ChevronRight12Regular style={expandIconInlineStyles[expandIconRotation]} />;\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n  90: { transform: `rotate(90deg)` },\n  0: { transform: `rotate(0deg)` },\n  180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["TreeItemChevron","React","memo","open","useTreeItemContext_unstable","ctx","dir","useFluent_unstable","expandIconRotation","createElement","ChevronRight12Regular","style","expandIconInlineStyles","displayName","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;qCACY;4BACG;iCACM;AAErC,MAAMA,kBAAAA,WAAAA,GAAkBC,OAAMC,IAAI,CAAC;IACxC,MAAMC,OAAOC,IAAAA,4CAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,IAAI;IAExD,MAAM,EAAEG,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAEhB,MAAMC,qBAAqBL,OAAO,KAAKG,QAAQ,QAAQ,IAAI;IAC3D,OAAA,WAAA,GAAOL,OAAAQ,aAAA,CAACC,iCAAAA,EAAAA;QAAsBC,OAAOC,sBAAsB,CAACJ,mBAAmB;;AACjF;AACAR,gBAAgBa,WAAW,GAAG;AAE9B,MAAMD,yBAAyB;IAC7B,IAAI;QAAEE,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}

package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */ export const TreeItemLayout = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useTreeItemLayout_unstable(props, ref);\n    useTreeItemLayoutStyles_unstable(state);\n    return renderTreeItemLayout_unstable(state);\n});\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"names":["TreeItemLayout","React","forwardRef","props","ref","state","useTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","renderTreeItemLayout_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;mCACoB;sCACG;+CACG;AAKtC,MAAMA,iBAAiB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrE,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,+DAAgC,EAACF;IACjC,OAAOG,IAAAA,mDAA6B,EAACH;AACzC;AACAL,eAAeS,WAAW,GAAG"}
+{"version":3,"sources":["TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemLayout_unstable(props, ref);\n\n  useTreeItemLayoutStyles_unstable(state);\n  return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"names":["TreeItemLayout","React","forwardRef","props","ref","state","useTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","renderTreeItemLayout_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;mCACoB;sCACG;+CACG;AAS1C,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IACjC,OAAOG,IAAAA,mDAAAA,EAA8BH;AACvC;AAEAL,eAAeS,WAAW,GAAG"}

package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js

@@ -1,4 +1,6 @@
-"use strict";
+/**
+ * State used in rendering TreeItemLayout
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n  Slot,\n  ComponentProps,\n  ComponentState,\n  ExtractSlotProps,\n  EventData,\n  EventHandler,\n} from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutActionVisibilityChangeData = (\n  | EventData<'mouseover' | 'mouseout', MouseEvent>\n  | EventData<'focus' | 'blur', FocusEvent>\n  | EventData<'blur', React.FocusEvent>\n) & { visible: boolean };\n\nexport type TreeItemLayoutActionSlotProps = ExtractSlotProps<\n  Slot<'div'> & {\n    /**\n     * Forces visibility of the aside/action content\n     */\n    visible?: boolean;\n    onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;\n  }\n>;\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  main: 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  /**\n   * Aside content is normally used to render a badge or other non-actionable content\n   * It is aria-hidden by default and is only meant to be used as visual aid.\n   */\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` and `aside` slots are positioned on the exact same spot,\n   * so they won't be visible at the same time.\n   * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n   *\n   * `actions` slot supports a `visible` prop to force visibility of the actions.\n   */\n  actions?: Slot<TreeItemLayoutActionSlotProps>;\n  selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\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":[],"rangeMappings":";;","mappings":"AAwEA;;CAEC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './TreeItemLayout';\nexport * from './TreeItemLayout.types';\nexport * from './renderTreeItemLayout';\nexport * from './useTreeItemLayout';\nexport * from './useTreeItemLayoutStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItemLayout';\nexport * from './TreeItemLayout.types';\nexport * from './renderTreeItemLayout';\nexport * from './useTreeItemLayout';\nexport * from './useTreeItemLayoutStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemLayout.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItemLayout\n */ export const renderTreeItemLayout_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsxs(state.root, {\n        children: [\n            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),\n            state.selector && /*#__PURE__*/ _jsx(state.selector, {}),\n            state.iconBefore && /*#__PURE__*/ _jsx(state.iconBefore, {}),\n            /*#__PURE__*/ _jsx(state.main, {\n                children: state.root.children\n            }),\n            state.iconAfter && /*#__PURE__*/ _jsx(state.iconAfter, {}),\n            /*#__PURE__*/ _jsxs(ButtonContextProvider, {\n                value: state.buttonContextValue,\n                children: [\n                    state.actions && /*#__PURE__*/ _jsx(state.actions, {}),\n                    state.aside && /*#__PURE__*/ _jsx(state.aside, {})\n                ]\n            })\n        ]\n    });\n};\n"],"names":["renderTreeItemLayout_unstable","state","assertSlots","_jsxs","root","children","expandIcon","_jsx","selector","iconBefore","main","iconAfter","ButtonContextProvider","value","buttonContextValue","actions","aside"],"mappings":";;;;+BAKiBA;;;eAAAA;;;4BAL4B;gCACjB;6BACU;AAG3B,MAAMA,gCAAgC,CAACC;IAC9CC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACnCC,UAAU;YACNJ,MAAMK,UAAU,IAAI,WAAW,GAAGC,IAAAA,eAAI,EAACN,MAAMK,UAAU,EAAE,CAAC;YAC1DL,MAAMO,QAAQ,IAAI,WAAW,GAAGD,IAAAA,eAAI,EAACN,MAAMO,QAAQ,EAAE,CAAC;YACtDP,MAAMQ,UAAU,IAAI,WAAW,GAAGF,IAAAA,eAAI,EAACN,MAAMQ,UAAU,EAAE,CAAC;YAC1D,WAAW,GAAGF,IAAAA,eAAI,EAACN,MAAMS,IAAI,EAAE;gBAC3BL,UAAUJ,MAAMG,IAAI,CAACC,QAAQ;YACjC;YACAJ,MAAMU,SAAS,IAAI,WAAW,GAAGJ,IAAAA,eAAI,EAACN,MAAMU,SAAS,EAAE,CAAC;YACxD,WAAW,GAAGR,IAAAA,gBAAK,EAACS,kCAAqB,EAAE;gBACvCC,OAAOZ,MAAMa,kBAAkB;gBAC/BT,UAAU;oBACNJ,MAAMc,OAAO,IAAI,WAAW,GAAGR,IAAAA,eAAI,EAACN,MAAMc,OAAO,EAAE,CAAC;oBACpDd,MAAMe,KAAK,IAAI,WAAW,GAAGT,IAAAA,eAAI,EAACN,MAAMe,KAAK,EAAE,CAAC;iBACnD;YACL;SACH;IACL;AACJ"}
+{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } 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  assertSlots<TreeItemLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.expandIcon && <state.expandIcon />}\n      {state.selector && <state.selector />}\n      {state.iconBefore && <state.iconBefore />}\n      <state.main>{state.root.children}</state.main>\n      {state.iconAfter && <state.iconAfter />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {state.actions && <state.actions />}\n        {state.aside && <state.aside />}\n      </ButtonContextProvider>\n    </state.root>\n  );\n};\n"],"names":["renderTreeItemLayout_unstable","state","assertSlots","_jsxs","root","expandIcon","_jsx","selector","iconBefore","main","children","iconAfter","ButtonContextProvider","value","buttonContextValue","actions","aside"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;6BAEU;AAK/B,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,2BAAAA,EAAiCD;IAEjC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,UAAU,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,UAAU,EAAA,CAAA;YACrCJ,MAAMM,QAAQ,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,QAAQ,EAAA,CAAA;YACjCN,MAAMO,UAAU,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMO,UAAU,EAAA,CAAA;0BACtCF,IAAAA,eAAA,EAACL,MAAMQ,IAAI,EAAA;0BAAER,MAAMG,IAAI,CAACM,QAAQ;;YAC/BT,MAAMU,SAAS,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACL,MAAMU,SAAS,EAAA,CAAA;0BACpCR,IAAAA,gBAAA,EAACS,kCAAAA,EAAAA;gBAAsBC,OAAOZ,MAAMa,kBAAkB;;oBACnDb,MAAMc,OAAO,IAAA,WAAA,GAAIT,IAAAA,eAAA,EAACL,MAAMc,OAAO,EAAA,CAAA;oBAC/Bd,MAAMe,KAAK,IAAA,WAAA,GAAIV,IAAAA,eAAA,EAACL,MAAMe,KAAK,EAAA,CAAA;;;;;AAIpC"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -17,6 +17,7 @@ const _reactradio = require("@fluentui/react-radio");
 const _TreeItemChevron = require("../TreeItemChevron");
 const _reacttabster = require("@fluentui/react-tabster");
 const useTreeItemLayout_unstable = (props, ref)=>{
+    'use no memo';
     const { main, iconAfter, iconBefore } = props;
     const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
     const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot, useEventCallback, elementContains, useControllableState } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { main, iconAfter, iconBefore } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleFromProps, onActionVisibilityChange] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        props.actions.onVisibilityChange\n    ] : [\n        undefined,\n        undefined\n    ];\n    const [isActionsVisible, setIsActionsVisible] = useControllableState({\n        state: isActionsVisibleFromProps,\n        initialState: false\n    });\n    const selectionRef = useTreeItemContext_unstable((ctx)=>ctx.selectionRef);\n    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);\n    const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);\n    const actionsRefInternal = React.useRef(null);\n    const treeItemRef = useTreeItemContext_unstable((ctx)=>ctx.treeItemRef);\n    const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n    const checked = useTreeItemContext_unstable((ctx)=>ctx.checked);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n    assertIsRefObject(treeItemRef);\n    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n    assertIsRefObject(subtreeRef);\n    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n                visible: true,\n                event,\n                type: event.type\n            });\n            setIsActionsVisible(true);\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible,\n        onActionVisibilityChange\n    ]);\n    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n                visible: true,\n                event,\n                type: event.type\n            });\n            setIsActionsVisible(true);\n            return;\n        }\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n                visible: false,\n                event,\n                type: event.type\n            });\n            setIsActionsVisible(false);\n            return;\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible,\n        onActionVisibilityChange\n    ]);\n    const expandIcon = slot.optional(props.expandIcon, {\n        renderByDefault: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        },\n        elementType: 'div'\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'horizontal'\n    });\n    const actions = isActionsVisible ? slot.optional(props.actions, {\n        defaultProps: {\n            ...arrowNavigationProps,\n            role: 'toolbar'\n        },\n        elementType: 'div'\n    }) : undefined;\n    actions === null || actions === void 0 ? true : delete actions.visible;\n    actions === null || actions === void 0 ? true : delete actions.onVisibilityChange;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);\n    const handleActionsBlur = useEventCallback((event)=>{\n        if (isResolvedShorthand(props.actions)) {\n            var _props_actions_onBlur, _props_actions;\n            (_props_actions_onBlur = (_props_actions = props.actions).onBlur) === null || _props_actions_onBlur === void 0 ? void 0 : _props_actions_onBlur.call(_props_actions, event);\n        }\n        const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget));\n        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n            visible: isRelatedTargetFromActions,\n            event,\n            type: event.type\n        });\n        setIsActionsVisible(isRelatedTargetFromActions);\n    });\n    if (actions) {\n        actions.ref = actionsRefs;\n        actions.onBlur = handleActionsBlur;\n    }\n    const hasActions = Boolean(props.actions);\n    React.useEffect(()=>{\n        if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {\n            const treeItemElement = treeItemRef.current;\n            const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n            const handleFocus = setActionsVisibleIfNotFromSubtree;\n            const handleBlur = setActionsInvisibleIfNotFromSubtree;\n            treeItemElement.addEventListener('mouseover', handleMouseOver);\n            treeItemElement.addEventListener('mouseout', handleMouseOut);\n            treeItemElement.addEventListener('focus', handleFocus);\n            treeItemElement.addEventListener('blur', handleBlur);\n            return ()=>{\n                treeItemElement.removeEventListener('mouseover', handleMouseOver);\n                treeItemElement.removeEventListener('mouseout', handleMouseOut);\n                treeItemElement.removeEventListener('focus', handleFocus);\n                treeItemElement.removeEventListener('blur', handleBlur);\n            };\n        }\n    }, [\n        hasActions,\n        treeItemRef,\n        isActionsVisibleFromProps,\n        setActionsVisibleIfNotFromSubtree,\n        setActionsInvisibleIfNotFromSubtree\n    ]);\n    return {\n        components: {\n            root: 'div',\n            expandIcon: 'div',\n            iconBefore: 'div',\n            main: 'div',\n            iconAfter: 'div',\n            actions: 'div',\n            aside: 'div',\n            // Casting here to a union between checkbox and radio\n            selector: selectionMode === 'multiselect' ? Checkbox : Radio\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            ...props,\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, layoutRef)\n        }), {\n            elementType: 'div'\n        }),\n        iconBefore: slot.optional(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        main: slot.always(main, {\n            elementType: 'div'\n        }),\n        iconAfter: slot.optional(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        aside: !isActionsVisible ? slot.optional(props.aside, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }) : undefined,\n        actions,\n        expandIcon,\n        selector: slot.optional(props.selector, {\n            renderByDefault: selectionMode !== 'none',\n            defaultProps: {\n                checked,\n                tabIndex: -1,\n                'aria-hidden': true,\n                ref: selectionRef\n            },\n            elementType: selectionMode === 'multiselect' ? Checkbox : Radio\n        })\n    };\n};\nfunction assertIsRefObject(ref) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (typeof ref !== 'object' || ref === null || !('current' in ref)) {\n            throw new Error(`\n        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n      `);\n        }\n    }\n}\n"],"names":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleFromProps","onActionVisibilityChange","isResolvedShorthand","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","useControllableState","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","React","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","elementContains","target","type","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","expandIcon","slot","optional","renderByDefault","defaultProps","children","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","handleActionsBlur","useEventCallback","_props_actions_onBlur","_props_actions","onBlur","call","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","always","getIntrinsicElementProps","tabIndex","process","env","NODE_ENV","Error","name"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  elementContains,\n  useControllableState,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type {\n  TreeItemLayoutActionSlotProps,\n  TreeItemLayoutActionVisibilityChangeData,\n  TreeItemLayoutProps,\n  TreeItemLayoutState,\n} from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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  'use no memo';\n\n  const { main, iconAfter, iconBefore } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const [isActionsVisibleFromProps, onActionVisibilityChange]: [\n    TreeItemLayoutActionSlotProps['visible'],\n    TreeItemLayoutActionSlotProps['onVisibilityChange'],\n  ] = isResolvedShorthand(props.actions)\n    ? // .visible .onVisibilityChange prop should not be propagated to the DOM\n      [props.actions.visible, props.actions.onVisibilityChange]\n    : [undefined, undefined];\n\n  const [isActionsVisible, setIsActionsVisible] = useControllableState({\n    state: isActionsVisibleFromProps,\n    initialState: false,\n  });\n  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const actionsRefInternal = React.useRef<HTMLDivElement>(null);\n  const treeItemRef = useTreeItemContext_unstable(ctx => ctx.treeItemRef);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  assertIsRefObject(treeItemRef);\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  assertIsRefObject(subtreeRef);\n\n  const setActionsVisibleIfNotFromSubtree = React.useCallback(\n    (event: MouseEvent | FocusEvent) => {\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        setIsActionsVisible(true);\n      }\n    },\n    [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n  );\n\n  const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n    (event: FocusEvent | MouseEvent) => {\n      const isRelatedTargetFromActions = Boolean(\n        actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node),\n      );\n      if (isRelatedTargetFromActions) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        setIsActionsVisible(true);\n        return;\n      }\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        onActionVisibilityChange?.(event, {\n          visible: false,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        setIsActionsVisible(false);\n        return;\n      }\n    },\n    [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n  );\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n    elementType: 'div',\n  });\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n  const arrowNavigationProps = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(props.actions, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n        elementType: 'div',\n      })\n    : undefined;\n  delete actions?.visible;\n  delete actions?.onVisibilityChange;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n  const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.actions)) {\n      props.actions.onBlur?.(event);\n    }\n    const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n    onActionVisibilityChange?.(event, {\n      visible: isRelatedTargetFromActions,\n      event,\n      type: event.type,\n    } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n    setIsActionsVisible(isRelatedTargetFromActions);\n  });\n  if (actions) {\n    actions.ref = actionsRefs;\n    actions.onBlur = handleActionsBlur;\n  }\n\n  const hasActions = Boolean(props.actions);\n\n  React.useEffect(() => {\n    if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {\n      const treeItemElement = treeItemRef.current;\n\n      const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n      const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n      const handleFocus = setActionsVisibleIfNotFromSubtree;\n      const handleBlur = setActionsInvisibleIfNotFromSubtree;\n\n      treeItemElement.addEventListener('mouseover', handleMouseOver);\n      treeItemElement.addEventListener('mouseout', handleMouseOut);\n      treeItemElement.addEventListener('focus', handleFocus);\n      treeItemElement.addEventListener('blur', handleBlur);\n\n      return () => {\n        treeItemElement.removeEventListener('mouseover', handleMouseOver);\n        treeItemElement.removeEventListener('mouseout', handleMouseOut);\n        treeItemElement.removeEventListener('focus', handleFocus);\n        treeItemElement.removeEventListener('blur', handleBlur);\n      };\n    }\n  }, [\n    hasActions,\n    treeItemRef,\n    isActionsVisibleFromProps,\n    setActionsVisibleIfNotFromSubtree,\n    setActionsInvisibleIfNotFromSubtree,\n  ]);\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      main: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    buttonContextValue: { size: 'small' },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, layoutRef) as React.Ref<HTMLDivElement>,\n      }),\n      {\n        elementType: 'div',\n      },\n    ),\n    iconBefore: slot.optional(iconBefore, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: !isActionsVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : undefined,\n    actions,\n    expandIcon,\n    selector: slot.optional(props.selector, {\n      renderByDefault: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n        // casting here to a union between checkbox and radio\n        // since ref is not present on the selector signature\n        // FIXME: look into Slot type to see if we can make this work\n      } as CheckboxProps | RadioProps,\n      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n        CheckboxProps | RadioProps\n      >,\n    }),\n  };\n};\n\nfunction assertIsRefObject<Value>(ref?: React.Ref<Value>): asserts ref is React.RefObject<Value> {\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof ref !== 'object' || ref === null || !('current' in ref)) {\n      throw new Error(`\n        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n      `);\n    }\n  }\n}\n"],"names":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleFromProps","onActionVisibilityChange","isResolvedShorthand","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","useControllableState","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","React","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","elementContains","target","type","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","expandIcon","slot","optional","renderByDefault","defaultProps","children","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","handleActionsBlur","useEventCallback","onBlur","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","always","getIntrinsicElementProps","tabIndex","process","env","NODE_ENV","Error","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js

@@ -168,6 +168,7 @@ const useIconAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useTreeItemLayoutStyles_unstable = (state)=>{
+    'use no memo';
     const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;
     const rootStyles = useRootStyles();
     const rootBaseStyles = useRootBaseStyles();

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n  root: 'fui-TreeItemLayout',\n  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  main: 'fui-TreeItemLayout__main',\n  iconAfter: 'fui-TreeItemLayout__iconAfter',\n  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  aside: 'fui-TreeItemLayout__aside',\n  actions: 'fui-TreeItemLayout__actions',\n  selector: 'fui-TreeItemLayout__selector'\n};\nconst useRootBaseStyles = /*#__PURE__*/__resetStyles(\"r1bx0xiv\", null, [\".r1bx0xiv{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-area:layout;}\", \".r1bx0xiv:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}\", \".r1bx0xiv:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\", \".r1bx0xiv:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}\", \".r1bx0xiv:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\"]);\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  leaf: {\n    uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n  },\n  branch: {\n    uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n  },\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  small: {\n    sshi5w: \"f1pha7fy\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  },\n  subtle: {},\n  \"subtle-alpha\": {\n    Jwef8y: \"f146ro5n\",\n    ecr2s2: \"fkam630\"\n  },\n  transparent: {\n    De3pzq: \"f1c21dwh\",\n    Jwef8y: \"fjxutwb\",\n    ecr2s2: \"fophhak\"\n  }\n}, {\n  d: [\".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f1pha7fy{min-height:24px;}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\"],\n  h: [\".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}\", \".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}\"],\n  a: [\".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}\", \".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = /*#__PURE__*/__resetStyles(\"rzvs2in\", \"r17h8a29\", [\".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}\", \".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}\"]);\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = /*#__PURE__*/__resetStyles(\"r1825u21\", \"rezy0yk\", [\".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}\", \".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}\"]);\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = /*#__PURE__*/__resetStyles(\"rh4pu5o\", null, [\".rh4pu5o{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}\"]);\n/**\n * Styles for the content slot\n */\nconst useMainBaseStyles = /*#__PURE__*/__resetStyles(\"rklbe47\", null, [\".rklbe47{padding:0 var(--spacingHorizontalXXS);}\"]);\n/**\n * Styles for the before/after icon slot\n */\nconst useIconBaseStyles = /*#__PURE__*/__resetStyles(\"rphzgg1\", null, [\".rphzgg1{display:flex;align-items:center;color:var(--colorNeutralForeground2);line-height:var(--lineHeightBase500);font-size:var(--fontSizeBase500);}\"]);\nconst useIconBeforeStyles = /*#__PURE__*/__styles({\n  medium: {\n    z189sj: [\"f7x41pl\", \"fruq291\"]\n  },\n  small: {\n    z189sj: [\"ffczdla\", \"fgiv446\"]\n  }\n}, {\n  d: [\".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\"]\n});\nconst useIconAfterStyles = /*#__PURE__*/__styles({\n  medium: {\n    uwmqm3: [\"fruq291\", \"f7x41pl\"]\n  },\n  small: {\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  d: [\".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = state => {\n  const {\n    main,\n    iconAfter,\n    iconBefore,\n    expandIcon,\n    root,\n    aside,\n    actions,\n    selector\n  } = state;\n  const rootStyles = useRootStyles();\n  const rootBaseStyles = useRootBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n  const mainBaseStyles = useMainBaseStyles();\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const iconBaseStyles = useIconBaseStyles();\n  const iconBeforeStyles = useIconBeforeStyles();\n  const iconAfterStyles = useIconAfterStyles();\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n  root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n  if (expandIcon) {\n    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);\n  }\n  if (iconBefore) {\n    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);\n  }\n  if (iconAfter) {\n    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);\n  }\n  if (actions) {\n    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n  }\n  if (aside) {\n    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n  }\n  if (selector) {\n    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","__resetStyles","useRootStyles","__styles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useMainBaseStyles","useIconBaseStyles","useIconBeforeStyles","z189sj","useIconAfterStyles","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    main: 'fui-TreeItemLayout__main',\n    iconAfter: 'fui-TreeItemLayout__iconAfter',\n    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    aside: 'fui-TreeItemLayout__aside',\n    actions: 'fui-TreeItemLayout__actions',\n    selector: 'fui-TreeItemLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '32px',\n    boxSizing: 'border-box',\n    gridArea: 'layout',\n    ':active': {\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n        [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    ':hover': {\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling\n        [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    }\n});\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        minHeight: '24px',\n        ...typographyStyles.caption1\n    },\n    // Appearance variations\n    subtle: {},\n    'subtle-alpha': {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    position: 'relative',\n    zIndex: 1,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalS}`\n});\n/**\n * Styles for the action icon slot\n */ const useAsideBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    alignItems: 'center',\n    zIndex: 0,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalM}`,\n    gap: tokens.spacingHorizontalXS\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '24px',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    flex: `0 0 auto`,\n    padding: `${tokens.spacingVerticalXS} 0`\n});\n/**\n * Styles for the content slot\n */ const useMainBaseStyles = makeResetStyles({\n    padding: `0 ${tokens.spacingHorizontalXXS}`\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground2,\n    lineHeight: tokens.lineHeightBase500,\n    fontSize: tokens.fontSizeBase500\n});\nconst useIconBeforeStyles = makeStyles({\n    medium: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalXXS\n    }\n});\nconst useIconAfterStyles = makeStyles({\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    'use no memo';\n    const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n    const rootStyles = useRootStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const iconBeforeStyles = useIconBeforeStyles();\n    const iconAfterStyles = useIconAfterStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n    }\n    if (aside) {\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n    }\n    if (selector) {\n        selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n    }\n    return state;\n};\n"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","__resetStyles","useRootStyles","__styles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useMainBaseStyles","useIconBaseStyles","useIconBeforeStyles","z189sj","useIconAfterStyles","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */ export const TreeItemPersonaLayout = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useTreeItemPersonaLayout_unstable(props, ref);\n    useTreeItemPersonaLayoutStyles_unstable(state);\n    const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n    return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["TreeItemPersonaLayout","React","forwardRef","props","ref","state","useTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","contextValues","useTreeItemPersonaLayoutContextValues_unstable","renderTreeItemPersonaLayout_unstable","displayName"],"mappings":";;;;+BASiBA;;;eAAAA;;;;iEATM;0CAC2B;6CACG;sDACG;uDACO;AAKpD,MAAMA,wBAAwB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC5E,MAAMC,QAAQC,IAAAA,2DAAiC,EAACH,OAAOC;IACvDG,IAAAA,6EAAuC,EAACF;IACxC,MAAMG,gBAAgBC,IAAAA,qFAA8C,EAACJ;IACrE,OAAOK,IAAAA,iEAAoC,EAACL,OAAOG;AACvD;AACAR,sBAAsBW,WAAW,GAAG"}
+{"version":3,"sources":["TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["TreeItemPersonaLayout","React","forwardRef","props","ref","state","useTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","contextValues","useTreeItemPersonaLayoutContextValues_unstable","renderTreeItemPersonaLayout_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;0CAC2B;6CACG;sDACG;uDAGO;AAOxD,MAAMA,wBAAAA,WAAAA,GAAyEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQC,IAAAA,2DAAAA,EAAkCH,OAAOC;IAEvDG,IAAAA,6EAAAA,EAAwCF;IAExC,MAAMG,gBAAgBC,IAAAA,qFAAAA,EAA+CJ;IAErE,OAAOK,IAAAA,iEAAAA,EAAqCL,OAAOG;AACrD;AAEAR,sBAAsBW,WAAW,GAAG"}

package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js

@@ -1,4 +1,6 @@
-"use strict";
+/**
+ * State used in rendering TreeItemPersonaLayout
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"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' | 'selector'> & {\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  main: 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":[],"rangeMappings":";;","mappings":"AA8BA;;CAEC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}