@fluentui/react-tree 9.4.1 → 9.4.2

package/CHANGELOG.json

@@ -2,7 +2,88 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Wed, 04 Oct 2023 08:41:54 GMT",
+      "date": "Thu, 05 Oct 2023 15:18:00 GMT",
+      "tag": "@fluentui/react-tree_v9.4.2",
+      "version": "9.4.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "86dd76990e3da5af1f2b6b04a3aec46141d5a653",
+            "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "f9ef593dd07abb0341e7be09f60cb841d577135d",
+            "comment": "bugfix: ensure TreeItem emits events properly"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.40",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.37",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.46",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.47",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.38",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.21",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.47",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.13.4",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-utilities to v9.14.1",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.14",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Oct 2023 08:45:47 GMT",
       "tag": "@fluentui/react-tree_v9.4.1",
       "version": "9.4.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Wed, 04 Oct 2023 08:41:54 GMT and should not be manually modified.
+This log was last generated on Thu, 05 Oct 2023 15:18:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.2)
+
+Thu, 05 Oct 2023 15:18:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.1..@fluentui/react-tree_v9.4.2)
+
+### Patches
+
+- chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29387](https://github.com/microsoft/fluentui/pull/29387) by bernardo.sunderhus@gmail.com)
+- bugfix: ensure TreeItem emits events properly ([PR #29390](https://github.com/microsoft/fluentui/pull/29390) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.40 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-avatar to v9.5.37 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-button to v9.3.46 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.47 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.38 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-portal to v9.3.21 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-radio to v9.1.47 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-tabster to v9.13.4 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-utilities to v9.14.1 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.14 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+
 ## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.1)
 
-Wed, 04 Oct 2023 08:41:54 GMT 
+Wed, 04 Oct 2023 08:45:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.0..@fluentui/react-tree_v9.4.1)
 
 ### Patches

package/dist/index.d.ts

@@ -714,7 +714,14 @@ export declare type TreeOpenChangeData = {
 } | {
     event: React_2.MouseEvent<HTMLElement>;
     type: 'Click';
-} | {
+}
+/**
+* @deprecated
+* Use `type: 'Click'` instead of Enter,
+* an enter press will trigger a click event, which will trigger an open change,
+* so there is no need to have a separate type for it.
+*/
+| {
     event: React_2.KeyboardEvent<HTMLElement>;
     type: typeof Enter;
 } | {

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

@@ -1 +1 @@
-{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n  target: HTMLElement;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue | SubtreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n  open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"mappings":"AAAA,WAsJ6C"}
+{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n  target: HTMLElement;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  /**\n   * @deprecated\n   * Use `type: 'Click'` instead of Enter,\n   * an enter press will trigger a click event, which will trigger an open change,\n   * so there is no need to have a separate type for it.\n   */\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue | SubtreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n  open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"mappings":"AAAA,WA4J6C"}

package/lib/components/TreeItem/useTreeItem.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
 import { Space } from '@fluentui/keyboard-keys';
 import { treeDataTypes } from '../../utils/tokens';
@@ -29,7 +29,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
     // note, if the value is not externally provided,
     // then selection and expansion will not work properly
     const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
-    const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
+    const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
     const [isActionsVisible, setActionsVisible] = React.useState(false);
     const [isAsideVisible, setAsideVisible] = React.useState(true);
     const handleActionsRef = React.useCallback((actionsElement)=>{
@@ -102,25 +102,13 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
                 if (selectionMode !== 'none') {
                     var _selectionRef_current;
                     (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                    // Prevents the page from scrolling down when the spacebar is pressed
                     event.preventDefault();
                 }
                 return;
             case treeDataTypes.Enter:
                 {
-                    var _props_onOpenChange;
-                    const data = {
-                        value,
-                        event,
-                        open: !open,
-                        type: event.key,
-                        target: event.currentTarget
-                    };
-                    (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
-                    return requestTreeResponse({
-                        ...data,
-                        itemType,
-                        requestType: 'open'
-                    });
+                    return event.currentTarget.click();
                 }
             case treeDataTypes.End:
             case treeDataTypes.Home:
@@ -149,8 +137,8 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
                         target: event.currentTarget
                     };
                     if (open) {
-                        var _props_onOpenChange1;
-                        (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
+                        var _props_onOpenChange;
+                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
                     }
                     return requestTreeResponse({
                         ...data,
@@ -172,8 +160,8 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
                     target: event.currentTarget
                 };
                 if (!open) {
-                    var _props_onOpenChange2;
-                    (_props_onOpenChange2 = props.onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(props, event, data);
+                    var _props_onOpenChange1;
+                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
                 }
                 return requestTreeResponse({
                     ...data,
@@ -195,13 +183,13 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             });
         }
     });
-    const handleActionsVisible = useEventCallback((event)=>{
+    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
         if (!isTargetFromSubtree) {
             setActionsVisible(true);
         }
-    });
-    const handleActionsInvisible = useEventCallback((event)=>{
+    }, []);
+    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
         const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));
         if (isRelatedTargetFromActions) {
@@ -210,8 +198,25 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         if (!isTargetFromSubtree) {
             return setActionsVisible(false);
         }
+    }, []);
+    const handleMouseOver = useEventCallback((event)=>{
+        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);
+        setActionsVisibleIfNotFromSubtree(event);
+    });
+    const handleFocus = useEventCallback((event)=>{
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        setActionsVisibleIfNotFromSubtree(event);
+    });
+    const handleMouseOut = useEventCallback((event)=>{
+        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);
+        setActionsInvisibleIfNotFromSubtree(event);
+    });
+    const handleBlur = useEventCallback((event)=>{
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setActionsInvisibleIfNotFromSubtree(event);
     });
     const handleChange = useEventCallback((event)=>{
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
         if (event.isDefaultPrevented()) {
             return;
         }
@@ -245,7 +250,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         },
         isAsideVisible,
         isActionsVisible,
-        root: slot.always(getNativeElementProps(as, {
+        root: slot.always(getIntrinsicElementProps(as, {
             tabIndex: -1,
             [dataTreeItemValueAttrName]: value,
             ...rest,
@@ -260,10 +265,10 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             'aria-expanded': itemType === 'branch' ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
-            onMouseOver: handleActionsVisible,
-            onFocus: handleActionsVisible,
-            onMouseOut: handleActionsInvisible,
-            onBlur: handleActionsInvisible,
+            onMouseOver: handleMouseOver,
+            onFocus: handleFocus,
+            onMouseOut: handleMouseOut,
+            onBlur: handleBlur,
             onChange: handleChange
         }), {
             elementType: 'div'

package/lib/components/TreeItem/useTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const { level: contextLevel } = useSubtreeContext_unstable();\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  }, []);\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: !open,\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\n      });\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.Enter: {\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        props.onOpenChange?.(event, data);\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          requestType: 'open',\n        });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'open' : 'navigate',\n        });\n      }\n      case treeDataTypes.ArrowRight:\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'navigate' : 'open',\n        });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getNativeElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n        'aria-expanded': itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onMouseOver: handleActionsVisible,\n        onFocus: handleActionsVisible,\n        onMouseOut: handleActionsInvisible,\n        onBlur: handleActionsInvisible,\n        onChange: handleChange,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const { level: contextLevel } = useSubtreeContext_unstable();\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const {\n    onClick,\n    onKeyDown,\n    onMouseOver,\n    onFocus,\n    onMouseOut,\n    onBlur,\n    onChange,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    ...rest\n  } = props;\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  }, []);\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: !open,\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\n      });\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          // Prevents the page from scrolling down when the spacebar is pressed\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.Enter: {\n        return event.currentTarget.click();\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'open' : 'navigate',\n        });\n      }\n      case treeDataTypes.ArrowRight:\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'navigate' : 'open',\n        });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const setActionsVisibleIfNotFromSubtree = React.useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  }, []);\n  const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement> | React.FocusEvent<HTMLDivElement>) => {\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      const isRelatedTargetFromActions = Boolean(\n        actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n      );\n      if (isRelatedTargetFromActions) {\n        return setActionsVisible(true);\n      }\n      if (!isTargetFromSubtree) {\n        return setActionsVisible(false);\n      }\n    },\n    [],\n  );\n\n  const handleMouseOver = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseOver?.(event);\n    setActionsVisibleIfNotFromSubtree(event);\n  });\n\n  const handleFocus = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    onFocus?.(event);\n    setActionsVisibleIfNotFromSubtree(event);\n  });\n\n  const handleMouseOut = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseOut?.(event);\n    setActionsInvisibleIfNotFromSubtree(event);\n  });\n  const handleBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    onBlur?.(event);\n    setActionsInvisibleIfNotFromSubtree(event);\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n        'aria-expanded': itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onMouseOver: handleMouseOver,\n        onFocus: handleFocus,\n        onMouseOut: handleMouseOut,\n        onBlur: handleBlur,\n        onChange: handleChange,\n      } as const),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["React","ReactDOM","getIntrinsicElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","toString","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","setActionsVisibleIfNotFromSubtree","isTargetFromSubtree","Boolean","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","handleMouseOver","handleFocus","handleMouseOut","handleBlur","handleChange","components","root","always","tabIndex","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,cAAc,YAAY;AACtC,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AACnH,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,uBAAuB,EAAEC,0BAA0B,EAAEC,2BAA2B,QAAQ,iBAAiB;AAClH,SAASC,yBAAyB,QAAQ,0CAA0C;AAEpF;;;;;;;;CAQC,GACD,OAAO,SAASC,qBAAqBC,KAAoB,EAAEC,GAA8B;QAW9CD;IAVzC,MAAME,WAAWP,wBAAwBQ,CAAAA,MAAOA,IAAID,QAAQ;IAC5D,IAAIA,aAAa,QAAQ;QACvBE,gCAAgCJ;IAClC;IACA,MAAMK,sBAAsBV,wBAAwBQ,CAAAA,MAAOA,IAAIE,mBAAmB;IAClF,MAAM,EAAEC,OAAOC,YAAY,EAAE,GAAGX;IAChC,MAAMY,cAAcX,4BAA4BM,CAAAA;YAAOH;eAAAA,CAAAA,qBAAAA,MAAMQ,WAAW,cAAjBR,gCAAAA,qBAAqBG,IAAIM,KAAK;IAAD;IAEpF,iDAAiD;IACjD,sDAAsD;IACtD,MAAMA,QAAQrB,MAAM,sBAAqBY,eAAAA,MAAMS,KAAK,cAAXT,mCAAAA,aAAaU,QAAQ;IAE9D,MAAM,EACJC,OAAO,EACPC,SAAS,EACTC,WAAW,EACXC,OAAO,EACPC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACRC,KAAK,KAAK,EACVC,WAAW,MAAM,EACjB,cAAcb,QAAQC,YAAY,EAClC,GAAGa,MACJ,GAAGpB;IAEJ,MAAM,CAACqB,kBAAkBC,kBAAkB,GAAGrC,MAAMsC,QAAQ,CAAC;IAC7D,MAAM,CAACC,gBAAgBC,gBAAgB,GAAGxC,MAAMsC,QAAQ,CAAC;IAEzD,MAAMG,mBAAmBzC,MAAM0C,WAAW,CAAC,CAACC;QAC1CH,gBAAgBG,mBAAmB;IACrC,GAAG,EAAE;IAEL,MAAMC,aAAa5C,MAAM6C,MAAM,CAAiB;IAChD,MAAMC,gBAAgB9C,MAAM6C,MAAM,CAAiB;IACnD,MAAME,YAAY/C,MAAM6C,MAAM,CAAiB;IAC/C,MAAMG,aAAahD,MAAM6C,MAAM,CAAiB;IAChD,MAAMI,eAAejD,MAAM6C,MAAM,CAAmB;IAEpD,MAAMK,OAAOxC,wBAAwBQ,CAAAA;YAAOH;eAAAA,CAAAA,cAAAA,MAAMmC,IAAI,cAAVnC,yBAAAA,cAAcG,IAAIiC,SAAS,CAACC,GAAG,CAAC5B;IAAK;IACjF,MAAM6B,gBAAgB3C,wBAAwBQ,CAAAA,MAAOA,IAAImC,aAAa;IACtE,MAAMC,UAAU5C,wBAAwBQ,CAAAA;YAAOA;eAAAA,CAAAA,wBAAAA,IAAIqC,YAAY,CAACC,GAAG,CAAChC,oBAArBN,mCAAAA,wBAA+B;IAAI;IAElF,MAAMuC,cAAcpD,iBAAiB,CAACqD;QACpChC,oBAAAA,8BAAAA,QAAUgC;QACV,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,MAAMC,qBAAqBhB,WAAWiB,OAAO,IAAItD,gBAAgBqC,WAAWiB,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIF,oBAAoB;YACtB;QACF;QACA,MAAMG,qBAAqBf,WAAWa,OAAO,IAAItD,gBAAgByC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF;QACA,MAAMC,uBAAuBf,aAAaY,OAAO,IAAItD,gBAAgB0C,aAAaY,OAAO,EAAEH,MAAMI,MAAM;QACvG,IAAIE,sBAAsB;YACxB;QACF;QACA,MAAMC,wBAAwBnB,cAAce,OAAO,IAAItD,gBAAgBuC,cAAce,OAAO,EAAEH,MAAMI,MAAM;QAE1G7D,SAASiE,uBAAuB,CAAC;gBAQ/BnD;YAPA,MAAMoD,OAAO;gBACXT;gBACAlC;gBACA0B,MAAM,CAACA;gBACPY,QAAQJ,MAAMU,aAAa;gBAC3BC,MAAMJ,wBAAwBxD,cAAc6D,eAAe,GAAG7D,cAAc8D,KAAK;YACnF;aACAxD,sBAAAA,MAAMyD,YAAY,cAAlBzD,0CAAAA,yBAAAA,OAAqB2C,OAAOS;YAC5B/C,oBAAoB;gBAClB,GAAG+C,IAAI;gBACPjC;gBACAuC,aAAa;YACf;YACArD,oBAAoB;gBAClB,GAAG+C,IAAI;gBACPjC;gBACAX;gBACAkD,aAAa;gBACbJ,MAAM5D,cAAc8D,KAAK;YAC3B;QACF;IACF;IAEA,MAAMG,gBAAgBrE,iBAAiB,CAACqD;QACtC/B,sBAAAA,gCAAAA,UAAY+B;QACZ,2EAA2E;QAC3E,IAAIA,MAAMC,kBAAkB,MAAMD,MAAMU,aAAa,KAAKV,MAAMI,MAAM,EAAE;YACtE;QACF;QACA,OAAQJ,MAAMiB,GAAG;YACf,KAAKnE;gBACH,IAAI6C,kBAAkB,QAAQ;wBAC5BJ;qBAAAA,wBAAAA,aAAaY,OAAO,cAApBZ,4CAAAA,sBAAsB2B,KAAK;oBAC3B,qEAAqE;oBACrElB,MAAMmB,cAAc;gBACtB;gBACA;YACF,KAAKpE,cAAcqE,KAAK;gBAAE;oBACxB,OAAOpB,MAAMU,aAAa,CAACQ,KAAK;gBAClC;YACA,KAAKnE,cAAcsE,GAAG;YACtB,KAAKtE,cAAcuE,IAAI;YACvB,KAAKvE,cAAcwE,OAAO;YAC1B,KAAKxE,cAAcyE,SAAS;gBAC1B,OAAO9D,oBAAoB;oBACzBqD,aAAa;oBACbf;oBACAlC;oBACAU;oBACAX;oBACA8C,MAAMX,MAAMiB,GAAG;oBACfb,QAAQJ,MAAMU,aAAa;gBAC7B;YACF,KAAK3D,cAAc0E,SAAS;gBAAE;oBAC5B,4DAA4D;oBAC5D,IAAI9D,UAAU,KAAK,CAAC6B,MAAM;wBACxB;oBACF;oBACA,MAAMiB,OAAO;wBACX3C;wBACAkC;wBACAR,MAAM,CAACA;wBACPmB,MAAMX,MAAMiB,GAAG;wBACfb,QAAQJ,MAAMU,aAAa;oBAC7B;oBACA,IAAIlB,MAAM;4BACRnC;yBAAAA,sBAAAA,MAAMyD,YAAY,cAAlBzD,0CAAAA,yBAAAA,OAAqB2C,OAAOS;oBAC9B;oBACA,OAAO/C,oBAAoB;wBACzB,GAAG+C,IAAI;wBACPjC;wBACAX;wBACAkD,aAAavB,OAAO,SAAS;oBAC/B;gBACF;YACA,KAAKzC,cAAc2E,UAAU;gBAC3B,gDAAgD;gBAChD,IAAIlD,aAAa,QAAQ;oBACvB;gBACF;gBACA,MAAMiC,OAAO;oBACX3C;oBACAkC;oBACAR,MAAM,CAACA;oBACPmB,MAAMX,MAAMiB,GAAG;oBACfb,QAAQJ,MAAMU,aAAa;gBAC7B;gBACA,IAAI,CAAClB,MAAM;wBACTnC;qBAAAA,uBAAAA,MAAMyD,YAAY,cAAlBzD,2CAAAA,0BAAAA,OAAqB2C,OAAOS;gBAC9B;gBACA,OAAO/C,oBAAoB;oBACzB,GAAG+C,IAAI;oBACPjC;oBACAX;oBACAkD,aAAavB,OAAO,aAAa;gBACnC;QACJ;QACA,MAAMmC,uBACJ3B,MAAMiB,GAAG,CAACW,MAAM,KAAK,KAAK5B,MAAMiB,GAAG,CAACY,KAAK,CAAC,SAAS,CAAC7B,MAAM8B,MAAM,IAAI,CAAC9B,MAAM+B,OAAO,IAAI,CAAC/B,MAAMgC,OAAO;QACtG,IAAIL,sBAAsB;YACxBjE,oBAAoB;gBAClBqD,aAAa;gBACbf;gBACAI,QAAQJ,MAAMU,aAAa;gBAC3B5C;gBACAU;gBACAmC,MAAM5D,cAAckF,SAAS;gBAC7BpE;YACF;QACF;IACF;IAEA,MAAMqE,oCAAoC5F,MAAM0C,WAAW,CAAC,CAACgB;QAC3D,MAAMmC,sBAAsBC,QAC1B9C,WAAWa,OAAO,IAAItD,gBAAgByC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAAC+B,qBAAqB;YACxBxD,kBAAkB;QACpB;IACF,GAAG,EAAE;IACL,MAAM0D,sCAAsC/F,MAAM0C,WAAW,CAC3D,CAACgB;QACC,MAAMmC,sBAAsBC,QAC1B9C,WAAWa,OAAO,IAAItD,gBAAgByC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QAExE,MAAMkC,6BAA6BF,QACjClD,WAAWiB,OAAO,IAAItD,gBAAgBqC,WAAWiB,OAAO,EAAEH,MAAMuC,aAAa;QAE/E,IAAID,4BAA4B;YAC9B,OAAO3D,kBAAkB;QAC3B;QACA,IAAI,CAACwD,qBAAqB;YACxB,OAAOxD,kBAAkB;QAC3B;IACF,GACA,EAAE;IAGJ,MAAM6D,kBAAkB7F,iBAAiB,CAACqD;QACxC9B,wBAAAA,kCAAAA,YAAc8B;QACdkC,kCAAkClC;IACpC;IAEA,MAAMyC,cAAc9F,iBAAiB,CAACqD;QACpC7B,oBAAAA,8BAAAA,QAAU6B;QACVkC,kCAAkClC;IACpC;IAEA,MAAM0C,iBAAiB/F,iBAAiB,CAACqD;QACvC5B,uBAAAA,iCAAAA,WAAa4B;QACbqC,oCAAoCrC;IACtC;IACA,MAAM2C,aAAahG,iBAAiB,CAACqD;QACnC3B,mBAAAA,6BAAAA,OAAS2B;QACTqC,oCAAoCrC;IACtC;IAEA,MAAM4C,eAAejG,iBAAiB,CAACqD;QACrC1B,qBAAAA,+BAAAA,SAAW0B;QACX,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,MAAMI,qBAAqBf,WAAWa,OAAO,IAAItD,gBAAgByC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF;QACA3C,oBAAoB;YAClBqD,aAAa;YACbf;YACAlC;YACAU;YACAmC,MAAM;YACNP,QAAQJ,MAAMU,aAAa;YAC3Bd,SAASA,YAAY,UAAU,OAAO,CAACA;QACzC;IACF;IAEA,OAAO;QACL9B;QACA0B;QACAI;QACAN;QACAD;QACAE;QACAH;QACAF,YAAYxC,cAAcqC,kBAAkBG;QAC5CV;QACAb;QACAkF,YAAY;YACVC,MAAM;QACR;QACAjE;QACAH;QACAoE,MAAMlG,KAAKmG,MAAM,CACfvG,yBAAyB+B,IAAI;YAC3ByE,UAAU,CAAC;YACX,CAAC7F,0BAA0B,EAAEW;YAC7B,GAAGW,IAAI;YACPnB;YACA2F,MAAM;YACN,cAActF;YACd,gBAAgBgC,kBAAkB,gBAAgBC,UAAUsD;YAC5D,uDAAuD;YACvD,+CAA+C;YAC/C,gEAAgE;YAChE,iBAAiBvD,kBAAkB,WAAYC,UAAsB;YACrE,iBAAiBpB,aAAa,WAAWgB,OAAO0D;YAChDlF,SAAS+B;YACT9B,WAAW+C;YACX9C,aAAasE;YACbrE,SAASsE;YACTrE,YAAYsE;YACZrE,QAAQsE;YACRrE,UAAUsE;QACZ,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF;AAEA,SAAS1F,gCACPJ,KAA2F;IAE3F,IAAI+F,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IACEjG,KAAK,CAAC,gBAAgB,KAAK6F,aAC3B7F,KAAK,CAAC,eAAe,KAAK6F,aAC1B7F,KAAK,CAAC,aAAa,KAAK6F,aACvB7F,MAAMQ,WAAW,KAAKqF,aAAa7F,KAAK,CAAC,aAAa,KAAK,GAC5D;YACA,sCAAsC;YACtCkG,QAAQC,KAAK,CAAuB,CAAC,sBACb,EAAEpG,qBAAqBqG,IAAI,CAAC;;;;;;;sEAQpD,CAAC;QACH;IACF;AACF"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, isResolvedShorthand, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Radio } from '@fluentui/react-radio';
@@ -14,7 +14,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
-    const { main, iconAfter, iconBefore, as = 'span' } = props;
+    const { main, iconAfter, iconBefore } = props;
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
     const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
     const [isActionsVisibleExternal, actionsShorthand] = isResolvedShorthand(props.actions) ? [
@@ -76,8 +76,11 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         buttonContextValue: {
             size: 'small'
         },
-        root: slot.always(getNativeElementProps(as, {
+        root: slot.always(getIntrinsicElementProps('div', {
             ...props,
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: useMergedRefs(ref, layoutRef)
         }), {
             elementType: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getNativeElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\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, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const [isActionsVisibleExternal, 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 = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\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 checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\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' } as ExtractSlotProps<TreeItemLayoutSlots['actions']>,\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\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(getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }), {\n      elementType: 'div',\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: isAsideVisible\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"],"names":["React","getNativeElementProps","isResolvedShorthand","useMergedRefs","slot","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","as","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","components","root","aside","selector","buttonContextValue","size","always","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getIntrinsicElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\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 [isActionsVisibleExternal, 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 = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\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 checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\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' } as ExtractSlotProps<TreeItemLayoutSlots['actions']>,\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\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: isAsideVisible\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"],"names":["React","getIntrinsicElementProps","isResolvedShorthand","useMergedRefs","slot","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","components","root","aside","selector","buttonContextValue","size","always","tabIndex"],"mappings":"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"}

package/lib/hooks/useRootTree.js

@@ -1,4 +1,4 @@
-import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { createOpenItems } from '../utils/createOpenItems';
 import { createCheckedItems } from '../utils/createCheckedItems';
@@ -74,8 +74,11 @@ import { createNextOpenItems } from './useControllableOpenItems';
         openItems,
         checkedItems,
         requestTreeResponse,
-        root: slot.always(getNativeElementProps('div', {
-            ref,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             role: 'tree',
             'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
             ...props

package/lib/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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: Pick<\n    TreeProps,\n    | 'selectionMode'\n    | 'appearance'\n    | 'size'\n    | 'openItems'\n    | 'checkedItems'\n    | 'onOpenChange'\n    | 'onCheckedChange'\n    | 'onNavigation'\n    | 'aria-label'\n    | 'aria-labelledby'\n  >,\n\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(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(data.event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n  };\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation?.(data.event, data);\n    switch (data.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        data.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({\n          ...request,\n          open: request.itemType === 'branch' && !openItems.has(request.value),\n          openItems: openItems.dangerouslyGetInternalSet_unstable(),\n        });\n      case 'selection':\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n        } as TreeCheckedChangeData);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\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      getNativeElementProps('div', {\n        ref,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\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":["getNativeElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","nextOpenItems","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAAwBA,qBAAqB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAQzG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAYC,EAEDC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IACrG,MAAMC,oBAAoB,CAACC;YAEzBV;QADA,MAAMW,gBAAgBb,oBAAoBY,MAAMJ;SAChDN,sBAAAA,MAAMY,YAAY,cAAlBZ,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAE;YAC/B,GAAGH,IAAI;YACPJ,WAAWK,cAAcG,kCAAkC;QAC7D;IACF;IAEA,MAAMC,uBAAuB,CAACL;YAAgCV;gBAAAA,yBAAAA,MAAMgB,eAAe,cAArBhB,6CAAAA,4BAAAA,OAAwBU,KAAKG,KAAK,EAAEH;;IAElG,MAAMO,oBAAoB,CAACP;YACzBV;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAEH;QACjC,OAAQA,KAAKS,IAAI;YACf,KAAKtB,cAAcuB,SAAS;YAC5B,KAAKvB,cAAcwB,OAAO;YAC1B,KAAKxB,cAAcyB,IAAI;YACvB,KAAKzB,cAAc0B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bb,KAAKG,KAAK,CAACW,cAAc;QAC7B;IACF;IAEA,MAAMC,sBAAsBjC,iBAAiB,CAACkC;QAC5C,OAAQA,QAAQC,WAAW;YACzB,KAAK;gBACH,OAAOV,kBAAkBS;YAC3B,KAAK;gBACH,OAAOjB,kBAAkB;oBACvB,GAAGiB,OAAO;oBACVE,MAAMF,QAAQG,QAAQ,KAAK,YAAY,CAACvB,UAAUwB,GAAG,CAACJ,QAAQK,KAAK;oBACnEzB,WAAWA,UAAUQ,kCAAkC;gBACzD;YACF,KAAK;gBACH,OAAOC,qBAAqB;oBAC1B,GAAGW,OAAO;oBACVrB,eAAeA;oBACfG,cAAcA,aAAawB,kCAAkC;gBAC/D;QACJ;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAC,aAAa;QACb9B;QACAuB,MAAM;QACNzB;QACAC;QACAgC,OAAO;QACP9B;QACAE;QACAiB;QACAS,MAAMzC,KAAK4C,MAAM,CACf9C,sBAAsB,OAAO;YAC3BU;YACAqC,MAAM;YACN,wBAAwBjC,kBAAkB,gBAAgB,OAAOkC;YACjE,GAAGvC,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;IAEzB;AACF;AAEA,SAAStC,4BAA4BF,KAAwD;IAC3F,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAAC3C,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtC4C,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(data.event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n  };\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation?.(data.event, data);\n    switch (data.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        data.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({\n          ...request,\n          open: request.itemType === 'branch' && !openItems.has(request.value),\n          openItems: openItems.dangerouslyGetInternalSet_unstable(),\n        });\n      case 'selection':\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n        } as TreeCheckedChangeData);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\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  };\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":["getIntrinsicElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","nextOpenItems","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAAwBA,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAQ5G,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAAgB,EAChBC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IACrG,MAAMC,oBAAoB,CAACC;YAEzBV;QADA,MAAMW,gBAAgBb,oBAAoBY,MAAMJ;SAChDN,sBAAAA,MAAMY,YAAY,cAAlBZ,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAE;YAC/B,GAAGH,IAAI;YACPJ,WAAWK,cAAcG,kCAAkC;QAC7D;IACF;IAEA,MAAMC,uBAAuB,CAACL;YAAgCV;gBAAAA,yBAAAA,MAAMgB,eAAe,cAArBhB,6CAAAA,4BAAAA,OAAwBU,KAAKG,KAAK,EAAEH;;IAElG,MAAMO,oBAAoB,CAACP;YACzBV;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAEH;QACjC,OAAQA,KAAKS,IAAI;YACf,KAAKtB,cAAcuB,SAAS;YAC5B,KAAKvB,cAAcwB,OAAO;YAC1B,KAAKxB,cAAcyB,IAAI;YACvB,KAAKzB,cAAc0B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bb,KAAKG,KAAK,CAACW,cAAc;QAC7B;IACF;IAEA,MAAMC,sBAAsBjC,iBAAiB,CAACkC;QAC5C,OAAQA,QAAQC,WAAW;YACzB,KAAK;gBACH,OAAOV,kBAAkBS;YAC3B,KAAK;gBACH,OAAOjB,kBAAkB;oBACvB,GAAGiB,OAAO;oBACVE,MAAMF,QAAQG,QAAQ,KAAK,YAAY,CAACvB,UAAUwB,GAAG,CAACJ,QAAQK,KAAK;oBACnEzB,WAAWA,UAAUQ,kCAAkC;gBACzD;YACF,KAAK;gBACH,OAAOC,qBAAqB;oBAC1B,GAAGW,OAAO;oBACVrB,eAAeA;oBACfG,cAAcA,aAAawB,kCAAkC;gBAC/D;QACJ;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAC,aAAa;QACb9B;QACAuB,MAAM;QACNzB;QACAC;QACAgC,OAAO;QACP9B;QACAE;QACAiB;QACAS,MAAMzC,KAAK4C,MAAM,CACf9C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FU,KAAKA;YACLqC,MAAM;YACN,wBAAwBjC,kBAAkB,gBAAgB,OAAOkC;YACjE,GAAGvC,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;IAEzB;AACF;AAEA,SAAStC,4BAA4BF,KAAwD;IAC3F,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAAC3C,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtC4C,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}

package/lib/hooks/useSubtree.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';
-import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render a sub-level tree.
  *
@@ -17,7 +17,10 @@ import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-util
             root: 'div'
         },
         level: parentLevel + 1,
-        root: slot.always(getNativeElementProps('div', {
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: useMergedRefs(ref, subtreeRef),
             role: 'group',
             ...props

package/lib/hooks/useSubtree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n  props: Pick<TreeProps, 'appearance' | 'size'>,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    contextType: 'subtree',\n    open,\n    components: {\n      root: 'div',\n    },\n    level: parentLevel + 1,\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, subtreeRef),\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","slot","useSubtree","props","ref","subtreeRef","ctx","parentLevel","level","open","contextType","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAA8BC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AAC9G,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,WACdC,KAA6C,EAC7CC,GAA2B;IAE3B,MAAMC,aAAaP,4BAA4BQ,CAAAA,MAAOA,IAAID,UAAU;IAEpE,MAAME,cAAcV,wBAAwBS,CAAAA,MAAOA,IAAIE,KAAK;IAE5D,MAAMC,OAAOX,4BAA4BQ,CAAAA,MAAOA,IAAIG,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;QACR;QACAJ,OAAOD,cAAc;QACrBK,MAAMX,KAAKY,MAAM,CACfd,sBAAsB,OAAO;YAC3BK,KAAKJ,cAAcI,KAAKC;YACxBS,MAAM;YACN,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    contextType: 'subtree',\n    open,\n    components: {\n      root: 'div',\n    },\n    level: parentLevel + 1,\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: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getIntrinsicElementProps","useMergedRefs","slot","useSubtree","props","ref","subtreeRef","ctx","parentLevel","level","open","contextType","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAA8BC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AAC9G,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE1F;;;;;CAKC,GACD,OAAO,SAASC,WACdC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,aAAaP,4BAA4BQ,CAAAA,MAAOA,IAAID,UAAU;IAEpE,MAAME,cAAcV,wBAAwBS,CAAAA,MAAOA,IAAIE,KAAK;IAE5D,MAAMC,OAAOX,4BAA4BQ,CAAAA,MAAOA,IAAIG,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;QACR;QACAJ,OAAOD,cAAc;QACrBK,MAAMX,KAAKY,MAAM,CACfd,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKJ,cAAcI,KAAKC;YACxBS,MAAM;YACN,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/components/TreeItem/useTreeItem.js

@@ -32,7 +32,7 @@ function useTreeItem_unstable(props, ref) {
     // note, if the value is not externally provided,
     // then selection and expansion will not work properly
     const value = (0, _reactutilities.useId)('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
-    const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
+    const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
     const [isActionsVisible, setActionsVisible] = _react.useState(false);
     const [isAsideVisible, setAsideVisible] = _react.useState(true);
     const handleActionsRef = _react.useCallback((actionsElement)=>{
@@ -105,25 +105,13 @@ function useTreeItem_unstable(props, ref) {
                 if (selectionMode !== 'none') {
                     var _selectionRef_current;
                     (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                    // Prevents the page from scrolling down when the spacebar is pressed
                     event.preventDefault();
                 }
                 return;
             case _tokens.treeDataTypes.Enter:
                 {
-                    var _props_onOpenChange;
-                    const data = {
-                        value,
-                        event,
-                        open: !open,
-                        type: event.key,
-                        target: event.currentTarget
-                    };
-                    (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
-                    return requestTreeResponse({
-                        ...data,
-                        itemType,
-                        requestType: 'open'
-                    });
+                    return event.currentTarget.click();
                 }
             case _tokens.treeDataTypes.End:
             case _tokens.treeDataTypes.Home:
@@ -152,8 +140,8 @@ function useTreeItem_unstable(props, ref) {
                         target: event.currentTarget
                     };
                     if (open) {
-                        var _props_onOpenChange1;
-                        (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
+                        var _props_onOpenChange;
+                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
                     }
                     return requestTreeResponse({
                         ...data,
@@ -175,8 +163,8 @@ function useTreeItem_unstable(props, ref) {
                     target: event.currentTarget
                 };
                 if (!open) {
-                    var _props_onOpenChange2;
-                    (_props_onOpenChange2 = props.onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(props, event, data);
+                    var _props_onOpenChange1;
+                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
                 }
                 return requestTreeResponse({
                     ...data,
@@ -198,13 +186,13 @@ function useTreeItem_unstable(props, ref) {
             });
         }
     });
-    const handleActionsVisible = (0, _reactutilities.useEventCallback)((event)=>{
+    const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactportal.elementContains)(subtreeRef.current, event.target));
         if (!isTargetFromSubtree) {
             setActionsVisible(true);
         }
-    });
-    const handleActionsInvisible = (0, _reactutilities.useEventCallback)((event)=>{
+    }, []);
+    const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactportal.elementContains)(subtreeRef.current, event.target));
         const isRelatedTargetFromActions = Boolean(actionsRef.current && (0, _reactportal.elementContains)(actionsRef.current, event.relatedTarget));
         if (isRelatedTargetFromActions) {
@@ -213,8 +201,25 @@ function useTreeItem_unstable(props, ref) {
         if (!isTargetFromSubtree) {
             return setActionsVisible(false);
         }
+    }, []);
+    const handleMouseOver = (0, _reactutilities.useEventCallback)((event)=>{
+        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);
+        setActionsVisibleIfNotFromSubtree(event);
+    });
+    const handleFocus = (0, _reactutilities.useEventCallback)((event)=>{
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        setActionsVisibleIfNotFromSubtree(event);
+    });
+    const handleMouseOut = (0, _reactutilities.useEventCallback)((event)=>{
+        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);
+        setActionsInvisibleIfNotFromSubtree(event);
+    });
+    const handleBlur = (0, _reactutilities.useEventCallback)((event)=>{
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setActionsInvisibleIfNotFromSubtree(event);
     });
     const handleChange = (0, _reactutilities.useEventCallback)((event)=>{
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
         if (event.isDefaultPrevented()) {
             return;
         }
@@ -248,7 +253,7 @@ function useTreeItem_unstable(props, ref) {
         },
         isAsideVisible,
         isActionsVisible,
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)(as, {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
             tabIndex: -1,
             [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
             ...rest,
@@ -263,10 +268,10 @@ function useTreeItem_unstable(props, ref) {
             'aria-expanded': itemType === 'branch' ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
-            onMouseOver: handleActionsVisible,
-            onFocus: handleActionsVisible,
-            onMouseOut: handleActionsInvisible,
-            onBlur: handleActionsInvisible,
+            onMouseOver: handleMouseOver,
+            onFocus: handleFocus,
+            onMouseOut: handleMouseOut,
+            onBlur: handleBlur,
             onChange: handleChange
         }), {
             elementType: 'div'

package/lib-commonjs/components/TreeItem/useTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */ export function useTreeItem_unstable(props, ref) {\n    var _props_value;\n    const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n    if (treeType === 'flat') {\n        warnIfNoProperPropsFlatTreeItem(props);\n    }\n    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n    const { level: contextLevel } = useSubtreeContext_unstable();\n    const parentValue = useTreeItemContext_unstable((ctx)=>{\n        var _props_parentValue;\n        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;\n    });\n    // note, if the value is not externally provided,\n    // then selection and expansion will not work properly\n    const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());\n    const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n    const [isActionsVisible, setActionsVisible] = React.useState(false);\n    const [isAsideVisible, setAsideVisible] = React.useState(true);\n    const handleActionsRef = React.useCallback((actionsElement)=>{\n        setAsideVisible(actionsElement === null);\n    }, []);\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const selectionRef = React.useRef(null);\n    const open = useTreeContext_unstable((ctx)=>{\n        var _props_open;\n        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n    });\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const checked = useTreeContext_unstable((ctx)=>{\n        var _ctx_checkedItems_get;\n        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n    });\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n        if (isEventFromSelection) {\n            return;\n        }\n        const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        ReactDOM.unstable_batchedUpdates(()=>{\n            var _props_onOpenChange;\n            const data = {\n                event,\n                value,\n                open: !open,\n                target: event.currentTarget,\n                type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n            };\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n            requestTreeResponse({\n                ...data,\n                itemType,\n                requestType: 'open'\n            });\n            requestTreeResponse({\n                ...data,\n                itemType,\n                parentValue,\n                requestType: 'navigate',\n                type: treeDataTypes.Click\n            });\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n        // Ignore keyboard events that do not originate from the current tree item.\n        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n            return;\n        }\n        switch(event.key){\n            case Space:\n                if (selectionMode !== 'none') {\n                    var _selectionRef_current;\n                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n                    event.preventDefault();\n                }\n                return;\n            case treeDataTypes.Enter:\n                {\n                    var _props_onOpenChange;\n                    const data = {\n                        value,\n                        event,\n                        open: !open,\n                        type: event.key,\n                        target: event.currentTarget\n                    };\n                    (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n                    return requestTreeResponse({\n                        ...data,\n                        itemType,\n                        requestType: 'open'\n                    });\n                }\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n                return requestTreeResponse({\n                    requestType: 'navigate',\n                    event,\n                    value,\n                    itemType,\n                    parentValue,\n                    type: event.key,\n                    target: event.currentTarget\n                });\n            case treeDataTypes.ArrowLeft:\n                {\n                    // do not navigate to parent if the item is on the top level\n                    if (level === 1 && !open) {\n                        return;\n                    }\n                    const data = {\n                        value,\n                        event,\n                        open: !open,\n                        type: event.key,\n                        target: event.currentTarget\n                    };\n                    if (open) {\n                        var _props_onOpenChange1;\n                        (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n                    }\n                    return requestTreeResponse({\n                        ...data,\n                        itemType,\n                        parentValue,\n                        requestType: open ? 'open' : 'navigate'\n                    });\n                }\n            case treeDataTypes.ArrowRight:\n                // do not navigate or open if the item is a leaf\n                if (itemType === 'leaf') {\n                    return;\n                }\n                const data = {\n                    value,\n                    event,\n                    open: !open,\n                    type: event.key,\n                    target: event.currentTarget\n                };\n                if (!open) {\n                    var _props_onOpenChange2;\n                    (_props_onOpenChange2 = props.onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(props, event, data);\n                }\n                return requestTreeResponse({\n                    ...data,\n                    itemType,\n                    parentValue,\n                    requestType: open ? 'navigate' : 'open'\n                });\n        }\n        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n        if (isTypeAheadCharacter) {\n            requestTreeResponse({\n                requestType: 'navigate',\n                event,\n                target: event.currentTarget,\n                value,\n                itemType,\n                type: treeDataTypes.TypeAhead,\n                parentValue\n            });\n        }\n    });\n    const handleActionsVisible = useEventCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setActionsVisible(true);\n        }\n    });\n    const handleActionsInvisible = useEventCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            return setActionsVisible(true);\n        }\n        if (!isTargetFromSubtree) {\n            return setActionsVisible(false);\n        }\n    });\n    const handleChange = useEventCallback((event)=>{\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        requestTreeResponse({\n            requestType: 'selection',\n            event,\n            value,\n            itemType,\n            type: 'Change',\n            target: event.currentTarget,\n            checked: checked === 'mixed' ? true : !checked\n        });\n    });\n    return {\n        value,\n        open,\n        checked,\n        subtreeRef,\n        layoutRef,\n        selectionRef,\n        expandIconRef,\n        actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n        itemType,\n        level,\n        components: {\n            root: 'div'\n        },\n        isAsideVisible,\n        isActionsVisible,\n        root: slot.always(getNativeElementProps(as, {\n            tabIndex: -1,\n            [dataTreeItemValueAttrName]: value,\n            ...rest,\n            ref,\n            role: 'treeitem',\n            'aria-level': level,\n            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n            // aria-selected is required according to WAI-ARIA spec\n            // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n            // Casting: when selectionMode is 'single', checked is a boolean\n            'aria-selected': selectionMode === 'single' ? checked : 'false',\n            'aria-expanded': itemType === 'branch' ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onMouseOver: handleActionsVisible,\n            onFocus: handleActionsVisible,\n            onMouseOut: handleActionsInvisible,\n            onBlur: handleActionsInvisible,\n            onChange: handleChange\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n            // eslint-disable-next-line no-console\n            console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n- \"aria-posinset\": the position of this treeitem in the current level of the tree.\n- \"aria-setsize\": the number of siblings in this level of the tree.\n- \"aria-level\": the current level of the treeitem.\n- \"parentValue\": the \"value\" property of the parent item of this item.`);\n        }\n    }\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","useId","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","_props_open","openItems","has","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","_props_onOpenChange1","ArrowRight","_props_onOpenChange2","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","useMergedRefs","components","root","slot","always","getNativeElementProps","tabIndex","dataTreeItemValueAttrName","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */ export function useTreeItem_unstable(props, ref) {\n    var _props_value;\n    const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n    if (treeType === 'flat') {\n        warnIfNoProperPropsFlatTreeItem(props);\n    }\n    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n    const { level: contextLevel } = useSubtreeContext_unstable();\n    const parentValue = useTreeItemContext_unstable((ctx)=>{\n        var _props_parentValue;\n        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;\n    });\n    // note, if the value is not externally provided,\n    // then selection and expansion will not work properly\n    const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());\n    const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n    const [isActionsVisible, setActionsVisible] = React.useState(false);\n    const [isAsideVisible, setAsideVisible] = React.useState(true);\n    const handleActionsRef = React.useCallback((actionsElement)=>{\n        setAsideVisible(actionsElement === null);\n    }, []);\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const selectionRef = React.useRef(null);\n    const open = useTreeContext_unstable((ctx)=>{\n        var _props_open;\n        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n    });\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const checked = useTreeContext_unstable((ctx)=>{\n        var _ctx_checkedItems_get;\n        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n    });\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n        if (isEventFromSelection) {\n            return;\n        }\n        const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        ReactDOM.unstable_batchedUpdates(()=>{\n            var _props_onOpenChange;\n            const data = {\n                event,\n                value,\n                open: !open,\n                target: event.currentTarget,\n                type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n            };\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n            requestTreeResponse({\n                ...data,\n                itemType,\n                requestType: 'open'\n            });\n            requestTreeResponse({\n                ...data,\n                itemType,\n                parentValue,\n                requestType: 'navigate',\n                type: treeDataTypes.Click\n            });\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n        // Ignore keyboard events that do not originate from the current tree item.\n        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n            return;\n        }\n        switch(event.key){\n            case Space:\n                if (selectionMode !== 'none') {\n                    var _selectionRef_current;\n                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n                    // Prevents the page from scrolling down when the spacebar is pressed\n                    event.preventDefault();\n                }\n                return;\n            case treeDataTypes.Enter:\n                {\n                    return event.currentTarget.click();\n                }\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n                return requestTreeResponse({\n                    requestType: 'navigate',\n                    event,\n                    value,\n                    itemType,\n                    parentValue,\n                    type: event.key,\n                    target: event.currentTarget\n                });\n            case treeDataTypes.ArrowLeft:\n                {\n                    // do not navigate to parent if the item is on the top level\n                    if (level === 1 && !open) {\n                        return;\n                    }\n                    const data = {\n                        value,\n                        event,\n                        open: !open,\n                        type: event.key,\n                        target: event.currentTarget\n                    };\n                    if (open) {\n                        var _props_onOpenChange;\n                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n                    }\n                    return requestTreeResponse({\n                        ...data,\n                        itemType,\n                        parentValue,\n                        requestType: open ? 'open' : 'navigate'\n                    });\n                }\n            case treeDataTypes.ArrowRight:\n                // do not navigate or open if the item is a leaf\n                if (itemType === 'leaf') {\n                    return;\n                }\n                const data = {\n                    value,\n                    event,\n                    open: !open,\n                    type: event.key,\n                    target: event.currentTarget\n                };\n                if (!open) {\n                    var _props_onOpenChange1;\n                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n                }\n                return requestTreeResponse({\n                    ...data,\n                    itemType,\n                    parentValue,\n                    requestType: open ? 'navigate' : 'open'\n                });\n        }\n        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n        if (isTypeAheadCharacter) {\n            requestTreeResponse({\n                requestType: 'navigate',\n                event,\n                target: event.currentTarget,\n                value,\n                itemType,\n                type: treeDataTypes.TypeAhead,\n                parentValue\n            });\n        }\n    });\n    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setActionsVisible(true);\n        }\n    }, []);\n    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            return setActionsVisible(true);\n        }\n        if (!isTargetFromSubtree) {\n            return setActionsVisible(false);\n        }\n    }, []);\n    const handleMouseOver = useEventCallback((event)=>{\n        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);\n        setActionsVisibleIfNotFromSubtree(event);\n    });\n    const handleFocus = useEventCallback((event)=>{\n        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n        setActionsVisibleIfNotFromSubtree(event);\n    });\n    const handleMouseOut = useEventCallback((event)=>{\n        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);\n        setActionsInvisibleIfNotFromSubtree(event);\n    });\n    const handleBlur = useEventCallback((event)=>{\n        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n        setActionsInvisibleIfNotFromSubtree(event);\n    });\n    const handleChange = useEventCallback((event)=>{\n        onChange === null || onChange === void 0 ? void 0 : onChange(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        requestTreeResponse({\n            requestType: 'selection',\n            event,\n            value,\n            itemType,\n            type: 'Change',\n            target: event.currentTarget,\n            checked: checked === 'mixed' ? true : !checked\n        });\n    });\n    return {\n        value,\n        open,\n        checked,\n        subtreeRef,\n        layoutRef,\n        selectionRef,\n        expandIconRef,\n        actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n        itemType,\n        level,\n        components: {\n            root: 'div'\n        },\n        isAsideVisible,\n        isActionsVisible,\n        root: slot.always(getIntrinsicElementProps(as, {\n            tabIndex: -1,\n            [dataTreeItemValueAttrName]: value,\n            ...rest,\n            ref,\n            role: 'treeitem',\n            'aria-level': level,\n            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n            // aria-selected is required according to WAI-ARIA spec\n            // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n            // Casting: when selectionMode is 'single', checked is a boolean\n            'aria-selected': selectionMode === 'single' ? checked : 'false',\n            'aria-expanded': itemType === 'branch' ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onMouseOver: handleMouseOver,\n            onFocus: handleFocus,\n            onMouseOut: handleMouseOut,\n            onBlur: handleBlur,\n            onChange: handleChange\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n            // eslint-disable-next-line no-console\n            console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n- \"aria-posinset\": the position of this treeitem in the current level of the tree.\n- \"aria-setsize\": the number of siblings in this level of the tree.\n- \"aria-level\": the current level of the treeitem.\n- \"parentValue\": the \"value\" property of the parent item of this item.`);\n        }\n    }\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","useId","toString","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","_props_open","openItems","has","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","setActionsVisibleIfNotFromSubtree","isTargetFromSubtree","Boolean","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","handleMouseOver","handleFocus","handleMouseOut","handleBlur","handleChange","useMergedRefs","components","root","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}

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

@@ -17,7 +17,7 @@ const _reactradio = require("@fluentui/react-radio");
 const _TreeItemChevron = require("../TreeItemChevron");
 const _reacttabster = require("@fluentui/react-tabster");
 const useTreeItemLayout_unstable = (props, ref)=>{
-    const { main, iconAfter, iconBefore, as = 'span' } = props;
+    const { main, iconAfter, iconBefore } = props;
     const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
     const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
     const [isActionsVisibleExternal, actionsShorthand] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
@@ -79,8 +79,11 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         buttonContextValue: {
             size: 'small'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)(as, {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             ...props,
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: (0, _reactutilities.useMergedRefs)(ref, layoutRef)
         }), {
             elementType: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, useMergedRefs, slot } 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, as = 'span' } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleExternal, 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 = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\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 checked = useTreeItemContext_unstable((ctx)=>ctx.checked);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\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);\n    if (actions) {\n        actions.ref = actionsRefs;\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(getNativeElementProps(as, {\n            ...props,\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: isAsideVisible ? 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};\n"],"names":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","as","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleExternal","actionsShorthand","isResolvedShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","slot","optional","renderByDefault","defaultProps","children","React","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","always","getNativeElementProps","tabIndex"],"mappings":";;;;+BAeiBA;;;eAAAA;;;;iEAfM;gCACyD;0BACX;+BAC5C;4BACH;iCACU;8BACQ;AAS7B,MAAMA,6BAA6B,CAACC,OAAOC;IAClD,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAEC,UAAU,EAAEC,KAAK,MAAM,EAAE,GAAGL;IACrD,MAAMM,YAAYC,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBC,IAAAA,iCAAuB,EAAC,CAACF,MAAMA,IAAIC,aAAa;IACtE,MAAM,CAACE,0BAA0BC,iBAAiB,GAAGC,IAAAA,mCAAmB,EAACb,MAAMc,OAAO,IAAI;QACtFd,MAAMc,OAAO,CAACC,OAAO;QACrB;YACI,GAAGf,MAAMc,OAAO;YAChBC,SAASC;QACb;KACH,GAAG;QACAA;QACAhB,MAAMc,OAAO;KAChB;IACD,MAAMG,mBAAmBV,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIS,gBAAgB,KAAKN;IACrF,MAAMO,iBAAiBX,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIU,cAAc;IAC5E,MAAMC,eAAeZ,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIW,YAAY;IACxE,MAAMC,gBAAgBb,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIY,aAAa;IAC1E,MAAMC,aAAad,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIa,UAAU;IACpE,MAAMC,UAAUf,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIc,OAAO;IAC9D,MAAMC,WAAWhB,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIgB,QAAQ,KAAK;IACrE,MAAMC,aAAaC,oBAAI,CAACC,QAAQ,CAAC3B,MAAMyB,UAAU,EAAE;QAC/CG,iBAAiBL;QACjBM,cAAc;YACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,gCAAe,EAAE;YAC7D,eAAe;QACnB;QACAC,aAAa;IACjB;IACA,MAAMC,iBAAiBC,IAAAA,6BAAa,EAACX,eAAe,QAAQA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAWxB,GAAG,EAAEmB;IAC7G,IAAIK,YAAY;QACZA,WAAWxB,GAAG,GAAGkC;IACrB;IACA,MAAME,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU;QACVC,MAAM;IACV;IACA,MAAM1B,UAAUG,mBAAmBS,oBAAI,CAACC,QAAQ,CAACf,kBAAkB;QAC/DiB,cAAc;YACV,GAAGQ,oBAAoB;YACvBI,MAAM;QACV;QACAP,aAAa;IACjB,KAAKlB;IACL,MAAM0B,cAAcN,IAAAA,6BAAa,EAACtB,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQb,GAAG,EAAEoB;IACjG,IAAIP,SAAS;QACTA,QAAQb,GAAG,GAAGyC;IAClB;IACA,OAAO;QACHC,YAAY;YACRC,MAAM;YACNnB,YAAY;YACZrB,YAAY;YACZF,MAAM;YACNC,WAAW;YACXW,SAAS;YACT+B,OAAO;YACP,qDAAqD;YACrDC,UAAUrC,kBAAkB,gBAAgBsC,uBAAQ,GAAGC,iBAAK;QAChE;QACAC,oBAAoB;YAChBC,MAAM;QACV;QACAN,MAAMlB,oBAAI,CAACyB,MAAM,CAACC,IAAAA,qCAAqB,EAAC/C,IAAI;YACxC,GAAGL,KAAK;YACRC,KAAKmC,IAAAA,6BAAa,EAACnC,KAAKK;QAC5B,IAAI;YACA4B,aAAa;QACjB;QACA9B,YAAYsB,oBAAI,CAACC,QAAQ,CAACvB,YAAY;YAClCyB,cAAc;gBACV,eAAe;YACnB;YACAK,aAAa;QACjB;QACAhC,MAAMwB,oBAAI,CAACyB,MAAM,CAACjD,MAAM;YACpBgC,aAAa;QACjB;QACA/B,WAAWuB,oBAAI,CAACC,QAAQ,CAACxB,WAAW;YAChC0B,cAAc;gBACV,eAAe;YACnB;YACAK,aAAa;QACjB;QACAW,OAAO3B,iBAAiBQ,oBAAI,CAACC,QAAQ,CAAC3B,MAAM6C,KAAK,EAAE;YAC/ChB,cAAc;gBACV,eAAe;YACnB;YACAK,aAAa;QACjB,KAAKlB;QACLF;QACAW;QACAqB,UAAUpB,oBAAI,CAACC,QAAQ,CAAC3B,MAAM8C,QAAQ,EAAE;YACpClB,iBAAiBnB,kBAAkB;YACnCoB,cAAc;gBACVP;gBACA+B,UAAU,CAAC;gBACX,eAAe;gBACfpD,KAAKkB;YACT;YACAe,aAAazB,kBAAkB,gBAAgBsC,uBAAQ,GAAGC,iBAAK;QACnE;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot } 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 [isActionsVisibleExternal, 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 = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\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 checked = useTreeItemContext_unstable((ctx)=>ctx.checked);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\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);\n    if (actions) {\n        actions.ref = actionsRefs;\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: isAsideVisible ? 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};\n"],"names":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleExternal","actionsShorthand","isResolvedShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","slot","optional","renderByDefault","defaultProps","children","React","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","always","getIntrinsicElementProps","tabIndex"],"mappings":"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"}

package/lib-commonjs/hooks/useRootTree.js

@@ -80,8 +80,11 @@ function useRootTree(props, ref) {
         openItems,
         checkedItems,
         requestTreeResponse,
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
-            ref,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             role: 'tree',
             'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
             ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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 */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n    const openItems = React.useMemo(()=>createOpenItems(props.openItems), [\n        props.openItems\n    ]);\n    const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [\n        props.checkedItems\n    ]);\n    const requestOpenChange = (data)=>{\n        var _props_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n    };\n    const requestCheckedChange = (data)=>{\n        var _props_onCheckedChange;\n        return (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, data.event, data);\n    };\n    const requestNavigation = (data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, data.event, data);\n        switch(data.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                data.event.preventDefault();\n        }\n    };\n    const requestTreeResponse = useEventCallback((request)=>{\n        switch(request.requestType){\n            case 'navigate':\n                return requestNavigation(request);\n            case 'open':\n                return requestOpenChange({\n                    ...request,\n                    open: request.itemType === 'branch' && !openItems.has(request.value),\n                    openItems: openItems.dangerouslyGetInternalSet_unstable()\n                });\n            case 'selection':\n                return requestCheckedChange({\n                    ...request,\n                    selectionMode: selectionMode,\n                    checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()\n                });\n        }\n    });\n    return {\n        components: {\n            root: 'div'\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(getNativeElementProps('div', {\n            ref,\n            role: 'tree',\n            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\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(`@fluentui/react-tree [useRootTree]:\nTree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined`);\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","_props_onCheckedChange","onCheckedChange","requestNavigation","_props_onNavigation","onNavigation","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","slot","always","getNativeElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"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"}
+{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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 */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n    const openItems = React.useMemo(()=>createOpenItems(props.openItems), [\n        props.openItems\n    ]);\n    const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [\n        props.checkedItems\n    ]);\n    const requestOpenChange = (data)=>{\n        var _props_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n    };\n    const requestCheckedChange = (data)=>{\n        var _props_onCheckedChange;\n        return (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, data.event, data);\n    };\n    const requestNavigation = (data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, data.event, data);\n        switch(data.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                data.event.preventDefault();\n        }\n    };\n    const requestTreeResponse = useEventCallback((request)=>{\n        switch(request.requestType){\n            case 'navigate':\n                return requestNavigation(request);\n            case 'open':\n                return requestOpenChange({\n                    ...request,\n                    open: request.itemType === 'branch' && !openItems.has(request.value),\n                    openItems: openItems.dangerouslyGetInternalSet_unstable()\n                });\n            case 'selection':\n                return requestCheckedChange({\n                    ...request,\n                    selectionMode: selectionMode,\n                    checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()\n                });\n        }\n    });\n    return {\n        components: {\n            root: 'div'\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(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,\n            role: 'tree',\n            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\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(`@fluentui/react-tree [useRootTree]:\nTree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined`);\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","_props_onCheckedChange","onCheckedChange","requestNavigation","_props_onNavigation","onNavigation","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib-commonjs/hooks/useSubtree.js

@@ -23,7 +23,10 @@ function useSubtree(props, ref) {
             root: 'div'
         },
         level: parentLevel + 1,
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: (0, _reactutilities.useMergedRefs)(ref, subtreeRef),
             role: 'group',
             ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["useSubtree.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */ export function useSubtree(props, ref) {\n    const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n    const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);\n    const open = useTreeItemContext_unstable((ctx)=>ctx.open);\n    return {\n        contextType: 'subtree',\n        open,\n        components: {\n            root: 'div'\n        },\n        level: parentLevel + 1,\n        root: slot.always(getNativeElementProps('div', {\n            ref: useMergedRefs(ref, subtreeRef),\n            role: 'group',\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useSubtree","props","ref","subtreeRef","useTreeItemContext_unstable","ctx","parentLevel","useTreeContext_unstable","level","open","contextType","components","root","slot","always","getNativeElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;uBAC8C;gCACV;AAMhD,SAASA,WAAWC,KAAK,EAAEC,GAAG;IACrC,MAAMC,aAAaC,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACpE,MAAMG,cAAcC,IAAAA,8BAAuB,EAAC,CAACF,MAAMA,IAAIG,KAAK;IAC5D,MAAMC,OAAOL,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAII,IAAI;IACxD,OAAO;QACHC,aAAa;QACbD;QACAE,YAAY;YACRC,MAAM;QACV;QACAJ,OAAOF,cAAc;QACrBM,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3Cb,KAAKc,IAAAA,6BAAa,EAACd,KAAKC;YACxBc,MAAM;YACN,GAAGhB,KAAK;QACZ,IAAI;YACAiB,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useSubtree.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */ export function useSubtree(props, ref) {\n    const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n    const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);\n    const open = useTreeItemContext_unstable((ctx)=>ctx.open);\n    return {\n        contextType: 'subtree',\n        open,\n        components: {\n            root: 'div'\n        },\n        level: parentLevel + 1,\n        root: slot.always(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: useMergedRefs(ref, subtreeRef),\n            role: 'group',\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useSubtree","props","ref","subtreeRef","useTreeItemContext_unstable","ctx","parentLevel","useTreeContext_unstable","level","open","contextType","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;uBAC8C;gCACP;AAMnD,SAASA,WAAWC,KAAK,EAAEC,GAAG;IACrC,MAAMC,aAAaC,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACpE,MAAMG,cAAcC,IAAAA,8BAAuB,EAAC,CAACF,MAAMA,IAAIG,KAAK;IAC5D,MAAMC,OAAOL,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAII,IAAI;IACxD,OAAO;QACHC,aAAa;QACbD;QACAE,YAAY;YACRC,MAAM;QACV;QACAJ,OAAOF,cAAc;QACrBM,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fb,KAAKc,IAAAA,6BAAa,EAACd,KAAKC;YACxBc,MAAM;YACN,GAAGhB,KAAK;QACZ,IAAI;YACAiB,aAAa;QACjB;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,19 +37,19 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.6",
-    "@fluentui/react-aria": "^9.3.39",
-    "@fluentui/react-avatar": "^9.5.36",
-    "@fluentui/react-button": "^9.3.45",
-    "@fluentui/react-checkbox": "^9.1.46",
-    "@fluentui/react-context-selector": "^9.1.37",
+    "@fluentui/react-aria": "^9.3.40",
+    "@fluentui/react-avatar": "^9.5.37",
+    "@fluentui/react-button": "^9.3.46",
+    "@fluentui/react-checkbox": "^9.1.47",
+    "@fluentui/react-context-selector": "^9.1.38",
     "@fluentui/react-icons": "^2.0.217",
-    "@fluentui/react-portal": "^9.3.20",
-    "@fluentui/react-radio": "^9.1.46",
+    "@fluentui/react-portal": "^9.3.21",
+    "@fluentui/react-radio": "^9.1.47",
     "@fluentui/react-shared-contexts": "^9.9.2",
-    "@fluentui/react-tabster": "^9.13.3",
+    "@fluentui/react-tabster": "^9.13.4",
     "@fluentui/react-theme": "^9.1.14",
-    "@fluentui/react-utilities": "^9.14.0",
-    "@fluentui/react-jsx-runtime": "^9.0.13",
+    "@fluentui/react-utilities": "^9.14.1",
+    "@fluentui/react-jsx-runtime": "^9.0.14",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },