@mui/x-tree-view 8.0.0-alpha.8 → 8.0.0-beta.0

package/internals/utils/tree.js

@@ -1,9 +1,15 @@
-import { selectorIsItemExpandable, selectorIsItemExpanded } from "../plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
-import { selectorCanItemBeFocused, selectorIsItemDisabled, selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemParentId } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTargetInDescendants = exports.getPreviousNavigableItem = exports.getNonDisabledItemsInRange = exports.getNextNavigableItem = exports.getLastNavigableItem = exports.getFirstNavigableItem = exports.getAllNavigableItems = exports.findOrderInTremauxTree = void 0;
+var _useTreeViewExpansion = require("../plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
+var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.selectors");
 const getLastNavigableItemInArray = (state, items) => {
   // Equivalent to Array.prototype.findLastIndex
   let itemIndex = items.length - 1;
-  while (itemIndex >= 0 && !selectorCanItemBeFocused(state, items[itemIndex])) {
+  while (itemIndex >= 0 && !(0, _useTreeViewItems.selectorCanItemBeFocused)(state, items[itemIndex])) {
     itemIndex -= 1;
   }
   if (itemIndex === -1) {
@@ -11,13 +17,13 @@ const getLastNavigableItemInArray = (state, items) => {
   }
   return items[itemIndex];
 };
-export const getPreviousNavigableItem = (state, itemId) => {
-  const itemMeta = selectorItemMeta(state, itemId);
+const getPreviousNavigableItem = (state, itemId) => {
+  const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(state, itemId);
   if (!itemMeta) {
     return null;
   }
-  const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
-  const itemIndex = selectorItemIndex(state, itemId);
+  const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemMeta.parentId);
+  const itemIndex = (0, _useTreeViewItems.selectorItemIndex)(state, itemId);
 
   // TODO: What should we do if the parent is not navigable?
   if (itemIndex === 0) {
@@ -26,7 +32,7 @@ export const getPreviousNavigableItem = (state, itemId) => {
 
   // Finds the previous navigable sibling.
   let previousNavigableSiblingIndex = itemIndex - 1;
-  while (!selectorCanItemBeFocused(state, siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
+  while (!(0, _useTreeViewItems.selectorCanItemBeFocused)(state, siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
     previousNavigableSiblingIndex -= 1;
   }
   if (previousNavigableSiblingIndex === -1) {
@@ -41,45 +47,47 @@ export const getPreviousNavigableItem = (state, itemId) => {
 
   // Finds the last navigable ancestor of the previous navigable sibling.
   let currentItemId = siblings[previousNavigableSiblingIndex];
-  let lastNavigableChild = getLastNavigableItemInArray(state, selectorItemOrderedChildrenIds(state, currentItemId));
-  while (selectorIsItemExpanded(state, currentItemId) && lastNavigableChild != null) {
+  let lastNavigableChild = getLastNavigableItemInArray(state, (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, currentItemId));
+  while ((0, _useTreeViewExpansion.selectorIsItemExpanded)(state, currentItemId) && lastNavigableChild != null) {
     currentItemId = lastNavigableChild;
-    lastNavigableChild = selectorItemOrderedChildrenIds(state, currentItemId).find(childId => selectorCanItemBeFocused(state, childId));
+    lastNavigableChild = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, currentItemId).find(childId => (0, _useTreeViewItems.selectorCanItemBeFocused)(state, childId));
   }
   return currentItemId;
 };
-export const getNextNavigableItem = (state, itemId) => {
+exports.getPreviousNavigableItem = getPreviousNavigableItem;
+const getNextNavigableItem = (state, itemId) => {
   // If the item is expanded and has some navigable children, return the first of them.
-  if (selectorIsItemExpanded(state, itemId)) {
-    const firstNavigableChild = selectorItemOrderedChildrenIds(state, itemId).find(childId => selectorCanItemBeFocused(state, childId));
+  if ((0, _useTreeViewExpansion.selectorIsItemExpanded)(state, itemId)) {
+    const firstNavigableChild = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId).find(childId => (0, _useTreeViewItems.selectorCanItemBeFocused)(state, childId));
     if (firstNavigableChild != null) {
       return firstNavigableChild;
     }
   }
-  let itemMeta = selectorItemMeta(state, itemId);
+  let itemMeta = (0, _useTreeViewItems.selectorItemMeta)(state, itemId);
   while (itemMeta != null) {
     // Try to find the first navigable sibling after the current item.
-    const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
-    const currentItemIndex = selectorItemIndex(state, itemMeta.id);
+    const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemMeta.parentId);
+    const currentItemIndex = (0, _useTreeViewItems.selectorItemIndex)(state, itemMeta.id);
     if (currentItemIndex < siblings.length - 1) {
       let nextItemIndex = currentItemIndex + 1;
-      while (!selectorCanItemBeFocused(state, siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
+      while (!(0, _useTreeViewItems.selectorCanItemBeFocused)(state, siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
         nextItemIndex += 1;
       }
-      if (selectorCanItemBeFocused(state, siblings[nextItemIndex])) {
+      if ((0, _useTreeViewItems.selectorCanItemBeFocused)(state, siblings[nextItemIndex])) {
         return siblings[nextItemIndex];
       }
     }
 
     // If the sibling does not exist, go up a level to the parent and try again.
-    itemMeta = selectorItemMeta(state, itemMeta.parentId);
+    itemMeta = (0, _useTreeViewItems.selectorItemMeta)(state, itemMeta.parentId);
   }
   return null;
 };
-export const getLastNavigableItem = state => {
+exports.getNextNavigableItem = getNextNavigableItem;
+const getLastNavigableItem = state => {
   let itemId = null;
-  while (itemId == null || selectorIsItemExpanded(state, itemId)) {
-    const children = selectorItemOrderedChildrenIds(state, itemId);
+  while (itemId == null || (0, _useTreeViewExpansion.selectorIsItemExpanded)(state, itemId)) {
+    const children = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId);
     const lastNavigableChild = getLastNavigableItemInArray(state, children);
 
     // The item has no navigable children.
@@ -90,7 +98,8 @@ export const getLastNavigableItem = state => {
   }
   return itemId;
 };
-export const getFirstNavigableItem = state => selectorItemOrderedChildrenIds(state, null).find(itemId => selectorCanItemBeFocused(state, itemId));
+exports.getLastNavigableItem = getLastNavigableItem;
+const getFirstNavigableItem = state => (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, null).find(itemId => (0, _useTreeViewItems.selectorCanItemBeFocused)(state, itemId));
 
 /**
  * This is used to determine the start and end of a selection range so
@@ -106,12 +115,13 @@ export const getFirstNavigableItem = state => selectorItemOrderedChildrenIds(sta
  * Another way to put it is which item is shallower in a trémaux tree
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
  */
-export const findOrderInTremauxTree = (state, itemAId, itemBId) => {
+exports.getFirstNavigableItem = getFirstNavigableItem;
+const findOrderInTremauxTree = (state, itemAId, itemBId) => {
   if (itemAId === itemBId) {
     return [itemAId, itemBId];
   }
-  const itemMetaA = selectorItemMeta(state, itemAId);
-  const itemMetaB = selectorItemMeta(state, itemBId);
+  const itemMetaA = (0, _useTreeViewItems.selectorItemMeta)(state, itemAId);
+  const itemMetaB = (0, _useTreeViewItems.selectorItemMeta)(state, itemBId);
   if (!itemMetaA || !itemMetaB) {
     return [itemAId, itemBId];
   }
@@ -132,7 +142,7 @@ export const findOrderInTremauxTree = (state, itemAId, itemBId) => {
       aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
       continueA = aAncestor !== null;
       if (!aAncestorIsCommon && continueA) {
-        aAncestor = selectorItemParentId(state, aAncestor);
+        aAncestor = (0, _useTreeViewItems.selectorItemParentId)(state, aAncestor);
       }
     }
     if (continueB && !aAncestorIsCommon) {
@@ -140,33 +150,34 @@ export const findOrderInTremauxTree = (state, itemAId, itemBId) => {
       bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
       continueB = bAncestor !== null;
       if (!bAncestorIsCommon && continueB) {
-        bAncestor = selectorItemParentId(state, bAncestor);
+        bAncestor = (0, _useTreeViewItems.selectorItemParentId)(state, bAncestor);
       }
     }
   }
   const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
-  const ancestorFamily = selectorItemOrderedChildrenIds(state, commonAncestor);
+  const ancestorFamily = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, commonAncestor);
   const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
   const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
   return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
 };
-export const getNonDisabledItemsInRange = (state, itemAId, itemBId) => {
+exports.findOrderInTremauxTree = findOrderInTremauxTree;
+const getNonDisabledItemsInRange = (state, itemAId, itemBId) => {
   const getNextItem = itemId => {
     // If the item is expanded and has some children, return the first of them.
-    if (selectorIsItemExpandable(state, itemId) && selectorIsItemExpanded(state, itemId)) {
-      return selectorItemOrderedChildrenIds(state, itemId)[0];
+    if ((0, _useTreeViewExpansion.selectorIsItemExpandable)(state, itemId) && (0, _useTreeViewExpansion.selectorIsItemExpanded)(state, itemId)) {
+      return (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId)[0];
     }
-    let itemMeta = selectorItemMeta(state, itemId);
+    let itemMeta = (0, _useTreeViewItems.selectorItemMeta)(state, itemId);
     while (itemMeta != null) {
       // Try to find the first navigable sibling after the current item.
-      const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
-      const currentItemIndex = selectorItemIndex(state, itemMeta.id);
+      const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemMeta.parentId);
+      const currentItemIndex = (0, _useTreeViewItems.selectorItemIndex)(state, itemMeta.id);
       if (currentItemIndex < siblings.length - 1) {
         return siblings[currentItemIndex + 1];
       }
 
       // If the item is the last of its siblings, go up a level to the parent and try again.
-      itemMeta = itemMeta.parentId ? selectorItemMeta(state, itemMeta.parentId) : null;
+      itemMeta = itemMeta.parentId ? (0, _useTreeViewItems.selectorItemMeta)(state, itemMeta.parentId) : null;
     }
     throw new Error('Invalid range');
   };
@@ -175,13 +186,14 @@ export const getNonDisabledItemsInRange = (state, itemAId, itemBId) => {
   let current = first;
   while (current !== last) {
     current = getNextItem(current);
-    if (!selectorIsItemDisabled(state, current)) {
+    if (!(0, _useTreeViewItems.selectorIsItemDisabled)(state, current)) {
       items.push(current);
     }
   }
   return items;
 };
-export const getAllNavigableItems = state => {
+exports.getNonDisabledItemsInRange = getNonDisabledItemsInRange;
+const getAllNavigableItems = state => {
   let item = getFirstNavigableItem(state);
   const navigableItems = [];
   while (item != null) {
@@ -198,6 +210,8 @@ export const getAllNavigableItems = state => {
  * @param {HTMLElement | null} itemRoot The root of the item to check if the event target is in its descendants
  * @returns {boolean} Whether the target is in a descendant of this item
  */
-export const isTargetInDescendants = (target, itemRoot) => {
+exports.getAllNavigableItems = getAllNavigableItems;
+const isTargetInDescendants = (target, itemRoot) => {
   return itemRoot !== target.closest('*[role="treeitem"]');
-};
+};
+exports.isTargetInDescendants = isTargetInDescendants;

package/internals/utils/utils.d.ts

@@ -1,2 +1,2 @@
 export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
-export declare function escapeOperandAttributeSelector(operand: string): string;
+export declare function escapeOperandAttributeSelector(operand: string): string;

package/internals/utils/utils.js

@@ -1,5 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.escapeOperandAttributeSelector = escapeOperandAttributeSelector;
+exports.getActiveElement = void 0;
 // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
-export const getActiveElement = (root = document) => {
+const getActiveElement = (root = document) => {
   const activeEl = root.activeElement;
   if (!activeEl) {
     return null;
@@ -12,6 +19,7 @@ export const getActiveElement = (root = document) => {
 
 // TODO, eventually replaces this function with CSS.escape, once available in jsdom, either added manually or built in
 // https://github.com/jsdom/jsdom/issues/1550#issuecomment-236734471
-export function escapeOperandAttributeSelector(operand) {
+exports.getActiveElement = getActiveElement;
+function escapeOperandAttributeSelector(operand) {
   return operand.replace(/["\\]/g, '\\$&');
 }

package/internals/zero-styled/index.d.ts

@@ -1,3 +1,3 @@
 import { useThemeProps } from '@mui/material/styles';
 export { styled } from '@mui/material/styles';
-export declare function createUseThemeProps(name: string): typeof useThemeProps;
+export declare function createUseThemeProps(name: string): typeof useThemeProps;

package/internals/zero-styled/index.js

@@ -1,7 +1,17 @@
-import { useThemeProps } from '@mui/material/styles';
-export { styled } from '@mui/material/styles';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUseThemeProps = createUseThemeProps;
+Object.defineProperty(exports, "styled", {
+  enumerable: true,
+  get: function () {
+    return _styles.styled;
+  }
+});
+var _styles = require("@mui/material/styles");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function createUseThemeProps(name) {
-  return useThemeProps;
+function createUseThemeProps(name) {
+  return _styles.useThemeProps;
 }

package/models/events.d.ts

@@ -1,4 +1,4 @@
 export type TreeViewCancellableEvent = {
-    defaultMuiPrevented?: boolean;
+  defaultMuiPrevented?: boolean;
 };
-export type TreeViewCancellableEventHandler<Event> = (event: Event & TreeViewCancellableEvent) => void;
+export type TreeViewCancellableEventHandler<Event> = (event: Event & TreeViewCancellableEvent) => void;

package/models/events.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/index.d.ts

@@ -1,3 +1,3 @@
-export * from './items';
-export * from './events';
-export type { PropsFromSlot } from '@mui/x-internals/slots';
+export * from "./items.js";
+export * from "./events.js";
+export type { PropsFromSlot } from '@mui/x-internals/slots';

package/models/index.js

@@ -1,5 +1,27 @@
-export * from "./items.js";
-export * from "./events.js";
+"use strict";
 
-// Utils shared across the X packages
-export {};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _items = require("./items");
+Object.keys(_items).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _items[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _items[key];
+    }
+  });
+});
+var _events = require("./events");
+Object.keys(_events).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _events[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _events[key];
+    }
+  });
+});

package/models/items.d.ts

@@ -1,13 +1,13 @@
 export type TreeViewItemId = string;
 export type TreeViewDefaultItemModelProperties = {
-    id: string;
-    label: string;
+  id: string;
+  label: string;
 };
 export type TreeViewBaseItem<R extends {} = TreeViewDefaultItemModelProperties> = R & {
-    children?: TreeViewBaseItem<R>[];
+  children?: TreeViewBaseItem<R>[];
 };
 export type TreeViewItemsReorderingAction = 'reorder-above' | 'reorder-below' | 'make-child' | 'move-to-parent';
 export interface TreeViewSelectionPropagation {
-    descendants?: boolean;
-    parents?: boolean;
-}
+  descendants?: boolean;
+  parents?: boolean;
+}

package/models/items.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/modern/RichTreeView/RichTreeView.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { RichTreeViewProps } from "./RichTreeView.types.js";
+export declare const RichTreeViewRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof React.HTMLAttributes<HTMLUListElement> | keyof React.ClassAttributes<HTMLUListElement>>, {}>;
+type RichTreeViewComponent = (<R extends {}, Multiple extends boolean | undefined = undefined>(props: RichTreeViewProps<R, Multiple> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [RichTreeView API](https://mui.com/x/api/tree-view/rich-tree-view/)
+ */
+declare const RichTreeView: RichTreeViewComponent;
+export { RichTreeView };

package/modern/RichTreeView/RichTreeView.js

@@ -3,6 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import Alert from '@mui/material/Alert';
+import Typography from '@mui/material/Typography';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { warnOnce } from '@mui/x-internals/warning';
@@ -12,6 +14,8 @@ import { useTreeView } from "../internals/useTreeView/index.js";
 import { TreeViewProvider } from "../internals/TreeViewProvider/index.js";
 import { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
 import { RichTreeViewItems } from "../internals/components/RichTreeViewItems.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorGetTreeViewError, selectorIsTreeViewLoading } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiRichTreeView');
 const useUtilityClasses = ownerState => {
@@ -62,6 +66,8 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     rootRef: ref,
     props
   });
+  const isLoading = useSelector(contextValue.store, selectorIsTreeViewLoading);
+  const treeViewError = useSelector(contextValue.store, selectorGetTreeViewError);
   const {
     slots,
     slotProps
@@ -75,6 +81,17 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     getSlotProps: getRootProps,
     ownerState: props
   });
+  if (isLoading) {
+    return /*#__PURE__*/_jsx(Typography, {
+      children: "Loading..."
+    });
+  }
+  if (treeViewError) {
+    return /*#__PURE__*/_jsx(Alert, {
+      severity: "error",
+      children: treeViewError.message
+    });
+  }
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
@@ -100,8 +117,10 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
       getItemDOMElement: PropTypes.func.isRequired,
       getItemOrderedChildrenIds: PropTypes.func.isRequired,
       getItemTree: PropTypes.func.isRequired,
-      selectItem: PropTypes.func.isRequired,
+      getParentId: PropTypes.func.isRequired,
+      setIsItemDisabled: PropTypes.func.isRequired,
       setItemExpansion: PropTypes.func.isRequired,
+      setItemSelection: PropTypes.func.isRequired,
       updateItemLabel: PropTypes.func.isRequired
     })
   }),
@@ -152,9 +171,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures: PropTypes.shape({
-    labelEditing: PropTypes.bool
-  }),
+  experimentalFeatures: PropTypes.object,
   /**
    * Used to determine the id of a given item.
    *
@@ -186,13 +203,11 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   isItemDisabled: PropTypes.func,
   /**
-   * Determines if a given item is editable or not.
-   * Make sure to also enable the `labelEditing` experimental feature:
-   * `<RichTreeViewPro experimentalFeatures={{ labelEditing: true }}  />`.
-   * By default, the items are not editable.
+   * Determine if a given item can be edited.
    * @template R
    * @param {R} item The item to check.
-   * @returns {boolean} `true` if the item is editable.
+   * @returns {boolean} `true` if the item can be edited.
+   * @default () => false
    */
   isItemEditable: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   /**
@@ -209,7 +224,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   multiSelect: PropTypes.bool,
   /**
    * 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: PropTypes.func,
@@ -221,7 +236,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   onItemClick: PropTypes.func,
   /**
    * 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.
    */
@@ -240,14 +255,14 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   onItemLabelChange: PropTypes.func,
   /**
    * Callback fired when a Tree Item is selected or deselected.
-   * @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.setItemSelection()` method.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: PropTypes.func,
   /**
    * Callback fired when Tree Items are selected/deselected.
-   * @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.setItemSelection()` method.
    * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */

package/modern/RichTreeView/RichTreeView.plugins.d.ts

@@ -0,0 +1,13 @@
+import { TreeViewCorePluginParameters } from "../internals/corePlugins/index.js";
+import { UseTreeViewItemsParameters } from "../internals/plugins/useTreeViewItems/index.js";
+import { UseTreeViewExpansionParameters } from "../internals/plugins/useTreeViewExpansion/index.js";
+import { UseTreeViewSelectionParameters } from "../internals/plugins/useTreeViewSelection/index.js";
+import { UseTreeViewFocusParameters } from "../internals/plugins/useTreeViewFocus/index.js";
+import { UseTreeViewIconsParameters } from "../internals/plugins/useTreeViewIcons/index.js";
+import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from "../internals/models/index.js";
+import { UseTreeViewLabelParameters } from "../internals/plugins/useTreeViewLabel/index.js";
+export declare const RICH_TREE_VIEW_PLUGINS: readonly [import("../internals").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewIconsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewLabelSignature>];
+export type RichTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof RICH_TREE_VIEW_PLUGINS>;
+export type RichTreeViewPluginSlots = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slots'>;
+export type RichTreeViewPluginSlotProps = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slotProps'>;
+export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters, UseTreeViewLabelParameters<R> {}

package/modern/RichTreeView/RichTreeView.types.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system/styleFunctionSx';
+import { SlotComponentProps } from '@mui/utils/types';
+import { RichTreeViewClasses } from "./richTreeViewClasses.js";
+import { RichTreeViewPluginParameters, RichTreeViewPluginSlotProps, RichTreeViewPluginSlots, RichTreeViewPluginSignatures } from "./RichTreeView.plugins.js";
+import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from "../internals/models/index.js";
+import { RichTreeViewItemsSlotProps, RichTreeViewItemsSlots } from "../internals/components/RichTreeViewItems.js";
+export interface RichTreeViewSlots extends RichTreeViewPluginSlots, RichTreeViewItemsSlots {
+  /**
+   * Element rendered at the root.
+   * @default RichTreeViewRoot
+   */
+  root?: React.ElementType;
+}
+export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends RichTreeViewPluginSlotProps, RichTreeViewItemsSlotProps {
+  root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
+}
+export type RichTreeViewApiRef = React.RefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;
+export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<RichTreeViewClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface RichTreeViewProps<R extends {}, Multiple extends boolean | undefined> extends RichTreeViewPluginParameters<R, Multiple>, RichTreeViewPropsBase {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RichTreeViewSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RichTreeViewSlotProps<R, Multiple>;
+  /**
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   */
+  apiRef?: RichTreeViewApiRef;
+  /**
+   * Unstable features, breaking changes might be introduced.
+   * For each feature, if the flag is not explicitly set to `true`,
+   * the feature will be fully disabled and any property / method call will not have any effect.
+   */
+  experimentalFeatures?: TreeViewExperimentalFeatures<RichTreeViewPluginSignatures>;
+}

package/modern/RichTreeView/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./RichTreeView.js";
+export * from "./richTreeViewClasses.js";
+export type { RichTreeViewProps, RichTreeViewPropsBase, RichTreeViewSlots, RichTreeViewSlotProps } from './RichTreeView.types';
+export { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
+export type { RichTreeViewPluginSlots, RichTreeViewPluginSlotProps, RichTreeViewPluginParameters } from './RichTreeView.plugins';

package/modern/RichTreeView/richTreeViewClasses.d.ts

@@ -0,0 +1,7 @@
+export interface RichTreeViewClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type RichTreeViewClassKey = keyof RichTreeViewClasses;
+export declare function getRichTreeViewUtilityClass(slot: string): string;
+export declare const richTreeViewClasses: RichTreeViewClasses;

package/modern/SimpleTreeView/SimpleTreeView.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { SimpleTreeViewProps } from "./SimpleTreeView.types.js";
+export declare const SimpleTreeViewRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: SimpleTreeViewProps<any>;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof React.HTMLAttributes<HTMLUListElement> | keyof React.ClassAttributes<HTMLUListElement>>, {}>;
+type SimpleTreeViewComponent = (<Multiple extends boolean | undefined = undefined>(props: SimpleTreeViewProps<Multiple> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [SimpleTreeView API](https://mui.com/x/api/tree-view/simple-tree-view/)
+ */
+declare const SimpleTreeView: SimpleTreeViewComponent;
+export { SimpleTreeView };