@fluentui/react-tree 9.9.1 → 9.9.2

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Mon, 27 Jan 2025 20:24:42 GMT and should not be manually modified.
+This log was last generated on Tue, 28 Jan 2025 21:25:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.9.2)
+
+Tue, 28 Jan 2025 21:25:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.9.1..@fluentui/react-tree_v9.9.2)
+
+### Patches
+
+- bugfix: actions lose visibility when mouse and keyboard interactions are mixed ([PR #33731](https://github.com/microsoft/fluentui/pull/33731) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-button to v9.3.101 ([PR #33736](https://github.com/microsoft/fluentui/pull/33736) by beachball)
+
 ## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.9.1)
 
-Mon, 27 Jan 2025 20:24:42 GMT 
+Mon, 27 Jan 2025 20:27:35 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.9.0..@fluentui/react-tree_v9.9.1)
 
 ### Patches

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -4,7 +4,8 @@ import { useTreeItemContext_unstable, useTreeContext_unstable } from '../../cont
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Radio } from '@fluentui/react-radio';
 import { TreeItemChevron } from '../TreeItemChevron';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useArrowNavigationGroup, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 /**
  * Create the state required to render TreeItemLayout.
  *
@@ -63,6 +64,8 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         setIsActionsVisible,
         onActionVisibilityChange
     ]);
+    const { targetDocument } = useFluent();
+    const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();
     const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{
         const isRelatedTargetFromActions = ()=>Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));
         const isRelatedTargetFromTreeItem = ()=>Boolean(treeItemRef.current && elementContains(treeItemRef.current, event.relatedTarget));
@@ -85,6 +88,12 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {
             return;
         }
+        // when a mouseout event happens during keyboard interaction
+        // we should not hide the actions if the activeElement is the treeitem or an action
+        // as the focus on the treeitem takes precedence over the mouseout event
+        if (event.type === 'mouseout' && isNavigatingWithKeyboard() && ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === treeItemRef.current || elementContains(actionsRefInternal.current, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement))) {
+            return;
+        }
         onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
             visible: false,
             event,
@@ -97,7 +106,9 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
     }, [
         setIsActionsVisible,
         onActionVisibilityChange,
-        treeItemRef
+        treeItemRef,
+        isNavigatingWithKeyboard,
+        targetDocument
     ]);
     const expandIcon = slot.optional(props.expandIcon, {
         renderByDefault: isBranch,

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

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

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -16,6 +16,7 @@ const _reactcheckbox = require("@fluentui/react-checkbox");
 const _reactradio = require("@fluentui/react-radio");
 const _TreeItemChevron = require("../TreeItemChevron");
 const _reacttabster = require("@fluentui/react-tabster");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const useTreeItemLayout_unstable = (props, ref)=>{
     'use no memo';
     const { main, iconAfter, iconBefore } = props;
@@ -66,6 +67,8 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         setIsActionsVisible,
         onActionVisibilityChange
     ]);
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const isNavigatingWithKeyboard = (0, _reacttabster.useIsNavigatingWithKeyboard)();
     const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
         const isRelatedTargetFromActions = ()=>Boolean(actionsRefInternal.current && (0, _reactutilities.elementContains)(actionsRefInternal.current, event.relatedTarget));
         const isRelatedTargetFromTreeItem = ()=>Boolean(treeItemRef.current && (0, _reactutilities.elementContains)(treeItemRef.current, event.relatedTarget));
@@ -88,6 +91,12 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {
             return;
         }
+        // when a mouseout event happens during keyboard interaction
+        // we should not hide the actions if the activeElement is the treeitem or an action
+        // as the focus on the treeitem takes precedence over the mouseout event
+        if (event.type === 'mouseout' && isNavigatingWithKeyboard() && ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === treeItemRef.current || (0, _reactutilities.elementContains)(actionsRefInternal.current, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement))) {
+            return;
+        }
         onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
             visible: false,
             event,
@@ -100,7 +109,9 @@ const useTreeItemLayout_unstable = (props, ref)=>{
     }, [
         setIsActionsVisible,
         onActionVisibilityChange,
-        treeItemRef
+        treeItemRef,
+        isNavigatingWithKeyboard,
+        targetDocument
     ]);
     const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
         renderByDefault: isBranch,

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.9.1",
+  "version": "9.9.2",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -23,7 +23,7 @@
     "@fluentui/keyboard-keys": "^9.0.8",
     "@fluentui/react-aria": "^9.13.14",
     "@fluentui/react-avatar": "^9.6.50",
-    "@fluentui/react-button": "^9.3.100",
+    "@fluentui/react-button": "^9.3.101",
     "@fluentui/react-checkbox": "^9.2.47",
     "@fluentui/react-context-selector": "^9.1.72",
     "@fluentui/react-icons": "^2.0.245",