@fluentui/react-tree 9.7.1 → 9.7.2

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  elementContains,\n  useControllableState,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type {\n  TreeItemLayoutActionSlotProps,\n  TreeItemLayoutActionVisibilityChangeData,\n  TreeItemLayoutProps,\n  TreeItemLayoutState,\n} from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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\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  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const actionsRefInternal = React.useRef<HTMLDivElement>(null);\n  const treeItemRef = useTreeItemContext_unstable(ctx => ctx.treeItemRef);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  assertIsRefObject(treeItemRef);\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  assertIsRefObject(subtreeRef);\n\n  const setActionsVisibleIfNotFromSubtree = React.useCallback(\n    (event: MouseEvent | FocusEvent) => {\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        setIsActionsVisible(true);\n      }\n    },\n    [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n  );\n\n  const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n    (event: FocusEvent | MouseEvent) => {\n      const isRelatedTargetFromActions = Boolean(\n        actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node),\n      );\n      if (isRelatedTargetFromActions) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        setIsActionsVisible(true);\n        return;\n      }\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        onActionVisibilityChange?.(event, {\n          visible: false,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        setIsActionsVisible(false);\n        return;\n      }\n    },\n    [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\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: true, 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  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 && isActionsVisibleFromProps === undefined) {\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  }, [\n    hasActions,\n    treeItemRef,\n    isActionsVisibleFromProps,\n    setActionsVisibleIfNotFromSubtree,\n    setActionsInvisibleIfNotFromSubtree,\n  ]);\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, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: !isActionsVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : 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","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","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","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","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":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  elementContains,\n  useControllableState,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type {\n  TreeItemLayoutActionSlotProps,\n  TreeItemLayoutActionVisibilityChangeData,\n  TreeItemLayoutProps,\n  TreeItemLayoutState,\n} from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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\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  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const actionsRefInternal = React.useRef<HTMLDivElement>(null);\n  const treeItemRef = useTreeItemContext_unstable(ctx => ctx.treeItemRef);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  assertIsRefObject(treeItemRef);\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  assertIsRefObject(subtreeRef);\n\n  const setActionsVisibleIfNotFromSubtree = React.useCallback(\n    (event: MouseEvent | FocusEvent) => {\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        setIsActionsVisible(true);\n      }\n    },\n    [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n  );\n\n  const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n    (event: FocusEvent | MouseEvent) => {\n      const isRelatedTargetFromActions = Boolean(\n        actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node),\n      );\n      if (isRelatedTargetFromActions) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        setIsActionsVisible(true);\n        return;\n      }\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        onActionVisibilityChange?.(event, {\n          visible: false,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        setIsActionsVisible(false);\n        return;\n      }\n    },\n    [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\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: true, 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  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 && isActionsVisibleFromProps === undefined) {\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  }, [\n    hasActions,\n    treeItemRef,\n    isActionsVisibleFromProps,\n    setActionsVisibleIfNotFromSubtree,\n    setActionsInvisibleIfNotFromSubtree,\n  ]);\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, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: !isActionsVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : 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","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","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","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","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

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

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

@@ -63,6 +63,8 @@ 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","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","d","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","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\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});\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 itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n    if (state.main) {\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n    }\n    if (state.selector) {\n        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,KAAK,EAAE,kCAAkC;EACzCC,WAAW,EAAE,wCAAwC;EACrDC,IAAI,EAAE,iCAAiC;EACvCC,UAAU,EAAE,uCAAuC;EACnDC,KAAK,EAAE,kCAAkC;EACzCC,OAAO,EAAE,oCAAoC;EAC7CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,gBAAGhB,aAAA,8yBA0BzB,CAAC;AACF;AACA;AACA;AAAI,MAAMiB,aAAa,gBAAGhB,QAAA;EAAAiB,IAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGtB,aAAA,yUAO9B,CAAC;AACF,MAAMuB,iBAAiB,gBAAGvB,aAAA,iUAGzB,CAAC;AACF,MAAMwB,aAAa,gBAAGvB,QAAA;EAAAwB,eAAA;IAAAC,OAAA;IAAAP,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAR,CAAA;IAAAS,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAIrB,CAAC;AACF,MAAMC,wBAAwB,gBAAG/B,aAAA,mjBAIhC,CAAC;AACF;AACA;AACA;AAAI,MAAMgC,oBAAoB,gBAAGhC,aAAA,kRAOhC,CAAC;AACF;AACA;AACA;AAAI,MAAMiC,kBAAkB,gBAAGjC,aAAA,kVAQ9B,CAAC;AACF;AACA;AACA;AAAI,MAAMkC,uBAAuB,gBAAGlC,aAAA,uOAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMmC,uCAAuC,GAAIC,KAAK,IAAG;EAChE,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,UAAU,GAAGrB,aAAa,CAAC,CAAC;EAClC,MAAMsB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,qBAAqB,GAAGT,wBAAwB,CAAC,CAAC;EACxD,MAAMU,iBAAiB,GAAGT,oBAAoB,CAAC,CAAC;EAChD,MAAMU,eAAe,GAAGT,kBAAkB,CAAC,CAAC;EAC5C,MAAMU,oBAAoB,GAAGT,uBAAuB,CAAC,CAAC;EACtD,MAAMU,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,UAAU,GAAGrB,aAAa,CAAC,CAAC;EAClC,MAAMsB,QAAQ,GAAGxC,2BAA2B,CAAEyC,GAAG,IAAGA,GAAG,CAACD,QAAQ,CAAC;EACjEV,KAAK,CAAC5B,IAAI,CAACwC,SAAS,GAAG9C,YAAY,CAACK,+BAA+B,CAACC,IAAI,EAAE6B,cAAc,EAAEC,UAAU,CAACQ,QAAQ,CAAC,EAAEV,KAAK,CAAC5B,IAAI,CAACwC,SAAS,CAAC;EACrIZ,KAAK,CAAC3B,KAAK,CAACuC,SAAS,GAAG9C,YAAY,CAACK,+BAA+B,CAACE,KAAK,EAAE8B,eAAe,EAAEH,KAAK,CAAC3B,KAAK,CAACuC,SAAS,CAAC;EACnH,IAAIZ,KAAK,CAACzB,IAAI,EAAE;IACZyB,KAAK,CAACzB,IAAI,CAACqC,SAAS,GAAG9C,YAAY,CAACK,+BAA+B,CAACI,IAAI,EAAEiC,cAAc,EAAER,KAAK,CAAC1B,WAAW,IAAImC,UAAU,CAACpB,eAAe,EAAEW,KAAK,CAACzB,IAAI,CAACqC,SAAS,CAAC;EACpK;EACA,IAAIZ,KAAK,CAAC1B,WAAW,EAAE;IACnB0B,KAAK,CAAC1B,WAAW,CAACsC,SAAS,GAAG9C,YAAY,CAACK,+BAA+B,CAACG,WAAW,EAAE8B,qBAAqB,EAAEJ,KAAK,CAAC1B,WAAW,CAACsC,SAAS,CAAC;EAC/I;EACA,IAAIZ,KAAK,CAACtB,OAAO,EAAE;IACfsB,KAAK,CAACtB,OAAO,CAACkC,SAAS,GAAG9C,YAAY,CAACK,+BAA+B,CAACO,OAAO,EAAE2B,iBAAiB,EAAEL,KAAK,CAACtB,OAAO,CAACkC,SAAS,CAAC;EAC/H;EACA,IAAIZ,KAAK,CAACvB,KAAK,EAAE;IACbuB,KAAK,CAACvB,KAAK,CAACmC,SAAS,GAAG9C,YAAY,CAACK,+BAA+B,CAACM,KAAK,EAAE6B,eAAe,EAAEN,KAAK,CAACvB,KAAK,CAACmC,SAAS,CAAC;EACvH;EACA,IAAIZ,KAAK,CAACxB,UAAU,EAAE;IAClBwB,KAAK,CAACxB,UAAU,CAACoC,SAAS,GAAG9C,YAAY,CAACK,+BAA+B,CAACK,UAAU,EAAE+B,oBAAoB,EAAEP,KAAK,CAACxB,UAAU,CAACoC,SAAS,CAAC;EAC3I;EACA,IAAIZ,KAAK,CAACrB,QAAQ,EAAE;IAChBqB,KAAK,CAACrB,QAAQ,CAACiC,SAAS,GAAG9C,YAAY,CAACK,+BAA+B,CAACQ,QAAQ,EAAEqB,KAAK,CAACrB,QAAQ,CAACiC,SAAS,CAAC;EAC/G;EACA,OAAOZ,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","d","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","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\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});\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 itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n    if (state.main) {\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n    }\n    if (state.selector) {\n        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/hooks/useFlatTreeNavigation.js

@@ -6,6 +6,7 @@ import { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement'
 import * as React from 'react';
 import { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';
 export function useFlatTreeNavigation() {
+    'use no memo';
     const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();
     const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();
     const rootRefCallback = React.useCallback((root)=>{

package/lib/hooks/useFlatTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\n\nexport function useFlatTreeNavigation() {\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\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 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        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 { navigate, rootRef: useMergedRefs<HTMLDivElement>(walkerRootRef, rootRefCallback) } 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"],"names":["useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","useRovingTabIndex","dataTreeItemValueAttrName","React","useHTMLElementWalkerRef","useFlatTreeNavigation","walkerRef","rootRef","walkerRootRef","rove","initialize","initializeRovingTabIndex","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","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":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\n\nexport function useFlatTreeNavigation() {\n  'use no memo';\n\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\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 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        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 { navigate, rootRef: useMergedRefs<HTMLDivElement>(walkerRootRef, rootRefCallback) } 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"],"names":["useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","useRovingTabIndex","dataTreeItemValueAttrName","React","useHTMLElementWalkerRef","useFlatTreeNavigation","walkerRef","rootRef","walkerRootRef","rove","initialize","initializeRovingTabIndex","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","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

@@ -7,6 +7,7 @@ import { useMergedRefs } from '@fluentui/react-utilities';
 /**
  * @internal
  */ export function useTreeNavigation() {
+    'use no memo';
     const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();
     const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();
     const rootRefCallback = React.useCallback((root)=>{

package/lib/hooks/useTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport function useTreeNavigation() {\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\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        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      case treeDataTypes.ArrowRight:\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  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\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"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","useTreeNavigation","rove","initialize","initializeRovingTabIndex","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D;;CAEC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGP;IACvD,MAAM,EAAEQ,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGR;IAE9C,MAAMS,kBAAkDV,MAAMW,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQL,UAAUM,OAAO,EAAE;YAC7BP,yBAAyBC,UAAUM,OAAO;QAC5C;IACF,GACA;QAACN;QAAWD;KAAyB;IAGvC,MAAMQ,iBAAiB,CAACC;QACtB,IAAI,CAACR,UAAUM,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKlB,cAAcmB,KAAK;gBACtB,OAAOF,KAAKG,MAAM;YACpB,KAAKpB,cAAcqB,SAAS;gBAC1BZ,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOrB,qBAAqBU,UAAUM,OAAO,EAAEE,KAAKM,KAAK,CAACC,GAAG;YAC/D,KAAKxB,cAAcyB,SAAS;gBAC1BhB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACW,aAAa;YACxC,KAAK1B,cAAc2B,UAAU;gBAC3BlB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAc6B,GAAG;gBACpBpB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOgB,mBAAmBrB,UAAUM,OAAO;YAC7C,KAAKf,cAAc+B,IAAI;gBACrBtB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOL,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAcgC,SAAS;gBAC1BvB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACkB,WAAW;YACtC,KAAKjC,cAAckC,OAAO;gBACxBzB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACoB,eAAe;QAC5C;IACF;IACA,SAASC,SAASnB,IAAiC,EAAEoB,YAA2B;QAC9E,MAAMJ,cAAcjB,eAAeC;QACnC,IAAIgB,aAAa;YACf3B,KAAK2B,aAAaI;QACpB;IACF;IACA,OAAO;QACLD;QACAE,SAASlC,cAAcO,eAAeC;IACxC;AACF;AAEA,SAASkB,mBAAmBS,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIP,cAAkC;IACtC,MAAQA,cAAcM,OAAOE,SAAS,GAAK;QACzCD,cAAcP;IAChB;IACA,OAAOO;AACT"}
+{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport function useTreeNavigation() {\n  'use no memo';\n\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\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        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      case treeDataTypes.ArrowRight:\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  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\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"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","useTreeNavigation","rove","initialize","initializeRovingTabIndex","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D;;CAEC,GACD,OAAO,SAASC;IACd;IAEA,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGP;IACvD,MAAM,EAAEQ,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGR;IAE9C,MAAMS,kBAAkDV,MAAMW,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQL,UAAUM,OAAO,EAAE;YAC7BP,yBAAyBC,UAAUM,OAAO;QAC5C;IACF,GACA;QAACN;QAAWD;KAAyB;IAGvC,MAAMQ,iBAAiB,CAACC;QACtB,IAAI,CAACR,UAAUM,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKlB,cAAcmB,KAAK;gBACtB,OAAOF,KAAKG,MAAM;YACpB,KAAKpB,cAAcqB,SAAS;gBAC1BZ,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOrB,qBAAqBU,UAAUM,OAAO,EAAEE,KAAKM,KAAK,CAACC,GAAG;YAC/D,KAAKxB,cAAcyB,SAAS;gBAC1BhB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACW,aAAa;YACxC,KAAK1B,cAAc2B,UAAU;gBAC3BlB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAc6B,GAAG;gBACpBpB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOgB,mBAAmBrB,UAAUM,OAAO;YAC7C,KAAKf,cAAc+B,IAAI;gBACrBtB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOL,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAcgC,SAAS;gBAC1BvB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACkB,WAAW;YACtC,KAAKjC,cAAckC,OAAO;gBACxBzB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACoB,eAAe;QAC5C;IACF;IACA,SAASC,SAASnB,IAAiC,EAAEoB,YAA2B;QAC9E,MAAMJ,cAAcjB,eAAeC;QACnC,IAAIgB,aAAa;YACf3B,KAAK2B,aAAaI;QACpB;IACF;IACA,OAAO;QACLD;QACAE,SAASlC,cAAcO,eAAeC;IACxC;AACF;AAEA,SAASkB,mBAAmBS,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIP,cAAkC;IACtC,MAAQA,cAAcM,OAAOE,SAAS,GAAK;QACzCD,cAAcP;IAChB;IACA,OAAOO;AACT"}

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

@@ -18,6 +18,7 @@ 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":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\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';\nexport const useFlatTree_unstable = (props, ref)=>{\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};\nfunction useRootFlatTree(props, ref) {\n    const navigation = useFlatTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data);\n            }\n        })\n    }, useMergedRefs(ref, navigation.rootRef)), {\n        treeType: 'flat'\n    });\n}\nfunction useSubFlatTree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        throw new Error(`@fluentui/react-tree [useFlatTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!`);\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        appearance: 'subtle',\n        size: 'medium',\n        // ------ defaultTreeContextValue\n        open: false\n    };\n}\nfunction noop() {\n/* do nothing */ }\n"],"names":["useFlatTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useRootFlatTree","useSubFlatTree","navigation","useFlatTreeNavigation","Object","assign","useRootTree","onNavigation","useEventCallback","event","data","_props_onNavigation","call","isDefaultPrevented","navigate","useMergedRefs","rootRef","treeType","process","env","NODE_ENV","Error","useSubtree","level","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open"],"mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;6BACK;gCACoB;uCACV;4BACX;8BACE;8BACA;gCACE;AACxB,MAAMA,uBAAuB,CAACC,OAAOC;IACxC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,gBAAgBP,OAAOC,OAAOO,eAAeR,OAAOC;AACxE;AACA,SAASM,gBAAgBP,KAAK,EAAEC,GAAG;IAC/B,MAAMQ,aAAaC,IAAAA,4CAAqB;IACxC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGb,KAAK;QACRc,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACHA,CAAAA,sBAAsBlB,MAAMc,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,IAAI,CAACnB,OAAOgB,OAAOC;YACxI,IAAI,CAACD,MAAMI,kBAAkB,IAAI;gBAC7BX,WAAWY,QAAQ,CAACJ;YACxB;QACJ;IACJ,GAAGK,IAAAA,6BAAa,EAACrB,KAAKQ,WAAWc,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAAShB,eAAeR,KAAK,EAAEC,GAAG;IAC9B,IAAIwB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,MAAM,IAAIC,MAAM,CAAC;;0FAEiE,CAAC;IACvF;IACA,OAAO;QACH,GAAGC,IAAAA,sBAAU,EAAC7B,OAAOC,IAAI;QACzB,iCAAiC;QACjC6B,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAWC,0BAAY,CAACC,KAAK;QAC7BC,cAAcC,0BAAY,CAACF,KAAK;QAChCG,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACV;AACJ;AACA,SAASH;AACT,cAAc,GAAG"}
+{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\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';\nexport const useFlatTree_unstable = (props, ref)=>{\n    'use no memo';\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};\nfunction useRootFlatTree(props, ref) {\n    const navigation = useFlatTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data);\n            }\n        })\n    }, useMergedRefs(ref, navigation.rootRef)), {\n        treeType: 'flat'\n    });\n}\nfunction useSubFlatTree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        throw new Error(`@fluentui/react-tree [useFlatTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!`);\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        appearance: 'subtle',\n        size: 'medium',\n        // ------ defaultTreeContextValue\n        open: false\n    };\n}\nfunction noop() {\n/* do nothing */ }\n"],"names":["useFlatTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useRootFlatTree","useSubFlatTree","navigation","useFlatTreeNavigation","Object","assign","useRootTree","onNavigation","useEventCallback","event","data","_props_onNavigation","call","isDefaultPrevented","navigate","useMergedRefs","rootRef","treeType","process","env","NODE_ENV","Error","useSubtree","level","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open"],"mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;6BACK;gCACoB;uCACV;4BACX;8BACE;8BACA;gCACE;AACxB,MAAMA,uBAAuB,CAACC,OAAOC;IACxC;IACA,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,gBAAgBP,OAAOC,OAAOO,eAAeR,OAAOC;AACxE;AACA,SAASM,gBAAgBP,KAAK,EAAEC,GAAG;IAC/B,MAAMQ,aAAaC,IAAAA,4CAAqB;IACxC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGb,KAAK;QACRc,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACHA,CAAAA,sBAAsBlB,MAAMc,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,IAAI,CAACnB,OAAOgB,OAAOC;YACxI,IAAI,CAACD,MAAMI,kBAAkB,IAAI;gBAC7BX,WAAWY,QAAQ,CAACJ;YACxB;QACJ;IACJ,GAAGK,IAAAA,6BAAa,EAACrB,KAAKQ,WAAWc,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAAShB,eAAeR,KAAK,EAAEC,GAAG;IAC9B,IAAIwB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,MAAM,IAAIC,MAAM,CAAC;;0FAEiE,CAAC;IACvF;IACA,OAAO;QACH,GAAGC,IAAAA,sBAAU,EAAC7B,OAAOC,IAAI;QACzB,iCAAiC;QACjC6B,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAWC,0BAAY,CAACC,KAAK;QAC7BC,cAAcC,0BAAY,CAACF,KAAK;QAChCG,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACV;AACJ;AACA,SAASH;AACT,cAAc,GAAG"}

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

@@ -24,6 +24,7 @@ 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();
     state.root.className = (0, _react.mergeClasses)(flatTreeClassNames.root, baseStyles, state.root.className);
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n  root: 'fui-FlatTree'\n};\nconst useBaseStyles = /*#__PURE__*/__resetStyles(\"rnv2ez3\", null, [\".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}\"]);\nexport const useFlatTreeStyles_unstable = state => {\n  const baseStyles = useBaseStyles();\n  state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useFlatTreeStyles.styles.js.map"],"names":["flatTreeClassNames","useFlatTreeStyles_unstable","root","useBaseStyles","__resetStyles","state","baseStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,kBAAkB;eAAlBA;;IAIAC,0BAA0B;eAA1BA;;;uBAN+B;AAErC,MAAMD,qBAAqB;IAChCE,MAAM;AACR;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAkF;AAC9I,MAAMH,6BAA6BI,CAAAA;IACxC,MAAMC,aAAaH;IACnBE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,mBAAmBE,IAAI,EAAEI,YAAYD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,oDAAoD"}
+{"version":3,"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n  root: 'fui-FlatTree'\n};\nconst useBaseStyles = /*#__PURE__*/__resetStyles(\"rnv2ez3\", null, [\".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}\"]);\nexport const useFlatTreeStyles_unstable = state => {\n  'use no memo';\n\n  const baseStyles = useBaseStyles();\n  state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useFlatTreeStyles.styles.js.map"],"names":["flatTreeClassNames","useFlatTreeStyles_unstable","root","useBaseStyles","__resetStyles","state","baseStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,kBAAkB;eAAlBA;;IAIAC,0BAA0B;eAA1BA;;;uBAN+B;AAErC,MAAMD,qBAAqB;IAChCE,MAAM;AACR;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAkF;AAC9I,MAAMH,6BAA6BI,CAAAA;IACxC;IAEA,MAAMC,aAAaH;IACnBE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,mBAAmBE,IAAI,EAAEI,YAAYD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,oDAAoD"}

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

@@ -18,6 +18,7 @@ const _useControllableOpenItems = require("../../hooks/useControllableOpenItems"
 const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
 const _useFlatControllableCheckedItems = require("./useFlatControllableCheckedItems");
 function useHeadlessFlatTree_unstable(props, options = {}) {
+    'use no memo';
     const headlessTree = _react.useMemo(()=>(0, _createHeadlessTree.createHeadlessTree)(props), [
         props
     ]);

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

@@ -1 +1 @@
-{"version":3,"sources":["useHeadlessFlatTree.js"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param props - a list of tree items\n * @param options - in case control over the internal openItems is required\n */ export function useHeadlessFlatTree_unstable(props, options = {}) {\n    const headlessTree = React.useMemo(()=>createHeadlessTree(props), [\n        props\n    ]);\n    const [openItems, setOpenItems] = useControllableOpenItems(options);\n    const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n    const navigation = useFlatTreeNavigation();\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _options_onCheckedChange;\n        const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {\n            ...data,\n            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n        });\n        setCheckedItems(nextCheckedItems);\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\n        const item = headlessTree.get(data.value);\n        if (item) {\n            switch(data.type){\n                case treeDataTypes.TypeAhead:\n                    return item;\n                case treeDataTypes.ArrowLeft:\n                    return headlessTree.get(item.parentValue);\n                case treeDataTypes.ArrowRight:\n                    return visibleItems[item.index + 1];\n                case treeDataTypes.End:\n                    return visibleItems[visibleItems.length - 1];\n                case treeDataTypes.Home:\n                    return visibleItems[0];\n                case treeDataTypes.ArrowDown:\n                    return visibleItems[item.index + 1];\n                case treeDataTypes.ArrowUp:\n                    return visibleItems[item.index - 1];\n            }\n        }\n    });\n    const getElementFromItem = React.useCallback((item)=>{\n        var _treeRef_current;\n        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`);\n    }, []);\n    const ref = useMergedRefs(treeRef, navigation.rootRef);\n    const getTreeProps = React.useCallback(()=>{\n        var _options_onNavigation;\n        return {\n            ref,\n            openItems,\n            selectionMode: options.selectionMode,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onCheckedChange: handleCheckedChange,\n            onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop\n        };\n    }, // ref, handleOpenChange - useEventCallback, handleCheckedChange - useEventCallback\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems,\n        checkedItems,\n        options.selectionMode,\n        options.onNavigation\n    ]);\n    const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [\n        openItems,\n        headlessTree\n    ]);\n    const getItem = React.useCallback((value)=>headlessTree.get(value), [\n        headlessTree\n    ]);\n    return React.useMemo(()=>({\n            navigate: navigation.navigate,\n            getTreeProps,\n            getNextNavigableItem,\n            getElementFromItem,\n            items,\n            getItem\n        }), [\n        navigation.navigate,\n        getTreeProps,\n        getNextNavigableItem,\n        getElementFromItem,\n        items,\n        getItem\n    ]);\n}\n/** @internal */ function noop() {\n/* noop */ }\n"],"names":["useHeadlessFlatTree_unstable","props","options","headlessTree","React","useMemo","createHeadlessTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","setCheckedItems","useFlatControllableCheckedItems","navigation","useFlatTreeNavigation","treeRef","useRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_options_onCheckedChange","nextCheckedItems","createNextFlatCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","_treeRef_current","current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","rootRef","getTreeProps","_options_onNavigation","selectionMode","onNavigation","noop","items","getItem","navigate"],"mappings":"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"}
+{"version":3,"sources":["useHeadlessFlatTree.js"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param props - a list of tree items\n * @param options - in case control over the internal openItems is required\n */ export function useHeadlessFlatTree_unstable(props, options = {}) {\n    'use no memo';\n    const headlessTree = React.useMemo(()=>createHeadlessTree(props), [\n        props\n    ]);\n    const [openItems, setOpenItems] = useControllableOpenItems(options);\n    const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n    const navigation = useFlatTreeNavigation();\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _options_onCheckedChange;\n        const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {\n            ...data,\n            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n        });\n        setCheckedItems(nextCheckedItems);\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\n        const item = headlessTree.get(data.value);\n        if (item) {\n            switch(data.type){\n                case treeDataTypes.TypeAhead:\n                    return item;\n                case treeDataTypes.ArrowLeft:\n                    return headlessTree.get(item.parentValue);\n                case treeDataTypes.ArrowRight:\n                    return visibleItems[item.index + 1];\n                case treeDataTypes.End:\n                    return visibleItems[visibleItems.length - 1];\n                case treeDataTypes.Home:\n                    return visibleItems[0];\n                case treeDataTypes.ArrowDown:\n                    return visibleItems[item.index + 1];\n                case treeDataTypes.ArrowUp:\n                    return visibleItems[item.index - 1];\n            }\n        }\n    });\n    const getElementFromItem = React.useCallback((item)=>{\n        var _treeRef_current;\n        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`);\n    }, []);\n    const ref = useMergedRefs(treeRef, navigation.rootRef);\n    const getTreeProps = React.useCallback(()=>{\n        var _options_onNavigation;\n        return {\n            ref,\n            openItems,\n            selectionMode: options.selectionMode,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onCheckedChange: handleCheckedChange,\n            onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop\n        };\n    }, // ref, handleOpenChange - useEventCallback, handleCheckedChange - useEventCallback\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems,\n        checkedItems,\n        options.selectionMode,\n        options.onNavigation\n    ]);\n    const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [\n        openItems,\n        headlessTree\n    ]);\n    const getItem = React.useCallback((value)=>headlessTree.get(value), [\n        headlessTree\n    ]);\n    return React.useMemo(()=>({\n            navigate: navigation.navigate,\n            getTreeProps,\n            getNextNavigableItem,\n            getElementFromItem,\n            items,\n            getItem\n        }), [\n        navigation.navigate,\n        getTreeProps,\n        getNextNavigableItem,\n        getElementFromItem,\n        items,\n        getItem\n    ]);\n}\n/** @internal */ function noop() {\n/* noop */ }\n"],"names":["useHeadlessFlatTree_unstable","props","options","headlessTree","React","useMemo","createHeadlessTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","setCheckedItems","useFlatControllableCheckedItems","navigation","useFlatTreeNavigation","treeRef","useRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_options_onCheckedChange","nextCheckedItems","createNextFlatCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","_treeRef_current","current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","rootRef","getTreeProps","_options_onNavigation","selectionMode","onNavigation","noop","items","getItem","navigate"],"mappings":"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"}

package/lib-commonjs/components/Tree/useTree.js

@@ -19,6 +19,7 @@ const _useSubtree = require("../../hooks/useSubtree");
 const _useTreeNavigation = require("../../hooks/useTreeNavigation");
 const _treeContext = require("../../contexts/treeContext");
 const useTree_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
@@ -26,6 +27,7 @@ const useTree_unstable = (props, ref)=>{
     return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);
 };
 function useNestedRootTree(props, ref) {
+    'use no memo';
     const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
     const checkedItems = (0, _useNestedControllableCheckedItems.useNestedCheckedItems)(props);
     const navigation = (0, _useTreeNavigation.useTreeNavigation)();
@@ -64,6 +66,7 @@ function useNestedRootTree(props, ref) {
     });
 }
 function useNestedSubtree(props, ref) {
+    'use no memo';
     if (process.env.NODE_ENV === 'development') {
         // this doesn't break rule of hooks, as environment is a static value
         // eslint-disable-next-line react-hooks/rules-of-hooks

package/lib-commonjs/components/Tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\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 ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const navigation = useTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data)=>{\n            var _props_onOpenChange;\n            const nextOpenItems = createNextOpenItems(data, openItems);\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n                ...data,\n                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n            });\n            setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data, {\n                    preventScroll: data.isScrollPrevented()\n                });\n            }\n        }),\n        onCheckedChange: useEventCallback((event, data)=>{\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        })\n    }, useMergedRefs(ref, navigation.treeRef)), {\n        treeType: 'nested'\n    });\n}\nfunction useNestedSubtree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        // this doesn't break rule of hooks, as environment is a static value\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n        if (treeType === 'flat') {\n            throw new Error(`@fluentui/react-tree [useTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <Tree> component inside of a <FlatTree> component!`);\n        }\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigation","useTreeNavigation","Object","assign","useRootTree","onOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","call","dangerouslyGetInternalSet_unstable","onNavigation","_props_onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","dangerouslyGetInternalMap_unstable","useMergedRefs","treeRef","treeType","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACyB;0CACc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;AACjC,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC5E;AACA,SAASM,kBAAkBP,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAiB;IACpC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMb;YAC/Cc,CAAAA,sBAAsBvB,MAAMmB,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,IAAI,CAAC1B,OAAOqB,OAAO;gBACpI,GAAGC,IAAI;gBACPb,WAAWe,cAAcG,kCAAkC;YAC/D;YACAjB,aAAac;QACjB;QACAI,cAAcR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIO;YACHA,CAAAA,sBAAsB7B,MAAM4B,YAAY,AAAD,MAAO,QAAQC,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBH,IAAI,CAAC1B,OAAOqB,OAAOC;YACxI,IAAI,CAACD,MAAMS,kBAAkB,IAAI;gBAC7BhB,WAAWiB,QAAQ,CAACT,MAAM;oBACtBU,eAAeV,KAAKW,iBAAiB;gBACzC;YACJ;QACJ;QACAC,iBAAiBd,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACtC,IAAIa;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACf,MAAMV;YAC3DuB,CAAAA,yBAAyBnC,MAAMkC,eAAe,AAAD,MAAO,QAAQC,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBT,IAAI,CAAC1B,OAAOqB,OAAO;gBAChJ,GAAGC,IAAI;gBACPV,cAAcwB,iBAAiBE,kCAAkC;YACrE;QACJ;IACJ,GAAGC,IAAAA,6BAAa,EAACtC,KAAKa,WAAW0B,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAASjC,iBAAiBR,KAAK,EAAEC,GAAG;IAChC,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAWI,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACrB,MAAM,IAAIM,MAAM,CAAC;;mEAEsC,CAAC;QAC5D;IACJ;IACA,OAAOC,IAAAA,sBAAU,EAAChD,OAAOC;AAC7B"}
+{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n    'use no memo';\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 ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    'use no memo';\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const navigation = useTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data)=>{\n            var _props_onOpenChange;\n            const nextOpenItems = createNextOpenItems(data, openItems);\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n                ...data,\n                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n            });\n            setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data, {\n                    preventScroll: data.isScrollPrevented()\n                });\n            }\n        }),\n        onCheckedChange: useEventCallback((event, data)=>{\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        })\n    }, useMergedRefs(ref, navigation.treeRef)), {\n        treeType: 'nested'\n    });\n}\nfunction useNestedSubtree(props, ref) {\n    'use no memo';\n    if (process.env.NODE_ENV === 'development') {\n        // this doesn't break rule of hooks, as environment is a static value\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n        if (treeType === 'flat') {\n            throw new Error(`@fluentui/react-tree [useTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <Tree> component inside of a <FlatTree> component!`);\n        }\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigation","useTreeNavigation","Object","assign","useRootTree","onOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","call","dangerouslyGetInternalSet_unstable","onNavigation","_props_onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","dangerouslyGetInternalMap_unstable","useMergedRefs","treeRef","treeType","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACyB;0CACc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;AACjC,MAAMA,mBAAmB,CAACC,OAAOC;IACpC;IACA,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC5E;AACA,SAASM,kBAAkBP,KAAK,EAAEC,GAAG;IACjC;IACA,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAiB;IACpC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMb;YAC/Cc,CAAAA,sBAAsBvB,MAAMmB,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,IAAI,CAAC1B,OAAOqB,OAAO;gBACpI,GAAGC,IAAI;gBACPb,WAAWe,cAAcG,kCAAkC;YAC/D;YACAjB,aAAac;QACjB;QACAI,cAAcR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIO;YACHA,CAAAA,sBAAsB7B,MAAM4B,YAAY,AAAD,MAAO,QAAQC,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBH,IAAI,CAAC1B,OAAOqB,OAAOC;YACxI,IAAI,CAACD,MAAMS,kBAAkB,IAAI;gBAC7BhB,WAAWiB,QAAQ,CAACT,MAAM;oBACtBU,eAAeV,KAAKW,iBAAiB;gBACzC;YACJ;QACJ;QACAC,iBAAiBd,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACtC,IAAIa;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACf,MAAMV;YAC3DuB,CAAAA,yBAAyBnC,MAAMkC,eAAe,AAAD,MAAO,QAAQC,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBT,IAAI,CAAC1B,OAAOqB,OAAO;gBAChJ,GAAGC,IAAI;gBACPV,cAAcwB,iBAAiBE,kCAAkC;YACrE;QACJ;IACJ,GAAGC,IAAAA,6BAAa,EAACtC,KAAKa,WAAW0B,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAASjC,iBAAiBR,KAAK,EAAEC,GAAG;IAChC;IACA,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAWI,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACrB,MAAM,IAAIM,MAAM,CAAC;;mEAEsC,CAAC;QAC5D;IACJ;IACA,OAAOC,IAAAA,sBAAU,EAAChD,OAAOC;AAC7B"}

package/lib-commonjs/components/Tree/useTreeContextValues.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "useTreeContextValues_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useTreeContextValues_unstable(state) {
+    'use no memo';
     if (state.contextType === 'root') {
         const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
         /**

package/lib-commonjs/components/Tree/useTreeContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTreeContextValues_unstable(state) {\n    if (state.contextType === 'root') {\n        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;\n        /**\n     * This context is created with \"@fluentui/react-context-selector\",\n     * there is no sense to memoize it\n     */ const tree = {\n            treeType,\n            size,\n            openItems,\n            appearance,\n            checkedItems,\n            selectionMode,\n            contextType,\n            level,\n            requestTreeResponse\n        };\n        return {\n            tree\n        };\n    }\n    return {\n        // contextType is statically determined by the context\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        tree: React.useMemo(()=>({\n                level: state.level,\n                contextType: 'subtree'\n            }), [\n            state.level\n        ])\n    };\n}\n"],"names":["useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","tree","React","useMemo"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,8BAA8BC,KAAK;IAC/C,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAC9B,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEF,WAAW,EAAEG,QAAQ,EAAEC,YAAY,EAAEC,aAAa,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,EAAE,GAAGT;QACxH;;;KAGH,GAAG,MAAMU,OAAO;YACTN;YACAI;YACAN;YACAK;YACAF;YACAC;YACAL;YACAE;YACAM;QACJ;QACA,OAAO;YACHC;QACJ;IACJ;IACA,OAAO;QACH,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBACjBT,OAAOH,MAAMG,KAAK;gBAClBF,aAAa;YACjB,CAAA,GAAI;YACJD,MAAMG,KAAK;SACd;IACL;AACJ"}
+{"version":3,"sources":["useTreeContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTreeContextValues_unstable(state) {\n    'use no memo';\n    if (state.contextType === 'root') {\n        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;\n        /**\n     * This context is created with \"@fluentui/react-context-selector\",\n     * there is no sense to memoize it\n     */ const tree = {\n            treeType,\n            size,\n            openItems,\n            appearance,\n            checkedItems,\n            selectionMode,\n            contextType,\n            level,\n            requestTreeResponse\n        };\n        return {\n            tree\n        };\n    }\n    return {\n        // contextType is statically determined by the context\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        tree: React.useMemo(()=>({\n                level: state.level,\n                contextType: 'subtree'\n            }), [\n            state.level\n        ])\n    };\n}\n"],"names":["useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","tree","React","useMemo"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,8BAA8BC,KAAK;IAC/C;IACA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAC9B,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEF,WAAW,EAAEG,QAAQ,EAAEC,YAAY,EAAEC,aAAa,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,EAAE,GAAGT;QACxH;;;KAGH,GAAG,MAAMU,OAAO;YACTN;YACAI;YACAN;YACAK;YACAF;YACAC;YACAL;YACAE;YACAM;QACJ;QACA,OAAO;YACHC;QACJ;IACJ;IACA,OAAO;QACH,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBACjBT,OAAOH,MAAMG,KAAK;gBAClBF,aAAa;YACjB,CAAA,GAAI;YACJD,MAAMG,KAAK;SACd;IACL;AACJ"}

package/lib-commonjs/components/Tree/useTreeStyles.styles.js

@@ -33,6 +33,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useTreeStyles_unstable = (state)=>{
+    'use no memo';
     const baseStyles = useBaseStyles();
     const styles = useStyles();
     const isSubTree = state.level > 1;

package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n  root: 'fui-Tree'\n};\nconst useBaseStyles = /*#__PURE__*/__resetStyles(\"rnv2ez3\", null, [\".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  subtree: {\n    z8tnut: \"fclwglc\"\n  }\n}, {\n  d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\"]\n});\nexport const useTreeStyles_unstable = state => {\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n  const isSubTree = state.level > 1;\n  state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTreeStyles.styles.js.map"],"names":["treeClassNames","useTreeStyles_unstable","root","useBaseStyles","__resetStyles","useStyles","__styles","subtree","z8tnut","d","state","baseStyles","styles","isSubTree","level","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,cAAc;eAAdA;;IAWAC,sBAAsB;eAAtBA;;;uBAbyC;AAE/C,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAkF;AACrJ,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,SAAS;QACPC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAmD;AACzD;AACO,MAAMR,yBAAyBS,CAAAA;IACpC,MAAMC,aAAaR;IACnB,MAAMS,SAASP;IACf,MAAMQ,YAAYH,MAAMI,KAAK,GAAG;IAChCJ,MAAMR,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,eAAeE,IAAI,EAAES,YAAYE,aAAaD,OAAOL,OAAO,EAAEG,MAAMR,IAAI,CAACa,SAAS;IACtH,OAAOL;AACT,GACA,gDAAgD"}
+{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n  root: 'fui-Tree'\n};\nconst useBaseStyles = /*#__PURE__*/__resetStyles(\"rnv2ez3\", null, [\".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  subtree: {\n    z8tnut: \"fclwglc\"\n  }\n}, {\n  d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\"]\n});\nexport const useTreeStyles_unstable = state => {\n  'use no memo';\n\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n  const isSubTree = state.level > 1;\n  state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTreeStyles.styles.js.map"],"names":["treeClassNames","useTreeStyles_unstable","root","useBaseStyles","__resetStyles","useStyles","__styles","subtree","z8tnut","d","state","baseStyles","styles","isSubTree","level","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,cAAc;eAAdA;;IAWAC,sBAAsB;eAAtBA;;;uBAbyC;AAE/C,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAkF;AACrJ,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,SAAS;QACPC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAmD;AACzD;AACO,MAAMR,yBAAyBS,CAAAA;IACpC;IAEA,MAAMC,aAAaR;IACnB,MAAMS,SAASP;IACf,MAAMQ,YAAYH,MAAMI,KAAK,GAAG;IAChCJ,MAAMR,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,eAAeE,IAAI,EAAES,YAAYE,aAAaD,OAAOL,OAAO,EAAEG,MAAMR,IAAI,CAACa,SAAS;IACtH,OAAOL;AACT,GACA,gDAAgD"}