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

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

@@ -13,9 +13,8 @@ type DataSource<R extends {}> = {
    * @template R
    * @param {R} item The item to check.
    * @returns {number} The number of children.
-   * @default (item) => number
    */
-  getChildrenCount?: (item: R) => number;
+  getChildrenCount: (item: R) => number;
   /**
    * Method used for fetching the items.
    * Only relevant for lazy-loaded tree views.
@@ -24,7 +23,7 @@ type DataSource<R extends {}> = {
    * @param {TreeViewItemId} parentId The id of the item the children belong to.
    * @returns { Promise<R[]>} The children of the item.
    */
-  getTreeItems?: (parentId?: TreeViewItemId) => Promise<R[]>;
+  getTreeItems: (parentId?: TreeViewItemId) => Promise<R[]>;
 };
 export interface UseTreeViewLazyLoadingPublicAPI {}
 export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPublicAPI {

package/esm/useTreeItem/useTreeItem.js

@@ -189,6 +189,11 @@ export const useTreeItem = parameters => {
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
+    ['expanded', 'selected', 'focused', 'disabled', 'editing', 'editable'].forEach(key => {
+      if (status[key]) {
+        props[`data-${key}`] = '';
+      }
+    });
     const enhancedContentProps = propsEnhancers.content?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};

package/esm/useTreeItem/useTreeItem.types.d.ts

@@ -55,7 +55,16 @@ export interface UseTreeItemContentSlotPropsFromUseTreeItem {
   onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
   onMouseDown: TreeViewCancellableEventHandler<React.MouseEvent>;
   ref: React.RefCallback<HTMLDivElement> | null;
+  /**
+   * @deprecated Will be removed in the next major version. Please use the data-attrs instead.
+   */
   status: UseTreeItemStatus;
+  'data-expanded'?: '';
+  'data-selected'?: '';
+  'data-focused'?: '';
+  'data-disabled'?: '';
+  'data-editing'?: '';
+  'data-editable'?: '';
 }
 export interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromUseTreeItem {}
 export type UseTreeItemContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemContentSlotOwnProps;

package/index.js

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

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -9,7 +9,7 @@ exports.TreeViewChildrenItemContext = void 0;
 exports.TreeViewChildrenItemProvider = TreeViewChildrenItemProvider;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useTreeViewContext = require("./useTreeViewContext");
+var _TreeViewContext = require("./TreeViewContext");
 var _utils = require("../utils/utils");
 var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,7 +27,7 @@ function TreeViewChildrenItemProvider(props) {
     instance,
     store,
     rootRef
-  } = (0, _useTreeViewContext.useTreeViewContext)();
+  } = (0, _TreeViewContext.useTreeViewContext)();
   const childrenIdAttrToIdRef = React.useRef(new Map());
   React.useEffect(() => {
     if (!rootRef.current) {

package/internals/TreeViewProvider/TreeViewContext.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { TreeViewAnyPluginSignature } from "../models/index.js";
 import { TreeViewContextValue } from "./TreeViewProvider.types.js";
 /**
  * @ignore - internal component.
  */
-export declare const TreeViewContext: React.Context<TreeViewContextValue<any> | null>;
+export declare const TreeViewContext: React.Context<TreeViewContextValue<any> | null>;
+export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => TreeViewContextValue<TSignatures, TOptionalSignatures>;

package/internals/TreeViewProvider/TreeViewContext.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeViewContext = void 0;
+exports.useTreeViewContext = exports.TreeViewContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 /**
  * @ignore - internal component.
@@ -12,4 +12,12 @@ var React = _interopRequireWildcard(require("react"));
 const TreeViewContext = exports.TreeViewContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
   TreeViewContext.displayName = 'TreeViewContext';
-}
+}
+const useTreeViewContext = () => {
+  const context = React.useContext(TreeViewContext);
+  if (context == null) {
+    throw new Error(['MUI X: Could not find the Tree View context.', 'It looks like you rendered your component outside of a SimpleTreeView or RichTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
+  }
+  return context;
+};
+exports.useTreeViewContext = useTreeViewContext;

package/internals/TreeViewProvider/TreeViewProvider.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TreeViewProviderProps } from "./TreeViewProvider.types.js";
 import { TreeViewAnyPluginSignature } from "../models/index.js";
 /**
- * Sets up the contexts for the underlying TreeItem components.
+ * Sets up the contexts for the underlying Tree Item components.
  *
  * @ignore - do not document.
  */

package/internals/TreeViewProvider/TreeViewProvider.js

@@ -7,21 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.TreeViewProvider = TreeViewProvider;
 var React = _interopRequireWildcard(require("react"));
 var _TreeViewContext = require("./TreeViewContext");
+var _TreeViewStyleContext = require("./TreeViewStyleContext");
 var _jsxRuntime = require("react/jsx-runtime");
+const EMPTY_OBJECT = {};
+
 /**
- * Sets up the contexts for the underlying TreeItem components.
+ * Sets up the contexts for the underlying Tree Item components.
  *
  * @ignore - do not document.
  */
 function TreeViewProvider(props) {
   const {
-    value,
+    contextValue,
+    classes = EMPTY_OBJECT,
     children
   } = props;
+
+  // TODO: Add the icons to this context and drop useTreeViewIcons
+  const styleContextValue = React.useMemo(() => ({
+    classes
+  }), [classes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
-    value: value,
-    children: value.wrapRoot({
-      children
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewStyleContext.TreeViewStyleContext.Provider, {
+      value: styleContextValue,
+      children: contextValue.wrapRoot({
+        children
+      })
     })
   });
 }

package/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -3,6 +3,7 @@ import { MergeSignaturesProperty, TreeItemWrapper, TreeRootWrapper, TreeViewAnyP
 import { TreeViewStore } from "../utils/TreeViewStore.js";
 import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
 import type { TreeItemProps } from '../../TreeItem/TreeItem.types';
+import { TreeViewClasses } from "./TreeViewStyleContext.js";
 export type TreeViewItemPluginsRunner = (props: TreeItemProps) => Required<TreeViewItemPluginResponse>;
 export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'contextValue'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'contextValue'>> & {
   instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
@@ -14,6 +15,7 @@ export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginS
   runItemPlugins: TreeViewItemPluginsRunner;
 };
 export interface TreeViewProviderProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
-  value: TreeViewContextValue<TSignatures>;
+  contextValue: TreeViewContextValue<TSignatures>;
   children: React.ReactNode;
+  classes: Partial<TreeViewClasses> | undefined;
 }

package/internals/TreeViewProvider/TreeViewStyleContext.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface TreeViewClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the item's root element. */
+  item: string;
+  /** Styles applied to the item's content element. */
+  itemContent: string;
+  /** Styles applied to the item's transition element. */
+  itemGroupTransition: string;
+  /** Styles applied to the item's icon container element icon. */
+  itemIconContainer: string;
+  /** Styles applied to the item's label element. */
+  itemLabel: string;
+  /** Styles applied to the item's label input element (visible only when editing is enabled). */
+  itemLabelInput: string;
+  /** Styles applied to the item's checkbox element. */
+  itemCheckbox: string;
+  /** Styles applied to the item's drag and drop overlay element. */
+  itemDragAndDropOverlay: string;
+  /** Styles applied to the item's error icon element */
+  itemErrorIcon: string;
+  /** Styles applied to the item's loading icon element */
+  itemLoadingIcon: string;
+}
+export interface TreeViewStyleContextValue {
+  classes: Partial<TreeViewClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare const TreeViewStyleContext: React.Context<TreeViewStyleContextValue>;
+export declare const useTreeViewStyleContext: () => TreeViewStyleContextValue;

package/internals/TreeViewProvider/TreeViewStyleContext.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewStyleContext = exports.TreeViewStyleContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @ignore - internal component.
+ */
+const TreeViewStyleContext = exports.TreeViewStyleContext = /*#__PURE__*/React.createContext({
+  classes: {}
+});
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewStyleContext.displayName = 'TreeViewStyleContext';
+}
+const useTreeViewStyleContext = () => {
+  return React.useContext(TreeViewStyleContext);
+};
+exports.useTreeViewStyleContext = useTreeViewStyleContext;

package/internals/TreeViewProvider/index.d.ts

@@ -1,3 +1,3 @@
 export { TreeViewProvider } from "./TreeViewProvider.js";
-export { useTreeViewContext } from "./useTreeViewContext.js";
+export { useTreeViewContext } from "./TreeViewContext.js";
 export type { TreeViewProviderProps, TreeViewContextValue, TreeViewItemPluginsRunner } from './TreeViewProvider.types';

package/internals/TreeViewProvider/index.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, "TreeViewProvider", {
 Object.defineProperty(exports, "useTreeViewContext", {
   enumerable: true,
   get: function () {
-    return _useTreeViewContext.useTreeViewContext;
+    return _TreeViewContext.useTreeViewContext;
   }
 });
 var _TreeViewProvider = require("./TreeViewProvider");
-var _useTreeViewContext = require("./useTreeViewContext");
+var _TreeViewContext = require("./TreeViewContext");

package/internals/index.d.ts

@@ -30,4 +30,5 @@ export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from './plugins/useTreeViewJSXItems';
 export { createSelector } from "./utils/selectors.js";
 export { isTargetInDescendants } from "./utils/tree.js";
-export { TreeViewStore } from "./utils/TreeViewStore.js";
+export { TreeViewStore } from "./utils/TreeViewStore.js";
+export type { TreeViewClasses } from './TreeViewProvider/TreeViewStyleContext';

package/internals/plugins/useTreeViewItemCustomization/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewItemCustomization } from "./useTreeViewItemCustomization.js";
+export type { UseTreeViewItemCustomizationSignature, UseTreeViewItemCustomizationParameters, UseTreeViewItemCustomizationDefaultizedParameters } from './useTreeViewItemCustomization.types';

package/internals/plugins/useTreeViewItemCustomization/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTreeViewItemCustomization", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItemCustomization.useTreeViewItemCustomization;
+  }
+});
+var _useTreeViewItemCustomization = require("./useTreeViewItemCustomization");

package/internals/plugins/useTreeViewItemCustomization/useTreeViewItemCustomization.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewItemCustomizationSignature } from "./useTreeViewItemCustomization.types.js";
+export declare const useTreeViewItemCustomization: TreeViewPlugin<UseTreeViewItemCustomizationSignature>;

package/internals/plugins/useTreeViewItemCustomization/useTreeViewItemCustomization.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewItemCustomization = void 0;
+var React = _interopRequireWildcard(require("react"));
+const useTreeViewItemCustomization = ({
+  slots,
+  slotProps
+}) => {
+  const pluginContextValue = React.useMemo(() => ({
+    icons: {
+      slots: {
+        collapseIcon: slots.collapseIcon,
+        expandIcon: slots.expandIcon,
+        endIcon: slots.endIcon
+      },
+      slotProps: {
+        collapseIcon: slotProps.collapseIcon,
+        expandIcon: slotProps.expandIcon,
+        endIcon: slotProps.endIcon
+      }
+    }
+  }), [slots.collapseIcon, slots.expandIcon, slots.endIcon, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon]);
+  return {
+    contextValue: pluginContextValue
+  };
+};
+exports.useTreeViewItemCustomization = useTreeViewItemCustomization;
+useTreeViewItemCustomization.params = {};

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils/types';
+import { TreeViewPluginSignature } from "../../models/index.js";
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
+export interface UseTreeViewItemCustomizationParameters {}
+export type UseTreeViewItemCustomizationDefaultizedParameters = UseTreeViewItemCustomizationParameters;
+interface UseTreeViewItemCustomizationSlots {
+  /**
+   * The default icon used to collapse the item.
+   */
+  collapseIcon?: React.ElementType;
+  /**
+   * The default icon used to expand the item.
+   */
+  expandIcon?: React.ElementType;
+  /**
+   * 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;
+}
+interface UseTreeViewItemCustomizationSlotProps {
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+}
+interface UseTreeViewItemCustomizationContextValue {
+  icons: {
+    slots: UseTreeViewItemCustomizationSlots;
+    slotProps: UseTreeViewItemCustomizationSlotProps;
+  };
+}
+export type UseTreeViewItemCustomizationSignature = TreeViewPluginSignature<{
+  params: UseTreeViewItemCustomizationParameters;
+  defaultizedParams: UseTreeViewItemCustomizationDefaultizedParameters;
+  contextValue: UseTreeViewItemCustomizationContextValue;
+  slots: UseTreeViewItemCustomizationSlots;
+  slotProps: UseTreeViewItemCustomizationSlotProps;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
+}>;
+export {};

package/internals/plugins/useTreeViewItemCustomization/useTreeViewItemCustomization.types.js

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

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

@@ -13,9 +13,8 @@ type DataSource<R extends {}> = {
    * @template R
    * @param {R} item The item to check.
    * @returns {number} The number of children.
-   * @default (item) => number
    */
-  getChildrenCount?: (item: R) => number;
+  getChildrenCount: (item: R) => number;
   /**
    * Method used for fetching the items.
    * Only relevant for lazy-loaded tree views.
@@ -24,7 +23,7 @@ type DataSource<R extends {}> = {
    * @param {TreeViewItemId} parentId The id of the item the children belong to.
    * @returns { Promise<R[]>} The children of the item.
    */
-  getTreeItems?: (parentId?: TreeViewItemId) => Promise<R[]>;
+  getTreeItems: (parentId?: TreeViewItemId) => Promise<R[]>;
 };
 export interface UseTreeViewLazyLoadingPublicAPI {}
 export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPublicAPI {

package/modern/RichTreeView/RichTreeView.js

@@ -22,10 +22,21 @@ const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getRichTreeViewUtilityClass, classes);
+  return React.useMemo(() => {
+    const slots = {
+      root: ['root'],
+      item: ['item'],
+      itemContent: ['itemContent'],
+      itemGroupTransition: ['itemGroupTransition'],
+      itemIconContainer: ['itemIconContainer'],
+      itemLabel: ['itemLabel'],
+      itemLabelInput: ['itemLabelInput'],
+      itemCheckbox: ['itemCheckbox']
+      // itemDragAndDropOverlay: ['itemDragAndDropOverlay'], => feature not available on this component
+      // itemErrorIcon: ['itemErrorIcon'], => feature not available on this component
+    };
+    return composeClasses(slots, getRichTreeViewUtilityClass, classes);
+  }, [classes]);
 };
 export const RichTreeViewRoot = styled('ul', {
   name: 'MuiRichTreeView',
@@ -93,7 +104,8 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     });
   }
   return /*#__PURE__*/_jsx(TreeViewProvider, {
-    value: contextValue,
+    contextValue: contextValue,
+    classes: classes,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
       children: /*#__PURE__*/_jsx(RichTreeViewItems, {
         slots: slots,

package/modern/RichTreeView/richTreeViewClasses.d.ts

@@ -1,7 +1,5 @@
-export interface RichTreeViewClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
+import { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+export interface RichTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
 export type RichTreeViewClassKey = keyof RichTreeViewClasses;
 export declare function getRichTreeViewUtilityClass(slot: string): string;
 export declare const richTreeViewClasses: RichTreeViewClasses;

package/modern/RichTreeView/richTreeViewClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getRichTreeViewUtilityClass(slot) {
   return generateUtilityClass('MuiRichTreeView', slot);
 }
-export const richTreeViewClasses = generateUtilityClasses('MuiRichTreeView', ['root']);
+export const richTreeViewClasses = generateUtilityClasses('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput']);

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -17,10 +17,21 @@ const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getSimpleTreeViewUtilityClass, classes);
+  return React.useMemo(() => {
+    const slots = {
+      root: ['root'],
+      item: ['item'],
+      itemContent: ['itemContent'],
+      itemGroupTransition: ['itemGroupTransition'],
+      itemIconContainer: ['itemIconContainer'],
+      itemLabel: ['itemLabel'],
+      // itemLabelInput: ['itemLabelInput'], => feature not available on this component
+      itemCheckbox: ['itemCheckbox']
+      // itemDragAndDropOverlay: ['itemDragAndDropOverlay'], => feature not available on this component
+      // itemErrorIcon: ['itemErrorIcon'], => feature not available on this component
+    };
+    return composeClasses(slots, getSimpleTreeViewUtilityClass, classes);
+  }, [classes]);
 };
 export const SimpleTreeViewRoot = styled('ul', {
   name: 'MuiSimpleTreeView',
@@ -80,7 +91,8 @@ const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inP
     ownerState
   });
   return /*#__PURE__*/_jsx(TreeViewProvider, {
-    value: contextValue,
+    contextValue: contextValue,
+    classes: classes,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps))
   });
 });

package/modern/SimpleTreeView/simpleTreeViewClasses.d.ts

@@ -1,7 +1,5 @@
-export interface SimpleTreeViewClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
+import { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
 export type SimpleTreeViewClassKey = keyof SimpleTreeViewClasses;
 export declare function getSimpleTreeViewUtilityClass(slot: string): string;
 export declare const simpleTreeViewClasses: SimpleTreeViewClasses;

package/modern/SimpleTreeView/simpleTreeViewClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getSimpleTreeViewUtilityClass(slot) {
   return generateUtilityClass('MuiSimpleTreeView', slot);
 }
-export const simpleTreeViewClasses = generateUtilityClasses('MuiSimpleTreeView', ['root']);
+export const simpleTreeViewClasses = generateUtilityClasses('MuiSimpleTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox']);

package/modern/TreeItem/TreeItem.d.ts

@@ -15,7 +15,7 @@ export declare const TreeItemErrorContainer: import("@emotion/styled").StyledCom
 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>, {}, {}>;
+}, "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" | "exportparts" | "part" | "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" | "onScrollEnd" | "onScrollEndCapture" | "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;
 };