@fluentui/react-tree 9.0.0-beta.2 → 9.0.0-beta.21

package/lib/components/TreeItem/useTreeItem.js

@@ -1,14 +1,10 @@
 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 { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';
 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 { elementContains } from '@fluentui/react-portal';
 import { useTreeContext_unstable } from '../../contexts/index';
 import { treeDataTypes } from '../../utils/tokens';
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 /**
  * Create the state required to render TreeItem.
  *
@@ -17,234 +13,120 @@ 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);
+    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 = (actions)=>{
+        setAsideVisible(actions === null);
+    };
+    const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));
+    const actionsRef = React.useRef(null);
+    const expandIconRef = React.useRef(null);
+    const layoutRef = React.useRef(null);
+    const subtreeRef = React.useRef(null);
+    const 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 isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
+        requestTreeResponse({
+            event,
+            itemType,
+            value,
+            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);
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        if (event.currentTarget !== event.target) {
+            return;
+        }
+        switch(event.key){
+            case treeDataTypes.End:
+            case treeDataTypes.Home:
+            case treeDataTypes.Enter:
+            case treeDataTypes.ArrowUp:
+            case treeDataTypes.ArrowDown:
+            case treeDataTypes.ArrowLeft:
+            case treeDataTypes.ArrowRight:
+                return requestTreeResponse({
+                    event,
+                    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,
+                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 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
+    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);
+        }
+    });
+    return {
+        value,
+        open,
+        subtreeRef,
+        actionsRef: useMergedRefs(actionsRef, handleActionsRef),
+        expandIconRef,
+        layoutRef,
+        itemType,
+        isActionsVisible,
+        isAsideVisible,
+        level,
+        components: {
+            root: 'div'
+        },
+        root: getNativeElementProps(as, {
+            tabIndex: -1,
+            ...rest,
+            ref,
+            role: 'treeitem',
+            'aria-level': level,
+            [dataTreeItemValueAttrName]: value,
+            'aria-expanded': itemType === 'branch' ? open : undefined,
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            onMouseOver: handleActionsVisible,
+            onFocus: handleActionsVisible,
+            onMouseOut: handleActionsInvisible,
+            onBlur: handleActionsInvisible
+        })
+    };
+}

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

package/lib/components/TreeItem/useTreeItemContextValues.js

@@ -1,18 +1,20 @@
-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 , isActionsVisible , isAsideVisible , actionsRef , itemType , layoutRef , subtreeRef , expandIconRef , open  } = state;
+    /**
+   * This context is created with "@fluentui/react-context-selector",
+   * there is no sense to memoize it
+   */ const treeItem = {
+        isActionsVisible,
+        isAsideVisible,
+        value,
+        actionsRef,
+        itemType,
+        layoutRef,
+        subtreeRef,
+        expandIconRef,
+        open
+    };
+    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/packages/react-components/react-tree/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAK9B,OAAM,SAAUC,iCAAiCA,CAC/CC,KAA6D;EAE7D,MAAM;IAAEC,UAAU;IAAEC;EAAgB,CAAE,GAAGF,KAAK;EAE9C,MAAMG,QAAQ,GAAGL,KAAK,CAACM,OAAO,CAAuB,OAAO;IAAEF;EAAgB,CAAE,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EACtG,MAAMG,MAAM,GAAGP,KAAK,CAACM,OAAO,CAAqB,OAAO;IAAEE,IAAI,EAAEL;EAAU,CAAE,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAE5F,OAAO;IAAEE,QAAQ;IAAEE;EAAM,CAAE;AAC7B"}
+{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValue } from '../../contexts';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\n\nexport function useTreeItemContextValues_unstable(\n  state: Pick<TreeItemState, keyof TreeItemContextValue>,\n): TreeItemContextValues {\n  const { value, isActionsVisible, isAsideVisible, actionsRef, itemType, layoutRef, subtreeRef, expandIconRef, open } =\n    state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    isActionsVisible,\n    isAsideVisible,\n    value,\n    actionsRef,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    expandIconRef,\n    open,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","isActionsVisible","isAsideVisible","actionsRef","itemType","layoutRef","subtreeRef","expandIconRef","open","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCACdC,KAAsD,EAC/B;IACvB,MAAM,EAAEC,MAAK,EAAEC,iBAAgB,EAAEC,eAAc,EAAEC,WAAU,EAAEC,SAAQ,EAAEC,UAAS,EAAEC,WAAU,EAAEC,cAAa,EAAEC,KAAI,EAAE,GACjHT;IAEF;;;GAGC,GACD,MAAMU,WAAiC;QACrCR;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAS;AACpB,CAAC"}

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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;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

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","createFocusOutlineStyle","treeItemLevelToken","treeItemClassNames","root","useRootStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","base","qhf8xq","Bceei9c","mc9l5x","Beiy3e4","B7ck84d","De3pzq","sj55zd","z189sj","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","d","f","i","useTreeItemStyles_unstable","state","rootStyles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useRootStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ])),\n    base: {\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    },\n    focusIndicator: createFocusOutlineStyle()\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const { level  } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], rootStyles.base, rootStyles.focusIndicator, state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGP,QAAA;EAAAQ,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;EAAAU,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGzD,aAAa,CAAC,CAAC;EAClC,MAAM;IAAE0D;EAAO,CAAC,GAAGF,KAAK;EACxBA,KAAK,CAACzD,IAAI,CAAC4D,SAAS,GAAGjE,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE6D,wBAAwB,CAACF,KAAK,CAAC,IAAID,UAAU,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAED,UAAU,CAAC7C,IAAI,EAAE6C,UAAU,CAACpC,cAAc,EAAEmC,KAAK,CAACzD,IAAI,CAAC4D,SAAS,CAAC;EAC9L,OAAOH,KAAK;AAChB,CAAC;AACD,SAASI,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}

package/lib/components/TreeItemChevron.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { ChevronRight12Regular } from '@fluentui/react-icons';
+import { useTreeItemContext_unstable } from '../contexts/treeItemContext';
+export const TreeItemChevron = /*#__PURE__*/ React.memo(()=>{
+    const open = useTreeItemContext_unstable((ctx)=>ctx.open);
+    const { dir  } = useFluent_unstable();
+    const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
+    return /*#__PURE__*/ React.createElement(ChevronRight12Regular, {
+        style: expandIconInlineStyles[expandIconRotation]
+    });
+});
+TreeItemChevron.displayName = 'TreeItemChevron';
+const expandIconInlineStyles = {
+    90: {
+        transform: `rotate(90deg)`
+    },
+    0: {
+        transform: `rotate(0deg)`
+    },
+    180: {
+        transform: `rotate(180deg)`
+    }
+};

package/lib/components/TreeItemChevron.js.map

@@ -0,0 +1 @@
+{"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":["React","useFluent_unstable","ChevronRight12Regular","useTreeItemContext_unstable","TreeItemChevron","memo","open","ctx","dir","expandIconRotation","style","expandIconInlineStyles","displayName","transform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E,OAAO,MAAMC,gCAAkBJ,MAAMK,IAAI,CAAC,IAAM;IAC9C,MAAMC,OAAOH,4BAA4BI,CAAAA,MAAOA,IAAID,IAAI;IAExD,MAAM,EAAEE,IAAG,EAAE,GAAGP;IAEhB,MAAMQ,qBAAqBH,OAAO,KAAKE,QAAQ,QAAQ,IAAI,GAAG;IAC9D,qBAAO,oBAACN;QAAsBQ,OAAOC,sBAAsB,CAACF,mBAAmB;;AACjF,GAAG;AACHL,gBAAgBQ,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"}