@fluentui/react-tree 9.0.0-beta.12 → 9.0.0-beta.13

package/lib/components/TreeItem/useTreeItem.js

@@ -1,11 +1,6 @@
 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';
@@ -19,83 +14,33 @@ import { treeDataTypes } from '../../utils/tokens';
  * @param ref - reference to root HTMLElement of TreeItem
  */
 export function useTreeItem_unstable(props, ref) {
-  const [children, subtreeChildren] = React.Children.toArray(props.children);
   const contextLevel = useTreeContext_unstable(ctx => ctx.level);
   const id = useId('fui-TreeItem-', props.id);
   const {
-    content,
-    subtree,
-    expandIcon,
-    leaf: isLeaf = subtreeChildren === undefined,
-    actions,
-    as = 'div',
     onClick,
     onKeyDown,
-    ['aria-level']: level = contextLevel,
+    as = 'div',
     value = id,
+    itemType = 'leaf',
+    'aria-level': level = contextLevel,
     ...rest
   } = props;
-  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);
-  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);
-  const isBranch = !isLeaf;
-  const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(value));
-  const {
-    dir,
-    targetDocument
-  } = useFluent_unstable();
-  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
+  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 handleArrowRight = event => {
-    if (!open && isBranch) {
-      return requestOpenChange({
-        event,
-        value,
-        open: true,
-        type: treeDataTypes.arrowRight,
-        target: event.currentTarget
-      });
-    }
-    if (open && isBranch) {
-      return requestNavigation({
-        event,
-        value,
-        type: treeDataTypes.arrowRight,
-        target: event.currentTarget
-      });
-    }
-  };
-  const handleArrowLeft = event => {
-    if (open && isBranch) {
-      return requestOpenChange({
-        event,
-        value,
-        open: false,
-        type: treeDataTypes.arrowLeft,
-        target: event.currentTarget
-      });
-    }
-    if (!open && level > 1) {
-      return requestNavigation({
-        event,
-        value,
-        target: event.currentTarget,
-        type: treeDataTypes.arrowLeft
-      });
-    }
-  };
-  const handleEnter = event => {
-    requestOpenChange({
-      event,
-      value,
-      open: isLeaf ? open : !open,
-      type: treeDataTypes.enter,
-      target: event.currentTarget
-    });
-  };
   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;
@@ -105,158 +50,90 @@ export function useTreeItem_unstable(props, ref) {
       return;
     }
     const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
-    requestOpenChange({
-      event,
-      value,
-      open: isLeaf ? open : !open,
-      type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,
-      target: event.currentTarget
-    });
-    requestNavigation({
+    requestTreeResponse({
       event,
+      itemType,
       value,
-      target: event.currentTarget,
-      type: treeDataTypes.click
+      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click
     });
   });
   const handleKeyDown = useEventCallback(event => {
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    if (event.currentTarget !== event.target) {
+    if (event.isDefaultPrevented()) {
       return;
     }
-    if (event.isDefaultPrevented()) {
+    if (event.currentTarget !== event.target) {
       return;
     }
     switch (event.key) {
-      case Enter:
-        return handleEnter(event);
-      case ArrowRight:
-        return handleArrowRight(event);
-      case ArrowLeft:
-        return handleArrowLeft(event);
-      case End:
-        return requestNavigation({
-          event,
-          value,
-          type: treeDataTypes.end,
-          target: event.currentTarget
-        });
-      case Home:
-        return requestNavigation({
-          event,
-          value,
-          type: treeDataTypes.home,
-          target: event.currentTarget
-        });
-      case ArrowUp:
-        return requestNavigation({
-          event,
-          value,
-          type: treeDataTypes.arrowUp,
-          target: event.currentTarget
-        });
-      case ArrowDown:
-        return requestNavigation({
+      case treeDataTypes.End:
+      case treeDataTypes.Home:
+      case treeDataTypes.Enter:
+      case treeDataTypes.ArrowUp:
+      case treeDataTypes.ArrowDown:
+      case treeDataTypes.ArrowLeft:
+      case treeDataTypes.ArrowRight:
+        return requestTreeResponse({
           event,
+          itemType,
           value,
-          type: treeDataTypes.arrowDown,
-          target: event.currentTarget
+          type: event.key
         });
     }
     const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
     if (isTypeAheadCharacter) {
-      return requestNavigation({
+      requestTreeResponse({
         event,
+        itemType,
         value,
-        target: event.currentTarget,
-        type: treeDataTypes.typeAhead
+        type: treeDataTypes.TypeAhead
       });
     }
   });
-  const [isActionsVisible, setActionsVisible] = React.useState(false);
-  const showActions = useEventCallback(event => {
-    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
-    if (!isEventFromSubtree) {
+  const handleActionsVisible = useEventCallback(event => {
+    const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
+    if (!isTargetFromSubtree) {
       setActionsVisible(true);
     }
   });
-  const hideActions = useEventCallback(event => {
-    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
-    if (!isEventFromSubtree) {
-      setActionsVisible(false);
+  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);
     }
-  });
-  // 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);
-      };
+    if (!isTargetFromSubtree) {
+      return setActionsVisible(false);
     }
-  }, [targetDocument]);
+  });
   return {
-    isLeaf,
+    value,
     open,
+    subtreeRef,
+    actionsRef: useMergedRefs(actionsRef, handleActionsRef),
+    expandIconRef,
+    layoutRef,
+    itemType,
+    isActionsVisible,
+    isAsideVisible,
     level,
-    buttonSize: 'small',
-    isActionsVisible: actions ? isActionsVisible : false,
     components: {
-      content: 'div',
-      root: 'div',
-      expandIcon: 'span',
-      actions: 'span',
-      subtree: 'span'
+      root: 'div'
     },
-    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,
+      'aria-expanded': itemType === 'branch' ? 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)
-      }
+      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","id","content","subtree","expandIcon","leaf","isLeaf","undefined","actions","as","onClick","onKeyDown","value","rest","requestOpenChange","requestNavigation","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 function useTreeItem_unstable<Value = string>(\n  props: TreeItemProps<Value>,\n  ref: React.Ref<HTMLDivElement>,\n): TreeItemState {\n  const [children, subtreeChildren] = React.Children.toArray(props.children);\n\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const id = useId('fui-TreeItem-', props.id);\n\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    value = id,\n    ...rest\n  } = props;\n\n  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n\n  const isBranch = !isLeaf;\n\n  const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(value));\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({\n        event,\n        value,\n        open: true,\n        type: treeDataTypes.arrowRight,\n        target: event.currentTarget,\n      });\n    }\n    if (open && isBranch) {\n      return requestNavigation({ event, value, type: treeDataTypes.arrowRight, target: event.currentTarget });\n    }\n  };\n  const handleArrowLeft = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (open && isBranch) {\n      return requestOpenChange({\n        event,\n        value,\n        open: false,\n        type: treeDataTypes.arrowLeft,\n        target: event.currentTarget,\n      });\n    }\n    if (!open && level > 1) {\n      return requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.arrowLeft });\n    }\n  };\n  const handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    requestOpenChange({\n      event,\n      value,\n      open: isLeaf ? open : !open,\n      type: treeDataTypes.enter,\n      target: event.currentTarget,\n    });\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      value,\n      open: isLeaf ? open : !open,\n      type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,\n      target: event.currentTarget,\n    });\n    requestNavigation({ event, value, 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, value, type: treeDataTypes.end, target: event.currentTarget });\n      case Home:\n        return requestNavigation({ event, value, type: treeDataTypes.home, target: event.currentTarget });\n      case ArrowUp:\n        return requestNavigation({ event, value, type: treeDataTypes.arrowUp, target: event.currentTarget });\n      case ArrowDown:\n        return requestNavigation({ event, value, 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, value, 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,"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","treeDataTypes","useTreeItem_unstable","props","ref","contextLevel","ctx","level","id","onClick","onKeyDown","as","value","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","undefined","role","onMouseOver","onFocus","onMouseOut","onBlur"],"sources":["../../../src/components/TreeItem/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';\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<Value = string>(\n  props: TreeItemProps<Value>,\n  ref: React.Ref<HTMLDivElement>,\n): TreeItemState {\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const id = useId('fui-TreeItem-', props.id);\n\n  const {\n    onClick,\n    onKeyDown,\n    as = 'div',\n    value = id,\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    ...rest\n  } = 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, itemType, value, 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, itemType, value, 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      id,\n      ref,\n      'aria-level': level,\n      'aria-expanded': itemType === 'branch' ? open : undefined,\n      role: 'treeitem',\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: handleActionsVisible,\n      onFocus: handleActionsVisible,\n      onMouseOut: handleActionsInvisible,\n      onBlur: handleActionsInvisible,\n    }),\n  };\n}\n"],"mappings":"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"}

package/lib/components/TreeItem/useTreeItemContextValues.js

@@ -1,18 +1,32 @@
-import * as React from 'react';
 export function useTreeItemContextValues_unstable(state) {
   const {
-    buttonSize,
-    isActionsVisible
+    value,
+    isActionsVisible,
+    isAsideVisible,
+    actionsRef,
+    itemType,
+    layoutRef,
+    subtreeRef,
+    expandIconRef,
+    open
   } = state;
-  const treeItem = React.useMemo(() => ({
-    isActionsVisible
-  }), [isActionsVisible]);
-  const button = React.useMemo(() => ({
-    size: buttonSize
-  }), [buttonSize]);
+  /**
+  * 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,
-    button
+    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,"names":["useTreeItemContextValues_unstable","state","value","isActionsVisible","isAsideVisible","actionsRef","itemType","layoutRef","subtreeRef","expandIconRef","open","treeItem"],"sources":["../../../src/components/TreeItem/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"],"mappings":"AAGA,OAAO,SAASA,kCACdC,KAAsD,EAC/B;EACvB,MAAM;IAAEC,KAAA;IAAOC,gBAAA;IAAkBC,cAAA;IAAgBC,UAAA;IAAYC,QAAA;IAAUC,SAAA;IAAWC,UAAA;IAAYC,aAAA;IAAeC;EAAI,CAAE,GACjHT,KAAA;EAEF;;;;EAIA,MAAMU,QAAA,GAAiC;IACrCR,gBAAA;IACAC,cAAA;IACAF,KAAA;IACAG,UAAA;IACAC,QAAA;IACAC,SAAA;IACAC,UAAA;IACAC,aAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAS;AACpB"}

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

@@ -0,0 +1,102 @@
+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: "f13qh94s",
+    B7ck84d: "f1ewtqcl",
+    wkccdc: "ffh4ag3",
+    Budl1dq: "f1y1g942",
+    zoa1oz: "faz22wj",
+    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: "fdiulkx",
+    Bjwuhne: "f1yalx80",
+    Ghsupd: ["fq22d5a", "f1jw7pan"],
+    Bule8hv: ["f1jw7pan", "fq22d5a"]
+  }
+}, {
+  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;}", ".f13qh94s{display:grid;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffh4ag3{grid-template-rows:auto auto;}", ".f1y1g942{grid-template-columns:minmax(0, 100%) minmax(0px, min-content);}", ".faz22wj{grid-template-areas:\"layout  aside\" \"subtree subtree\";}", ".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);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}"],
+  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","B7ck84d","wkccdc","Budl1dq","zoa1oz","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","Bjwuhne","Ghsupd","Bule8hv","d","f","i","useTreeItemStyles_unstable","state","rootStyles","level","className","isStaticallyDefinedLevel"],"sources":["../../../src/components/TreeItem/useTreeItemStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n  root: 'fui-TreeItem',\n};\n\ntype StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useRootStyles = makeStyles({\n  ...(Object.fromEntries(\n    Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n      `level${(index + 1) as StaticLevel}`,\n      { [treeItemLevelToken]: index + 1 },\n    ]),\n  ) as Record<StaticLevelProperty, GriffelStyle>),\n  base: {\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'grid',\n    boxSizing: 'border-box',\n    gridTemplateRows: 'auto auto',\n    gridTemplateColumns: 'minmax(0, 100%) minmax(0px, min-content)',\n    gridTemplateAreas: `\n    \"layout  aside\"\n    \"subtree subtree\"\n    `,\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n  },\n  focusIndicator: createFocusOutlineStyle(),\n});\n\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n  const rootStyles = useRootStyles();\n\n  const { level } = state;\n\n  state.root.className = mergeClasses(\n    treeItemClassNames.root,\n    isStaticallyDefinedLevel(level) && rootStyles[`level${level}` as StaticLevelProperty],\n    rootStyles.base,\n    rootStyles.focusIndicator,\n    state.root.className,\n  );\n\n  return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n  return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,QAAA,EAAmCC,YAAY,QAAQ;AAGvD,SAASC,MAAM,QAAQ;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,kBAAkB,QAAQ;AAEnC,OAAO,MAAMC,kBAAA,GAAoD;EAC/DC,IAAA,EAAM;AACR;AAKA,MAAMC,aAAA,gBAAgBP,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,MAAA;IAAAC,OAAA;IAAAC,MAAA;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,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EAuBtB;AAEA;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAAwC;EACjF,MAAMC,UAAA,GAAa3D,aAAA;EAEnB,MAAM;IAAE4D;EAAK,CAAE,GAAGF,KAAA;EAElBA,KAAA,CAAM3D,IAAI,CAAC8D,SAAS,GAAGnE,YAAA,CACrBI,kBAAA,CAAmBC,IAAI,EACvB+D,wBAAA,CAAyBF,KAAA,KAAUD,UAAU,CAAE,QAAOC,KAAM,EAAC,CAAwB,EACrFD,UAAA,CAAW/C,IAAI,EACf+C,UAAA,CAAWpC,cAAc,EACzBmC,KAAA,CAAM3D,IAAI,CAAC8D,SAAS;EAGtB,OAAOH,KAAA;AACT;AAEA,SAASI,yBAAyBF,KAAa,EAAwB;EACrE,OAAOA,KAAA,IAAS,KAAKA,KAAA,IAAS;AAChC"}

package/lib/components/TreeItemAside/TreeItemAside.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useTreeItemAside_unstable } from './useTreeItemAside';
+import { renderTreeItemAside_unstable } from './renderTreeItemAside';
+import { useTreeItemAsideStyles_unstable } from './useTreeItemAsideStyles.styles';
+/**
+ * TreeItemAside component - represents a custom set of actionable elements that will be visible when a certain
+ * `TreeItem` is currently "active".
+ */
+export const TreeItemAside = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTreeItemAside_unstable(props, ref);
+  useTreeItemAsideStyles_unstable(state);
+  return renderTreeItemAside_unstable(state);
+});
+TreeItemAside.displayName = 'TreeItemAside';
+//# sourceMappingURL=TreeItemAside.js.map

package/lib/components/TreeItemAside/TreeItemAside.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useTreeItemAside_unstable","renderTreeItemAside_unstable","useTreeItemAsideStyles_unstable","TreeItemAside","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TreeItemAside/TreeItemAside.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemAside_unstable } from './useTreeItemAside';\nimport { renderTreeItemAside_unstable } from './renderTreeItemAside';\nimport { useTreeItemAsideStyles_unstable } from './useTreeItemAsideStyles.styles';\nimport type { TreeItemAsideProps } from './TreeItemAside.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TreeItemAside component - represents a custom set of actionable elements that will be visible when a certain\n * `TreeItem` is currently \"active\".\n */\nexport const TreeItemAside: ForwardRefComponent<TreeItemAsideProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemAside_unstable(props, ref);\n\n  useTreeItemAsideStyles_unstable(state);\n  return renderTreeItemAside_unstable(state);\n});\n\nTreeItemAside.displayName = 'TreeItemAside';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAIhD;;;;AAIA,OAAO,MAAMC,aAAA,gBAAyDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQP,yBAAA,CAA0BK,KAAA,EAAOC,GAAA;EAE/CJ,+BAAA,CAAgCK,KAAA;EAChC,OAAON,4BAAA,CAA6BM,KAAA;AACtC;AAEAJ,aAAA,CAAcK,WAAW,GAAG"}

package/lib/components/TreeItemAside/TreeItemAside.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TreeItemAside.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/TreeItemAside/TreeItemAside.types.ts"],"sourcesContent":["import { ButtonContextValue } from '@fluentui/react-button';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TreeItemAsideSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TreeItemAside Props\n */\nexport type TreeItemAsideProps = ComponentProps<TreeItemAsideSlots> & {\n  /**\n   * boolean indicating if the aside content should behave as \"actions\"\n   *\n   * actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   */\n  actions?: boolean;\n  /**\n   * Forces visibility of the aside content, even if they're actions\n   */\n  visible?: true;\n};\n\n/**\n * State used in rendering TreeItemAside\n */\nexport type TreeItemAsideState = ComponentState<TreeItemAsideSlots> & {\n  actions: boolean;\n  visible: boolean;\n  buttonContextValue: ButtonContextValue;\n};\n"],"mappings":"AAAA"}

package/lib/components/TreeItemAside/index.js

@@ -0,0 +1,6 @@
+export * from './TreeItemAside';
+export * from './TreeItemAside.types';
+export * from './renderTreeItemAside';
+export * from './useTreeItemAside';
+export * from './useTreeItemAsideStyles.styles';
+//# sourceMappingURL=index.js.map

package/lib/components/TreeItemAside/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/TreeItemAside/index.ts"],"sourcesContent":["export * from './TreeItemAside';\nexport * from './TreeItemAside.types';\nexport * from './renderTreeItemAside';\nexport * from './useTreeItemAside';\nexport * from './useTreeItemAsideStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TreeItemAside/renderTreeItemAside.js

@@ -0,0 +1,19 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+import { ButtonContextProvider } from '@fluentui/react-button';
+/**
+ * Render the final JSX of TreeItemAside
+ */
+export const renderTreeItemAside_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlotsNext(state);
+  if (!state.visible) {
+    return null;
+  }
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(ButtonContextProvider, {
+    value: state.buttonContextValue
+  }, slotProps.root.children));
+};
+//# sourceMappingURL=renderTreeItemAside.js.map

package/lib/components/TreeItemAside/renderTreeItemAside.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemAside_unstable","state","slots","slotProps","visible","root","value","buttonContextValue","children"],"sources":["../../../src/components/TreeItemAside/renderTreeItemAside.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ButtonContextProvider } from '@fluentui/react-button';\nimport type { TreeItemAsideState, TreeItemAsideSlots } from './TreeItemAside.types';\n\n/**\n * Render the final JSX of TreeItemAside\n */\nexport const renderTreeItemAside_unstable = (state: TreeItemAsideState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemAsideSlots>(state);\n\n  if (!state.visible) {\n    return null;\n  }\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ButtonContextProvider value={state.buttonContextValue}>{slotProps.root.children}</ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,qBAAqB,QAAQ;AAGtC;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA8B;EACzE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGL,YAAA,CAAiCG,KAAA;EAE9D,IAAI,CAACA,KAAA,CAAMG,OAAO,EAAE;IAClB,OAAO,IAAI;EACb;EAEA,oBACEP,aAlBJ,CAkBKK,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BR,aAnBN,CAmBOE,qBAAA;IAAsBO,KAAA,EAAOL,KAAA,CAAMM;KAAqBJ,SAAA,CAAUE,IAAI,CAACG,QAAQ;AAGtF"}