@mui/x-tree-view 8.0.0-alpha.9 → 8.0.0-beta.1

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -99,8 +99,10 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
       getItemDOMElement: PropTypes.func.isRequired,
       getItemOrderedChildrenIds: PropTypes.func.isRequired,
       getItemTree: PropTypes.func.isRequired,
-      selectItem: PropTypes.func.isRequired,
-      setItemExpansion: PropTypes.func.isRequired
+      getParentId: PropTypes.func.isRequired,
+      setIsItemDisabled: PropTypes.func.isRequired,
+      setItemExpansion: PropTypes.func.isRequired,
+      setItemSelection: PropTypes.func.isRequired
     })
   }),
   /**
@@ -173,7 +175,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.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,
@@ -185,7 +187,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.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.
    */
@@ -198,14 +200,14 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   onItemFocus: 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/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -0,0 +1,12 @@
+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";
+export declare const SIMPLE_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").UseTreeViewJSXItemsSignature>];
+export type SimpleTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
+export type SimpleTreeViewPluginSlots = MergeSignaturesProperty<SimpleTreeViewPluginSignatures, 'slots'>;
+export type SimpleTreeViewPluginSlotProps = MergeSignaturesProperty<SimpleTreeViewPluginSignatures, 'slotProps'>;
+export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {}

package/modern/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SlotComponentProps } from '@mui/utils/types';
+import { SxProps } from '@mui/system/styleFunctionSx';
+import { SimpleTreeViewClasses } from "./simpleTreeViewClasses.js";
+import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots, SimpleTreeViewPluginSignatures } from "./SimpleTreeView.plugins.js";
+import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from "../internals/models/index.js";
+export interface SimpleTreeViewSlots extends SimpleTreeViewPluginSlots {
+  /**
+   * Element rendered at the root.
+   * @default SimpleTreeViewRoot
+   */
+  root?: React.ElementType;
+}
+export interface SimpleTreeViewSlotProps extends SimpleTreeViewPluginSlotProps {
+  root?: SlotComponentProps<'ul', {}, {}>;
+}
+export type SimpleTreeViewApiRef = React.RefObject<TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined>;
+export interface SimpleTreeViewProps<Multiple extends boolean | undefined> extends SimpleTreeViewPluginParameters<Multiple>, React.HTMLAttributes<HTMLUListElement> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Overridable component slots.
+   */
+  slots?: SimpleTreeViewSlots;
+  /**
+   * The props used for each component slot.
+   */
+  slotProps?: SimpleTreeViewSlotProps;
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SimpleTreeViewClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   */
+  apiRef?: SimpleTreeViewApiRef;
+  /**
+   * 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<SimpleTreeViewPluginSignatures>;
+}

package/modern/SimpleTreeView/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SimpleTreeView.js";
+export * from "./simpleTreeViewClasses.js";
+export type { SimpleTreeViewProps, SimpleTreeViewSlots, SimpleTreeViewSlotProps } from './SimpleTreeView.types';

package/modern/SimpleTreeView/simpleTreeViewClasses.d.ts

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

package/modern/TreeItem/TreeItem.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { CheckboxProps } from '@mui/material/Checkbox';
+import { TreeItemProps } from "./TreeItem.types.js";
+import { UseTreeItemStatus } from "../useTreeItem/index.js";
+export declare const TreeItemRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof React.ClassAttributes<HTMLLIElement> | keyof React.LiHTMLAttributes<HTMLLIElement>>, {}>;
+export declare const TreeItemContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  status: UseTreeItemStatus;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TreeItemLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  editable?: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TreeItemIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TreeItemGroupTransition: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").CollapseProps, keyof import("@mui/material").CollapseProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const TreeItemErrorContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TreeItemLoadingContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").CircularProgressProps, keyof import("@mui/material").CircularProgressProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const TreeItemCheckbox: import("@emotion/styled").StyledComponent<Pick<Omit<CheckboxProps & {
+  visible?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "hidden" | "visible" | "color" | "content" | "size" | "style" | "icon" | "translate" | "disabled" | "form" | "slot" | "title" | "action" | "checked" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "readOnly" | "required" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "classes" | "component" | "slots" | "slotProps" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "checkedIcon" | "inputProps" | "inputRef" | "indeterminate" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+type TreeItemComponent = ((props: TreeItemProps & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item-2/)
+ */
+export declare const TreeItem: TreeItemComponent;
+export {};

package/modern/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/modern/TreeItem/TreeItem.types.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { TransitionProps } from '@mui/material/transitions';
+import { SlotComponentProps } from '@mui/utils/types';
+import { UseTreeItemParameters, UseTreeItemStatus } from "../useTreeItem/index.js";
+import { TreeItemClasses } from "./treeItemClasses.js";
+import { TreeItemIconSlotProps, TreeItemIconSlots } from "../TreeItemIcon/index.js";
+import { TreeViewCancellableEventHandler } from "../models/index.js";
+export interface TreeItemSlots extends TreeItemIconSlots {
+  /**
+   * The component that renders the root.
+   * @default TreeItemRoot
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the content of the item.
+   * (e.g.: everything related to this item, not to its children).
+   * @default TreeItemContent
+   */
+  content?: React.ElementType;
+  /**
+   * The component that renders the children of the item.
+   * @default TreeItemGroupTransition
+   */
+  groupTransition?: React.ElementType;
+  /**
+   * The component that renders the icon.
+   * @default TreeItemIconContainer
+   */
+  iconContainer?: React.ElementType;
+  /**
+   * The component that renders the item checkbox for selection.
+   * @default TreeItemCheckbox
+   */
+  checkbox?: React.ElementType;
+  /**
+   * The component that renders the item label.
+   * @default TreeItemLabel
+   */
+  label?: React.ElementType;
+  /**
+   * The component that renders the input to edit the label when the item is editable and is currently being edited.
+   * @default TreeItemLabelInput
+   */
+  labelInput?: React.ElementType;
+  /**
+   * The component that renders the overlay when an item reordering is ongoing.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component.
+   * @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', {}, {}>;
+  content?: SlotComponentProps<'div', {}, {}>;
+  groupTransition?: SlotComponentPropsFromProps<TransitionProps, {}, {}>;
+  iconContainer?: SlotComponentProps<'div', {}, {}>;
+  checkbox?: SlotComponentProps<'button', {}, {}>;
+  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;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TreeItemClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TreeItemSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TreeItemSlotProps;
+  /**
+   * This prop isn't supported.
+   * Use the `onItemFocus` callback on the tree if you need to monitor an item's focus.
+   */
+  onFocus?: null;
+  /**
+   * Callback fired when the item root is blurred.
+   */
+  onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLLIElement>>;
+  /**
+   * Callback fired when a key is pressed on the keyboard and the tree is in focus.
+   */
+  onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
+}
+export interface TreeItemOwnerState extends Omit<TreeItemProps, 'disabled'>, UseTreeItemStatus {}

package/modern/TreeItem/index.d.ts

@@ -0,0 +1,3 @@
+export { TreeItem, TreeItemRoot, TreeItemContent, TreeItemIconContainer, TreeItemGroupTransition, TreeItemCheckbox, TreeItemLabel } from "./TreeItem.js";
+export type { TreeItemProps, TreeItemSlots, TreeItemSlotProps } from './TreeItem.types';
+export * from "./treeItemClasses.js";

package/modern/TreeItem/treeItemClasses.d.ts

@@ -0,0 +1,33 @@
+export interface TreeItemClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the transition component. */
+  groupTransition: string;
+  /** Styles applied to the content element. */
+  content: string;
+  /** State class applied to the content element when expanded. */
+  expanded: string;
+  /** State class applied to the content element when selected. */
+  selected: string;
+  /** State class applied to the content element when focused. */
+  focused: string;
+  /** State class applied to the element when disabled. */
+  disabled: string;
+  /** Styles applied to the Tree Item icon. */
+  iconContainer: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the checkbox element. */
+  checkbox: string;
+  /** Styles applied to the input element that is visible when editing is enabled. */
+  labelInput: string;
+  /** Styles applied to the content element when editing is enabled. */
+  editing: string;
+  /** Styles applied to the content of the items that are editable. */
+  editable: string;
+  /** Styles applied to the drag and drop overlay. */
+  dragAndDropOverlay: string;
+}
+export type TreeItemClassKey = keyof TreeItemClasses;
+export declare function getTreeItemUtilityClass(slot: string): string;
+export declare const treeItemClasses: TreeItemClasses;

package/modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeItemDragAndDropOverlayProps } from "./TreeItemDragAndDropOverlay.types.js";
+declare function TreeItemDragAndDropOverlay(props: TreeItemDragAndDropOverlayProps): React.JSX.Element | null;
+declare namespace TreeItemDragAndDropOverlay {
+  var propTypes: any;
+}
+export { TreeItemDragAndDropOverlay };

package/modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { TreeViewItemsReorderingAction } from "../models/index.js";
+export interface TreeItemDragAndDropOverlayProps {
+  action?: TreeViewItemsReorderingAction;
+  style?: React.CSSProperties;
+}

package/modern/TreeItemDragAndDropOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItemDragAndDropOverlay } from "./TreeItemDragAndDropOverlay.js";
+export type { TreeItemDragAndDropOverlayProps } from './TreeItemDragAndDropOverlay.types';

package/modern/TreeItemIcon/TreeItemIcon.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeItemIconProps } from "./TreeItemIcon.types.js";
+declare function TreeItemIcon(props: TreeItemIconProps): React.JSX.Element | null;
+declare namespace TreeItemIcon {
+  var propTypes: any;
+}
+export { TreeItemIcon };

package/modern/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/modern/TreeItemIcon/TreeItemIcon.types.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils/types';
+import { UseTreeItemStatus } from "../useTreeItem/index.js";
+export interface TreeItemIconSlots {
+  /**
+   * The icon used to collapse the item.
+   */
+  collapseIcon?: React.ElementType;
+  /**
+   * The icon used to expand the item.
+   */
+  expandIcon?: React.ElementType;
+  /**
+   * The icon displayed next to an end item.
+   */
+  endIcon?: React.ElementType;
+  /**
+   * The icon to display next to the Tree Item's label.
+   */
+  icon?: React.ElementType;
+}
+export interface TreeItemIconSlotProps {
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+  icon?: SlotComponentProps<'svg', {}, {}>;
+}
+export interface TreeItemIconProps {
+  status: UseTreeItemStatus;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TreeItemIconSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TreeItemIconSlotProps;
+}

package/modern/TreeItemIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItemIcon } from "./TreeItemIcon.js";
+export type { TreeItemIconProps, TreeItemIconSlots, TreeItemIconSlotProps } from './TreeItemIcon.types';

package/modern/TreeItemLabelInput/TreeItemLabelInput.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @ignore - internal component.
+ */
+declare const TreeItemLabelInput: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, {}>;
+export { TreeItemLabelInput };

package/modern/TreeItemLabelInput/TreeItemLabelInput.types.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { TreeViewCancellableEventHandler } from "../models/index.js";
+export interface TreeItemLabelInputProps {
+  value?: string;
+  /**
+   * Used to determine if the target of keydown or blur events is the input and prevent the event from propagating to the root.
+   */
+  'data-element'?: 'labelInput';
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLInputElement>>;
+  onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLInputElement>>;
+  autoFocus?: true;
+  type?: 'text';
+}

package/modern/TreeItemLabelInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItemLabelInput } from "./TreeItemLabelInput.js";
+export type { TreeItemLabelInputProps } from './TreeItemLabelInput.types';

package/modern/TreeItemProvider/TreeItemProvider.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeItemProviderProps } from "./TreeItemProvider.types.js";
+declare function TreeItemProvider(props: TreeItemProviderProps): React.JSX.Element;
+declare namespace TreeItemProvider {
+  var propTypes: any;
+}
+export { TreeItemProvider };

package/modern/TreeItemProvider/TreeItemProvider.types.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeViewItemId } from "../models/index.js";
+export interface TreeItemProviderProps {
+  children: React.ReactNode;
+  itemId: TreeViewItemId;
+  id: string | undefined;
+}

package/modern/TreeItemProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItemProvider } from "./TreeItemProvider.js";
+export type { TreeItemProviderProps } from './TreeItemProvider.types';

package/modern/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
+export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
+export { useTreeItemModel } from "./useTreeItemModel.js";

package/modern/hooks/useTreeItemModel.d.ts

@@ -0,0 +1,2 @@
+import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../models/index.js";
+export declare const useTreeItemModel: <R extends {} = TreeViewDefaultItemModelProperties>(itemId: TreeViewItemId) => TreeViewBaseItem<R> | null;

package/modern/hooks/useTreeItemUtils/index.d.ts

@@ -0,0 +1 @@
+export { useTreeItemUtils } from "./useTreeItemUtils.js";

package/modern/hooks/useTreeItemUtils/useTreeItemUtils.d.ts

@@ -0,0 +1,42 @@
+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';
+import type { UseTreeViewFocusSignature } from '../../internals/plugins/useTreeViewFocus';
+import { UseTreeViewLabelSignature } from "../../internals/plugins/useTreeViewLabel/index.js";
+import type { UseTreeItemStatus } from '../../useTreeItem';
+import { TreeViewPublicAPI } from "../../internals/models/index.js";
+export interface UseTreeItemInteractions {
+  handleExpansion: (event: React.MouseEvent) => void;
+  handleSelection: (event: React.MouseEvent) => void;
+  handleCheckboxSelection: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  toggleItemEditing: () => void;
+  handleSaveItemLabel: (event: React.SyntheticEvent, label: string) => void;
+  handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
+}
+/**
+ * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
+ */
+type UseTreeItemUtilsMinimalPlugins = readonly [UseTreeViewSelectionSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature, UseTreeViewFocusSignature];
+/**
+ * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
+ */
+export type UseTreeItemUtilsOptionalPlugins = readonly [UseTreeViewLabelSignature, UseTreeViewLazyLoadingSignature];
+interface UseTreeItemUtilsReturnValue<TSignatures extends UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins> {
+  interactions: UseTreeItemInteractions;
+  status: UseTreeItemStatus;
+  /**
+   * The object the allows Tree View manipulation.
+   */
+  publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
+}
+export declare const itemHasChildren: (reactChildren: React.ReactNode) => boolean;
+export declare const useTreeItemUtils: <TSignatures extends UseTreeItemUtilsMinimalPlugins = UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins = UseTreeItemUtilsOptionalPlugins>({
+  itemId,
+  children
+}: {
+  itemId: string;
+  children?: React.ReactNode;
+}) => UseTreeItemUtilsReturnValue<TSignatures, TOptionalSignatures>;
+export {};