@mui/x-tree-view 8.0.0-alpha.13 → 8.0.0-alpha.14

package/esm/TreeItem/TreeItem.js

@@ -7,6 +7,7 @@ const _excluded = ["visible"],
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import CircularProgress from '@mui/material/CircularProgress';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import { alpha } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
@@ -132,6 +133,7 @@ export const TreeItemIconContainer = styled('div', {
   display: 'flex',
   flexShrink: 0,
   justifyContent: 'center',
+  position: 'relative',
   '& svg': {
     fontSize: 18
   }
@@ -144,6 +146,25 @@ export const TreeItemGroupTransition = styled(Collapse, {
   margin: 0,
   padding: 0
 });
+export const TreeItemErrorContainer = styled('div', {
+  name: 'MuiTreeItem',
+  slot: 'ErrorIcon',
+  overridesResolver: (props, styles) => styles.errorIcon
+})({
+  position: 'absolute',
+  right: -3,
+  width: 7,
+  height: 7,
+  borderRadius: '50%',
+  backgroundColor: 'red'
+});
+export const TreeItemLoadingContainer = styled(CircularProgress, {
+  name: 'MuiTreeItem',
+  slot: 'LoadingIcon',
+  overridesResolver: (props, styles) => styles.loadingIcon
+})({
+  color: 'text.primary'
+});
 export const TreeItemCheckbox = styled(/*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       visible
@@ -180,7 +201,9 @@ const useUtilityClasses = ownerState => {
     label: ['label'],
     groupTransition: ['groupTransition'],
     labelInput: ['labelInput'],
-    dragAndDropOverlay: ['dragAndDropOverlay']
+    dragAndDropOverlay: ['dragAndDropOverlay'],
+    errorIcon: ['errorIcon'],
+    loadingIcon: ['loadingIcon']
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
 };
@@ -219,6 +242,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     getGroupTransitionProps,
     getLabelInputProps,
     getDragAndDropOverlayProps,
+    getErrorContainerProps,
+    getLoadingContainerProps,
     status
   } = useTreeItem({
     id,
@@ -297,15 +322,31 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     ownerState: {},
     className: classes.dragAndDropOverlay
   });
+  const ErrorIcon = slots.errorIcon ?? TreeItemErrorContainer;
+  const errorContainerProps = useSlotProps({
+    elementType: ErrorIcon,
+    getSlotProps: getErrorContainerProps,
+    externalSlotProps: slotProps.errorIcon,
+    ownerState: {},
+    className: classes.errorIcon
+  });
+  const LoadingIcon = slots.loadingIcon ?? TreeItemLoadingContainer;
+  const loadingContainerProps = useSlotProps({
+    elementType: LoadingIcon,
+    getSlotProps: getLoadingContainerProps,
+    externalSlotProps: slotProps.loadingIcon,
+    ownerState: {},
+    className: classes.loadingIcon
+  });
   return /*#__PURE__*/_jsx(TreeItemProvider, _extends({}, getContextProviderProps(), {
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       children: [/*#__PURE__*/_jsxs(Content, _extends({}, contentProps, {
-        children: [/*#__PURE__*/_jsx(IconContainer, _extends({}, iconContainerProps, {
-          children: /*#__PURE__*/_jsx(TreeItemIcon, {
+        children: [/*#__PURE__*/_jsxs(IconContainer, _extends({}, iconContainerProps, {
+          children: [status.error && /*#__PURE__*/_jsx(ErrorIcon, _extends({}, errorContainerProps)), status.loading ? /*#__PURE__*/_jsx(LoadingIcon, _extends({}, loadingContainerProps)) : /*#__PURE__*/_jsx(TreeItemIcon, {
             status: status,
             slots: slots,
             slotProps: slotProps
-          })
+          })]
         })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), status.editing ? /*#__PURE__*/_jsx(LabelInput, _extends({}, labelInputProps)) : /*#__PURE__*/_jsx(Label, _extends({}, labelProps)), /*#__PURE__*/_jsx(DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
       })), children && /*#__PURE__*/_jsx(TreeItemGroupTransition, _extends({
         as: GroupTransition

package/esm/TreeItem/TreeItem.types.d.ts

@@ -49,6 +49,18 @@ export interface TreeItemSlots extends TreeItemIconSlots {
    * @default TreeItemDragAndDropOverlay
    */
   dragAndDropOverlay?: React.ElementType;
+  /**
+   * The component that is rendered when the item is in an error state.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component is lazy loading is enabled.
+   * @default TreeItemErrorContainer
+   */
+  errorIcon?: React.ElementType;
+  /**
+   * The component that is rendered when the item is in an loading state.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component is lazy loading is enabled.
+   * @default TreeItemLoadingContainer
+   */
+  loadingIcon?: React.ElementType;
 }
 export interface TreeItemSlotProps extends TreeItemIconSlotProps {
   root?: SlotComponentProps<'li', {}, {}>;
@@ -59,6 +71,8 @@ export interface TreeItemSlotProps extends TreeItemIconSlotProps {
   label?: SlotComponentProps<'div', {}, {}>;
   labelInput?: SlotComponentProps<'input', {}, {}>;
   dragAndDropOverlay?: SlotComponentProps<'div', {}, {}>;
+  errorIcon?: SlotComponentProps<'div', {}, {}>;
+  loadingIcon?: SlotComponentProps<'div', {}, {}>;
 }
 export interface TreeItemProps extends Omit<UseTreeItemParameters, 'rootRef'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
   className?: string;

package/esm/TreeItemIcon/TreeItemIcon.js

@@ -63,9 +63,11 @@ process.env.NODE_ENV !== "production" ? TreeItemIcon.propTypes = {
     disabled: PropTypes.bool.isRequired,
     editable: PropTypes.bool.isRequired,
     editing: PropTypes.bool.isRequired,
+    error: PropTypes.bool.isRequired,
     expandable: PropTypes.bool.isRequired,
     expanded: PropTypes.bool.isRequired,
     focused: PropTypes.bool.isRequired,
+    loading: PropTypes.bool.isRequired,
     selected: PropTypes.bool.isRequired
   }).isRequired
 } : void 0;

package/esm/hooks/useTreeItemUtils/useTreeItemUtils.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { UseTreeViewLazyLoadingSignature } from '../../internals/plugins/useTreeViewLazyLoading';
 import type { UseTreeViewSelectionSignature } from '../../internals/plugins/useTreeViewSelection';
 import type { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeViewExpansion';
 import type { UseTreeViewItemsSignature } from '../../internals/plugins/useTreeViewItems';
@@ -21,7 +22,7 @@ type UseTreeItemUtilsMinimalPlugins = readonly [UseTreeViewSelectionSignature, U
 /**
  * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
-export type UseTreeItemUtilsOptionalPlugins = readonly [UseTreeViewLabelSignature];
+export type UseTreeItemUtilsOptionalPlugins = readonly [UseTreeViewLabelSignature, UseTreeViewLazyLoadingSignature];
 interface UseTreeItemUtilsReturnValue<TSignatures extends UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins> {
   interactions: UseTreeItemInteractions;
   status: UseTreeItemStatus;
@@ -30,7 +31,7 @@ interface UseTreeItemUtilsReturnValue<TSignatures extends UseTreeItemUtilsMinima
    */
   publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
 }
-export declare const isItemExpandable: (reactChildren: React.ReactNode) => boolean;
+export declare const itemHasChildren: (reactChildren: React.ReactNode) => boolean;
 export declare const useTreeItemUtils: <TSignatures extends UseTreeItemUtilsMinimalPlugins = UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins = UseTreeItemUtilsOptionalPlugins>({
   itemId,
   children

package/esm/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -4,10 +4,11 @@ import { useTreeViewContext } from "../../internals/TreeViewProvider/index.js";
 import { useTreeViewLabel } from "../../internals/plugins/useTreeViewLabel/index.js";
 import { hasPlugin } from "../../internals/utils/plugins.js";
 import { useSelector } from "../../internals/hooks/useSelector.js";
-import { selectorIsItemExpanded } from "../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorIsItemExpandable, selectorIsItemExpanded } from "../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
 import { selectorIsItemFocused } from "../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
 import { selectorIsItemDisabled } from "../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorIsItemSelected } from "../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { selectorGetTreeItemError, selectorIsItemLoading, selectorIsLazyLoadingEnabled } from "../../internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
 import { selectorIsItemBeingEdited, selectorIsItemEditable } from "../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
 
 /**
@@ -18,9 +19,9 @@ import { selectorIsItemBeingEdited, selectorIsItemEditable } from "../../interna
  * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
 
-export const isItemExpandable = reactChildren => {
+export const itemHasChildren = reactChildren => {
   if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
+    return reactChildren.length > 0 && reactChildren.some(itemHasChildren);
   }
   return Boolean(reactChildren);
 };
@@ -37,6 +38,11 @@ export const useTreeItemUtils = ({
     },
     publicAPI
   } = useTreeViewContext();
+  const isItemExpandable = useSelector(store, selectorIsItemExpandable, itemId);
+  const isLazyLoadingEnabled = useSelector(store, selectorIsLazyLoadingEnabled);
+  const loading = useSelector(store, state => isLazyLoadingEnabled ? selectorIsItemLoading(state, itemId) : false);
+  const error = useSelector(store, state => isLazyLoadingEnabled ? Boolean(selectorGetTreeItemError(state, itemId)) : false);
+  const isExpandable = itemHasChildren(children) || isItemExpandable;
   const isExpanded = useSelector(store, selectorIsItemExpanded, itemId);
   const isFocused = useSelector(store, selectorIsItemFocused, itemId);
   const isSelected = useSelector(store, selectorIsItemSelected, itemId);
@@ -47,13 +53,15 @@ export const useTreeItemUtils = ({
     isItemEditable: label.isItemEditable
   }));
   const status = {
-    expandable: isItemExpandable(children),
+    expandable: isExpandable,
     expanded: isExpanded,
     focused: isFocused,
     selected: isSelected,
     disabled: isDisabled,
     editing: isEditing,
-    editable: isEditable
+    editable: isEditable,
+    loading,
+    error
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -66,7 +74,11 @@ export const useTreeItemUtils = ({
 
     // If already expanded and trying to toggle selection don't close
     if (status.expandable && !(multiple && selectorIsItemExpanded(store.value, itemId))) {
-      instance.toggleItemExpansion(event, itemId);
+      // make sure the children selection is propagated again
+      instance.setItemExpansion({
+        event,
+        itemId
+      });
     }
   };
   const handleSelection = event => {
@@ -81,14 +93,14 @@ export const useTreeItemUtils = ({
       if (event.shiftKey) {
         instance.expandSelectionRange(event, itemId);
       } else {
-        instance.selectItem({
+        instance.setItemSelection({
           event,
           itemId,
           keepExistingSelection: true
         });
       }
     } else {
-      instance.selectItem({
+      instance.setItemSelection({
         event,
         itemId,
         shouldBeSelected: true
@@ -100,7 +112,7 @@ export const useTreeItemUtils = ({
     if (multiSelect && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
-      instance.selectItem({
+      instance.setItemSelection({
         event,
         itemId,
         keepExistingSelection: multiSelect,

package/esm/hooks/useTreeViewApiRef.d.ts

@@ -4,4 +4,4 @@ import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugi
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */
-export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = readonly [import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature, import("../internals").UseTreeViewLabelSignature]>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;
+export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/esm/index.js

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

package/esm/internals/index.d.ts

@@ -2,7 +2,7 @@ export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from './components/RichTreeViewItems';
-export { unstable_resetCleanupTracking } from "./hooks/useInstanceEventHandler.js";
+export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
 export { useSelector } from "./hooks/useSelector.js";
 export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore } from './models';
 export type { TreeViewCorePluginParameters } from './corePlugins';
@@ -21,6 +21,11 @@ export { selectorItemMetaLookup, selectorItemMeta, selectorItemIndex, selectorIt
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState } from './plugins/useTreeViewItems';
 export { useTreeViewLabel } from "./plugins/useTreeViewLabel/index.js";
 export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from './plugins/useTreeViewLabel';
+export { selectorIsItemExpanded } from "./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+export { selectorIsItemSelected } from "./plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
+export { selectorDataSourceState, selectorGetTreeItemError } from "./plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
+export type { UseTreeViewLazyLoadingSignature } from './plugins/useTreeViewLazyLoading';
+export type { UseTreeViewLazyLoadingParameters } from './plugins/useTreeViewLazyLoading';
 export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from './plugins/useTreeViewJSXItems';
 export { createSelector } from "./utils/selectors.js";

package/esm/internals/index.js

@@ -1,7 +1,7 @@
 export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
-export { unstable_resetCleanupTracking } from "./hooks/useInstanceEventHandler.js";
+export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
 export { useSelector } from "./hooks/useSelector.js";
 
 // Core plugins
@@ -15,6 +15,9 @@ export { useTreeViewIcons } from "./plugins/useTreeViewIcons/index.js";
 export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/useTreeViewItems/index.js";
 export { selectorItemMetaLookup, selectorItemMeta, selectorItemIndex, selectorItemOrderedChildrenIds } from "./plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 export { useTreeViewLabel } from "./plugins/useTreeViewLabel/index.js";
+export { selectorIsItemExpanded } from "./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+export { selectorIsItemSelected } from "./plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
+export { selectorDataSourceState, selectorGetTreeItemError } from "./plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
 export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
 export { createSelector } from "./utils/selectors.js";
 export { isTargetInDescendants } from "./utils/tree.js";

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -4,6 +4,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { selectorIsItemExpandable, selectorIsItemExpanded } from "./useTreeViewExpansion.selectors.js";
 import { createExpandedItemsMap, getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
 import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
 export const useTreeViewExpansion = ({
   instance,
   store,
@@ -37,26 +38,48 @@ export const useTreeViewExpansion = ({
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const toggleItemExpansion = useEventCallback((event, itemId) => {
-    const isExpandedBefore = selectorIsItemExpanded(store.value, itemId);
-    instance.setItemExpansion(event, itemId, !isExpandedBefore);
-  });
-  const setItemExpansion = useEventCallback((event, itemId, isExpanded) => {
-    const isExpandedBefore = selectorIsItemExpanded(store.value, itemId);
-    if (isExpandedBefore === isExpanded) {
-      return;
-    }
+  const applyItemExpansion = useEventCallback(({
+    itemId,
+    event,
+    shouldBeExpanded
+  }) => {
     let newExpanded;
-    if (isExpanded) {
+    if (shouldBeExpanded) {
       newExpanded = [itemId].concat(models.expandedItems.value);
     } else {
       newExpanded = models.expandedItems.value.filter(id => id !== itemId);
     }
     if (params.onItemExpansionToggle) {
-      params.onItemExpansionToggle(event, itemId, isExpanded);
+      params.onItemExpansionToggle(event, itemId, shouldBeExpanded);
     }
     setExpandedItems(event, newExpanded);
   });
+  const setItemExpansion = useEventCallback(({
+    itemId,
+    event = null,
+    shouldBeExpanded
+  }) => {
+    const isExpandedBefore = selectorIsItemExpanded(store.value, itemId);
+    const cleanShouldBeExpanded = shouldBeExpanded ?? !isExpandedBefore;
+    if (isExpandedBefore === cleanShouldBeExpanded) {
+      return;
+    }
+    const eventParameters = {
+      isExpansionPrevented: false,
+      shouldBeExpanded: cleanShouldBeExpanded,
+      event,
+      itemId
+    };
+    publishTreeViewEvent(instance, 'beforeItemToggleExpansion', eventParameters);
+    if (eventParameters.isExpansionPrevented) {
+      return;
+    }
+    instance.applyItemExpansion({
+      itemId,
+      event,
+      shouldBeExpanded: cleanShouldBeExpanded
+    });
+  });
   const expandAllSiblings = (event, itemId) => {
     const itemMeta = selectorItemMeta(store.value, itemId);
     if (itemMeta == null) {
@@ -80,7 +103,7 @@ export const useTreeViewExpansion = ({
     },
     instance: {
       setItemExpansion,
-      toggleItemExpansion,
+      applyItemExpansion,
       expandAllSiblings
     }
   };

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

@@ -90,6 +90,8 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: import("../..").TreeViewItemMeta;
       };
@@ -109,6 +111,8 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: import("../..").TreeViewItemMeta;
       }) & {

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

@@ -7,26 +7,38 @@ import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
 export interface UseTreeViewExpansionPublicAPI {
   /**
    * Change the expansion status of a given item.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item to expand of collapse.
-   * @param {boolean} isExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   * @param {object} parameters The parameters of the method.
+   * @param {string} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
    */
-  setItemExpansion: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+  setItemExpansion: (parameters: {
+    itemId: string;
+    event?: React.SyntheticEvent;
+    shouldBeExpanded?: boolean;
+  }) => void;
 }
 export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
-  /**
-   * Toggle the current expansion of an item.
-   * If it is expanded, it will be collapsed, and vice versa.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {TreeViewItemId} itemId The id of the item to toggle.
-   */
-  toggleItemExpansion: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Expand all the siblings (i.e.: the items that have the same parent) of a given item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {TreeViewItemId} itemId The id of the item whose siblings will be expanded.
    */
   expandAllSiblings: (event: React.KeyboardEvent, itemId: TreeViewItemId) => void;
+  /**
+   * APply the new expansion status of a given item.
+   * Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
+   * Unlike `setItemExpansion`, this method does not trigger the lazy loading.
+   * @param {object} parameters The parameters of the method.
+   * @param {string} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   */
+  applyItemExpansion: (parameters: {
+    itemId: string;
+    event: React.SyntheticEvent | null;
+    shouldBeExpanded: boolean;
+  }) => void;
 }
 export interface UseTreeViewExpansionParameters {
   /**
@@ -42,17 +54,17 @@ export interface UseTreeViewExpansionParameters {
   defaultExpandedItems?: string[];
   /**
    * Callback fired when Tree Items are expanded/collapsed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemIds The ids of the expanded items.
    */
-  onExpandedItemsChange?: (event: React.SyntheticEvent, itemIds: string[]) => void;
+  onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: string[]) => void;
   /**
    * Callback fired when a Tree Item is expanded or collapsed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
-  onItemExpansionToggle?: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+  onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: string, isExpanded: boolean) => void;
   /**
    * The slot that triggers the item's expansion when clicked.
    * @default 'content'
@@ -66,6 +78,16 @@ export interface UseTreeViewExpansionState {
     expansionTrigger: 'content' | 'iconContainer';
   };
 }
+interface UseTreeViewExpansionEventLookup {
+  beforeItemToggleExpansion: {
+    params: {
+      isExpansionPrevented: boolean;
+      shouldBeExpanded: boolean;
+      event: React.SyntheticEvent | null;
+      itemId: TreeViewItemId;
+    };
+  };
+}
 export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
   params: UseTreeViewExpansionParameters;
   defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
@@ -75,4 +97,6 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
   state: UseTreeViewExpansionState;
   dependencies: [UseTreeViewItemsSignature];
   optionalDependencies: [UseTreeViewLabelSignature];
-}>;
+  events: UseTreeViewExpansionEventLookup;
+}>;
+export {};