@fluentui/react-tree 9.0.0-beta.8 → 9.0.0

package/lib/components/TreeItem/useTreeItem.js

@@ -1,13 +1,9 @@
 import * as React from 'react';
-import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } from '@fluentui/react-utilities';
-import { ChevronRight12Regular } from '@fluentui/react-icons';
-import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { useEventCallback } from '@fluentui/react-utilities';
-import { expandIconInlineStyles } from './useTreeItemStyles';
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';
-import { useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
 import { useTreeContext_unstable } from '../../contexts/index';
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
+import { Space } from '@fluentui/keyboard-keys';
 import { treeDataTypes } from '../../utils/tokens';
 /**
  * Create the state required to render TreeItem.
@@ -17,234 +13,165 @@ import { treeDataTypes } from '../../utils/tokens';
  *
  * @param props - props from this instance of TreeItem
  * @param ref - reference to root HTMLElement of TreeItem
- */
-export const useTreeItem_unstable = (props, ref) => {
-  const [children, subtreeChildren] = React.Children.toArray(props.children);
-  const contextLevel = useTreeContext_unstable(ctx => ctx.level);
-  const {
-    content,
-    subtree,
-    expandIcon,
-    leaf: isLeaf = subtreeChildren === undefined,
-    actions,
-    as = 'div',
-    onClick,
-    onKeyDown,
-    ['aria-level']: level = contextLevel,
-    ...rest
-  } = props;
-  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);
-  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);
-  const id = useId('fui-TreeItem-', props.id);
-  const isBranch = !isLeaf;
-  const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(id));
-  const {
-    dir,
-    targetDocument
-  } = useFluent_unstable();
-  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
-  const actionsRef = React.useRef(null);
-  const expandIconRef = React.useRef(null);
-  const subtreeRef = React.useRef(null);
-  const handleArrowRight = event => {
-    if (!open && isBranch) {
-      return requestOpenChange({
-        event,
-        open: true,
-        type: treeDataTypes.arrowRight,
-        target: event.currentTarget
-      });
-    }
-    if (open && isBranch) {
-      return requestNavigation({
-        event,
-        type: treeDataTypes.arrowRight,
-        target: event.currentTarget
-      });
-    }
-  };
-  const handleArrowLeft = event => {
-    if (open && isBranch) {
-      return requestOpenChange({
-        event,
-        open: false,
-        type: treeDataTypes.arrowLeft,
-        target: event.currentTarget
-      });
-    }
-    if (!open && level > 1) {
-      return requestNavigation({
-        event,
-        target: event.currentTarget,
-        type: treeDataTypes.arrowLeft
-      });
-    }
-  };
-  const handleEnter = event => {
-    requestOpenChange({
-      event,
-      open: isLeaf ? open : !open,
-      type: treeDataTypes.enter,
-      target: event.currentTarget
+ */ export function useTreeItem_unstable(props, ref) {
+    var _props_value;
+    const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
+    // note, if the value is not externally provided,
+    // then selection and expansion will not work properly
+    const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
+    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
+    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
+    const [isActionsVisible, setActionsVisible] = React.useState(false);
+    const [isAsideVisible, setAsideVisible] = React.useState(true);
+    const handleActionsRef = (actionsElement)=>{
+        setAsideVisible(actionsElement === null);
+    };
+    const actionsRef = React.useRef(null);
+    const expandIconRef = React.useRef(null);
+    const layoutRef = React.useRef(null);
+    const subtreeRef = React.useRef(null);
+    const selectionRef = React.useRef(null);
+    const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
+    var _ctx_checkedItems_get;
+    const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
+    const handleClick = useEventCallback((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);
+        if (isEventFromActions) {
+            return;
+        }
+        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
+        if (isEventFromSubtree) {
+            return;
+        }
+        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);
+        if (isEventFromSelection) {
+            return;
+        }
+        const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
+        requestTreeResponse({
+            event,
+            value,
+            itemType,
+            target: event.currentTarget,
+            type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click
+        });
     });
-  };
-  const handleClick = useEventCallback(event => {
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);
-    if (isEventFromActions) {
-      return;
-    }
-    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
-    if (isEventFromSubtree) {
-      return;
-    }
-    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
-    requestOpenChange({
-      event,
-      open: isLeaf ? open : !open,
-      type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,
-      target: event.currentTarget
+    const handleKeyDown = useEventCallback((event)=>{
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        // Ignore keyboard events that do not originate from the current tree item.
+        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
+            return;
+        }
+        switch(event.key){
+            case Space:
+                if (selectionMode !== 'none') {
+                    var _selectionRef_current;
+                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                    event.preventDefault();
+                }
+                return;
+            case treeDataTypes.End:
+            case treeDataTypes.Home:
+            case treeDataTypes.Enter:
+            case treeDataTypes.ArrowUp:
+            case treeDataTypes.ArrowDown:
+            case treeDataTypes.ArrowLeft:
+            case treeDataTypes.ArrowRight:
+                return requestTreeResponse({
+                    event,
+                    target: event.currentTarget,
+                    value,
+                    itemType,
+                    type: event.key
+                });
+        }
+        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
+        if (isTypeAheadCharacter) {
+            requestTreeResponse({
+                event,
+                target: event.currentTarget,
+                value,
+                itemType,
+                type: treeDataTypes.TypeAhead
+            });
+        }
     });
-    requestNavigation({
-      event,
-      target: event.currentTarget,
-      type: treeDataTypes.click
+    const handleActionsVisible = useEventCallback((event)=>{
+        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
+        if (!isTargetFromSubtree) {
+            setActionsVisible(true);
+        }
     });
-  });
-  const handleKeyDown = useEventCallback(event => {
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    if (event.currentTarget !== event.target) {
-      return;
-    }
-    if (event.isDefaultPrevented()) {
-      return;
-    }
-    switch (event.key) {
-      case Enter:
-        return handleEnter(event);
-      case ArrowRight:
-        return handleArrowRight(event);
-      case ArrowLeft:
-        return handleArrowLeft(event);
-      case End:
-        return requestNavigation({
-          event,
-          type: treeDataTypes.end,
-          target: event.currentTarget
-        });
-      case Home:
-        return requestNavigation({
-          event,
-          type: treeDataTypes.home,
-          target: event.currentTarget
-        });
-      case ArrowUp:
-        return requestNavigation({
-          event,
-          type: treeDataTypes.arrowUp,
-          target: event.currentTarget
-        });
-      case ArrowDown:
-        return requestNavigation({
-          event,
-          type: treeDataTypes.arrowDown,
-          target: event.currentTarget
+    const handleActionsInvisible = useEventCallback((event)=>{
+        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
+        const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));
+        if (isRelatedTargetFromActions) {
+            return setActionsVisible(true);
+        }
+        if (!isTargetFromSubtree) {
+            return setActionsVisible(false);
+        }
+    });
+    const handleChange = useEventCallback((event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
+        if (isEventFromSubtree) {
+            return;
+        }
+        requestTreeResponse({
+            event,
+            value,
+            itemType,
+            type: 'Change',
+            target: event.currentTarget,
+            checked: checked === 'mixed' ? true : !checked
         });
-    }
-    const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
-    if (isTypeAheadCharacter) {
-      return requestNavigation({
-        event,
-        target: event.currentTarget,
-        type: treeDataTypes.typeAhead
-      });
-    }
-  });
-  const [isActionsVisible, setActionsVisible] = React.useState(false);
-  const showActions = useEventCallback(event => {
-    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
-    if (!isEventFromSubtree) {
-      setActionsVisible(true);
-    }
-  });
-  const hideActions = useEventCallback(event => {
-    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
-    if (!isEventFromSubtree) {
-      setActionsVisible(false);
-    }
-  });
-  // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios
-  // TODO: find a better way to ensure this behavior
-  React.useEffect(() => {
-    if (actionsRef.current) {
-      const handleFocusOut = event => {
-        setActionsVisible(elementContains(actionsRef.current, event.relatedTarget));
-      };
-      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusout', handleFocusOut, {
-        passive: true
-      });
-      return () => {
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusout', handleFocusOut);
-      };
-    }
-  }, [targetDocument]);
-  return {
-    isLeaf,
-    open,
-    level,
-    buttonSize: 'small',
-    isActionsVisible: actions ? isActionsVisible : false,
-    components: {
-      content: 'div',
-      root: 'div',
-      expandIcon: 'span',
-      actions: 'span',
-      subtree: 'span'
-    },
-    subtree: resolveShorthand(subtree, {
-      required: Boolean(subtreeChildren),
-      defaultProps: {
-        children: subtreeChildren,
-        ref: useMergedRefs(subtreeRef, isResolvedShorthand(subtree) ? subtree.ref : undefined)
-      }
-    }),
-    content: resolveShorthand(content, {
-      required: true,
-      defaultProps: {
-        children
-      }
-    }),
-    root: getNativeElementProps(as, {
-      tabIndex: -1,
-      ...rest,
-      id,
-      ref,
-      children: null,
-      'aria-level': level,
-      'aria-expanded': isBranch ? open : undefined,
-      role: 'treeitem',
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      onMouseOver: actions ? showActions : undefined,
-      onFocus: actions ? showActions : undefined,
-      onMouseOut: actions ? hideActions : undefined,
-      onBlur: actions ? hideActions : undefined
-    }),
-    expandIcon: resolveShorthand(expandIcon, {
-      required: isBranch,
-      defaultProps: {
-        children: /*#__PURE__*/React.createElement(ChevronRight12Regular, {
-          style: expandIconInlineStyles[expandIconRotation]
-        }),
-        'aria-hidden': true,
-        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
-      }
-    }),
-    actions: resolveShorthand(actions, {
-      defaultProps: {
-        ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef)
-      }
-    })
-  };
-};
-//# sourceMappingURL=useTreeItem.js.map
+    });
+    return {
+        value,
+        open,
+        checked,
+        subtreeRef,
+        layoutRef,
+        selectionRef,
+        expandIconRef,
+        actionsRef: useMergedRefs(handleActionsRef, actionsRef),
+        itemType,
+        level,
+        components: {
+            root: 'div'
+        },
+        isAsideVisible,
+        isActionsVisible,
+        root: slot.always(getNativeElementProps(as, {
+            tabIndex: -1,
+            ...rest,
+            ref,
+            role: 'treeitem',
+            'aria-level': level,
+            [dataTreeItemValueAttrName]: value,
+            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
+            // aria-selected is required according to WAI-ARIA spec
+            // https://www.w3.org/TR/wai-aria-1.1/#treeitem
+            // Casting: when selectionMode is 'single', checked is a boolean
+            'aria-selected': selectionMode === 'single' ? checked : 'false',
+            'aria-expanded': itemType === 'branch' ? open : undefined,
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            onMouseOver: handleActionsVisible,
+            onFocus: handleActionsVisible,
+            onMouseOut: handleActionsInvisible,
+            onBlur: handleActionsInvisible,
+            onChange: handleChange
+        }), {
+            elementType: 'div'
+        })
+    };
+}

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useId","ChevronRight12Regular","useFluent_unstable","useEventCallback","expandIconInlineStyles","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","End","Enter","Home","useMergedRefs","elementContains","useTreeContext_unstable","treeDataTypes","useTreeItem_unstable","props","ref","children","subtreeChildren","Children","toArray","contextLevel","ctx","level","content","subtree","expandIcon","leaf","isLeaf","undefined","actions","as","onClick","onKeyDown","rest","requestOpenChange","requestNavigation","id","isBranch","open","openItems","has","dir","targetDocument","expandIconRotation","actionsRef","useRef","expandIconRef","subtreeRef","handleArrowRight","event","type","arrowRight","target","currentTarget","handleArrowLeft","arrowLeft","handleEnter","enter","handleClick","isEventFromActions","current","isEventFromSubtree","isFromExpandIcon","expandIconClick","click","handleKeyDown","isDefaultPrevented","key","end","home","arrowUp","arrowDown","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","typeAhead","isActionsVisible","setActionsVisible","useState","showActions","hideActions","useEffect","handleFocusOut","relatedTarget","addEventListener","passive","removeEventListener","buttonSize","components","root","required","Boolean","defaultProps","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur","createElement","style"],"sources":["../../../src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { expandIconInlineStyles } from './useTreeItemStyles';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\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 const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState => {\n  const [children, subtreeChildren] = React.Children.toArray(props.children);\n\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n  const {\n    content,\n    subtree,\n    expandIcon,\n    leaf: isLeaf = subtreeChildren === undefined,\n    actions,\n    as = 'div',\n    onClick,\n    onKeyDown,\n    ['aria-level']: level = contextLevel,\n    ...rest\n  } = props;\n\n  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n\n  const id = useId('fui-TreeItem-', props.id);\n\n  const isBranch = !isLeaf;\n\n  const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(id));\n  const { dir, targetDocument } = useFluent_unstable();\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n\n  const actionsRef = React.useRef<HTMLElement>(null);\n  const expandIconRef = React.useRef<HTMLElement>(null);\n  const subtreeRef = React.useRef<HTMLElement>(null);\n\n  const handleArrowRight = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!open && isBranch) {\n      return requestOpenChange({ event, open: true, type: treeDataTypes.arrowRight, target: event.currentTarget });\n    }\n    if (open && isBranch) {\n      return requestNavigation({ event, type: treeDataTypes.arrowRight, target: event.currentTarget });\n    }\n  };\n  const handleArrowLeft = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (open && isBranch) {\n      return requestOpenChange({ event, open: false, type: treeDataTypes.arrowLeft, target: event.currentTarget });\n    }\n    if (!open && level > 1) {\n      return requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.arrowLeft });\n    }\n  };\n  const handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    requestOpenChange({ event, open: isLeaf ? open : !open, type: treeDataTypes.enter, target: event.currentTarget });\n  };\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestOpenChange({\n      event,\n      open: isLeaf ? open : !open,\n      type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,\n      target: event.currentTarget,\n    });\n    requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.click });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.currentTarget !== event.target) {\n      return;\n    }\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    switch (event.key) {\n      case Enter:\n        return handleEnter(event);\n      case ArrowRight:\n        return handleArrowRight(event);\n      case ArrowLeft:\n        return handleArrowLeft(event);\n      case End:\n        return requestNavigation({ event, type: treeDataTypes.end, target: event.currentTarget });\n      case Home:\n        return requestNavigation({ event, type: treeDataTypes.home, target: event.currentTarget });\n      case ArrowUp:\n        return requestNavigation({ event, type: treeDataTypes.arrowUp, target: event.currentTarget });\n      case ArrowDown:\n        return requestNavigation({ event, type: treeDataTypes.arrowDown, target: event.currentTarget });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      return requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.typeAhead });\n    }\n  });\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const showActions = useEventCallback((event: React.SyntheticEvent) => {\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (!isEventFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n  const hideActions = useEventCallback((event: React.SyntheticEvent) => {\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (!isEventFromSubtree) {\n      setActionsVisible(false);\n    }\n  });\n\n  // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios\n  // TODO: find a better way to ensure this behavior\n  React.useEffect(() => {\n    if (actionsRef.current) {\n      const handleFocusOut = (event: FocusEvent) => {\n        setActionsVisible(elementContains(actionsRef.current, event.relatedTarget as Node));\n      };\n      targetDocument?.addEventListener('focusout', handleFocusOut, { passive: true });\n      return () => {\n        targetDocument?.removeEventListener('focusout', handleFocusOut);\n      };\n    }\n  }, [targetDocument]);\n\n  return {\n    isLeaf,\n    open,\n    level,\n    buttonSize: 'small',\n    isActionsVisible: actions ? isActionsVisible : false,\n    components: {\n      content: 'div',\n      root: 'div',\n      expandIcon: 'span',\n      actions: 'span',\n      subtree: 'span',\n    },\n    subtree: resolveShorthand(subtree, {\n      required: Boolean(subtreeChildren),\n      defaultProps: {\n        children: subtreeChildren,\n        ref: useMergedRefs(subtreeRef, isResolvedShorthand(subtree) ? subtree.ref : undefined),\n      },\n    }),\n    content: resolveShorthand(content, {\n      required: true,\n      defaultProps: {\n        children,\n      },\n    }),\n    root: getNativeElementProps(as, {\n      tabIndex: -1,\n      ...rest,\n      id,\n      ref,\n      children: null,\n      'aria-level': level,\n      'aria-expanded': isBranch ? open : undefined,\n      role: 'treeitem',\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: actions ? showActions : undefined,\n      onFocus: actions ? showActions : undefined,\n      onMouseOut: actions ? hideActions : undefined,\n      onBlur: actions ? hideActions : undefined,\n    }),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: <ChevronRight12Regular style={expandIconInlineStyles[expandIconRotation]} />,\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n      },\n    }),\n    actions: resolveShorthand(actions, {\n      defaultProps: {\n        ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef),\n      },\n    }),\n  };\n};\n"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = (actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  };\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\n  const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\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    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 isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestTreeResponse({\n      event,\n      value,\n      itemType,\n      target: event.currentTarget,\n      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.Enter:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowLeft:\n      case treeDataTypes.ArrowRight:\n        return requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: event.key });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: treeDataTypes.TypeAhead });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\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      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    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getNativeElementProps(as, {\n        tabIndex: -1,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        [dataTreeItemValueAttrName]: value,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n        'aria-expanded': itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onMouseOver: handleActionsVisible,\n        onFocus: handleActionsVisible,\n        onMouseOut: handleActionsInvisible,\n        onBlur: handleActionsInvisible,\n        onChange: handleChange,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","useTreeContext_unstable","dataTreeItemValueAttrName","Space","treeDataTypes","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAChH,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SAASC,yBAAyB,QAAQ,0CAA0C;AACpF,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,aAAa,QAAQ,qBAAqB;AAEnD;;;;;;;;CAQC,GACD,OAAO,SAASC,qBAAqBC,KAAoB,EAAEC,GAA8B,EAAiB;QAK/DD;IAJzC,MAAME,eAAeP,wBAAwBQ,CAAAA,MAAOA,IAAIC,KAAK;IAE7D,iDAAiD;IACjD,sDAAsD;IACtD,MAAMC,QAAQf,MAAM,qBAAqBU,CAAAA,eAAAA,MAAMK,KAAK,cAAXL,0BAAAA,KAAAA,IAAAA,aAAaM;IAEtD,MAAM,EAAEC,QAAO,EAAEC,UAAS,EAAEC,IAAK,MAAK,EAAEC,UAAW,OAAM,EAAE,cAAcN,QAAQF,YAAY,CAAA,EAAE,GAAGS,MAAM,GAAGX;IAE3G,MAAMY,sBAAsBjB,wBAAwBQ,CAAAA,MAAOA,IAAIS,mBAAmB;IAElF,MAAM,CAACC,kBAAkBC,kBAAkB,GAAG1B,MAAM2B,QAAQ,CAAC,KAAK;IAClE,MAAM,CAACC,gBAAgBC,gBAAgB,GAAG7B,MAAM2B,QAAQ,CAAC,IAAI;IAE7D,MAAMG,mBAAmB,CAACC,iBAA0C;QAClEF,gBAAgBE,mBAAmB,IAAI;IACzC;IAEA,MAAMC,aAAahC,MAAMiC,MAAM,CAAiB,IAAI;IACpD,MAAMC,gBAAgBlC,MAAMiC,MAAM,CAAiB,IAAI;IACvD,MAAME,YAAYnC,MAAMiC,MAAM,CAAiB,IAAI;IACnD,MAAMG,aAAapC,MAAMiC,MAAM,CAAiB,IAAI;IACpD,MAAMI,eAAerC,MAAMiC,MAAM,CAAmB,IAAI;IAExD,MAAMK,OAAO/B,wBAAwBQ,CAAAA,MAAOA,IAAIwB,SAAS,CAACC,GAAG,CAACvB;IAC9D,MAAMwB,gBAAgBlC,wBAAwBQ,CAAAA,MAAOA,IAAI0B,aAAa;QACvB1B;IAA/C,MAAM2B,UAAUnC,wBAAwBQ,CAAAA,MAAOA,CAAAA,wBAAAA,IAAI4B,YAAY,CAACC,GAAG,CAAC3B,oBAArBF,mCAAAA,wBAA+B,KAAK;IAEnF,MAAM8B,cAAczC,iBAAiB,CAAC0C,QAA4C;QAChF3B,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAU2B;QACV,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF,CAAC;QACD,MAAMC,qBAAqBhB,WAAWiB,OAAO,IAAI3C,gBAAgB0B,WAAWiB,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIF,oBAAoB;YACtB;QACF,CAAC;QACD,MAAMG,qBAAqBf,WAAWa,OAAO,IAAI3C,gBAAgB8B,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF,CAAC;QACD,MAAMC,uBAAuBf,aAAaY,OAAO,IAAI3C,gBAAgB+B,aAAaY,OAAO,EAAEH,MAAMI,MAAM;QACvG,IAAIE,sBAAsB;YACxB;QACF,CAAC;QACD,MAAMC,mBAAmBnB,cAAce,OAAO,IAAI3C,gBAAgB4B,cAAce,OAAO,EAAEH,MAAMI,MAAM;QACrG1B,oBAAoB;YAClBsB;YACA7B;YACAK;YACA4B,QAAQJ,MAAMQ,aAAa;YAC3BC,MAAMF,mBAAmB3C,cAAc8C,eAAe,GAAG9C,cAAc+C,KAAK;QAC9E;IACF;IAEA,MAAMC,gBAAgBtD,iBAAiB,CAAC0C,QAA+C;QACrF1B,sBAAAA,uBAAAA,KAAAA,IAAAA,UAAY0B;QACZ,2EAA2E;QAC3E,IAAIA,MAAMC,kBAAkB,MAAMD,MAAMQ,aAAa,KAAKR,MAAMI,MAAM,EAAE;YACtE;QACF,CAAC;QACD,OAAQJ,MAAMa,GAAG;YACf,KAAKlD;gBACH,IAAIgC,kBAAkB,QAAQ;wBAC5BJ;oBAAAA,CAAAA,wBAAAA,aAAaY,OAAO,cAApBZ,mCAAAA,KAAAA,IAAAA,sBAAsBuB;oBACtBd,MAAMe,cAAc;gBACtB,CAAC;gBACD;YACF,KAAKnD,cAAcoD,GAAG;YACtB,KAAKpD,cAAcqD,IAAI;YACvB,KAAKrD,cAAcsD,KAAK;YACxB,KAAKtD,cAAcuD,OAAO;YAC1B,KAAKvD,cAAcwD,SAAS;YAC5B,KAAKxD,cAAcyD,SAAS;YAC5B,KAAKzD,cAAc0D,UAAU;gBAC3B,OAAO5C,oBAAoB;oBAAEsB;oBAAOI,QAAQJ,MAAMQ,aAAa;oBAAErC;oBAAOK;oBAAUiC,MAAMT,MAAMa,GAAG;gBAAC;QACtG;QACA,MAAMU,uBACJvB,MAAMa,GAAG,CAACW,MAAM,KAAK,KAAKxB,MAAMa,GAAG,CAACY,KAAK,CAAC,SAAS,CAACzB,MAAM0B,MAAM,IAAI,CAAC1B,MAAM2B,OAAO,IAAI,CAAC3B,MAAM4B,OAAO;QACtG,IAAIL,sBAAsB;YACxB7C,oBAAoB;gBAAEsB;gBAAOI,QAAQJ,MAAMQ,aAAa;gBAAErC;gBAAOK;gBAAUiC,MAAM7C,cAAciE,SAAS;YAAC;QAC3G,CAAC;IACH;IAEA,MAAMC,uBAAuBxE,iBAAiB,CAAC0C,QAA+C;QAC5F,MAAM+B,sBAAsBC,QAC1B1C,WAAWa,OAAO,IAAI3C,gBAAgB8B,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAAC2B,qBAAqB;YACxBnD,kBAAkB,IAAI;QACxB,CAAC;IACH;IAEA,MAAMqD,yBAAyB3E,iBAAiB,CAAC0C,QAA+C;QAC9F,MAAM+B,sBAAsBC,QAC1B1C,WAAWa,OAAO,IAAI3C,gBAAgB8B,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QAExE,MAAM8B,6BAA6BF,QACjC9C,WAAWiB,OAAO,IAAI3C,gBAAgB0B,WAAWiB,OAAO,EAAEH,MAAMmC,aAAa;QAE/E,IAAID,4BAA4B;YAC9B,OAAOtD,kBAAkB,IAAI;QAC/B,CAAC;QACD,IAAI,CAACmD,qBAAqB;YACxB,OAAOnD,kBAAkB,KAAK;QAChC,CAAC;IACH;IAEA,MAAMwD,eAAe9E,iBAAiB,CAAC0C,QAA+C;QACpF,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF,CAAC;QACD,MAAMI,qBAAqBf,WAAWa,OAAO,IAAI3C,gBAAgB8B,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF,CAAC;QACD3B,oBAAoB;YAClBsB;YACA7B;YACAK;YACAiC,MAAM;YACNL,QAAQJ,MAAMQ,aAAa;YAC3BZ,SAASA,YAAY,UAAU,IAAI,GAAG,CAACA,OAAO;QAChD;IACF;IAEA,OAAO;QACLzB;QACAqB;QACAI;QACAN;QACAD;QACAE;QACAH;QACAF,YAAY7B,cAAc2B,kBAAkBE;QAC5CV;QACAN;QACAmE,YAAY;YACVC,MAAM;QACR;QACAxD;QACAH;QACA2D,MAAM/E,KAAKgF,MAAM,CACfpF,sBAAsBoB,IAAI;YACxBiE,UAAU,CAAC;YACX,GAAG/D,IAAI;YACPV;YACA0E,MAAM;YACN,cAAcvE;YACd,CAACR,0BAA0B,EAAES;YAC7B,gBAAgBwB,kBAAkB,gBAAgBC,UAAU8C,SAAS;YACrE,uDAAuD;YACvD,+CAA+C;YAC/C,gEAAgE;YAChE,iBAAiB/C,kBAAkB,WAAYC,UAAsB,OAAO;YAC5E,iBAAiBpB,aAAa,WAAWgB,OAAOkD,SAAS;YACzDrE,SAAS0B;YACTzB,WAAWsC;YACX+B,aAAab;YACbc,SAASd;YACTe,YAAYZ;YACZa,QAAQb;YACRc,UAAUX;QACZ,IACA;YAAEY,aAAa;QAAM;IAEzB;AACF,CAAC"}

package/lib/components/TreeItem/useTreeItemContextValues.js

@@ -1,18 +1,22 @@
-import * as React from 'react';
 export function useTreeItemContextValues_unstable(state) {
-  const {
-    buttonSize,
-    isActionsVisible
-  } = state;
-  const treeItem = React.useMemo(() => ({
-    isActionsVisible
-  }), [isActionsVisible]);
-  const button = React.useMemo(() => ({
-    size: buttonSize
-  }), [buttonSize]);
-  return {
-    treeItem,
-    button
-  };
+    const { value , itemType , layoutRef , subtreeRef , open , expandIconRef , actionsRef , isActionsVisible , isAsideVisible , selectionRef , checked  } = state;
+    /**
+   * This context is created with "@fluentui/react-context-selector",
+   * there is no sense to memoize it
+   */ const treeItem = {
+        value,
+        checked,
+        itemType,
+        layoutRef,
+        subtreeRef,
+        open,
+        selectionRef,
+        isActionsVisible,
+        isAsideVisible,
+        actionsRef,
+        expandIconRef
+    };
+    return {
+        treeItem
+    };
 }
-//# sourceMappingURL=useTreeItemContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItemContextValues_unstable","state","buttonSize","isActionsVisible","treeItem","useMemo","button","size"],"sources":["../../../src/components/TreeItem/useTreeItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { TreeItemContextValue } from '../../contexts';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\n\nexport function useTreeItemContextValues_unstable(\n  state: Pick<TreeItemState, 'buttonSize' | 'isActionsVisible'>,\n): TreeItemContextValues {\n  const { buttonSize, isActionsVisible } = state;\n\n  const treeItem = React.useMemo<TreeItemContextValue>(() => ({ isActionsVisible }), [isActionsVisible]);\n  const button = React.useMemo<ButtonContextValue>(() => ({ size: buttonSize }), [buttonSize]);\n\n  return { treeItem, button };\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAKvB,OAAO,SAASC,kCACdC,KAA6D,EACtC;EACvB,MAAM;IAAEC,UAAA;IAAYC;EAAgB,CAAE,GAAGF,KAAA;EAEzC,MAAMG,QAAA,GAAWL,KAAA,CAAMM,OAAO,CAAuB,OAAO;IAAEF;EAAiB,IAAI,CAACA,gBAAA,CAAiB;EACrG,MAAMG,MAAA,GAASP,KAAA,CAAMM,OAAO,CAAqB,OAAO;IAAEE,IAAA,EAAML;EAAW,IAAI,CAACA,UAAA,CAAW;EAE3F,OAAO;IAAEE,QAAA;IAAUE;EAAO;AAC5B"}
+{"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    isActionsVisible,\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    expandIconRef,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAM,EACJC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACTC,WAAU,EACVC,KAAI,EACJC,cAAa,EACbC,WAAU,EACVC,iBAAgB,EAChBC,eAAc,EACdC,aAAY,EACZC,QAAO,EACR,GAAGX;IAEJ;;;GAGC,GACD,MAAMY,WAAiC;QACrCX;QACAU;QACAT;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACF;IAEA,OAAO;QAAEM;IAAS;AACpB,CAAC"}

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

@@ -0,0 +1,100 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { treeItemLevelToken } from '../../utils/tokens';
+export const treeItemClassNames = {
+  root: 'fui-TreeItem'
+};
+const useRootStyles = /*#__PURE__*/__styles({
+  level1: {
+    iytv0q: "f10bgyvd"
+  },
+  level2: {
+    iytv0q: "f1h0rod3"
+  },
+  level3: {
+    iytv0q: "fgoqafk"
+  },
+  level4: {
+    iytv0q: "f75dvuh"
+  },
+  level5: {
+    iytv0q: "fqk7yw6"
+  },
+  level6: {
+    iytv0q: "f1r3z17b"
+  },
+  level7: {
+    iytv0q: "f1hrpd1h"
+  },
+  level8: {
+    iytv0q: "f1iy65d0"
+  },
+  level9: {
+    iytv0q: "ftg42e5"
+  },
+  level10: {
+    iytv0q: "fyat3t"
+  },
+  base: {
+    qhf8xq: "f10pi13n",
+    Bceei9c: "f1k6fduh",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    B7ck84d: "f1ewtqcl",
+    De3pzq: "fhovq9v",
+    sj55zd: "fkfq4zb",
+    z189sj: ["flk2ux3", "fkl3uby"]
+  },
+  focusIndicator: {
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    Bm4h7ae: "f15bsgw9",
+    B7ys5i9: "f14e48fq",
+    Busjfv9: "f18yb2kv",
+    Bhk32uz: "fd6o370",
+    Bf4ptjt: "fh1cnn4",
+    kclons: ["fy7oxxb", "f184ne2d"],
+    Bhdgwq3: "fpukqih",
+    Blkhhs4: ["f184ne2d", "fy7oxxb"],
+    Bqtpl0w: "frrh606",
+    clg4pj: ["f1v5zibi", "fo2hd23"],
+    hgwjuy: "ful5kiu",
+    Bonggc9: ["fo2hd23", "f1v5zibi"],
+    B1tsrr9: ["f1jqcqds", "ftffrms"],
+    Dah5zi: ["ftffrms", "f1jqcqds"],
+    Bkh64rk: ["f2e7qr6", "fsr1zz6"],
+    qqdqy8: ["fsr1zz6", "f2e7qr6"],
+    B6dhp37: "f1dvezut",
+    i03rao: ["fd0oaoj", "f1cwg4i8"],
+    Boxcth7: "fjvm52t",
+    Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
+    J0r882: "f57olzd",
+    Bule8hv: ["f4stah7", "fs1por5"],
+    Bjwuhne: "f480a47",
+    Ghsupd: ["fs1por5", "f4stah7"]
+  }
+}, {
+  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;}", ".f10pi13n{position:relative;}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1ewtqcl{box-sizing:border-box;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".flk2ux3{padding-right:var(--spacingHorizontalNone);}", ".fkl3uby{padding-left:var(--spacingHorizontalNone);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}"],
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+/**
+ * Apply styling to the TreeItem slots based on the state
+ */
+export const useTreeItemStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const {
+    level
+  } = state;
+  state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], rootStyles.base, rootStyles.focusIndicator, state.root.className);
+  return state;
+};
+function isStaticallyDefinedLevel(level) {
+  return level >= 1 && level <= 10;
+}
+//# sourceMappingURL=useTreeItemStyles.styles.js.map