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

package/lib/components/Tree/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { TreeItemRequest } from '../../contexts/index';\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useRootTree<Value = string>(props: TreeProps<Value>, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, updateOpenItems] = useOpenItemsState(props);\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = (data: TreeOpenChangeData<Value>) => {\n    props.onOpenChange?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return updateOpenItems(data);\n  };\n\n  const requestNavigation = (data: TreeNavigationData_unstable<Value>) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const handleTreeItemClick = ({\n    event,\n    value,\n    itemType,\n    type,\n  }: Extract<TreeItemRequest<Value>, { type: 'Click' | 'ExpandIconClick' }>) => {\n    ReactDOM.unstable_batchedUpdates(() => {\n      requestOpenChange({\n        event,\n        value,\n        open: itemType === 'branch' && !openItems.has(value),\n        type,\n        target: event.currentTarget,\n      });\n      requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.Click });\n    });\n  };\n\n  const handleTreeItemKeyDown = ({\n    event,\n    value,\n    type,\n    itemType,\n  }: Exclude<TreeItemRequest<Value>, { type: 'Click' | 'ExpandIconClick' }>) => {\n    const open = openItems.has(value);\n    switch (type) {\n      case treeDataTypes.ArrowRight:\n        if (itemType === 'leaf') {\n          return;\n        }\n        if (!open) {\n          return requestOpenChange({\n            event,\n            value,\n            open: true,\n            type: treeDataTypes.ArrowRight,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n      case treeDataTypes.Enter:\n        return requestOpenChange({\n          event,\n          value,\n          open: itemType === 'branch' && !open,\n          type: treeDataTypes.Enter,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft:\n        if (open && itemType === 'branch') {\n          return requestOpenChange({\n            event,\n            value,\n            open: false,\n            type: treeDataTypes.ArrowLeft,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.ArrowLeft });\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest<Value>) => {\n    switch (request.event.type) {\n      case 'click':\n        // casting is required here as we're narrowing down the event to only click events\n        return handleTreeItemClick(request as Extract<TreeItemRequest<Value>, { type: 'Click' | 'ExpandIconClick' }>);\n      case 'keydown':\n        // casting is required here as we're narrowing down the event to only keyboard events\n        return handleTreeItemKeyDown(request as Exclude<TreeItemRequest<Value>, { type: 'Click' | 'ExpandIconClick' }>);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useEventCallback","useMergedRefs","useNestedTreeNavigation","useOpenItemsState","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","openItems","updateOpenItems","navigate","navigationRef","requestOpenChange","data","onOpenChange","event","isDefaultPrevented","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","handleTreeItemClick","value","itemType","unstable_batchedUpdates","open","has","target","currentTarget","Click","handleTreeItemKeyDown","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","requestTreeResponse","request","components","root","level","role","process","env","NODE_ENV","console","warn"],"mappings":"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"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { TreeItemRequest } from '../../contexts/index';\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, updateOpenItems] = useOpenItemsState(props);\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    props.onOpenChange?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return updateOpenItems(data);\n  };\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const handleTreeItemClick = ({\n    event,\n    value,\n    itemType,\n    type,\n  }: Extract<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>) => {\n    ReactDOM.unstable_batchedUpdates(() => {\n      requestOpenChange({\n        event,\n        value,\n        open: itemType === 'branch' && !openItems.has(value),\n        type,\n        target: event.currentTarget,\n      });\n      requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.Click });\n    });\n  };\n\n  const handleTreeItemKeyDown = ({\n    event,\n    type,\n    value,\n    itemType,\n  }: Exclude<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>) => {\n    const open = openItems.has(value);\n    switch (type) {\n      case treeDataTypes.ArrowRight:\n        if (itemType === 'leaf') {\n          return;\n        }\n        if (!open) {\n          return requestOpenChange({\n            event,\n            value,\n            open: true,\n            type: treeDataTypes.ArrowRight,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n      case treeDataTypes.Enter:\n        return requestOpenChange({\n          event,\n          value,\n          open: itemType === 'branch' && !open,\n          type: treeDataTypes.Enter,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft:\n        if (open && itemType === 'branch') {\n          return requestOpenChange({\n            event,\n            value,\n            open: false,\n            type: treeDataTypes.ArrowLeft,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.ArrowLeft });\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.event.type) {\n      case 'click':\n        // casting is required here as we're narrowing down the event to only click events\n        return handleTreeItemClick(request as Extract<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>);\n      case 'keydown':\n        // casting is required here as we're narrowing down the event to only keyboard events\n        return handleTreeItemKeyDown(request as Exclude<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useEventCallback","useMergedRefs","useNestedTreeNavigation","useOpenItemsState","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","openItems","updateOpenItems","navigate","navigationRef","requestOpenChange","data","onOpenChange","event","isDefaultPrevented","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","handleTreeItemClick","value","itemType","unstable_batchedUpdates","open","has","target","currentTarget","Click","handleTreeItemKeyDown","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","requestTreeResponse","request","components","root","level","role","process","env","NODE_ENV","console","warn"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n}) as ForwardRefComponent<TreeItemProps> & (<Value = string>(props: TreeItemProps<Value>) => JSX.Element);\n\nTreeItem.displayName = 'TreeItem';\n"],"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAE/E;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,yBAAWL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACvD,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAC3B,MAAMC,gBAAgBN,kCAAkCK;IACxD,OAAOP,wBAAwBO,OAAOC;AACxC,GAA0G;AAE1GL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAE/E;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAC3B,MAAMC,gBAAgBN,kCAAkCK;IACxD,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemContextValues = { treeItem: TreeItemContextValue };\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps<Value = string> = ComponentProps<Partial<TreeItemSlots>> & {\n  value?: Value;\n  itemType: TreeItemType;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n  TreeItemContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = { treeItem: TreeItemContextValue };\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  itemType: TreeItemType;\n  value?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n  TreeItemContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}

package/lib/components/TreeItem/useTreeItem.js

@@ -4,6 +4,7 @@ import { useEventCallback } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
 import { useTreeContext_unstable } from '../../contexts/index';
 import { treeDataTypes } from '../../utils/tokens';
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 /**
  * Create the state required to render TreeItem.
  *
@@ -13,9 +14,10 @@ import { treeDataTypes } from '../../utils/tokens';
  * @param props - props from this instance of TreeItem
  * @param ref - reference to root HTMLElement of TreeItem
  */ export function useTreeItem_unstable(props, ref) {
+    var _props_value;
     const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
-    const id = useId('fui-TreeItem-', props.id);
-    const { onClick , onKeyDown , as ='div' , value =id , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
+    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);
@@ -66,8 +68,8 @@ import { treeDataTypes } from '../../utils/tokens';
             case treeDataTypes.ArrowRight:
                 return requestTreeResponse({
                     event,
-                    itemType,
                     value,
+                    itemType,
                     type: event.key
                 });
         }
@@ -75,8 +77,8 @@ import { treeDataTypes } from '../../utils/tokens';
         if (isTypeAheadCharacter) {
             requestTreeResponse({
                 event,
-                itemType,
                 value,
+                itemType,
                 type: treeDataTypes.TypeAhead
             });
         }
@@ -114,11 +116,11 @@ import { treeDataTypes } from '../../utils/tokens';
         root: getNativeElementProps(as, {
             tabIndex: -1,
             ...rest,
-            id,
             ref,
+            role: 'treeitem',
             'aria-level': level,
+            [dataTreeItemValueAttrName]: value,
             'aria-expanded': itemType === 'branch' ? open : undefined,
-            role: 'treeitem',
             onClick: handleClick,
             onKeyDown: handleKeyDown,
             onMouseOver: handleActionsVisible,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\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"],"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"],"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/useTreeItemStyles.styles.js

@@ -39,11 +39,9 @@ const useRootStyles = /*#__PURE__*/__styles({
   base: {
     qhf8xq: "f10pi13n",
     Bceei9c: "f1k6fduh",
-    mc9l5x: "f13qh94s",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
     B7ck84d: "f1ewtqcl",
-    wkccdc: "ffh4ag3",
-    Budl1dq: "f1y1g942",
-    zoa1oz: "faz22wj",
     De3pzq: "fhovq9v",
     sj55zd: "fkfq4zb",
     z189sj: ["flk2ux3", "fkl3uby"]
@@ -81,7 +79,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     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;}", ".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);}", ".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);}"],
+  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;}"]
 });

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

@@ -1 +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","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: '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 * 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,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,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAyBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAG3D,aAAa,CAAC,CAAC;EAClC,MAAM;IAAE4D;EAAO,CAAC,GAAGF,KAAK;EACxBA,KAAK,CAAC3D,IAAI,CAAC8D,SAAS,GAAGnE,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE+D,wBAAwB,CAACF,KAAK,CAAC,IAAID,UAAU,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAED,UAAU,CAAC/C,IAAI,EAAE+C,UAAU,CAACpC,cAAc,EAAEmC,KAAK,CAAC3D,IAAI,CAAC8D,SAAS,CAAC;EAC9L,OAAOH,KAAK;AAChB,CAAC;AACD,SAASI,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}
+{"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/TreeItemLayout/TreeItemLayout.types.js.map

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

package/lib/components/TreeItemLayout/renderTreeItemLayout.js

@@ -1,8 +1,11 @@
 /** @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 TreeItemLayout
  */ export const renderTreeItemLayout_unstable = (state)=>{
     const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter));
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ createElement(ButtonContextProvider, {
+        value: state.buttonContextValue
+    }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      {slotProps.root.children}\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","iconBefore","children","iconAfter"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAkCE;IAC/D,qBACE,AAZJ,cAYKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAb3B,cAa4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,UAAU,kBAAI,AAd3B,cAc4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU,GAC9DH,UAAUC,IAAI,CAACG,QAAQ,EACvBL,MAAMM,SAAS,kBAAI,AAhB1B,cAgB2BN,MAAMM,SAAS,EAAKL,UAAUK,SAAS;AAGlE,EAAE"}
+{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      {slotProps.root.children}\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","iconBefore","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAkCG;IAE/D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAf3B,cAe4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,UAAU,kBAAI,AAhB3B,cAgB4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU,GAC9DH,UAAUC,IAAI,CAACG,QAAQ,EACvBL,MAAMM,SAAS,kBAAI,AAlB1B,cAkB2BN,MAAMM,SAAS,EAAKL,UAAUK,SAAS,iBAC5D,AAnBN,cAmBOT;QAAsBU,OAAOR,MAAMS,kBAAkB;OACnDR,MAAMS,OAAO,kBAAI,AApB1B,cAoB2BT,MAAMS,OAAO,EAAKR,UAAUQ,OAAO,GACrDT,MAAMU,KAAK,kBAAI,AArBxB,cAqByBV,MAAMU,KAAK,EAAKT,UAAUS,KAAK;AAIxD,EAAE"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -11,16 +11,26 @@ import { TreeItemChevron } from '../TreeItemChevron';
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
-    const { iconAfter , iconBefore , expandIcon , as ='span'  } = props;
+    const { iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
     const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
+    const isActionsVisibleContext = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible);
+    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);
+    var _ref;
+    const isActionsVisible = (_ref = isResolvedShorthand(actions) ? actions.visible : undefined) !== null && _ref !== void 0 ? _ref : isActionsVisibleContext;
     const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');
+    const actionsRef = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, useTreeItemContext_unstable((ctx)=>ctx.actionsRef));
     return {
         components: {
             root: 'div',
             expandIcon: 'div',
             iconBefore: 'div',
-            iconAfter: 'div'
+            iconAfter: 'div',
+            actions: 'div',
+            aside: 'div'
+        },
+        buttonContextValue: {
+            size: 'small'
         },
         root: getNativeElementProps(as, {
             ...props,
@@ -36,6 +46,16 @@ import { TreeItemChevron } from '../TreeItemChevron';
                 'aria-hidden': true
             }
         }),
+        aside: isAsideVisible ? resolveShorthand(aside) : undefined,
+        actions: isActionsVisible ? resolveShorthand(// visible props should not be propagated to the DOM
+        isResolvedShorthand(actions) ? {
+            ...actions,
+            visible: undefined
+        } : actions, {
+            defaultProps: {
+                ref: actionsRef
+            }
+        }) : undefined,
         expandIcon: resolveShorthand(expandIcon, {
             required: isBranch,
             defaultProps: {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { iconAfter, iconBefore, expandIcon, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      iconAfter: 'div',\n    },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: <TreeItemChevron />,\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","layoutRef","ctx","expandIconRef","isBranch","itemType","components","root","defaultProps","required","children","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAExH,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAQ,qBAAqB;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,UAAS,EAAEC,WAAU,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAE,GAAGL;IAE3D,MAAMM,YAAYT,4BAA4BU,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBX,4BAA4BU,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,WAAWZ,4BAA4BU,CAAAA,MAAOA,IAAIG,QAAQ,KAAK;IAErE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNR,YAAY;YACZD,YAAY;YACZD,WAAW;QACb;QACAU,MAAMnB,sBAAsBY,IAAI;YAAE,GAAGL,KAAK;YAAEC,KAAKL,cAAcK,KAAKK;QAAW;QAC/EH,YAAYR,iBAAiBQ,YAAY;YAAEU,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFX,WAAWP,iBAAiBO,WAAW;YAAEW,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/ET,YAAYT,iBAAiBS,YAAY;YACvCU,UAAUL;YACVI,cAAc;gBACZE,wBAAU,oBAACjB;gBACX,eAAe,IAAI;gBACnBG,KAAKL,cAAcF,oBAAoBU,cAAcA,WAAWH,GAAG,GAAGe,SAAS,EAAER;YACnF;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getNativeElementProps,\n  isResolvedShorthand,\n  resolveShorthand,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { iconAfter, iconBefore, expandIcon, as = 'span', aside, actions } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const isActionsVisibleContext = useTreeItemContext_unstable(ctx => ctx.isActionsVisible);\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n  const isActionsVisible = (isResolvedShorthand(actions) ? actions.visible : undefined) ?? isActionsVisibleContext;\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n  const actionsRef = useMergedRefs(\n    isResolvedShorthand(actions) ? actions.ref : undefined,\n    useTreeItemContext_unstable(ctx => ctx.actionsRef),\n  );\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n    },\n    buttonContextValue: { size: 'small' },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: isAsideVisible ? resolveShorthand(aside) : undefined,\n    actions: isActionsVisible\n      ? resolveShorthand<ExtractSlotProps<TreeItemLayoutSlots['actions']>>(\n          // visible props should not be propagated to the DOM\n          isResolvedShorthand(actions) ? { ...actions, visible: undefined } : actions,\n          {\n            defaultProps: { ref: actionsRef },\n          },\n        )\n      : undefined,\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: <TreeItemChevron />,\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","aside","actions","layoutRef","ctx","expandIconRef","isActionsVisibleContext","isActionsVisible","isAsideVisible","visible","undefined","isBranch","itemType","actionsRef","components","root","buttonContextValue","size","defaultProps","required","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAEEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAQ,qBAAqB;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,UAAS,EAAEC,WAAU,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAEC,MAAK,EAAEC,QAAO,EAAE,GAAGP;IAE3E,MAAMQ,YAAYX,4BAA4BY,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBb,4BAA4BY,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,0BAA0Bd,4BAA4BY,CAAAA,MAAOA,IAAIG,gBAAgB;IACvF,MAAMC,iBAAiBhB,4BAA4BY,CAAAA,MAAOA,IAAII,cAAc;QAClDnB;IAA1B,MAAMkB,mBAAmB,CAAClB,OAAAA,oBAAoBa,WAAWA,QAAQO,OAAO,GAAGC,SAAS,cAA1DrB,kBAAAA,OAA+DiB,uBAAuB;IAChH,MAAMK,WAAWnB,4BAA4BY,CAAAA,MAAOA,IAAIQ,QAAQ,KAAK;IACrE,MAAMC,aAAatB,cACjBF,oBAAoBa,WAAWA,QAAQN,GAAG,GAAGc,SAAS,EACtDlB,4BAA4BY,CAAAA,MAAOA,IAAIS,UAAU;IAGnD,OAAO;QACLC,YAAY;YACVC,MAAM;YACNhB,YAAY;YACZD,YAAY;YACZD,WAAW;YACXK,SAAS;YACTD,OAAO;QACT;QACAe,oBAAoB;YAAEC,MAAM;QAAQ;QACpCF,MAAM3B,sBAAsBY,IAAI;YAAE,GAAGL,KAAK;YAAEC,KAAKL,cAAcK,KAAKO;QAAW;QAC/EL,YAAYR,iBAAiBQ,YAAY;YAAEoB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFrB,WAAWP,iBAAiBO,WAAW;YAAEqB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/EjB,OAAOO,iBAAiBlB,iBAAiBW,SAASS,SAAS;QAC3DR,SAASK,mBACLjB,iBACE,oDAAoD;QACpDD,oBAAoBa,WAAW;YAAE,GAAGA,OAAO;YAAEO,SAASC;QAAU,IAAIR,OAAO,EAC3E;YACEgB,cAAc;gBAAEtB,KAAKiB;YAAW;QAClC,KAEFH,SAAS;QACbX,YAAYT,iBAAiBS,YAAY;YACvCoB,UAAUR;YACVO,cAAc;gBACZE,wBAAU,oBAAC3B;gBACX,eAAe,IAAI;gBACnBG,KAAKL,cAAcF,oBAAoBU,cAAcA,WAAWH,GAAG,GAAGc,SAAS,EAAEL;YACnF;QACF;IACF;AACF,EAAE"}

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

@@ -5,9 +5,11 @@ import { treeItemLevelToken } from '../../utils/tokens';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
 export const treeItemLayoutClassNames = {
   root: 'fui-TreeItemLayout',
-  expandIcon: 'fui-TreeItemLayout__expandIcon',
   iconBefore: 'fui-TreeItemLayout__iconBefore',
-  iconAfter: 'fui-TreeItemLayout__iconAfter'
+  iconAfter: 'fui-TreeItemLayout__iconAfter',
+  expandIcon: 'fui-TreeItemLayout__expandIcon',
+  aside: 'fui-TreeItemLayout__aside',
+  actions: 'fui-TreeItemLayout__actions'
 };
 /**
  * Styles for the root slot
@@ -69,6 +71,66 @@ const useRootStyles = /*#__PURE__*/__styles({
   a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"],
   h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"]
 });
+/**
+ * Styles for the before/after icon slot
+ */
+const useIconStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    sj55zd: "fkfq4zb",
+    Bg96gwp: "f106mvju",
+    Be2twd7: "f1pp30po"
+  },
+  iconBefore: {},
+  iconAfter: {}
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
+});
+/**
+ * Styles for the action icon slot
+ */
+const useActionsStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Frg6f3: ["fcgxt0o", "f1ujusj6"],
+    qhf8xq: "f10pi13n",
+    Bj3rh1h: "f19g0ac",
+    Ijaq50: "fobksn0",
+    Br312pm: "fmy5l6f",
+    nk6f5a: "fzqypwc",
+    Bw0ie65: "f1tmftl3",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  }
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
+});
+/**
+ * Styles for the action icon slot
+ */
+const useAsideStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Frg6f3: ["fcgxt0o", "f1ujusj6"],
+    Bt984gj: "f122n59",
+    Bj3rh1h: "f11zp4z2",
+    Ijaq50: "fobksn0",
+    Br312pm: "fmy5l6f",
+    nk6f5a: "fzqypwc",
+    Bw0ie65: "f1tmftl3",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fw5db7e", "f1uw59to"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1uw59to", "fw5db7e"],
+    i8kkvl: "f1ufnopg",
+    Belr9w4: "f14sijuj"
+  }
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
+});
 /**
  * Styles for the expand icon slot
  */
@@ -91,22 +153,6 @@ const useExpandIconStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
 });
-/**
- * Styles for the before/after icon slot
- */
-const useIconStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bt984gj: "f122n59",
-    sj55zd: "fkfq4zb",
-    Bg96gwp: "f106mvju",
-    Be2twd7: "f1pp30po"
-  },
-  iconBefore: {},
-  iconAfter: {}
-}, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
-});
 /**
  * Apply styling to the TreeItemLayout slots based on the state
  */
@@ -114,25 +160,32 @@ export const useTreeItemLayoutStyles_unstable = state => {
   const {
     iconAfter,
     iconBefore,
-    expandIcon,
     root
   } = state;
   const rootStyles = useRootStyles();
   const iconStyles = useIconStyles();
+  const actionsStyles = useActionsStyles();
+  const asideStyles = useAsideStyles();
   const expandIconStyles = useExpandIconStyles();
   const size = useTreeContext_unstable(ctx => ctx.size);
   const appearance = useTreeContext_unstable(ctx => ctx.appearance);
   const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
   root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
-  if (expandIcon) {
-    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
-  }
   if (iconBefore) {
     iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);
   }
   if (iconAfter) {
     iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);
   }
+  if (state.actions) {
+    state.actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, state.actions.className);
+  }
+  if (state.aside) {
+    state.aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, state.aside.className);
+  }
+  if (state.expandIcon) {
+    state.expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
+  }
   return state;
 };
 //# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","expandIcon","iconBefore","iconAfter","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","i8kkvl","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","z8tnut","z189sj","Byoj8tv","useIconStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","iconStyles","expandIconStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    iconAfter: 'fui-TreeItemLayout__iconAfter'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '32px',\n        boxSizing: 'border-box',\n        ...shorthands.gridArea('layout'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemClassNames.expandIcon for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Pressed\n            }\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            // TODO: stop using treeItemClassNames.expandIcon  for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Hover\n            }\n        }\n    },\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    medium: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body1\n    },\n    small: {\n        columnGap: tokens.spacingHorizontalXS,\n        minHeight: '24px',\n        ...typographyStyles.caption1\n    },\n    // Appearance variations\n    subtle: {},\n    'subtle-alpha': {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: '24px',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.flex(0, 0, 'auto'),\n        ...shorthands.padding(tokens.spacingVerticalXS, 0)\n    }\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        color: tokens.colorNeutralForeground2,\n        lineHeight: tokens.lineHeightBase500,\n        fontSize: tokens.fontSizeBase500\n    },\n    iconBefore: {},\n    iconAfter: {}\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    const { iconAfter , iconBefore , expandIcon , root  } = state;\n    const rootStyles = useRootStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","iconAfter","expandIcon","aside","actions","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","i8kkvl","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useIconStyles","sj55zd","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","Bh6795r","Bnnss6s","xawz","useTreeItemLayoutStyles_unstable","state","rootStyles","iconStyles","actionsStyles","asideStyles","expandIconStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    iconAfter: 'fui-TreeItemLayout__iconAfter',\n    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    aside: 'fui-TreeItemLayout__aside',\n    actions: 'fui-TreeItemLayout__actions'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '32px',\n        boxSizing: 'border-box',\n        ...shorthands.gridArea('layout'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Pressed\n            }\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Hover\n            }\n        }\n    },\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    medium: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body1\n    },\n    small: {\n        columnGap: tokens.spacingHorizontalXS,\n        minHeight: '24px',\n        ...typographyStyles.caption1\n    },\n    // Appearance variations\n    subtle: {},\n    'subtle-alpha': {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    }\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        color: tokens.colorNeutralForeground2,\n        lineHeight: tokens.lineHeightBase500,\n        fontSize: tokens.fontSizeBase500\n    },\n    iconBefore: {},\n    iconAfter: {}\n});\n/**\n * Styles for the action icon slot\n */ const useActionsStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useAsideStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: '24px',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.flex(0, 0, 'auto'),\n        ...shorthands.padding(tokens.spacingVerticalXS, 0)\n    }\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    const { iconAfter , iconBefore , root  } = state;\n    const rootStyles = useRootStyles();\n    const iconStyles = useIconStyles();\n    const actionsStyles = useActionsStyles();\n    const asideStyles = useAsideStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Main text. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description?: Slot<'div'>;\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  content: NonNullable<Slot<'div'>>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n  avatarSize: AvatarSize;\n};\n"],"names":[],"mappings":"AAAA,WA0CE"}
+{"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon'> & {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Main text. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n  avatarSize: AvatarSize;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAoCE"}

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js

@@ -1,11 +1,14 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { AvatarContextProvider } from '@fluentui/react-avatar';
+import { ButtonContextProvider } from '@fluentui/react-button';
 /**
  * Render the final JSX of TreeItemPersonaLayout
  */ export const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
     const { slots , slotProps  } = getSlotsNext(state);
     return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), /*#__PURE__*/ createElement(AvatarContextProvider, {
         value: contextValues.avatar
-    }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.content, slotProps.content, /*#__PURE__*/ createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description)));
+    }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), /*#__PURE__*/ createElement(ButtonContextProvider, {
+        value: state.buttonContextValue
+    }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));
 };

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

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