@mui/x-tree-view 8.11.3 → 8.13.0

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -3,9 +3,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useForkRef from '@mui/utils/useForkRef';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
@@ -105,11 +105,11 @@ const useTreeViewJSXItemsItemPlugin = ({
   } = parentContext;
   const expandable = itemHasChildren(children);
   const pluginContentRef = React.useRef(null);
-  const handleContentRef = useForkRef(pluginContentRef, contentRef);
+  const handleContentRef = useMergedRefs(pluginContentRef, contentRef);
   const treeId = useStore(store, idSelectors.treeId);
 
   // Prevent any flashing
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     const idAttribute = generateTreeItemIdAttribute({
       itemId,
       treeId,
@@ -121,7 +121,7 @@ const useTreeViewJSXItemsItemPlugin = ({
       unregisterChild(idAttribute);
     };
   }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     return instance.insertJSXItem({
       id: itemId,
       idAttribute: id,

package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import { useRtl } from '@mui/system/RtlProvider';
-import useEventCallback from '@mui/utils/useEventCallback';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from "../../utils/tree.js";
 import { hasPlugin } from "../../utils/plugins.js";
 import { useTreeViewLabel } from "../useTreeViewLabel/index.js";

package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { useTreeViewLabelItemPlugin } from "./useTreeViewLabel.itemPlugin.js";
 import { labelSelectors } from "./useTreeViewLabel.selectors.js";
 export const useTreeViewLabel = ({
@@ -36,7 +36,7 @@ export const useTreeViewLabel = ({
       params.onItemLabelChange(itemId, label);
     }
   };
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     store.set('label', _extends({}, store.state.items, {
       isItemEditable: params.isItemEditable
     }));

package/esm/internals/plugins/useTreeViewLazyLoading/index.d.ts

@@ -1,2 +1,2 @@
-export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance } from "./useTreeViewLazyLoading.types.js";
+export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance, DataSource } from "./useTreeViewLazyLoading.types.js";
 export { lazyLoadingSelectors } from "./useTreeViewLazyLoading.selectors.js";

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.d.ts

@@ -12,9 +12,13 @@ export declare const lazyLoadingSelectors: {
   /**
    * Checks whether an item is loading.
    */
-  isItemLoading: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string) => boolean;
+  isItemLoading: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string | null) => boolean;
   /**
    * Checks whether an item has errors.
    */
-  itemHasError: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string) => boolean;
+  itemHasError: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string | null) => boolean;
+  /**
+   * Get an item error.
+   */
+  itemError: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string | null) => Error | null | undefined;
 };

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js

@@ -1,4 +1,5 @@
 import { createSelector } from '@mui/x-internals/store';
+import { TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/index.js";
 export const lazyLoadingSelectors = {
   /**
    * Gets the data source used to lazy load items.
@@ -7,9 +8,13 @@ export const lazyLoadingSelectors = {
   /**
    * Checks whether an item is loading.
    */
-  isItemLoading: createSelector((state, itemId) => state.lazyLoading?.dataSource.loading[itemId] ?? false),
+  isItemLoading: createSelector((state, itemId) => state.lazyLoading?.dataSource.loading[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? false),
   /**
    * Checks whether an item has errors.
    */
-  itemHasError: createSelector((state, itemId) => !!state.lazyLoading?.dataSource.errors[itemId])
+  itemHasError: createSelector((state, itemId) => !!state.lazyLoading?.dataSource.errors[itemId ?? TREE_VIEW_ROOT_PARENT_ID]),
+  /**
+   * Get an item error.
+   */
+  itemError: createSelector((state, itemId) => state.lazyLoading?.dataSource.errors[itemId ?? TREE_VIEW_ROOT_PARENT_ID])
 };

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts

@@ -5,7 +5,7 @@ import { TreeViewItemId } from "../../../models/index.js";
 import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
 import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
 import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
-type DataSource<R extends {}> = {
+export type DataSource<R extends {}> = {
   /**
    * Used to determine the number of children the item has.
    * Only relevant for lazy-loaded trees.
@@ -43,7 +43,7 @@ export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPu
    * @param {TreeViewItemId[]} parentIds The ids of the items to fetch the children of.
    * @returns {Promise<void>} The promise resolved when the items are fetched.
    */
-  fetchItems: (parentIds?: TreeViewItemId[]) => Promise<void>;
+  fetchItems: (parentIds: TreeViewItemId[]) => Promise<void>;
   /**
    * Method used for fetching an item's children.
    * Only relevant for lazy-loaded tree views.
@@ -54,21 +54,21 @@ export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPu
    * @returns {Promise<void>} The promise resolved when the items are fetched.
    */
   fetchItemChildren: (parameters: {
-    itemId: TreeViewItemId;
+    itemId: TreeViewItemId | null;
     forceRefresh?: boolean;
   }) => Promise<void>;
   /**
    * Set the loading state of an item.
-   * @param {TreeViewItemId} itemId The id of the item to set the loading state of.
+   * @param {TreeViewItemId} itemId The id of the item to set the loading state of. If `null` is passed, it will set the loading state of the root.
    * @param {boolean} isLoading True if the item is loading.
    */
-  setDataSourceLoading: (itemId: TreeViewItemId, isLoading: boolean) => void;
+  setDataSourceLoading: (itemId: TreeViewItemId | null, isLoading: boolean) => void;
   /**
    * Set the error state of an item.
-   * @param {TreeViewItemId} itemId The id of the item to set the error state of.
+   * @param {TreeViewItemId} itemId The id of the item to set the error state of. If `null` is passed, it will set the error state of the root.
    * @param {Error | null} error The error caught on the item.
    */
-  setDataSourceError: (itemId: TreeViewItemId, error: Error | null) => void;
+  setDataSourceError: (itemId: TreeViewItemId | null, error: Error | null) => void;
 }
 export interface UseTreeViewLazyLoadingParameters<R extends {}> {
   /**
@@ -97,5 +97,4 @@ export type UseTreeViewLazyLoadingSignature = TreeViewPluginSignature<{
   instance: UseTreeViewLazyLoadingInstance;
   state: UseTreeViewLazyLoadingState;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewSelectionSignature];
-}>;
-export {};
+}>;

package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js

@@ -19,11 +19,20 @@ const selectorCheckboxSelectionStatus = createSelector((state, itemId) => {
     itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
   };
   traverseDescendants(itemId);
-  if (hasSelectedDescendant && hasUnSelectedDescendant) {
+  const shouldSelectBasedOnDescendants = selectionSelectors.propagationRules(state).parents;
+  if (shouldSelectBasedOnDescendants) {
+    if (hasSelectedDescendant && hasUnSelectedDescendant) {
+      return 'indeterminate';
+    }
+    if (hasSelectedDescendant && !hasUnSelectedDescendant) {
+      return 'checked';
+    }
+    return 'empty';
+  }
+  if (hasSelectedDescendant) {
     return 'indeterminate';
   }
-  const shouldSelectBasedOnDescendants = selectionSelectors.propagationRules(state).parents;
-  return shouldSelectBasedOnDescendants && hasSelectedDescendant && !hasUnSelectedDescendant ? 'checked' : 'empty';
+  return 'empty';
 });
 export const useTreeViewSelectionItemPlugin = ({
   props

package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
 import { propagateSelection, getAddedAndRemovedItems, getLookupFromArray } from "./useTreeViewSelection.utils.js";
 import { selectionSelectors } from "./useTreeViewSelection.selectors.js";
@@ -168,7 +168,7 @@ export const useTreeViewSelection = ({
     }
     setSelectedItems(event, newSelectedItems);
   };
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     store.set('selection', {
       selectedItems: params.selectedItems === undefined ? store.state.selection.selectedItems : params.selectedItems,
       isEnabled: !params.disableSelection,

package/esm/internals/useTreeView/useTreeView.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
 import { Store } from '@mui/x-internals/store';
-import useForkRef from '@mui/utils/useForkRef';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
 import { TREE_VIEW_CORE_PLUGINS } from "../corePlugins/index.js";
 import { useExtractPluginParamsFromProps } from "./useExtractPluginParamsFromProps.js";
 import { useTreeViewBuildContext } from "./useTreeViewBuildContext.js";
@@ -46,7 +46,7 @@ export const useTreeView = ({
   const instance = useRefWithInit(() => ({})).current;
   const publicAPI = useTreeViewApiInitialization(apiRef);
   const innerRootRef = React.useRef(null);
-  const handleRootRef = useForkRef(innerRootRef, rootRef);
+  const handleRootRef = useMergedRefs(innerRootRef, rootRef);
   const store = useRefWithInit(() => {
     const initialState = {};
     for (const plugin of plugins) {

package/esm/useTreeItem/useTreeItem.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
-import useForkRef from '@mui/utils/useForkRef';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
@@ -50,8 +50,8 @@ export const useTreeItem = parameters => {
   });
   const rootRefObject = React.useRef(null);
   const contentRefObject = React.useRef(null);
-  const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
-  const handleContentRef = useForkRef(contentRef, contentRefObject);
+  const handleRootRef = useMergedRefs(rootRef, pluginRootRef, rootRefObject);
+  const handleContentRef = useMergedRefs(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const treeId = useStore(store, idSelectors.treeId);
   const isSelectionEnabledForItem = useStore(store, selectionSelectors.canItemBeSelected, itemId);

package/hooks/useApplyPropagationToSelectedItemsOnMount.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useApplyPropagationToSelectedItemsOnMount = useApplyPropagationToSelectedItemsOnMount;
-var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _useRefWithInit = require("@base-ui-components/utils/useRefWithInit");
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection/useTreeViewSelection.utils");
 const defaultGetItemId = item => item.id;
 const defaultGetItemChildren = item => item.children;
@@ -59,7 +58,7 @@ function useApplyPropagationToSelectedItemsOnMount(parameters) {
     selectedItems,
     selectionPropagation
   } = parameters;
-  return (0, _useLazyRef.default)(() => {
+  return (0, _useRefWithInit.useRefWithInit)(() => {
     const lookup = (0, _useTreeViewSelection.getLookupFromArray)(selectedItems);
     function walk(items, isParentSelected) {
       for (const item of items) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.11.3
+ * @mui/x-tree-view v8.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/TreeViewProvider/TreeViewStyleContext.d.ts

@@ -28,16 +28,16 @@ export interface TreeViewSlots {
   /**
    * The default icon used to collapse the item.
    */
-  collapseIcon?: React.ElementType;
+  collapseIcon?: React.ElementType | null;
   /**
    * The default icon used to expand the item.
    */
-  expandIcon?: React.ElementType;
+  expandIcon?: React.ElementType | null;
   /**
    * The default icon displayed next to an end item.
    * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
    */
-  endIcon?: React.ElementType;
+  endIcon?: React.ElementType | null;
 }
 export interface TreeViewSlotProps {
   collapseIcon?: SlotComponentProps<'svg', {}, {}>;

package/internals/index.d.ts

@@ -3,7 +3,7 @@ export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.j
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
 export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore } from "./models/index.js";
+export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore, TreeViewUsedInstance, TreeViewUsedParamsWithDefaults } from "./models/index.js";
 export type { TreeViewCorePluginParameters } from "./corePlugins/index.js";
 export { useTreeViewExpansion, expansionSelectors } from "./plugins/useTreeViewExpansion/index.js";
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters } from "./plugins/useTreeViewExpansion/index.js";
@@ -17,7 +17,7 @@ export { useTreeViewItems, buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_P
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState } from "./plugins/useTreeViewItems/index.js";
 export { useTreeViewLabel, labelSelectors } from "./plugins/useTreeViewLabel/index.js";
 export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from "./plugins/useTreeViewLabel/index.js";
-export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance } from "./plugins/useTreeViewLazyLoading/index.js";
+export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance, DataSource } from "./plugins/useTreeViewLazyLoading/index.js";
 export { lazyLoadingSelectors } from "./plugins/useTreeViewLazyLoading/index.js";
 export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from "./plugins/useTreeViewJSXItems/index.js";

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewExpansion = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
+var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
 var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
 var _useTreeViewExpansion2 = require("./useTreeViewExpansion.utils");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
@@ -24,7 +24,7 @@ const useTreeViewExpansion = ({
     controlled: params.expandedItems,
     defaultValue: params.defaultExpandedItems
   });
-  (0, _useEnhancedEffect.default)(() => {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const newExpansionTrigger = (0, _useTreeViewExpansion2.getExpansionTrigger)({
       isItemEditable: params.isItemEditable,
       expansionTrigger: params.expansionTrigger
@@ -44,10 +44,10 @@ const useTreeViewExpansion = ({
     }
     params.onExpandedItemsChange?.(event, value);
   };
-  const resetItemExpansion = (0, _useEventCallback.default)(() => {
+  const resetItemExpansion = (0, _useEventCallback.useEventCallback)(() => {
     setExpandedItems(null, []);
   });
-  const applyItemExpansion = (0, _useEventCallback.default)(({
+  const applyItemExpansion = (0, _useEventCallback.useEventCallback)(({
     itemId,
     event,
     shouldBeExpanded
@@ -64,7 +64,7 @@ const useTreeViewExpansion = ({
     }
     setExpandedItems(event, newExpanded);
   });
-  const setItemExpansion = (0, _useEventCallback.default)(({
+  const setItemExpansion = (0, _useEventCallback.useEventCallback)(({
     itemId,
     event = null,
     shouldBeExpanded
@@ -90,8 +90,8 @@ const useTreeViewExpansion = ({
       shouldBeExpanded: cleanShouldBeExpanded
     });
   });
-  const isItemExpanded = (0, _useEventCallback.default)(itemId => {
-    return _useTreeViewExpansion.expansionSelectors.isItemExpandable(store.state, itemId);
+  const isItemExpanded = (0, _useEventCallback.useEventCallback)(itemId => {
+    return _useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId);
   });
   const expandAllSiblings = (event, itemId) => {
     const itemMeta = _useTreeViewItems.itemsSelectors.itemMeta(store.state, itemId);
@@ -114,7 +114,7 @@ const useTreeViewExpansion = ({
   /**
    * Update the controlled model when the `expandedItems` prop changes.
    */
-  (0, _useEnhancedEffect.default)(() => {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const expandedItems = params.expandedItems;
     if (expandedItems !== undefined) {
       store.set('expansion', (0, _extends2.default)({}, store.state.expansion, {

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewFocus = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
 var _store = require("@mui/x-internals/store");
 var _useTreeViewFocus = require("./useTreeViewFocus.selectors");
 var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
@@ -16,7 +16,7 @@ const useTreeViewFocus = ({
   params,
   store
 }) => {
-  const setFocusedItemId = (0, _useEventCallback.default)(itemId => {
+  const setFocusedItemId = (0, _useEventCallback.useEventCallback)(itemId => {
     const focusedItemId = _useTreeViewFocus.focusSelectors.focusedItemId(store.state);
     if (focusedItemId === itemId) {
       return;
@@ -39,13 +39,13 @@ const useTreeViewFocus = ({
       params.onItemFocus(event, itemId);
     }
   };
-  const focusItem = (0, _useEventCallback.default)((event, itemId) => {
+  const focusItem = (0, _useEventCallback.useEventCallback)((event, itemId) => {
     // If we receive an itemId, and it is visible, the focus will be set to it
     if (isItemVisible(itemId)) {
       innerFocusItem(event, itemId);
     }
   });
-  const removeFocusedItem = (0, _useEventCallback.default)(() => {
+  const removeFocusedItem = (0, _useEventCallback.useEventCallback)(() => {
     const focusedItemId = _useTreeViewFocus.focusSelectors.focusedItemId(store.state);
     if (focusedItemId == null) {
       return;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts

@@ -9,10 +9,10 @@ export interface UseTreeViewFocusPublicAPI {
    *
    * If the item is the child of a collapsed item, then this method will do nothing.
    * Make sure to expand the ancestors of the item before calling this method if needed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
    * @param {TreeViewItemId} itemId The id of the item to focus.
    */
-  focusItem: (event: React.SyntheticEvent, itemId: string) => void;
+  focusItem: (event: React.SyntheticEvent | null, itemId: string) => void;
 }
 export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
   /**