@fluentui/react-tree 9.7.11 → 9.8.1

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

@@ -60,8 +60,13 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         onActionVisibilityChange
     ]);
     const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
-        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && (0, _reactutilities.elementContains)(actionsRefInternal.current, event.relatedTarget));
-        if (isRelatedTargetFromActions) {
+        const isRelatedTargetFromActions = ()=>Boolean(actionsRefInternal.current && (0, _reactutilities.elementContains)(actionsRefInternal.current, event.relatedTarget));
+        const isRelatedTargetFromTreeItem = ()=>Boolean(treeItemRef.current && (0, _reactutilities.elementContains)(treeItemRef.current, event.relatedTarget));
+        const isTargetFromActions = ()=>{
+            var _actionsRefInternal_current;
+            return Boolean((_actionsRefInternal_current = actionsRefInternal.current) === null || _actionsRefInternal_current === void 0 ? void 0 : _actionsRefInternal_current.contains(event.target));
+        };
+        if (isRelatedTargetFromActions()) {
             onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
                 visible: true,
                 event,
@@ -70,20 +75,19 @@ const useTreeItemLayout_unstable = (props, ref)=>{
             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);
+        if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {
             return;
         }
+        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+            visible: false,
+            event,
+            type: event.type
+        });
+        setIsActionsVisible(false);
     }, [
-        subtreeRef,
         setIsActionsVisible,
-        onActionVisibilityChange
+        onActionVisibilityChange,
+        treeItemRef
     ]);
     const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
         renderByDefault: isBranch,
@@ -179,24 +183,15 @@ const useTreeItemLayout_unstable = (props, ref)=>{
             elementType: 'div'
         }),
         iconBefore: _reactutilities.slot.optional(iconBefore, {
-            defaultProps: {
-                'aria-hidden': true
-            },
             elementType: 'div'
         }),
         main: _reactutilities.slot.always(main, {
             elementType: 'div'
         }),
         iconAfter: _reactutilities.slot.optional(iconAfter, {
-            defaultProps: {
-                'aria-hidden': true
-            },
             elementType: 'div'
         }),
         aside: !isActionsVisible ? _reactutilities.slot.optional(props.aside, {
-            defaultProps: {
-                'aria-hidden': true
-            },
             elementType: 'div'
         }) : undefined,
         actions,

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

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

package/lib-commonjs/contexts/treeContext.js

@@ -29,6 +29,7 @@ const _ImmutableMap = require("../utils/ImmutableMap");
     openItems: _ImmutableSet.ImmutableSet.empty,
     checkedItems: _ImmutableMap.ImmutableMap.empty,
     requestTreeResponse: noop,
+    forceUpdateRovingTabIndex: noop,
     appearance: 'subtle',
     size: 'medium'
 };

package/lib-commonjs/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport type { SelectionMode, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n  contextType?: 'root';\n  level: number;\n  treeType: 'nested' | 'flat';\n  selectionMode: 'none' | SelectionMode;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemValue>;\n  checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | (DistributiveOmit<TreeOpenChangeData, 'openItems'> & { requestType: 'open' })\n  | (TreeNavigationData_unstable & { requestType: 'navigate' })\n  | (DistributiveOmit<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & { requestType: 'selection' })\n);\n\n/**\n * @internal\n */\nconst defaultTreeContextValue: TreeContextValue = {\n  level: 0,\n  contextType: 'root',\n  treeType: 'nested',\n  selectionMode: 'none',\n  openItems: ImmutableSet.empty,\n  checkedItems: ImmutableMap.empty,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\n/**\n * @internal\n */\nexport const TreeContext: Context<TreeContextValue> = createContext<TreeContextValue | undefined>(\n  undefined,\n) as Context<TreeContextValue>;\n\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultTreeContextValue) => selector(ctx));\n"],"names":["TreeContext","useTreeContext_unstable","defaultTreeContextValue","level","contextType","treeType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","createContext","undefined","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAkDaA,WAAAA;eAAAA;;IAIAC,uBAAAA;eAAAA;;;sCAtD+D;8BAG/C;8BACA;AAwB7B;;CAEC,GACD,MAAMC,0BAA4C;IAChDC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,WAAWC,0BAAAA,CAAaC,KAAK;IAC7BC,cAAcC,0BAAAA,CAAaF,KAAK;IAChCG,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF;AACP,QAAQ,GACV;AAKO,MAAMb,cAAyCgB,IAAAA,mCAAAA,EACpDC;AAGK,MAAMhB,0BAA0B,CAAIiB,WACzCC,IAAAA,wCAAAA,EAAmBnB,aAAa,CAACoB,MAAMlB,uBAAuB,GAAKgB,SAASE"}
+{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport type { SelectionMode, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n  contextType?: 'root';\n  level: number;\n  treeType: 'nested' | 'flat';\n  selectionMode: 'none' | SelectionMode;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemValue>;\n  checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n  // FIXME: this is only marked as optional to avoid breaking changes\n  // it should always be provided internally\n  forceUpdateRovingTabIndex?(): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | (DistributiveOmit<TreeOpenChangeData, 'openItems'> & { requestType: 'open' })\n  | (TreeNavigationData_unstable & { requestType: 'navigate' })\n  | (DistributiveOmit<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & { requestType: 'selection' })\n);\n\n/**\n * @internal\n */\nconst defaultTreeContextValue: TreeContextValue = {\n  level: 0,\n  contextType: 'root',\n  treeType: 'nested',\n  selectionMode: 'none',\n  openItems: ImmutableSet.empty,\n  checkedItems: ImmutableMap.empty,\n  requestTreeResponse: noop,\n  forceUpdateRovingTabIndex: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\n/**\n * @internal\n */\nexport const TreeContext: Context<TreeContextValue> = createContext<TreeContextValue | undefined>(\n  undefined,\n) as Context<TreeContextValue>;\n\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultTreeContextValue) => selector(ctx));\n"],"names":["TreeContext","useTreeContext_unstable","defaultTreeContextValue","level","contextType","treeType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","forceUpdateRovingTabIndex","appearance","size","createContext","undefined","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAsDaA,WAAAA;eAAAA;;IAIAC,uBAAAA;eAAAA;;;sCA1D+D;8BAG/C;8BACA;AA2B7B;;CAEC,GACD,MAAMC,0BAA4C;IAChDC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,WAAWC,0BAAAA,CAAaC,KAAK;IAC7BC,cAAcC,0BAAAA,CAAaF,KAAK;IAChCG,qBAAqBC;IACrBC,2BAA2BD;IAC3BE,YAAY;IACZC,MAAM;AACR;AAEA,SAASH;AACP,QAAQ,GACV;AAKO,MAAMb,cAAyCiB,IAAAA,mCAAAA,EACpDC;AAGK,MAAMjB,0BAA0B,CAAIkB,WACzCC,IAAAA,wCAAAA,EAAmBpB,aAAa,CAACqB,MAAMnB,uBAAuB,GAAKiB,SAASE"}

package/lib-commonjs/hooks/useFlatTreeNavigation.js

@@ -19,7 +19,7 @@ const _useHTMLElementWalkerRef = require("./useHTMLElementWalkerRef");
 function useFlatTreeNavigation() {
     'use no memo';
     const { walkerRef, rootRef: walkerRootRef } = (0, _useHTMLElementWalkerRef.useHTMLElementWalkerRef)();
-    const { rove, initialize: initializeRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
+    const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
     const rootRefCallback = _react.useCallback((root)=>{
         if (walkerRef.current && root) {
             initializeRovingTabIndex(walkerRef.current);
@@ -85,7 +85,8 @@ was found after the current element!`, data.target);
     });
     return {
         navigate,
-        rootRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback)
+        rootRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback),
+        forceUpdateRovingTabIndex
     };
 }
 function firstChild(target, treeWalker) {

package/lib-commonjs/hooks/useFlatTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\n\nexport function useFlatTreeNavigation() {\n  'use no memo';\n\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (walkerRef.current && root) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [initializeRovingTabIndex, walkerRef],\n  );\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const nextElement = parentElement(data.parentValue, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.ArrowRight: {\n        walkerRef.current.currentElement = data.target;\n        const nextElement = firstChild(data.target, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.lastChild();\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return { navigate, rootRef: useMergedRefs<HTMLDivElement>(walkerRootRef, rootRefCallback) } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n"],"names":["useFlatTreeNavigation","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rove","initialize","initializeRovingTabIndex","useRovingTabIndex","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","useEventCallback","useMergedRefs","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector","dataTreeItemValueAttrName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\n\nexport function useFlatTreeNavigation() {\n  'use no memo';\n\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (walkerRef.current && root) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [initializeRovingTabIndex, walkerRef],\n  );\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const nextElement = parentElement(data.parentValue, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.ArrowRight: {\n        walkerRef.current.currentElement = data.target;\n        const nextElement = firstChild(data.target, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.lastChild();\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return {\n    navigate,\n    rootRef: useMergedRefs<HTMLDivElement>(walkerRootRef, rootRefCallback),\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n"],"names":["useFlatTreeNavigation","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rove","forceUpdate","forceUpdateRovingTabIndex","initialize","initializeRovingTabIndex","useRovingTabIndex","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","useEventCallback","useMergedRefs","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector","dataTreeItemValueAttrName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/hooks/useRootTree.js

@@ -92,6 +92,9 @@ function useRootTree(props, ref) {
         openItems,
         checkedItems,
         requestTreeResponse,
+        forceUpdateRovingTabIndex: ()=>{
+        // noop
+        },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             // FIXME:
             // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`

package/lib-commonjs/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => ImmutableSet.from(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n  const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n    props.onOpenChange?.(request.event, {\n      ...request,\n      openItems: ImmutableSet.dangerouslyGetInternalSet(createNextOpenItems(request, openItems)),\n    });\n  };\n\n  const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n    if (selectionMode === 'none') {\n      return;\n    }\n    props.onCheckedChange?.(request.event, {\n      ...request,\n      selectionMode,\n      checkedItems: ImmutableMap.dangerouslyGetInternalMap(checkedItems),\n      // Casting is required here due to selection | multiselection spreading the union problem\n    } as TreeCheckedChangeData);\n  };\n\n  const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n    let isScrollPrevented = false;\n    props.onNavigation?.(request.event, {\n      ...request,\n      preventScroll: () => {\n        isScrollPrevented = true;\n      },\n      isScrollPrevented: () => isScrollPrevented,\n    });\n    switch (request.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        request.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange(request);\n      case 'selection':\n        return requestCheckedChange(request);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n      // TODO: remove once React v18 slot API is modified\n      // This is a problem at the moment due to UnknownSlotProps assumption\n      // that `children` property is `ReactNode`, which in this case is not valid\n      // as PresenceComponentProps['children'] is `ReactElement`\n      collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,\n    },\n    contextType: 'root',\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\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: ref as React.Ref<HTMLDivElement>,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    collapseMotion: undefined,\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","ImmutableSet","from","checkedItems","createCheckedItems","requestOpenChange","request","onOpenChange","event","dangerouslyGetInternalSet","createNextOpenItems","requestCheckedChange","onCheckedChange","ImmutableMap","dangerouslyGetInternalMap","requestNavigation","isScrollPrevented","onNavigation","preventScroll","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","requestType","components","root","collapseMotion","Collapse","contextType","open","level","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => ImmutableSet.from(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n  const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n    props.onOpenChange?.(request.event, {\n      ...request,\n      openItems: ImmutableSet.dangerouslyGetInternalSet(createNextOpenItems(request, openItems)),\n    });\n  };\n\n  const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n    if (selectionMode === 'none') {\n      return;\n    }\n    props.onCheckedChange?.(request.event, {\n      ...request,\n      selectionMode,\n      checkedItems: ImmutableMap.dangerouslyGetInternalMap(checkedItems),\n      // Casting is required here due to selection | multiselection spreading the union problem\n    } as TreeCheckedChangeData);\n  };\n\n  const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n    let isScrollPrevented = false;\n    props.onNavigation?.(request.event, {\n      ...request,\n      preventScroll: () => {\n        isScrollPrevented = true;\n      },\n      isScrollPrevented: () => isScrollPrevented,\n    });\n    switch (request.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        request.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange(request);\n      case 'selection':\n        return requestCheckedChange(request);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n      // TODO: remove once React v18 slot API is modified\n      // This is a problem at the moment due to UnknownSlotProps assumption\n      // that `children` property is `ReactNode`, which in this case is not valid\n      // as PresenceComponentProps['children'] is `ReactElement`\n      collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,\n    },\n    contextType: 'root',\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex: () => {\n      // noop\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\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: ref as React.Ref<HTMLDivElement>,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    collapseMotion: undefined,\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","ImmutableSet","from","checkedItems","createCheckedItems","requestOpenChange","request","onOpenChange","event","dangerouslyGetInternalSet","createNextOpenItems","requestCheckedChange","onCheckedChange","ImmutableMap","dangerouslyGetInternalMap","requestNavigation","isScrollPrevented","onNavigation","preventScroll","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","requestType","components","root","collapseMotion","Collapse","contextType","open","level","forceUpdateRovingTabIndex","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/hooks/useRovingTabIndexes.js

@@ -17,11 +17,6 @@ function useRovingTabIndex() {
     const currentElementRef = _react.useRef(null);
     const walkerRef = _react.useRef(null);
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    _react.useEffect(()=>{
-        if ((currentElementRef.current === null || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body.contains(currentElementRef.current))) && walkerRef.current) {
-            initialize(walkerRef.current);
-        }
-    });
     (0, _reacttabster.useFocusedElementChange)((element)=>{
         if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && (0, _reactutilities.elementContains)(walkerRef.current.root, element)) {
             rove(element);
@@ -52,8 +47,17 @@ function useRovingTabIndex() {
         nextElement.focus(focusOptions);
         currentElementRef.current = nextElement;
     }, []);
+    const forceUpdate = _react.useCallback(()=>{
+        if ((currentElementRef.current === null || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body.contains(currentElementRef.current))) && walkerRef.current) {
+            initialize(walkerRef.current);
+        }
+    }, [
+        targetDocument,
+        initialize
+    ]);
     return {
         rove,
-        initialize
+        initialize,
+        forceUpdate
     };
 }

package/lib-commonjs/hooks/useRovingTabIndexes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n\n/**\n * @internal\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex() {\n  const currentElementRef = React.useRef<HTMLElement | null>(null);\n  const walkerRef = React.useRef<HTMLElementWalker | null>(null);\n  const { targetDocument } = useFluent();\n\n  React.useEffect(() => {\n    if (\n      (currentElementRef.current === null || !targetDocument?.body.contains(currentElementRef.current)) &&\n      walkerRef.current\n    ) {\n      initialize(walkerRef.current);\n    }\n  });\n\n  useFocusedElementChange(element => {\n    if (\n      element?.getAttribute('role') === 'treeitem' &&\n      walkerRef.current &&\n      elementContains(walkerRef.current.root, element)\n    ) {\n      rove(element);\n    }\n  });\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walkerRef.current = walker;\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  const rove = React.useCallback((nextElement: HTMLElement, focusOptions?: FocusOptions) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus(focusOptions);\n    currentElementRef.current = nextElement;\n  }, []);\n\n  return {\n    rove,\n    initialize,\n  };\n}\n"],"names":["useRovingTabIndex","currentElementRef","React","useRef","walkerRef","targetDocument","useFluent","useEffect","current","body","contains","initialize","useFocusedElementChange","element","getAttribute","elementContains","root","rove","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;;iEAVO;qCACyB;8BAER;gCACR;AAMzB,SAASA;IACd,MAAMC,oBAAoBC,OAAMC,MAAM,CAAqB;IAC3D,MAAMC,YAAYF,OAAMC,MAAM,CAA2B;IACzD,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAE3BJ,OAAMK,SAAS,CAAC;QACd,IACE,AAACN,CAAAA,kBAAkBO,OAAO,KAAK,QAAQ,CAACH,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBI,IAAI,CAACC,QAAQ,CAACT,kBAAkBO,OAAO,CAAA,CAAA,KAC/FJ,UAAUI,OAAO,EACjB;YACAG,WAAWP,UAAUI,OAAO;QAC9B;IACF;IAEAI,IAAAA,qCAAAA,EAAwBC,CAAAA;QACtB,IACEA,CAAAA,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASC,YAAY,CAAC,OAAA,MAAY,cAClCV,UAAUI,OAAO,IACjBO,IAAAA,+BAAAA,EAAgBX,UAAUI,OAAO,CAACQ,IAAI,EAAEH,UACxC;YACAI,KAAKJ;QACP;IACF;IAEA,MAAMF,aAAaT,OAAMgB,WAAW,CAAC,CAACC;QACpCf,UAAUI,OAAO,GAAGW;QACpBA,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnC,IAAIK,gBAAgBF,OAAOG,UAAU,CAACT,CAAAA,UACpCA,QAAQU,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnCK,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBtB,kBAAkBO,OAAO,GAAGa;QAC5B,IAAIM,cAAkC;QACtC,MAAO,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAA,KAAOA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMN,OAAOf,OAAMgB,WAAW,CAAC,CAACS,aAA0BC;QACxD,IAAI,CAAC3B,kBAAkBO,OAAO,EAAE;YAC9B;QACF;QACAP,kBAAkBO,OAAO,CAACe,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClB3B,kBAAkBO,OAAO,GAAGmB;IAC9B,GAAG,EAAE;IAEL,OAAO;QACLV;QACAN;IACF;AACF"}
+{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n\n/**\n * @internal\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex() {\n  const currentElementRef = React.useRef<HTMLElement | null>(null);\n  const walkerRef = React.useRef<HTMLElementWalker | null>(null);\n  const { targetDocument } = useFluent();\n\n  useFocusedElementChange(element => {\n    if (\n      element?.getAttribute('role') === 'treeitem' &&\n      walkerRef.current &&\n      elementContains(walkerRef.current.root, element)\n    ) {\n      rove(element);\n    }\n  });\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walkerRef.current = walker;\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  const rove = React.useCallback((nextElement: HTMLElement, focusOptions?: FocusOptions) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus(focusOptions);\n    currentElementRef.current = nextElement;\n  }, []);\n\n  const forceUpdate = React.useCallback(() => {\n    if (\n      (currentElementRef.current === null || !targetDocument?.body.contains(currentElementRef.current)) &&\n      walkerRef.current\n    ) {\n      initialize(walkerRef.current);\n    }\n  }, [targetDocument, initialize]);\n\n  return {\n    rove,\n    initialize,\n    forceUpdate,\n  };\n}\n"],"names":["useRovingTabIndex","currentElementRef","React","useRef","walkerRef","targetDocument","useFluent","useFocusedElementChange","element","getAttribute","current","elementContains","root","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus","forceUpdate","body","contains"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;;iEAVO;qCACyB;8BAER;gCACR;AAMzB,SAASA;IACd,MAAMC,oBAAoBC,OAAMC,MAAM,CAAqB;IAC3D,MAAMC,YAAYF,OAAMC,MAAM,CAA2B;IACzD,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAE3BC,IAAAA,qCAAAA,EAAwBC,CAAAA;QACtB,IACEA,CAAAA,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASC,YAAY,CAAC,OAAA,MAAY,cAClCL,UAAUM,OAAO,IACjBC,IAAAA,+BAAAA,EAAgBP,UAAUM,OAAO,CAACE,IAAI,EAAEJ,UACxC;YACAK,KAAKL;QACP;IACF;IAEA,MAAMM,aAAaZ,OAAMa,WAAW,CAAC,CAACC;QACpCZ,UAAUM,OAAO,GAAGM;QACpBA,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnC,IAAIM,gBAAgBF,OAAOG,UAAU,CAACX,CAAAA,UACpCA,QAAQY,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnCM,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBnB,kBAAkBS,OAAO,GAAGQ;QAC5B,IAAIM,cAAkC;QACtC,MAAO,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAA,KAAOA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMP,OAAOX,OAAMa,WAAW,CAAC,CAACS,aAA0BC;QACxD,IAAI,CAACxB,kBAAkBS,OAAO,EAAE;YAC9B;QACF;QACAT,kBAAkBS,OAAO,CAACU,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClBxB,kBAAkBS,OAAO,GAAGc;IAC9B,GAAG,EAAE;IAEL,MAAMG,cAAczB,OAAMa,WAAW,CAAC;QACpC,IACE,AAACd,CAAAA,kBAAkBS,OAAO,KAAK,QAAQ,CAACL,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBuB,IAAI,CAACC,QAAQ,CAAC5B,kBAAkBS,OAAO,CAAA,CAAA,KAC/FN,UAAUM,OAAO,EACjB;YACAI,WAAWV,UAAUM,OAAO;QAC9B;IACF,GAAG;QAACL;QAAgBS;KAAW;IAE/B,OAAO;QACLD;QACAC;QACAa;IACF;AACF"}

package/lib-commonjs/hooks/useTreeNavigation.js

@@ -17,7 +17,7 @@ const _useHTMLElementWalkerRef = require("./useHTMLElementWalkerRef");
 const _reactutilities = require("@fluentui/react-utilities");
 function useTreeNavigation() {
     'use no memo';
-    const { rove, initialize: initializeRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
+    const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
     const { walkerRef, rootRef: walkerRootRef } = (0, _useHTMLElementWalkerRef.useHTMLElementWalkerRef)();
     const rootRefCallback = _react.useCallback((root)=>{
         if (root && walkerRef.current) {
@@ -65,7 +65,8 @@ function useTreeNavigation() {
     }
     return {
         navigate,
-        treeRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback)
+        treeRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback),
+        forceUpdateRovingTabIndex
     };
 }
 function lastChildRecursive(walker) {

package/lib-commonjs/hooks/useTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport function useTreeNavigation() {\n  'use no memo';\n\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      case treeDataTypes.ArrowRight:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return lastChildRecursive(walkerRef.current);\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement, focusOptions);\n    }\n  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n  } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["useTreeNavigation","rove","initialize","initializeRovingTabIndex","useRovingTabIndex","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","useMergedRefs","walker","lastElement","lastChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYgBA;;;eAAAA;;;;sCAXqB;wBACP;qCACI;iEAEX;yCACiB;gCACV;AAKvB,SAASA;IACd;IAEA,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGC,IAAAA,sCAAAA;IACvD,MAAM,EAAEC,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGC,IAAAA,gDAAAA;IAE9C,MAAMC,kBAAkDC,OAAMC,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQP,UAAUQ,OAAO,EAAE;YAC7BV,yBAAyBE,UAAUQ,OAAO;QAC5C;IACF,GACA;QAACR;QAAWF;KAAyB;IAGvC,MAAMW,iBAAiB,CAACC;QACtB,IAAI,CAACV,UAAUQ,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKC,qBAAAA,CAAcC,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,KAAKF,qBAAAA,CAAcG,SAAS;gBAC1Bf,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOG,IAAAA,0CAAAA,EAAqBjB,UAAUQ,OAAO,EAAEE,KAAKQ,KAAK,CAACC,GAAG;YAC/D,KAAKP,qBAAAA,CAAcQ,SAAS;gBAC1BpB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACa,aAAa;YACxC,KAAKT,qBAAAA,CAAcU,UAAU;gBAC3BtB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACe,UAAU;YACrC,KAAKX,qBAAAA,CAAcY,GAAG;gBACpBxB,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOkB,mBAAmBzB,UAAUQ,OAAO;YAC7C,KAAKI,qBAAAA,CAAcc,IAAI;gBACrB1B,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOP,UAAUQ,OAAO,CAACe,UAAU;YACrC,KAAKX,qBAAAA,CAAce,SAAS;gBAC1B3B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACoB,WAAW;YACtC,KAAKhB,qBAAAA,CAAciB,OAAO;gBACxB7B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACsB,eAAe;QAC5C;IACF;IACA,SAASC,SAASrB,IAAiC,EAAEsB,YAA2B;QAC9E,MAAMJ,cAAcnB,eAAeC;QACnC,IAAIkB,aAAa;YACfhC,KAAKgC,aAAaI;QACpB;IACF;IACA,OAAO;QACLD;QACAE,SAASC,IAAAA,6BAAAA,EAAchC,eAAeE;IACxC;AACF;AAEA,SAASqB,mBAAmBU,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIR,cAAkC;IACtC,MAAQA,cAAcO,OAAOE,SAAS,GAAK;QACzCD,cAAcR;IAChB;IACA,OAAOQ;AACT"}
+{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport function useTreeNavigation() {\n  'use no memo';\n\n  const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      case treeDataTypes.ArrowRight:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return lastChildRecursive(walkerRef.current);\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement, focusOptions);\n    }\n  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["useTreeNavigation","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","useRovingTabIndex","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","useMergedRefs","walker","lastElement","lastChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYgBA;;;eAAAA;;;;sCAXqB;wBACP;qCACI;iEAEX;yCACiB;gCACV;AAKvB,SAASA;IACd;IAEA,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAEC,aAAaC,yBAAyB,EAAE,GAAGC,IAAAA,sCAAAA;IAC/F,MAAM,EAAEC,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGC,IAAAA,gDAAAA;IAE9C,MAAMC,kBAAkDC,OAAMC,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQP,UAAUQ,OAAO,EAAE;YAC7BZ,yBAAyBI,UAAUQ,OAAO;QAC5C;IACF,GACA;QAACR;QAAWJ;KAAyB;IAGvC,MAAMa,iBAAiB,CAACC;QACtB,IAAI,CAACV,UAAUQ,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKC,qBAAAA,CAAcC,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,KAAKF,qBAAAA,CAAcG,SAAS;gBAC1Bf,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOG,IAAAA,0CAAAA,EAAqBjB,UAAUQ,OAAO,EAAEE,KAAKQ,KAAK,CAACC,GAAG;YAC/D,KAAKP,qBAAAA,CAAcQ,SAAS;gBAC1BpB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACa,aAAa;YACxC,KAAKT,qBAAAA,CAAcU,UAAU;gBAC3BtB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACe,UAAU;YACrC,KAAKX,qBAAAA,CAAcY,GAAG;gBACpBxB,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOkB,mBAAmBzB,UAAUQ,OAAO;YAC7C,KAAKI,qBAAAA,CAAcc,IAAI;gBACrB1B,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOP,UAAUQ,OAAO,CAACe,UAAU;YACrC,KAAKX,qBAAAA,CAAce,SAAS;gBAC1B3B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACoB,WAAW;YACtC,KAAKhB,qBAAAA,CAAciB,OAAO;gBACxB7B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACsB,eAAe;QAC5C;IACF;IACA,SAASC,SAASrB,IAAiC,EAAEsB,YAA2B;QAC9E,MAAMJ,cAAcnB,eAAeC;QACnC,IAAIkB,aAAa;YACflC,KAAKkC,aAAaI;QACpB;IACF;IACA,OAAO;QACLD;QACAE,SAASC,IAAAA,6BAAAA,EAAchC,eAAeE;QACtCN;IACF;AACF;AAEA,SAAS2B,mBAAmBU,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIR,cAAkC;IACtC,MAAQA,cAAcO,OAAOE,SAAS,GAAK;QACzCD,cAAcR;IAChB;IACA,OAAOQ;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.7.11",
+  "version": "9.8.1",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,20 +34,20 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.13.4",
-    "@fluentui/react-avatar": "^9.6.37",
-    "@fluentui/react-button": "^9.3.89",
-    "@fluentui/react-checkbox": "^9.2.35",
-    "@fluentui/react-context-selector": "^9.1.65",
+    "@fluentui/react-aria": "^9.13.6",
+    "@fluentui/react-avatar": "^9.6.39",
+    "@fluentui/react-button": "^9.3.91",
+    "@fluentui/react-checkbox": "^9.2.37",
+    "@fluentui/react-context-selector": "^9.1.67",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-motion-components-preview": "^0.1.2",
-    "@fluentui/react-motion": "^9.5.0",
-    "@fluentui/react-radio": "^9.2.30",
-    "@fluentui/react-shared-contexts": "^9.20.0",
-    "@fluentui/react-tabster": "^9.22.5",
-    "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.13",
-    "@fluentui/react-jsx-runtime": "^9.0.42",
+    "@fluentui/react-motion-components-preview": "^0.1.4",
+    "@fluentui/react-motion": "^9.5.2",
+    "@fluentui/react-radio": "^9.2.32",
+    "@fluentui/react-shared-contexts": "^9.20.1",
+    "@fluentui/react-tabster": "^9.22.7",
+    "@fluentui/react-theme": "^9.1.20",
+    "@fluentui/react-utilities": "^9.18.15",
+    "@fluentui/react-jsx-runtime": "^9.0.44",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },