@fluentui/react-tree 9.13.1 → 9.14.1

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

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

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n    ':focus': {\n        outlineStyle: 'none'\n    },\n    ':focus-visible': {\n        outlineStyle: 'none'\n    },\n    // This adds the focus outline for the TreeItemLayout element\n    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusMedium,\n        outlineColor: tokens.colorStrokeFocus2,\n        outlineRadius: tokens.borderRadiusMedium,\n        // FIXME: tokens.strokeWidthThick causes some weird bugs\n        outlineWidth: '2px',\n        outlineStyle: 'solid'\n    }, {\n        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n    })\n});\nconst useStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const { level } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,wBAAwB,QAAQ,kDAAkD;AAC3F,SAASC,+BAA+B,QAAQ,gEAAgE;AAChH,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGV,aAAA,4rCA2BrB,CAAC;AACF,MAAMW,SAAS,gBAAGV,QAAA;EAAAW,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;AAAA;EAAAU,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEiB;EAAM,CAAC,GAAGH,KAAK;EACvBA,KAAK,CAAChB,IAAI,CAACoB,SAAS,GAAG3B,YAAY,CAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,QAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n    ':focus': {\n        outlineStyle: 'none'\n    },\n    ':focus-visible': {\n        outlineStyle: 'none'\n    },\n    // This adds the focus outline for the TreeItemLayout element\n    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusMedium,\n        outlineColor: tokens.colorStrokeFocus2,\n        outlineRadius: tokens.borderRadiusMedium,\n        // FIXME: tokens.strokeWidthThick causes some weird bugs\n        outlineWidth: '2px',\n        outlineStyle: 'solid'\n    }, {\n        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n    })\n});\nconst useStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const { level } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,wBAAwB,QAAQ,kDAAkD;AAC3F,SAASC,+BAA+B,QAAQ,gEAAgE;AAChH,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGV,aAAA,4rCA2BrB,CAAC;AACF,MAAMW,SAAS,gBAAGV,QAAA;EAAAW,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;AAAA;EAAAU,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEiB;EAAM,CAAC,GAAGH,KAAK;EACvBA,KAAK,CAAChB,IAAI,CAACoB,SAAS,GAAG3B,YAAY,CAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,QAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItem/useTreeItemStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n  root: 'fui-TreeItem',\n};\n\nconst useBaseStyles = makeResetStyles({\n  position: 'relative',\n  cursor: 'pointer',\n  display: 'flex',\n  flexDirection: 'column',\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorSubtleBackground,\n  color: tokens.colorNeutralForeground2,\n  paddingRight: tokens.spacingHorizontalNone,\n  // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  // This adds the focus outline for the TreeItemLayout element\n  ...createCustomFocusIndicatorStyle(\n    {\n      borderRadius: tokens.borderRadiusMedium,\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n    },\n    {\n      customizeSelector: selector =>\n        `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`,\n    },\n  ),\n});\n\ntype StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useStyles = makeStyles({\n  ...(Object.fromEntries(\n    Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n      `level${(index + 1) as StaticLevel}`,\n      { [treeItemLevelToken]: index + 1 },\n    ]),\n  ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n  'use no memo';\n\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n\n  const { level } = state;\n\n  state.root.className = mergeClasses(\n    treeItemClassNames.root,\n    baseStyles,\n    isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty],\n    state.root.className,\n  );\n\n  return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n  return level >= 1 && level <= 10;\n}\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","position","cursor","display","flexDirection","boxSizing","backgroundColor","colorSubtleBackground","color","colorNeutralForeground2","paddingRight","spacingHorizontalNone","outlineStyle","borderRadius","borderRadiusMedium","outlineColor","colorStrokeFocus2","outlineRadius","outlineWidth","customizeSelector","selector","useStyles","Object","fromEntries","Array","from","length","_","index","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"mappings":"AAAA,SAAuBA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGzF,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,kBAAkB,QAAQ,qBAAqB;AACxD,SAASC,wBAAwB,QAAQ,mDAAmD;AAC5F,SAASC,+BAA+B,QAAQ,iEAAiE;AAEjH,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBV,gBAAgB;IACpCW,UAAU;IACVC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,iBAAiBb,OAAOc,qBAAqB;IAC7CC,OAAOf,OAAOgB,uBAAuB;IACrCC,cAAcjB,OAAOkB,qBAAqB;IAC1C,iHAAiH;IACjH,UAAU;QACRC,cAAc;IAChB;IACA,kBAAkB;QAChBA,cAAc;IAChB;IACA,6DAA6D;IAC7D,GAAGlB,gCACD;QACEmB,cAAcpB,OAAOqB,kBAAkB;QACvCC,cAActB,OAAOuB,iBAAiB;QACtCC,eAAexB,OAAOqB,kBAAkB;QACxC,wDAAwD;QACxDI,cAAc;QACdN,cAAc;IAChB,GACA;QACEO,mBAAmBC,CAAAA,WACjB,GAAGA,SAAS,IAAI,EAAExB,yBAAyBG,IAAI,CAAC,EAAE,EAAEqB,SAAS,IAAI,EAAEvB,gCAAgCE,IAAI,EAAE;IAC7G,EACD;AACH;AAKA,MAAMsB,YAAY9B,WAAW;IAC3B,GAAI+B,OAAOC,WAAW,CACpBC,MAAMC,IAAI,CAAsD;QAAEC,QAAQ;IAAG,GAAG,CAACC,GAAGC,QAAU;YAC5F,CAAC,KAAK,EAAGA,QAAQ,GAAmB;YACpC;gBAAE,CAACjC,mBAAmB,EAAEiC,QAAQ;YAAE;SACnC,EACF;AACH;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAa/B;IACnB,MAAMgC,SAASX;IAEf,MAAM,EAAEY,KAAK,EAAE,GAAGH;IAElBA,MAAM/B,IAAI,CAACmC,SAAS,GAAG1C,aACrBM,mBAAmBC,IAAI,EACvBgC,YACAI,yBAAyBF,UAAUD,MAAM,CAAC,CAAC,KAAK,EAAEC,OAAO,CAAwB,EACjFH,MAAM/B,IAAI,CAACmC,SAAS;IAGtB,OAAOJ;AACT,EAAE;AAEF,SAASK,yBAAyBF,KAAa;IAC7C,OAAOA,SAAS,KAAKA,SAAS;AAChC"}
+{"version":3,"sources":["../src/components/TreeItem/useTreeItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n  root: 'fui-TreeItem',\n};\n\nconst useBaseStyles = makeResetStyles({\n  position: 'relative',\n  cursor: 'pointer',\n  display: 'flex',\n  flexDirection: 'column',\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorSubtleBackground,\n  color: tokens.colorNeutralForeground2,\n  paddingRight: tokens.spacingHorizontalNone,\n  // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  // This adds the focus outline for the TreeItemLayout element\n  ...createCustomFocusIndicatorStyle(\n    {\n      borderRadius: tokens.borderRadiusMedium,\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n    },\n    {\n      customizeSelector: selector =>\n        `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`,\n    },\n  ),\n});\n\ntype StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useStyles = makeStyles({\n  ...(Object.fromEntries(\n    Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n      `level${(index + 1) as StaticLevel}`,\n      { [treeItemLevelToken]: index + 1 },\n    ]),\n  ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n  'use no memo';\n\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n\n  const { level } = state;\n\n  state.root.className = mergeClasses(\n    treeItemClassNames.root,\n    baseStyles,\n    isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty],\n    state.root.className,\n  );\n\n  return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n  return level >= 1 && level <= 10;\n}\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","position","cursor","display","flexDirection","boxSizing","backgroundColor","colorSubtleBackground","color","colorNeutralForeground2","paddingRight","spacingHorizontalNone","outlineStyle","borderRadius","borderRadiusMedium","outlineColor","colorStrokeFocus2","outlineRadius","outlineWidth","customizeSelector","selector","useStyles","Object","fromEntries","Array","from","length","_","index","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"mappings":"AAAA;AAEA,SAAuBA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGzF,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,kBAAkB,QAAQ,qBAAqB;AACxD,SAASC,wBAAwB,QAAQ,mDAAmD;AAC5F,SAASC,+BAA+B,QAAQ,iEAAiE;AAEjH,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBV,gBAAgB;IACpCW,UAAU;IACVC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,iBAAiBb,OAAOc,qBAAqB;IAC7CC,OAAOf,OAAOgB,uBAAuB;IACrCC,cAAcjB,OAAOkB,qBAAqB;IAC1C,iHAAiH;IACjH,UAAU;QACRC,cAAc;IAChB;IACA,kBAAkB;QAChBA,cAAc;IAChB;IACA,6DAA6D;IAC7D,GAAGlB,gCACD;QACEmB,cAAcpB,OAAOqB,kBAAkB;QACvCC,cAActB,OAAOuB,iBAAiB;QACtCC,eAAexB,OAAOqB,kBAAkB;QACxC,wDAAwD;QACxDI,cAAc;QACdN,cAAc;IAChB,GACA;QACEO,mBAAmBC,CAAAA,WACjB,GAAGA,SAAS,IAAI,EAAExB,yBAAyBG,IAAI,CAAC,EAAE,EAAEqB,SAAS,IAAI,EAAEvB,gCAAgCE,IAAI,EAAE;IAC7G,EACD;AACH;AAKA,MAAMsB,YAAY9B,WAAW;IAC3B,GAAI+B,OAAOC,WAAW,CACpBC,MAAMC,IAAI,CAAsD;QAAEC,QAAQ;IAAG,GAAG,CAACC,GAAGC,QAAU;YAC5F,CAAC,KAAK,EAAGA,QAAQ,GAAmB;YACpC;gBAAE,CAACjC,mBAAmB,EAAEiC,QAAQ;YAAE;SACnC,EACF;AACH;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAa/B;IACnB,MAAMgC,SAASX;IAEf,MAAM,EAAEY,KAAK,EAAE,GAAGH;IAElBA,MAAM/B,IAAI,CAACmC,SAAS,GAAG1C,aACrBM,mBAAmBC,IAAI,EACvBgC,YACAI,yBAAyBF,UAAUD,MAAM,CAAC,CAAC,KAAK,EAAEC,OAAO,CAAwB,EACjFH,MAAM/B,IAAI,CAACmC,SAAS;IAGtB,OAAOJ;AACT,EAAE;AAEF,SAASK,yBAAyBF,KAAa;IAC7C,OAAOA,SAAS,KAAKA,SAAS;AAChC"}

package/lib/components/TreeItemChevron.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { ChevronRight12Regular } from '@fluentui/react-icons';

package/lib/components/TreeItemChevron.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemChevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { durations, curves } from '@fluentui/react-motion';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  const { dir } = useFluent_unstable();\n\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  return (\n    <ChevronRight12Regular\n      style={{\n        ...expandIconInlineStyles[expandIconRotation],\n        transition: `transform ${durations.durationNormal}ms ${curves.curveEasyEaseMax}`,\n      }}\n    />\n  );\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n  90: { transform: `rotate(90deg)` },\n  0: { transform: `rotate(0deg)` },\n  180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["React","useFluent_unstable","ChevronRight12Regular","durations","curves","useTreeItemContext_unstable","TreeItemChevron","memo","open","ctx","dir","expandIconRotation","style","expandIconInlineStyles","transition","durationNormal","curveEasyEaseMax","displayName","transform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAC3D,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E,OAAO,MAAMC,gCAAkBN,MAAMO,IAAI,CAAC;IACxC,MAAMC,OAAOH,4BAA4BI,CAAAA,MAAOA,IAAID,IAAI;IAExD,MAAM,EAAEE,GAAG,EAAE,GAAGT;IAEhB,MAAMU,qBAAqBH,OAAO,KAAKE,QAAQ,QAAQ,IAAI;IAC3D,qBACE,oBAACR;QACCU,OAAO;YACL,GAAGC,sBAAsB,CAACF,mBAAmB;YAC7CG,YAAY,CAAC,UAAU,EAAEX,UAAUY,cAAc,CAAC,GAAG,EAAEX,OAAOY,gBAAgB,EAAE;QAClF;;AAGN,GAAG;AACHV,gBAAgBW,WAAW,GAAG;AAE9B,MAAMJ,yBAAyB;IAC7B,IAAI;QAAEK,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}
+{"version":3,"sources":["../src/components/TreeItemChevron.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { durations, curves } from '@fluentui/react-motion';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  const { dir } = useFluent_unstable();\n\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  return (\n    <ChevronRight12Regular\n      style={{\n        ...expandIconInlineStyles[expandIconRotation],\n        transition: `transform ${durations.durationNormal}ms ${curves.curveEasyEaseMax}`,\n      }}\n    />\n  );\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n  90: { transform: `rotate(90deg)` },\n  0: { transform: `rotate(0deg)` },\n  180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["React","useFluent_unstable","ChevronRight12Regular","durations","curves","useTreeItemContext_unstable","TreeItemChevron","memo","open","ctx","dir","expandIconRotation","style","expandIconInlineStyles","transition","durationNormal","curveEasyEaseMax","displayName","transform"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAC3D,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E,OAAO,MAAMC,gCAAkBN,MAAMO,IAAI,CAAC;IACxC,MAAMC,OAAOH,4BAA4BI,CAAAA,MAAOA,IAAID,IAAI;IAExD,MAAM,EAAEE,GAAG,EAAE,GAAGT;IAEhB,MAAMU,qBAAqBH,OAAO,KAAKE,QAAQ,QAAQ,IAAI;IAC3D,qBACE,oBAACR;QACCU,OAAO;YACL,GAAGC,sBAAsB,CAACF,mBAAmB;YAC7CG,YAAY,CAAC,UAAU,EAAEX,UAAUY,cAAc,CAAC,GAAG,EAAEX,OAAOY,gBAAgB,EAAE;QAClF;;AAGN,GAAG;AACHV,gBAAgBW,WAAW,GAAG;AAE9B,MAAMJ,yBAAyB;IAC7B,IAAI;QAAEK,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}

package/lib/components/TreeItemLayout/TreeItemLayout.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTreeItemLayout_unstable } from './useTreeItemLayout';
 import { renderTreeItemLayout_unstable } from './renderTreeItemLayout';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemLayout_unstable(props, ref);\n\n  useTreeItemLayoutStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemLayoutStyles_unstable')(state);\n\n  return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useCustomStyleHook_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemLayout_unstable(props, ref);\n\n  useTreeItemLayoutStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemLayoutStyles_unstable')(state);\n\n  return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useCustomStyleHook_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot, useEventCallback, elementContains, useControllableState } from '@fluentui/react-utilities';
 import { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';

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

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

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useTreeContext_unstable } from '../../contexts/treeContext';

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useMainBaseStyles","useIconBaseStyles","useIconBeforeStyles","z189sj","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    main: 'fui-TreeItemLayout__main',\n    iconAfter: 'fui-TreeItemLayout__iconAfter',\n    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    aside: 'fui-TreeItemLayout__aside',\n    actions: 'fui-TreeItemLayout__actions',\n    selector: 'fui-TreeItemLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '32px',\n    boxSizing: 'border-box',\n    gridArea: 'layout',\n    ':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    ':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});\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        minHeight: '24px',\n        ...typographyStyles.caption1\n    },\n    // Appearance variations\n    subtle: {},\n    'subtle-alpha': {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    position: 'relative',\n    zIndex: 1,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalS}`\n});\n/**\n * Styles for the action icon slot\n */ const useAsideBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    alignItems: 'center',\n    zIndex: 0,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalM}`,\n    gap: tokens.spacingHorizontalXS\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '24px',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    flex: `0 0 auto`,\n    padding: `${tokens.spacingVerticalXS} 0`\n});\n/**\n * Styles for the content slot\n */ const useMainBaseStyles = makeResetStyles({\n    padding: `0 ${tokens.spacingHorizontalXXS}`\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground2,\n    lineHeight: tokens.lineHeightBase500,\n    fontSize: tokens.fontSizeBase500\n});\nconst useIconBeforeStyles = makeStyles({\n    medium: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalXXS\n    }\n});\nconst useIconAfterStyles = makeStyles({\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    'use no memo';\n    const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n    const rootStyles = useRootStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const iconBeforeStyles = useIconBeforeStyles();\n    const iconAfterStyles = useIconAfterStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n    }\n    if (aside) {\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n    }\n    if (selector) {\n        selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useMainBaseStyles","useIconBaseStyles","useIconBeforeStyles","z189sj","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    main: 'fui-TreeItemLayout__main',\n    iconAfter: 'fui-TreeItemLayout__iconAfter',\n    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    aside: 'fui-TreeItemLayout__aside',\n    actions: 'fui-TreeItemLayout__actions',\n    selector: 'fui-TreeItemLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '32px',\n    boxSizing: 'border-box',\n    gridArea: 'layout',\n    ':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    ':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});\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        minHeight: '24px',\n        ...typographyStyles.caption1\n    },\n    // Appearance variations\n    subtle: {},\n    'subtle-alpha': {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    position: 'relative',\n    zIndex: 1,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalS}`\n});\n/**\n * Styles for the action icon slot\n */ const useAsideBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    alignItems: 'center',\n    zIndex: 0,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalM}`,\n    gap: tokens.spacingHorizontalXS\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '24px',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    flex: `0 0 auto`,\n    padding: `${tokens.spacingVerticalXS} 0`\n});\n/**\n * Styles for the content slot\n */ const useMainBaseStyles = makeResetStyles({\n    padding: `0 ${tokens.spacingHorizontalXXS}`\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground2,\n    lineHeight: tokens.lineHeightBase500,\n    fontSize: tokens.fontSizeBase500\n});\nconst useIconBeforeStyles = makeStyles({\n    medium: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalXXS\n    }\n});\nconst useIconAfterStyles = makeStyles({\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    'use no memo';\n    const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n    const rootStyles = useRootStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const iconBeforeStyles = useIconBeforeStyles();\n    const iconAfterStyles = useIconAfterStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n    }\n    if (aside) {\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n    }\n    if (selector) {\n        selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useTreeContext_unstable } from '../../contexts/treeContext';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n  root: 'fui-TreeItemLayout',\n  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  main: 'fui-TreeItemLayout__main',\n  iconAfter: 'fui-TreeItemLayout__iconAfter',\n  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  aside: 'fui-TreeItemLayout__aside',\n  actions: 'fui-TreeItemLayout__actions',\n  selector: 'fui-TreeItemLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  minHeight: '32px',\n  boxSizing: 'border-box',\n  gridArea: 'layout',\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  ':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});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  leaf: {\n    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  branch: {\n    paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    minHeight: '24px',\n    ...typographyStyles.caption1,\n  },\n  // Appearance variations\n  subtle: {},\n  'subtle-alpha': {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  position: 'relative',\n  zIndex: 1,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  alignItems: 'center',\n  zIndex: 0,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalM}`,\n  gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: '24px',\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3,\n  flex: `0 0 auto`,\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Styles for the content slot\n */\nconst useMainBaseStyles = makeResetStyles({\n  padding: `0 ${tokens.spacingHorizontalXXS}`,\n});\n\n/**\n * Styles for the before/after icon slot\n */\nconst useIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  color: tokens.colorNeutralForeground2,\n  lineHeight: tokens.lineHeightBase500,\n  fontSize: tokens.fontSizeBase500,\n});\n\nconst useIconBeforeStyles = makeStyles({\n  medium: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  small: {\n    paddingRight: tokens.spacingHorizontalXXS,\n  },\n});\n\nconst useIconAfterStyles = makeStyles({\n  medium: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  small: {\n    paddingLeft: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n  'use no memo';\n\n  const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n  const rootStyles = useRootStyles();\n  const rootBaseStyles = useRootBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n\n  const mainBaseStyles = useMainBaseStyles();\n\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const iconBaseStyles = useIconBaseStyles();\n  const iconBeforeStyles = useIconBeforeStyles();\n  const iconAfterStyles = useIconAfterStyles();\n\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\n  root.className = mergeClasses(\n    treeItemLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[itemType],\n    root.className,\n  );\n\n  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n  if (expandIcon) {\n    expandIcon.className = mergeClasses(\n      treeItemLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      expandIcon.className,\n    );\n  }\n\n  if (iconBefore) {\n    iconBefore.className = mergeClasses(\n      treeItemLayoutClassNames.iconBefore,\n      iconBaseStyles,\n      iconBeforeStyles[size],\n      iconBefore.className,\n    );\n  }\n\n  if (iconAfter) {\n    iconAfter.className = mergeClasses(\n      treeItemLayoutClassNames.iconAfter,\n      iconBaseStyles,\n      iconAfterStyles[size],\n      iconAfter.className,\n    );\n  }\n\n  if (actions) {\n    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n  }\n  if (aside) {\n    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n  }\n  if (selector) {\n    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","display","alignItems","minHeight","boxSizing","gridArea","color","colorNeutralForeground2Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground3Hover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","body1","small","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useActionsBaseStyles","marginLeft","position","zIndex","padding","spacingHorizontalS","useAsideBaseStyles","spacingHorizontalM","gap","spacingHorizontalXS","useExpandIconBaseStyles","justifyContent","minWidth","colorNeutralForeground3","flex","spacingVerticalXS","useMainBaseStyles","spacingHorizontalXXS","useIconBaseStyles","colorNeutralForeground2","lineHeight","lineHeightBase500","fontSize","fontSizeBase500","useIconBeforeStyles","paddingRight","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n  root: 'fui-TreeItemLayout',\n  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  main: 'fui-TreeItemLayout__main',\n  iconAfter: 'fui-TreeItemLayout__iconAfter',\n  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  aside: 'fui-TreeItemLayout__aside',\n  actions: 'fui-TreeItemLayout__actions',\n  selector: 'fui-TreeItemLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  minHeight: '32px',\n  boxSizing: 'border-box',\n  gridArea: 'layout',\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  ':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});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  leaf: {\n    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  branch: {\n    paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    minHeight: '24px',\n    ...typographyStyles.caption1,\n  },\n  // Appearance variations\n  subtle: {},\n  'subtle-alpha': {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  position: 'relative',\n  zIndex: 1,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  alignItems: 'center',\n  zIndex: 0,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalM}`,\n  gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: '24px',\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3,\n  flex: `0 0 auto`,\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Styles for the content slot\n */\nconst useMainBaseStyles = makeResetStyles({\n  padding: `0 ${tokens.spacingHorizontalXXS}`,\n});\n\n/**\n * Styles for the before/after icon slot\n */\nconst useIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  color: tokens.colorNeutralForeground2,\n  lineHeight: tokens.lineHeightBase500,\n  fontSize: tokens.fontSizeBase500,\n});\n\nconst useIconBeforeStyles = makeStyles({\n  medium: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  small: {\n    paddingRight: tokens.spacingHorizontalXXS,\n  },\n});\n\nconst useIconAfterStyles = makeStyles({\n  medium: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  small: {\n    paddingLeft: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n  'use no memo';\n\n  const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n  const rootStyles = useRootStyles();\n  const rootBaseStyles = useRootBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n\n  const mainBaseStyles = useMainBaseStyles();\n\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const iconBaseStyles = useIconBaseStyles();\n  const iconBeforeStyles = useIconBeforeStyles();\n  const iconAfterStyles = useIconAfterStyles();\n\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\n  root.className = mergeClasses(\n    treeItemLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[itemType],\n    root.className,\n  );\n\n  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n  if (expandIcon) {\n    expandIcon.className = mergeClasses(\n      treeItemLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      expandIcon.className,\n    );\n  }\n\n  if (iconBefore) {\n    iconBefore.className = mergeClasses(\n      treeItemLayoutClassNames.iconBefore,\n      iconBaseStyles,\n      iconBeforeStyles[size],\n      iconBefore.className,\n    );\n  }\n\n  if (iconAfter) {\n    iconAfter.className = mergeClasses(\n      treeItemLayoutClassNames.iconAfter,\n      iconBaseStyles,\n      iconAfterStyles[size],\n      iconAfter.className,\n    );\n  }\n\n  if (actions) {\n    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n  }\n  if (aside) {\n    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n  }\n  if (selector) {\n    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","display","alignItems","minHeight","boxSizing","gridArea","color","colorNeutralForeground2Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground3Hover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","body1","small","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useActionsBaseStyles","marginLeft","position","zIndex","padding","spacingHorizontalS","useAsideBaseStyles","spacingHorizontalM","gap","spacingHorizontalXS","useExpandIconBaseStyles","justifyContent","minWidth","colorNeutralForeground3","flex","spacingVerticalXS","useMainBaseStyles","spacingHorizontalXXS","useIconBaseStyles","colorNeutralForeground2","lineHeight","lineHeightBase500","fontSize","fontSizeBase500","useIconBeforeStyles","paddingRight","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"mappings":"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"}

package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';
 import { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","useCustomStyleHook_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,8CAA8C,QAAQ,0CAA0C;AACzG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQT,kCAAkCO,OAAOC;IAEvDN,wCAAwCO;IACxCL,4BAA4B,2CAA2CK;IAEvE,MAAMC,gBAAgBP,+CAA+CM;IAErE,OAAOR,qCAAqCQ,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","useCustomStyleHook_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,8CAA8C,QAAQ,0CAA0C;AACzG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQT,kCAAkCO,OAAOC;IAEvDN,wCAAwCO;IACxCL,4BAA4B,2CAA2CK;IAEvE,MAAMC,gBAAgBP,+CAA+CM;IAErE,OAAOR,qCAAqCQ,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
 import { useTreeContext_unstable } from '../../contexts';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    avatarSize: treeAvatarSize[size],\n    main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n    media: slot.always(media, { elementType: 'div' }),\n    description: slot.optional(description, { elementType: 'div' }),\n  };\n};\n"],"names":["React","slot","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","always","defaultProps","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY;QACZC,WAAW;IACb,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC;QAC1D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,KAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,KAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,KAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    avatarSize: treeAvatarSize[size],\n    main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n    media: slot.always(media, { elementType: 'div' }),\n    description: slot.optional(description, { elementType: 'div' }),\n  };\n};\n"],"names":["React","slot","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","always","defaultProps","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY;QACZC,WAAW;IACb,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC;QAC1D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,KAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,KAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,KAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useTreeItemPersonaLayoutContextValues_unstable(state) {
     const { avatarSize } = state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC;IAEjC,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB"}
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["'use client';\n\nimport type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AAAA;AAGA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC;IAEjC,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { treeItemLevelToken } from '../../utils/tokens';