@fluentui/react-tree 9.6.0 → 9.7.1

package/dist/index.d.ts

@@ -15,6 +15,8 @@ import { ContextSelector } from '@fluentui/react-context-selector';
 import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { End } from '@fluentui/keyboard-keys';
 import type { Enter } from '@fluentui/keyboard-keys';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { Home } from '@fluentui/keyboard-keys';
@@ -497,6 +499,18 @@ declare type TreeItemCSSProperties = React_2.CSSProperties & {
  */
 export declare const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
 
+declare type TreeItemLayoutActionSlotProps = ExtractSlotProps<Slot<'div'> & {
+    /**
+     * Forces visibility of the aside/action content
+     */
+    visible?: boolean;
+    onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;
+}>;
+
+declare type TreeItemLayoutActionVisibilityChangeData = (EventData<'mouseover' | 'mouseout', MouseEvent> | EventData<'focus' | 'blur', FocusEvent> | EventData<'blur', React_2.FocusEvent>) & {
+    visible: boolean;
+};
+
 export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
 
 /**
@@ -538,12 +552,7 @@ export declare type TreeItemLayoutSlots = {
      *
      * `actions` slot supports a `visible` prop to force visibility of the actions.
      */
-    actions?: Slot<ExtractSlotProps<Slot<'div'> & {
-        /**
-         * Forces visibility of the aside/action content
-         */
-        visible?: boolean;
-    }>>;
+    actions?: Slot<TreeItemLayoutActionSlotProps>;
     selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'div'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'div'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  /**\n   * Aside content is normally used to render a badge or other non-actionable content\n   * It is aria-hidden by default and is only meant to be used as visual aid.\n   */\n  aside?: Slot<'div'>;\n  /**\n   * Actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   *\n   * `actions` and `aside` slots are positioned on the exact same spot,\n   * so they won't be visible at the same time.\n   * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n   *\n   * `actions` slot supports a `visible` prop to force visibility of the actions.\n   */\n  actions?: Slot<\n    ExtractSlotProps<\n      Slot<'div'> & {\n        /**\n         * Forces visibility of the aside/action content\n         */\n        visible?: boolean;\n      }\n    >\n  >;\n  selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WA8DE"}
+{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n  Slot,\n  ComponentProps,\n  ComponentState,\n  ExtractSlotProps,\n  EventData,\n  EventHandler,\n} from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutActionVisibilityChangeData = (\n  | EventData<'mouseover' | 'mouseout', MouseEvent>\n  | EventData<'focus' | 'blur', FocusEvent>\n  | EventData<'blur', React.FocusEvent>\n) & { visible: boolean };\n\nexport type TreeItemLayoutActionSlotProps = ExtractSlotProps<\n  Slot<'div'> & {\n    /**\n     * Forces visibility of the aside/action content\n     */\n    visible?: boolean;\n    onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;\n  }\n>;\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'div'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'div'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  /**\n   * Aside content is normally used to render a badge or other non-actionable content\n   * It is aria-hidden by default and is only meant to be used as visual aid.\n   */\n  aside?: Slot<'div'>;\n  /**\n   * Actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   *\n   * `actions` and `aside` slots are positioned on the exact same spot,\n   * so they won't be visible at the same time.\n   * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n   *\n   * `actions` slot supports a `visible` prop to force visibility of the actions.\n   */\n  actions?: Slot<TreeItemLayoutActionSlotProps>;\n  selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WA6EE"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -17,15 +17,12 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
     const { main, iconAfter, iconBefore } = props;
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
     const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
-    const [isActionsVisibleFromProps, actionsShorthand] = isResolvedShorthand(props.actions) ? [
+    const [isActionsVisibleFromProps, onActionVisibilityChange] = isResolvedShorthand(props.actions) ? [
         props.actions.visible,
-        {
-            ...props.actions,
-            visible: undefined
-        }
+        props.actions.onVisibilityChange
     ] : [
         undefined,
-        props.actions
+        undefined
     ];
     const [isActionsVisible, setIsActionsVisible] = useControllableState({
         state: isActionsVisibleFromProps,
@@ -46,26 +43,43 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
     const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
         if (!isTargetFromSubtree) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: true,
+                event,
+                type: event.type
+            });
             setIsActionsVisible(true);
         }
     }, [
         subtreeRef,
-        setIsActionsVisible
+        setIsActionsVisible,
+        onActionVisibilityChange
     ]);
     const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{
         const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));
         if (isRelatedTargetFromActions) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: true,
+                event,
+                type: event.type
+            });
             setIsActionsVisible(true);
             return;
         }
         const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
         if (!isTargetFromSubtree) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: false,
+                event,
+                type: event.type
+            });
             setIsActionsVisible(false);
             return;
         }
     }, [
         subtreeRef,
-        setIsActionsVisible
+        setIsActionsVisible,
+        onActionVisibilityChange
     ]);
     const expandIcon = slot.optional(props.expandIcon, {
         renderByDefault: isBranch,
@@ -83,27 +97,34 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         circular: true,
         axis: 'horizontal'
     });
-    const actions = isActionsVisible ? slot.optional(actionsShorthand, {
+    const actions = isActionsVisible ? slot.optional(props.actions, {
         defaultProps: {
             ...arrowNavigationProps,
             role: 'toolbar'
         },
         elementType: 'div'
     }) : undefined;
+    actions === null || actions === void 0 ? true : delete actions.visible;
+    actions === null || actions === void 0 ? true : delete actions.onVisibilityChange;
     const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);
     const handleActionsBlur = useEventCallback((event)=>{
-        if (isResolvedShorthand(actionsShorthand)) {
-            var _actionsShorthand_onBlur;
-            (_actionsShorthand_onBlur = actionsShorthand.onBlur) === null || _actionsShorthand_onBlur === void 0 ? void 0 : _actionsShorthand_onBlur.call(actionsShorthand, event);
+        if (isResolvedShorthand(props.actions)) {
+            var _props_actions_onBlur, _props_actions;
+            (_props_actions_onBlur = (_props_actions = props.actions).onBlur) === null || _props_actions_onBlur === void 0 ? void 0 : _props_actions_onBlur.call(_props_actions, event);
         }
         const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget));
+        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+            visible: isRelatedTargetFromActions,
+            event,
+            type: event.type
+        });
         setIsActionsVisible(isRelatedTargetFromActions);
     });
     if (actions) {
         actions.ref = actionsRefs;
         actions.onBlur = handleActionsBlur;
     }
-    const hasActions = Boolean(actionsShorthand);
+    const hasActions = Boolean(props.actions);
     React.useEffect(()=>{
         if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {
             const treeItemElement = treeItemRef.current;

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 { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } 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, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\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        setIsActionsVisible(true);\n      }\n    },\n    [subtreeRef, setIsActionsVisible],\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        setIsActionsVisible(true);\n        return;\n      }\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        setIsActionsVisible(false);\n        return;\n      }\n    },\n    [subtreeRef, setIsActionsVisible],\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(actionsShorthand, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n  const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(actionsShorthand)) {\n      actionsShorthand.onBlur?.(event);\n    }\n    const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n    setIsActionsVisible(isRelatedTargetFromActions);\n  });\n  if (actions) {\n    actions.ref = actionsRefs;\n    actions.onBlur = handleActionsBlur;\n  }\n\n  const hasActions = Boolean(actionsShorthand);\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","actionsShorthand","actions","visible","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","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  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-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -20,15 +20,12 @@ const useTreeItemLayout_unstable = (props, ref)=>{
     const { main, iconAfter, iconBefore } = props;
     const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
     const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
-    const [isActionsVisibleFromProps, actionsShorthand] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
+    const [isActionsVisibleFromProps, onActionVisibilityChange] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
         props.actions.visible,
-        {
-            ...props.actions,
-            visible: undefined
-        }
+        props.actions.onVisibilityChange
     ] : [
         undefined,
-        props.actions
+        undefined
     ];
     const [isActionsVisible, setIsActionsVisible] = (0, _reactutilities.useControllableState)({
         state: isActionsVisibleFromProps,
@@ -49,26 +46,43 @@ const useTreeItemLayout_unstable = (props, ref)=>{
     const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
         if (!isTargetFromSubtree) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: true,
+                event,
+                type: event.type
+            });
             setIsActionsVisible(true);
         }
     }, [
         subtreeRef,
-        setIsActionsVisible
+        setIsActionsVisible,
+        onActionVisibilityChange
     ]);
     const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
         const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && (0, _reactutilities.elementContains)(actionsRefInternal.current, event.relatedTarget));
         if (isRelatedTargetFromActions) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: true,
+                event,
+                type: event.type
+            });
             setIsActionsVisible(true);
             return;
         }
         const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
         if (!isTargetFromSubtree) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: false,
+                event,
+                type: event.type
+            });
             setIsActionsVisible(false);
             return;
         }
     }, [
         subtreeRef,
-        setIsActionsVisible
+        setIsActionsVisible,
+        onActionVisibilityChange
     ]);
     const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
         renderByDefault: isBranch,
@@ -86,27 +100,34 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         circular: true,
         axis: 'horizontal'
     });
-    const actions = isActionsVisible ? _reactutilities.slot.optional(actionsShorthand, {
+    const actions = isActionsVisible ? _reactutilities.slot.optional(props.actions, {
         defaultProps: {
             ...arrowNavigationProps,
             role: 'toolbar'
         },
         elementType: 'div'
     }) : undefined;
+    actions === null || actions === void 0 ? true : delete actions.visible;
+    actions === null || actions === void 0 ? true : delete actions.onVisibilityChange;
     const actionsRefs = (0, _reactutilities.useMergedRefs)(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);
     const handleActionsBlur = (0, _reactutilities.useEventCallback)((event)=>{
-        if ((0, _reactutilities.isResolvedShorthand)(actionsShorthand)) {
-            var _actionsShorthand_onBlur;
-            (_actionsShorthand_onBlur = actionsShorthand.onBlur) === null || _actionsShorthand_onBlur === void 0 ? void 0 : _actionsShorthand_onBlur.call(actionsShorthand, event);
+        if ((0, _reactutilities.isResolvedShorthand)(props.actions)) {
+            var _props_actions_onBlur, _props_actions;
+            (_props_actions_onBlur = (_props_actions = props.actions).onBlur) === null || _props_actions_onBlur === void 0 ? void 0 : _props_actions_onBlur.call(_props_actions, event);
         }
         const isRelatedTargetFromActions = Boolean((0, _reactutilities.elementContains)(event.currentTarget, event.relatedTarget));
+        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+            visible: isRelatedTargetFromActions,
+            event,
+            type: event.type
+        });
         setIsActionsVisible(isRelatedTargetFromActions);
     });
     if (actions) {
         actions.ref = actionsRefs;
         actions.onBlur = handleActionsBlur;
     }
-    const hasActions = Boolean(actionsShorthand);
+    const hasActions = Boolean(props.actions);
     _react.useEffect(()=>{
         if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {
             const treeItemElement = treeItemRef.current;

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot, useEventCallback, elementContains, useControllableState } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { main, iconAfter, iconBefore } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleFromProps, actionsShorthand] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        {\n            ...props.actions,\n            visible: undefined\n        }\n    ] : [\n        undefined,\n        props.actions\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(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    // 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    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setIsActionsVisible(true);\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible\n    ]);\n    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            setIsActionsVisible(true);\n            return;\n        }\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setIsActionsVisible(false);\n            return;\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible\n    ]);\n    const expandIcon = slot.optional(props.expandIcon, {\n        renderByDefault: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        },\n        elementType: 'div'\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'horizontal'\n    });\n    const actions = isActionsVisible ? slot.optional(actionsShorthand, {\n        defaultProps: {\n            ...arrowNavigationProps,\n            role: 'toolbar'\n        },\n        elementType: 'div'\n    }) : undefined;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);\n    const handleActionsBlur = useEventCallback((event)=>{\n        if (isResolvedShorthand(actionsShorthand)) {\n            var _actionsShorthand_onBlur;\n            (_actionsShorthand_onBlur = actionsShorthand.onBlur) === null || _actionsShorthand_onBlur === void 0 ? void 0 : _actionsShorthand_onBlur.call(actionsShorthand, event);\n        }\n        const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget));\n        setIsActionsVisible(isRelatedTargetFromActions);\n    });\n    if (actions) {\n        actions.ref = actionsRefs;\n        actions.onBlur = handleActionsBlur;\n    }\n    const hasActions = Boolean(actionsShorthand);\n    React.useEffect(()=>{\n        if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {\n            const treeItemElement = treeItemRef.current;\n            const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n            const handleFocus = setActionsVisibleIfNotFromSubtree;\n            const handleBlur = setActionsInvisibleIfNotFromSubtree;\n            treeItemElement.addEventListener('mouseover', handleMouseOver);\n            treeItemElement.addEventListener('mouseout', handleMouseOut);\n            treeItemElement.addEventListener('focus', handleFocus);\n            treeItemElement.addEventListener('blur', handleBlur);\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    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\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: slot.always(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)\n        }), {\n            elementType: 'div'\n        }),\n        iconBefore: slot.optional(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        main: slot.always(main, {\n            elementType: 'div'\n        }),\n        iconAfter: slot.optional(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        aside: !isActionsVisible ? slot.optional(props.aside, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            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            },\n            elementType: selectionMode === 'multiselect' ? Checkbox : Radio\n        })\n    };\n};\nfunction assertIsRefObject(ref) {\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","isActionsVisibleFromProps","actionsShorthand","isResolvedShorthand","actions","visible","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","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","expandIcon","slot","optional","renderByDefault","defaultProps","children","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","handleActionsBlur","useEventCallback","_actionsShorthand_onBlur","onBlur","call","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"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot, useEventCallback, elementContains, useControllableState } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { main, iconAfter, iconBefore } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleFromProps, onActionVisibilityChange] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        props.actions.onVisibilityChange\n    ] : [\n        undefined,\n        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(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    // 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    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n                visible: true,\n                event,\n                type: event.type\n            });\n            setIsActionsVisible(true);\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible,\n        onActionVisibilityChange\n    ]);\n    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n                visible: true,\n                event,\n                type: event.type\n            });\n            setIsActionsVisible(true);\n            return;\n        }\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n                visible: false,\n                event,\n                type: event.type\n            });\n            setIsActionsVisible(false);\n            return;\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible,\n        onActionVisibilityChange\n    ]);\n    const expandIcon = slot.optional(props.expandIcon, {\n        renderByDefault: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        },\n        elementType: 'div'\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'horizontal'\n    });\n    const actions = isActionsVisible ? slot.optional(props.actions, {\n        defaultProps: {\n            ...arrowNavigationProps,\n            role: 'toolbar'\n        },\n        elementType: 'div'\n    }) : undefined;\n    actions === null || actions === void 0 ? true : delete actions.visible;\n    actions === null || actions === void 0 ? true : delete actions.onVisibilityChange;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);\n    const handleActionsBlur = useEventCallback((event)=>{\n        if (isResolvedShorthand(props.actions)) {\n            var _props_actions_onBlur, _props_actions;\n            (_props_actions_onBlur = (_props_actions = props.actions).onBlur) === null || _props_actions_onBlur === void 0 ? void 0 : _props_actions_onBlur.call(_props_actions, event);\n        }\n        const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget));\n        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n            visible: isRelatedTargetFromActions,\n            event,\n            type: event.type\n        });\n        setIsActionsVisible(isRelatedTargetFromActions);\n    });\n    if (actions) {\n        actions.ref = actionsRefs;\n        actions.onBlur = handleActionsBlur;\n    }\n    const hasActions = Boolean(props.actions);\n    React.useEffect(()=>{\n        if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {\n            const treeItemElement = treeItemRef.current;\n            const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n            const handleFocus = setActionsVisibleIfNotFromSubtree;\n            const handleBlur = setActionsInvisibleIfNotFromSubtree;\n            treeItemElement.addEventListener('mouseover', handleMouseOver);\n            treeItemElement.addEventListener('mouseout', handleMouseOut);\n            treeItemElement.addEventListener('focus', handleFocus);\n            treeItemElement.addEventListener('blur', handleBlur);\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    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\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: slot.always(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)\n        }), {\n            elementType: 'div'\n        }),\n        iconBefore: slot.optional(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        main: slot.always(main, {\n            elementType: 'div'\n        }),\n        iconAfter: slot.optional(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        aside: !isActionsVisible ? slot.optional(props.aside, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            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            },\n            elementType: selectionMode === 'multiselect' ? Checkbox : Radio\n        })\n    };\n};\nfunction assertIsRefObject(ref) {\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","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","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","expandIcon","slot","optional","renderByDefault","defaultProps","children","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","handleActionsBlur","useEventCallback","_props_actions_onBlur","_props_actions","onBlur","call","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"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.6.0",
+  "version": "9.7.1",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -17,17 +17,14 @@
     "generate-api": "just-scripts generate-api",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "storybook": "start-storybook",
+    "storybook": "yarn --cwd ../stories storybook",
     "test": "jest --passWithNoTests",
-    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\"",
-    "type-check": "tsc -b tsconfig.json",
+    "type-check": "just-scripts type-check",
     "e2e": "cypress run --component",
     "e2e:local": "cypress open --component"
   },
   "devDependencies": {
-    "@dnd-kit/core": "^6.0.8",
-    "@dnd-kit/sortable": "^7.0.2",
-    "@dnd-kit/utilities": "^3.2.1",
+    "@fluentui/react-provider": "*",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
@@ -37,15 +34,15 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.12.0",
-    "@fluentui/react-avatar": "^9.6.29",
-    "@fluentui/react-button": "^9.3.83",
-    "@fluentui/react-checkbox": "^9.2.28",
-    "@fluentui/react-context-selector": "^9.1.61",
+    "@fluentui/react-aria": "^9.12.1",
+    "@fluentui/react-avatar": "^9.6.30",
+    "@fluentui/react-button": "^9.3.84",
+    "@fluentui/react-checkbox": "^9.2.29",
+    "@fluentui/react-context-selector": "^9.1.62",
     "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-radio": "^9.2.23",
+    "@fluentui/react-radio": "^9.2.24",
     "@fluentui/react-shared-contexts": "^9.19.0",
-    "@fluentui/react-tabster": "^9.21.5",
+    "@fluentui/react-tabster": "^9.22.0",
     "@fluentui/react-theme": "^9.1.19",
     "@fluentui/react-utilities": "^9.18.10",
     "@fluentui/react-jsx-runtime": "^9.0.39",