@fluentui/react-tree 9.16.1 → 9.16.3

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

@@ -1 +1 @@
-{"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 type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { RadioProps } from '@fluentui/react-radio';\nimport { Radio } 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  // eslint-disable-next-line react-hooks/refs\n  assertIsRefObject(treeItemRef);\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  // eslint-disable-next-line react-hooks/refs\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 type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { RadioProps } from '@fluentui/react-radio';\nimport { Radio } 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  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  // eslint-disable-next-line react-hooks/refs\n  assertIsRefObject(treeItemRef);\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  // eslint-disable-next-line react-hooks/refs\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

@@ -98,8 +98,6 @@ const useIconAfterStyles = /*#__PURE__*/__styles({
  * Apply styling to the TreeItemLayout slots based on the state
  */
 export const useTreeItemLayoutStyles_unstable = state => {
-  'use no memo';
-
   const {
     main,
     iconAfter,

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":["'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    // eslint-disable-next-line react-hooks/immutability\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n    if (expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);\n    }\n    if (iconBefore) {\n        // eslint-disable-next-line react-hooks/immutability\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        // eslint-disable-next-line react-hooks/immutability\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        // eslint-disable-next-line react-hooks/immutability\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n    }\n    if (aside) {\n        // eslint-disable-next-line react-hooks/immutability\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n    }\n    if (selector) {\n        // eslint-disable-next-line react-hooks/immutability\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    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    // eslint-disable-next-line react-hooks/immutability\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n    if (expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);\n    }\n    if (iconBefore) {\n        // eslint-disable-next-line react-hooks/immutability\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        // eslint-disable-next-line react-hooks/immutability\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        // eslint-disable-next-line react-hooks/immutability\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n    }\n    if (aside) {\n        // eslint-disable-next-line react-hooks/immutability\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n    }\n    if (selector) {\n        // eslint-disable-next-line react-hooks/immutability\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

@@ -139,7 +139,6 @@ const useIconAfterStyles = makeStyles({
 /**
  * Apply styling to the TreeItemLayout slots based on the state
  */ export const useTreeItemLayoutStyles_unstable = (state)=>{
-    'use no memo';
     const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;
     const rootStyles = useRootStyles();
     const rootBaseStyles = useRootBaseStyles();

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

@@ -1 +1 @@
-{"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  // eslint-disable-next-line react-hooks/immutability\n  root.className = mergeClasses(\n    treeItemLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[itemType],\n    root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n  if (expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    expandIcon.className = mergeClasses(\n      treeItemLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      expandIcon.className,\n    );\n  }\n\n  if (iconBefore) {\n    // eslint-disable-next-line react-hooks/immutability\n    iconBefore.className = mergeClasses(\n      treeItemLayoutClassNames.iconBefore,\n      iconBaseStyles,\n      iconBeforeStyles[size],\n      iconBefore.className,\n    );\n  }\n\n  if (iconAfter) {\n    // eslint-disable-next-line react-hooks/immutability\n    iconAfter.className = mergeClasses(\n      treeItemLayoutClassNames.iconAfter,\n      iconBaseStyles,\n      iconAfterStyles[size],\n      iconAfter.className,\n    );\n  }\n\n  if (actions) {\n    // eslint-disable-next-line react-hooks/immutability\n    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n  }\n  if (aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n  }\n  if (selector) {\n    // eslint-disable-next-line react-hooks/immutability\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  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  // eslint-disable-next-line react-hooks/immutability\n  root.className = mergeClasses(\n    treeItemLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[itemType],\n    root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n  if (expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    expandIcon.className = mergeClasses(\n      treeItemLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      expandIcon.className,\n    );\n  }\n\n  if (iconBefore) {\n    // eslint-disable-next-line react-hooks/immutability\n    iconBefore.className = mergeClasses(\n      treeItemLayoutClassNames.iconBefore,\n      iconBaseStyles,\n      iconBeforeStyles[size],\n      iconBefore.className,\n    );\n  }\n\n  if (iconAfter) {\n    // eslint-disable-next-line react-hooks/immutability\n    iconAfter.className = mergeClasses(\n      treeItemLayoutClassNames.iconAfter,\n      iconBaseStyles,\n      iconAfterStyles[size],\n      iconAfter.className,\n    );\n  }\n\n  if (actions) {\n    // eslint-disable-next-line react-hooks/immutability\n    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n  }\n  if (aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n  }\n  if (selector) {\n    // eslint-disable-next-line react-hooks/immutability\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/useTreeItemPersonaLayoutStyles.styles.js

@@ -91,8 +91,6 @@ const useExpandIconBaseStyles = /*#__PURE__*/__resetStyles("rn61xvs", null, [".r
  * Apply styling to the TreeItemPersonaLayout slots based on the state
  */
 export const useTreeItemPersonaLayoutStyles_unstable = state => {
-  'use no memo';
-
   const rootBaseStyles = useRootBaseStyles();
   const rootStyles = useRootStyles();
   const mediaBaseStyles = useMediaBaseStyles();

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","useTreeContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","Byoj8tv","z189sj","z8tnut","B0ocmuz","p","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const treeItemPersonaLayoutClassNames = {\n    root: 'fui-TreeItemPersonaLayout',\n    media: 'fui-TreeItemPersonaLayout__media',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    aside: 'fui-TreeItemPersonaLayout__aside',\n    actions: 'fui-TreeItemPersonaLayout__actions',\n    selector: 'fui-TreeItemPersonaLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'grid',\n    gridTemplateRows: '1fr auto',\n    gridTemplateColumns: 'auto auto 1fr auto',\n    gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n    alignItems: 'center',\n    ...typographyStyles.body1,\n    ':active': {\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    ':hover': {\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Hover\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    // Size variations\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 expand icon slot\n */ const useMediaBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    width: '32px',\n    height: '32px',\n    gridArea: 'media',\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`\n});\nconst useMainBaseStyles = makeResetStyles({\n    gridArea: 'main',\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\n});\nconst useMainStyles = makeStyles({\n    withDescription: {\n        padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`\n    }\n});\nconst useDescriptionBaseStyles = makeResetStyles({\n    gridArea: 'description',\n    ...typographyStyles.caption1,\n    padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\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    gridArea: 'expandIcon',\n    flex: `0 0 auto`,\n    padding: `${tokens.spacingVerticalXS} 0`\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    const rootStyles = useRootStyles();\n    const mediaBaseStyles = useMediaBaseStyles();\n    const descriptionBaseStyles = useDescriptionBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const mainStyles = useMainStyles();\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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n    if (state.main) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n    }\n    if (state.actions) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n    }\n    if (state.aside) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n    }\n    if (state.selector) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","useTreeContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","Byoj8tv","z189sj","z8tnut","B0ocmuz","p","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const treeItemPersonaLayoutClassNames = {\n    root: 'fui-TreeItemPersonaLayout',\n    media: 'fui-TreeItemPersonaLayout__media',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    aside: 'fui-TreeItemPersonaLayout__aside',\n    actions: 'fui-TreeItemPersonaLayout__actions',\n    selector: 'fui-TreeItemPersonaLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'grid',\n    gridTemplateRows: '1fr auto',\n    gridTemplateColumns: 'auto auto 1fr auto',\n    gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n    alignItems: 'center',\n    ...typographyStyles.body1,\n    ':active': {\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    ':hover': {\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Hover\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    // Size variations\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 expand icon slot\n */ const useMediaBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    width: '32px',\n    height: '32px',\n    gridArea: 'media',\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`\n});\nconst useMainBaseStyles = makeResetStyles({\n    gridArea: 'main',\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\n});\nconst useMainStyles = makeStyles({\n    withDescription: {\n        padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`\n    }\n});\nconst useDescriptionBaseStyles = makeResetStyles({\n    gridArea: 'description',\n    ...typographyStyles.caption1,\n    padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\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    gridArea: 'expandIcon',\n    flex: `0 0 auto`,\n    padding: `${tokens.spacingVerticalXS} 0`\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const rootStyles = useRootStyles();\n    const mediaBaseStyles = useMediaBaseStyles();\n    const descriptionBaseStyles = useDescriptionBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const mainStyles = useMainStyles();\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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n    if (state.main) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n    }\n    if (state.actions) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n    }\n    if (state.aside) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n    }\n    if (state.selector) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -139,7 +139,6 @@ const useDescriptionBaseStyles = makeResetStyles({
 /**
  * Apply styling to the TreeItemPersonaLayout slots based on the state
  */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
-    'use no memo';
     const rootBaseStyles = useRootBaseStyles();
     const rootStyles = useRootStyles();
     const mediaBaseStyles = useMediaBaseStyles();

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n  root: 'fui-TreeItemPersonaLayout',\n  media: 'fui-TreeItemPersonaLayout__media',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  aside: 'fui-TreeItemPersonaLayout__aside',\n  actions: 'fui-TreeItemPersonaLayout__actions',\n  selector: 'fui-TreeItemPersonaLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  display: 'grid',\n  gridTemplateRows: '1fr auto',\n  gridTemplateColumns: 'auto auto 1fr auto',\n  gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n  alignItems: 'center',\n  ...typographyStyles.body1,\n  ':active': {\n    color: tokens.colorNeutralForeground2Pressed,\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n    [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n  ':hover': {\n    color: tokens.colorNeutralForeground2Hover,\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n    [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Hover,\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  // Size variations\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 expand icon slot\n */\nconst useMediaBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  width: '32px',\n  height: '32px',\n  gridArea: 'media',\n  padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`,\n});\n\nconst useMainBaseStyles = makeResetStyles({\n  gridArea: 'main',\n  padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\nconst useMainStyles = makeStyles({\n  withDescription: {\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`,\n  },\n});\n\nconst useDescriptionBaseStyles = makeResetStyles({\n  gridArea: 'description',\n  ...typographyStyles.caption1,\n  padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\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  gridArea: 'expandIcon',\n  flex: `0 0 auto`,\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  const rootStyles = useRootStyles();\n  const mediaBaseStyles = useMediaBaseStyles();\n  const descriptionBaseStyles = useDescriptionBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const mainBaseStyles = useMainBaseStyles();\n  const mainStyles = useMainStyles();\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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    treeItemPersonaLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[itemType],\n    rootStyles[appearance],\n    rootStyles[size],\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n\n  if (state.main) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.main.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.main,\n      mainBaseStyles,\n      state.description && mainStyles.withDescription,\n      state.main.className,\n    );\n  }\n  if (state.description) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.description.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.description,\n      descriptionBaseStyles,\n      state.description.className,\n    );\n  }\n  if (state.actions) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.actions.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.actions,\n      actionsBaseStyles,\n      state.actions.className,\n    );\n  }\n  if (state.aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n  }\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.selector) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","useTreeContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","display","gridTemplateRows","gridTemplateColumns","gridTemplateAreas","alignItems","body1","color","colorNeutralForeground2Pressed","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground3Hover","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","small","minHeight","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useMediaBaseStyles","width","height","gridArea","padding","spacingHorizontalXS","spacingHorizontalXXS","useMainBaseStyles","spacingVerticalMNudge","spacingHorizontalS","useMainStyles","withDescription","useDescriptionBaseStyles","useActionsBaseStyles","marginLeft","position","zIndex","useAsideBaseStyles","spacingHorizontalM","gap","useExpandIconBaseStyles","justifyContent","minWidth","boxSizing","colorNeutralForeground3","flex","spacingVerticalXS","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","size","ctx","appearance","itemType","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n  root: 'fui-TreeItemPersonaLayout',\n  media: 'fui-TreeItemPersonaLayout__media',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  aside: 'fui-TreeItemPersonaLayout__aside',\n  actions: 'fui-TreeItemPersonaLayout__actions',\n  selector: 'fui-TreeItemPersonaLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  display: 'grid',\n  gridTemplateRows: '1fr auto',\n  gridTemplateColumns: 'auto auto 1fr auto',\n  gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n  alignItems: 'center',\n  ...typographyStyles.body1,\n  ':active': {\n    color: tokens.colorNeutralForeground2Pressed,\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n    [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n  ':hover': {\n    color: tokens.colorNeutralForeground2Hover,\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n    [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Hover,\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  // Size variations\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 expand icon slot\n */\nconst useMediaBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  width: '32px',\n  height: '32px',\n  gridArea: 'media',\n  padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`,\n});\n\nconst useMainBaseStyles = makeResetStyles({\n  gridArea: 'main',\n  padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\nconst useMainStyles = makeStyles({\n  withDescription: {\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`,\n  },\n});\n\nconst useDescriptionBaseStyles = makeResetStyles({\n  gridArea: 'description',\n  ...typographyStyles.caption1,\n  padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\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  gridArea: 'expandIcon',\n  flex: `0 0 auto`,\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n  const rootBaseStyles = useRootBaseStyles();\n  const rootStyles = useRootStyles();\n  const mediaBaseStyles = useMediaBaseStyles();\n  const descriptionBaseStyles = useDescriptionBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const mainBaseStyles = useMainBaseStyles();\n  const mainStyles = useMainStyles();\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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    treeItemPersonaLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[itemType],\n    rootStyles[appearance],\n    rootStyles[size],\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n\n  if (state.main) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.main.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.main,\n      mainBaseStyles,\n      state.description && mainStyles.withDescription,\n      state.main.className,\n    );\n  }\n  if (state.description) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.description.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.description,\n      descriptionBaseStyles,\n      state.description.className,\n    );\n  }\n  if (state.actions) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.actions.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.actions,\n      actionsBaseStyles,\n      state.actions.className,\n    );\n  }\n  if (state.aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n  }\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.selector) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","useTreeContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","display","gridTemplateRows","gridTemplateColumns","gridTemplateAreas","alignItems","body1","color","colorNeutralForeground2Pressed","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground3Hover","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","small","minHeight","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useMediaBaseStyles","width","height","gridArea","padding","spacingHorizontalXS","spacingHorizontalXXS","useMainBaseStyles","spacingVerticalMNudge","spacingHorizontalS","useMainStyles","withDescription","useDescriptionBaseStyles","useActionsBaseStyles","marginLeft","position","zIndex","useAsideBaseStyles","spacingHorizontalM","gap","useExpandIconBaseStyles","justifyContent","minWidth","boxSizing","colorNeutralForeground3","flex","spacingVerticalXS","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","size","ctx","appearance","itemType","className"],"mappings":"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"}

package/lib/hooks/useFlatTreeNavigation.js

@@ -9,7 +9,7 @@ import { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { treeItemLayoutClassNames } from '../TreeItemLayout';
 export function useFlatTreeNavigation(navigationMode = 'tree') {
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useFlatTreeNavigation — manual opt-out to preserve runtime behavior
     const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();
     const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = useRovingTabIndex();
     const { findFirstFocusable } = useFocusFinders();

package/lib/hooks/useFlatTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport type { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport type { TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\n\nexport function useFlatTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable) => void;\n  rootRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo';\n\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (walkerRef.current && root) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [initializeRovingTabIndex, walkerRef],\n  );\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const actions = queryActions(data.target);\n        if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n          return data.target;\n        }\n        const nextElement = parentElement(data.parentValue, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.ArrowRight: {\n        if (navigationMode === 'treegrid') {\n          const actions = queryActions(data.target);\n          if (actions) {\n            findFirstFocusable(actions)?.focus();\n          }\n          return null;\n        }\n        walkerRef.current.currentElement = data.target;\n        const nextElement = firstChild(data.target, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.lastChild();\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return {\n    navigate,\n    rootRef: useMergedRefs<HTMLElement>(walkerRootRef, rootRefCallback),\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","useRovingTabIndex","dataTreeItemValueAttrName","React","useHTMLElementWalkerRef","useFocusFinders","treeItemLayoutClassNames","useFlatTreeNavigation","navigationMode","walkerRef","rootRef","walkerRootRef","rove","forceUpdate","forceUpdateRovingTabIndex","initialize","initializeRovingTabIndex","findFirstFocusable","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","focus","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport type { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport type { TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\n\nexport function useFlatTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable) => void;\n  rootRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo'; // justified: compiler would optimize useFlatTreeNavigation — manual opt-out to preserve runtime behavior\n\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (walkerRef.current && root) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [initializeRovingTabIndex, walkerRef],\n  );\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const actions = queryActions(data.target);\n        if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n          return data.target;\n        }\n        const nextElement = parentElement(data.parentValue, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.ArrowRight: {\n        if (navigationMode === 'treegrid') {\n          const actions = queryActions(data.target);\n          if (actions) {\n            findFirstFocusable(actions)?.focus();\n          }\n          return null;\n        }\n        walkerRef.current.currentElement = data.target;\n        const nextElement = firstChild(data.target, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.lastChild();\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return {\n    navigate,\n    rootRef: useMergedRefs<HTMLElement>(walkerRootRef, rootRefCallback),\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","useRovingTabIndex","dataTreeItemValueAttrName","React","useHTMLElementWalkerRef","useFocusFinders","treeItemLayoutClassNames","useFlatTreeNavigation","navigationMode","walkerRef","rootRef","walkerRootRef","rove","forceUpdate","forceUpdateRovingTabIndex","initialize","initializeRovingTabIndex","findFirstFocusable","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","focus","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector"],"mappings":"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"}

package/lib/hooks/useTreeNavigation.js

@@ -12,7 +12,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
  *
  * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'
  */ export function useTreeNavigation(navigationMode = 'tree') {
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useTreeNavigation — manual opt-out to preserve runtime behavior
     const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();
     const { findFirstFocusable } = useFocusFinders();
     const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();

package/lib/hooks/useTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport type { TreeNavigationData_unstable, TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/***\n * Hook used to manage navigation in the tree.\n *\n * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => HTMLElement | null;\n  treeRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo';\n\n  const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const actions = queryActions(data.target);\n        if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n          return data.target;\n        }\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      }\n      case treeDataTypes.ArrowRight:\n        if (navigationMode === 'treegrid') {\n          const actions = queryActions(data.target);\n          if (actions) {\n            findFirstFocusable(actions)?.focus();\n          }\n          return null;\n        }\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return lastChildRecursive(walkerRef.current);\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement, focusOptions);\n    }\n    return nextElement;\n  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","treeItemLayoutClassNames","useFocusFinders","useTreeNavigation","navigationMode","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","findFirstFocusable","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","parentElement","ArrowRight","focus","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild","querySelector"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport type { TreeNavigationData_unstable, TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/***\n * Hook used to manage navigation in the tree.\n *\n * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => HTMLElement | null;\n  treeRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo'; // justified: compiler would optimize useTreeNavigation — manual opt-out to preserve runtime behavior\n\n  const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const actions = queryActions(data.target);\n        if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n          return data.target;\n        }\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      }\n      case treeDataTypes.ArrowRight:\n        if (navigationMode === 'treegrid') {\n          const actions = queryActions(data.target);\n          if (actions) {\n            findFirstFocusable(actions)?.focus();\n          }\n          return null;\n        }\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return lastChildRecursive(walkerRef.current);\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement, focusOptions);\n    }\n    return nextElement;\n  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","treeItemLayoutClassNames","useFocusFinders","useTreeNavigation","navigationMode","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","findFirstFocusable","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","parentElement","ArrowRight","focus","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild","querySelector"],"mappings":"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"}

package/lib-commonjs/components/FlatTree/useFlatTree.js

@@ -19,7 +19,6 @@ const _ImmutableSet = require("../../utils/ImmutableSet");
 const _ImmutableMap = require("../../utils/ImmutableMap");
 const _subtreeContext = require("../../contexts/subtreeContext");
 const useFlatTree_unstable = (props, ref)=>{
-    'use no memo';
     const isRoot = _react.useContext(_subtreeContext.SubtreeContext) === undefined;
     // as level is static, this doesn't break rule of hooks
     // and if this becomes an issue later on, this can be easily converted

package/lib-commonjs/components/FlatTree/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FlatTree/useFlatTree.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport type { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n  props,\n  ref,\n) => {\n  'use no memo';\n\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  const navigation = useFlatTreeNavigation(props.navigationMode);\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data);\n          }\n        }),\n      },\n      useMergedRefs(ref, navigation.rootRef),\n    ),\n    {\n      treeType: 'flat',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  if (process.env.NODE_ENV === 'development') {\n    throw new Error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Subtrees are not allowed in a FlatTree!\n      You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!\n    `);\n  }\n  return {\n    ...useSubtree(props, ref),\n    // ------ defaultTreeContextValue\n    level: 0,\n    contextType: 'root',\n    treeType: 'nested',\n    selectionMode: 'none',\n    openItems: ImmutableSet.empty,\n    checkedItems: ImmutableMap.empty,\n    requestTreeResponse: noop,\n    forceUpdateRovingTabIndex: noop,\n    appearance: 'subtle',\n    size: 'medium',\n    // ------ defaultTreeContextValue\n    open: false,\n  };\n}\n\nfunction noop() {\n  /* do nothing */\n}\n"],"names":["React","useRootTree","useEventCallback","useMergedRefs","useFlatTreeNavigation","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigation","navigationMode","Object","assign","onNavigation","event","data","isDefaultPrevented","navigate","rootRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"mappings":"AAAA;;;;;+BAYaS;;;;;;;iEAVU,QAAQ;6BACH,0BAA0B;gCAEN,4BAA4B;uCACtC,oCAAoC;4BAC/C,yBAAyB;8BACvB,2BAA2B;8BAC3B,2BAA2B;gCACzB,gCAAgC;AAExD,6BAAmG,CACxGC,OACAC;IAEA;IAEA,MAAMC,SAASZ,OAAMa,UAAU,CAACL,8BAAAA,MAAoBM;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,gBAAgBL,OAAOC,OAAOK,eAAeN,OAAOC;AACtE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAMM,iBAAab,4CAAAA,EAAsBM,MAAMQ,cAAc;IAE7D,OAAOC,OAAOC,MAAM,KAClBnB,wBAAAA,EACE;QACE,GAAGS,KAAK;QACRW,kBAAcnB,gCAAAA,EAAiB,CAACoB,OAAOC;gBACrCb;YAAAA,uBAAAA,MAAMW,YAAAA,AAAY,MAAA,QAAlBX,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBY,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BP,WAAWQ,QAAQ,CAACF;YACtB;QACF;IACF,OACApB,6BAAAA,EAAcQ,KAAKM,WAAWS,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BX,WAAWW,yBAAyB;IACjE;AAEJ;AAEA,SAASZ,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,OAAG3B,sBAAAA,EAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCsB,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAW9B,0BAAAA,CAAa+B,KAAK;QAC7BC,cAAc/B,0BAAAA,CAAa8B,KAAK;QAChCE,qBAAqBC;QACrBZ,2BAA2BY;QAC3BC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}
+{"version":3,"sources":["../src/components/FlatTree/useFlatTree.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport type { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n  props,\n  ref,\n) => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  const navigation = useFlatTreeNavigation(props.navigationMode);\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data);\n          }\n        }),\n      },\n      useMergedRefs(ref, navigation.rootRef),\n    ),\n    {\n      treeType: 'flat',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  if (process.env.NODE_ENV === 'development') {\n    throw new Error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Subtrees are not allowed in a FlatTree!\n      You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!\n    `);\n  }\n  return {\n    ...useSubtree(props, ref),\n    // ------ defaultTreeContextValue\n    level: 0,\n    contextType: 'root',\n    treeType: 'nested',\n    selectionMode: 'none',\n    openItems: ImmutableSet.empty,\n    checkedItems: ImmutableMap.empty,\n    requestTreeResponse: noop,\n    forceUpdateRovingTabIndex: noop,\n    appearance: 'subtle',\n    size: 'medium',\n    // ------ defaultTreeContextValue\n    open: false,\n  };\n}\n\nfunction noop() {\n  /* do nothing */\n}\n"],"names":["React","useRootTree","useEventCallback","useMergedRefs","useFlatTreeNavigation","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigation","navigationMode","Object","assign","onNavigation","event","data","isDefaultPrevented","navigate","rootRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"mappings":"AAAA;;;;;+BAYaS;;;;;;;iEAVU,QAAQ;6BACH,0BAA0B;gCAEN,4BAA4B;uCACtC,oCAAoC;4BAC/C,yBAAyB;8BACvB,2BAA2B;8BAC3B,2BAA2B;gCACzB,gCAAgC;AAExD,6BAAmG,CACxGC,OACAC;IAEA,MAAMC,SAASZ,OAAMa,UAAU,CAACL,8BAAAA,MAAoBM;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,gBAAgBL,OAAOC,OAAOK,eAAeN,OAAOC;AACtE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAMM,iBAAab,4CAAAA,EAAsBM,MAAMQ,cAAc;IAE7D,OAAOC,OAAOC,MAAM,KAClBnB,wBAAAA,EACE;QACE,GAAGS,KAAK;QACRW,kBAAcnB,gCAAAA,EAAiB,CAACoB,OAAOC;gBACrCb;aAAAA,sBAAAA,MAAMW,YAAAA,AAAY,MAAA,QAAlBX,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBY,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BP,WAAWQ,QAAQ,CAACF;YACtB;QACF;IACF,OACApB,6BAAAA,EAAcQ,KAAKM,WAAWS,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BX,WAAWW,yBAAyB;IACjE;AAEJ;AAEA,SAASZ,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,OAAG3B,sBAAAA,EAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCsB,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAW9B,0BAAAA,CAAa+B,KAAK;QAC7BC,cAAc/B,0BAAAA,CAAa8B,KAAK;QAChCE,qBAAqBC;QACrBZ,2BAA2BY;QAC3BC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}

package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js

@@ -25,7 +25,6 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rnv2ez3", null, [
     ".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"
 ]);
 const useFlatTreeStyles_unstable = (state)=>{
-    'use no memo';
     const baseStyles = useBaseStyles();
     // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(flatTreeClassNames.root, baseStyles, state.root.className);

package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n    root: 'fui-FlatTree'\n};\nconst useBaseStyles = makeResetStyles({\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyles = useBaseStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","useFlatTreeStyles_unstable","state","baseStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;sBAGmB;;;8BAQQ;;;;uBAVO,gBAAgB;AAEvD,MAAMG,qBAAqB;IAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGL,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIrB,CAAC;AACK,MAAMM,8BAA8BC,KAAK,IAAG;IAC/C,aAAa;IACb,MAAMC,UAAU,GAAGH,aAAa,CAAC,CAAC;IAClC,oDAAA;IACAE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGR,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC9F,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n    root: 'fui-FlatTree'\n};\nconst useBaseStyles = makeResetStyles({\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n    const baseStyles = useBaseStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","useFlatTreeStyles_unstable","state","baseStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;sBAGmB;;;IAQlBM,0BAA0B;;;;uBAVO,gBAAgB;AAEvD,MAAMH,qBAAqB;IAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGL,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIrB,CAAC;AACK,oCAAoCO,KAAK,IAAG;IAC/C,MAAMC,UAAU,GAAGH,aAAa,CAAC,CAAC;IAClC,oDAAA;IACAE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGR,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC9F,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.raw.js

@@ -28,7 +28,6 @@ const useBaseStyles = (0, _react.makeResetStyles)({
     rowGap: _reacttheme.tokens.spacingVerticalXXS
 });
 const useFlatTreeStyles_unstable = (state)=>{
-    'use no memo';
     const baseStyles = useBaseStyles();
     // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(flatTreeClassNames.root, baseStyles, state.root.className);