@mui/x-tree-view 8.27.1 → 9.0.0-alpha.0

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.d.ts

@@ -8,7 +8,6 @@ export declare function deriveStateFromParameters<R extends TreeViewValidItem<R>
   isItemEditable?: any;
 }): {
   disabledItemsFocusable: boolean;
-  domStructure: "nested";
   itemChildrenIndentation: string | number;
   providedTreeId: string | undefined;
   expansionTrigger: "content" | "iconContainer";
@@ -16,6 +15,7 @@ export declare function deriveStateFromParameters<R extends TreeViewValidItem<R>
   multiSelect: boolean | NonNullable<Multiple>;
   checkboxSelection: boolean;
   selectionPropagation: Readonly<{}>;
+  itemHeight: number | null;
 };
 export declare function createMinimalInitialState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined>(parameters: MinimalTreeViewParameters<R, Multiple>): MinimalTreeViewState<R, Multiple>;
 export declare const createTreeViewDefaultId: () => string;

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.js

@@ -18,7 +18,6 @@ var _items = require("../plugins/items");
 function deriveStateFromParameters(parameters) {
   return {
     disabledItemsFocusable: parameters.disabledItemsFocusable ?? false,
-    domStructure: 'nested',
     itemChildrenIndentation: parameters.itemChildrenIndentation ?? '12px',
     providedTreeId: parameters.id,
     // TODO: Fix
@@ -29,7 +28,8 @@ function deriveStateFromParameters(parameters) {
     disableSelection: parameters.disableSelection ?? false,
     multiSelect: parameters.multiSelect ?? false,
     checkboxSelection: parameters.checkboxSelection ?? false,
-    selectionPropagation: parameters.selectionPropagation ?? _empty.EMPTY_OBJECT
+    selectionPropagation: parameters.selectionPropagation ?? _empty.EMPTY_OBJECT,
+    itemHeight: parameters.itemHeight ?? null
   };
 }
 function applyModelInitialValue(controlledValue, defaultValue, fallback) {

package/internals/RichTreeViewStore/RichTreeViewStore.types.d.ts

@@ -1,4 +1,4 @@
-import { TreeViewItemId, TreeViewValidItem } from "../../models/index.js";
+import { TreeViewDOMStructure, TreeViewItemId, TreeViewValidItem } from "../../models/index.js";
 import { MinimalTreeViewParameters, MinimalTreeViewState } from "../MinimalTreeViewStore/index.js";
 import { RichTreeViewLazyLoadedItemsStatus } from "../plugins/lazyLoading/index.js";
 export interface RichTreeViewState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends MinimalTreeViewState<R, Multiple> {
@@ -15,6 +15,12 @@ export interface RichTreeViewState<R extends TreeViewValidItem<R>, Multiple exte
    * Is null if lazy loading is not enabled.
    */
   lazyLoadedItems: RichTreeViewLazyLoadedItemsStatus | null;
+  /**
+   * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
+   * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
+   * Nested DOM structure is not compatible with collapse / expansion animations.
+   */
+  domStructure: TreeViewDOMStructure;
 }
 export interface RichTreeViewStoreParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends MinimalTreeViewParameters<R, Multiple> {
   /**
@@ -31,4 +37,11 @@ export interface RichTreeViewStoreParameters<R extends TreeViewValidItem<R>, Mul
    * @default () => false
    */
   isItemEditable?: boolean | ((item: R) => boolean);
+  /**
+   * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
+   * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
+   * Nested DOM structure is not compatible with collapse / expansion animations.
+   * @default 'nested'
+   */
+  domStructure?: TreeViewDOMStructure;
 }

package/internals/RichTreeViewStore/RichTreeViewStore.utils.js

@@ -12,7 +12,8 @@ const deriveStateFromParameters = parameters => ({
 const parametersToStateMapper = exports.parametersToStateMapper = {
   getInitialState: (minimalInitialState, parameters) => (0, _extends2.default)({}, minimalInitialState, deriveStateFromParameters(parameters), {
     editedItemId: null,
-    lazyLoadedItems: null
+    lazyLoadedItems: null,
+    domStructure: parameters.domStructure ?? 'nested'
   }),
   updateStateFromParameters: (newMinimalState, parameters) => {
     const newState = (0, _extends2.default)({}, newMinimalState, deriveStateFromParameters(parameters));

package/internals/TreeViewProvider/index.d.ts

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

package/internals/TreeViewProvider/index.js

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

package/internals/components/RichTreeViewItems.d.ts

@@ -2,31 +2,55 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils/types';
 import { TreeItem, TreeItemProps } from "../../TreeItem/index.js";
 import { TreeViewItemId } from "../../models/index.js";
-export declare function RichTreeViewItems(props: RichTreeViewItemsProps): import("react/jsx-runtime").JSX.Element;
+export declare const RichTreeViewItem: React.NamedExoticComponent<RichTreeViewItemProps>;
+export declare function RichTreeViewItems<TProps extends object>(props: RichTreeViewItemsProps<TProps>): import("react/jsx-runtime").JSX.Element;
 interface RichTreeViewItemsOwnerState {
   itemId: TreeViewItemId;
   label: string;
 }
 export interface RichTreeViewItemsSlots {
+  /**
+   * Element rendered at the root.
+   * @default RichTreeViewProRoot
+   */
+  root: React.ElementType;
   /**
    * Custom component to render a Tree Item.
    * @default TreeItem.
    */
   item?: React.JSXElementConstructor<TreeItemProps>;
 }
-export interface RichTreeViewItemsSlotProps {
+export interface RichTreeViewItemsSlotProps<TProps extends object> {
   item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemsOwnerState>;
+  root?: SlotComponentProps<'ul', {}, TProps>;
 }
-export interface RichTreeViewItemsProps {
+export interface RichTreeViewItemsProps<TProps extends object> {
   /**
    * Overridable component slots.
    * @default {}
    */
-  slots?: RichTreeViewItemsSlots;
+  slots: RichTreeViewItemsSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: RichTreeViewItemsSlotProps;
+  slotProps?: RichTreeViewItemsSlotProps<TProps>;
+  /**
+   * Owner state applied to the root slot component.
+   */
+  ownerState: TProps;
+  /**
+   * Props provided to the component and applied to the root element.
+   */
+  forwardedProps: React.HTMLAttributes<HTMLUListElement>;
+  /**
+   * Ref forwarded to the root element.
+   */
+  rootRef: React.Ref<HTMLUListElement>;
+}
+interface RichTreeViewItemProps extends Pick<TreeItemProps, 'id' | 'itemId' | 'children'> {
+  itemSlot: React.JSXElementConstructor<TreeItemProps> | undefined;
+  itemSlotProps: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemsOwnerState> | undefined;
+  skipChildren: boolean;
 }
 export {};

package/internals/components/RichTreeViewItems.js

@@ -6,6 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.RichTreeViewItem = void 0;
 exports.RichTreeViewItems = RichTreeViewItems;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -18,13 +19,14 @@ var _TreeItem = require("../../TreeItem");
 var _items = require("../plugins/items");
 var _TreeViewProvider = require("../TreeViewProvider");
 var _expansion = require("../plugins/expansion");
+var _useTreeViewRootProps = require("../hooks/useTreeViewRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
 const selectorNoChildren = () => _empty.EMPTY_ARRAY;
 const selectorChildrenIdsNull = state => _items.itemsSelectors.itemOrderedChildrenIds(state, null);
-const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
+const RichTreeViewItem = exports.RichTreeViewItem = /*#__PURE__*/React.memo(function RichTreeViewItem({
   itemSlot,
   itemSlotProps,
   itemId,
@@ -52,25 +54,40 @@ const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
     }),
     itemProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
-    children: children?.map(renderItemForRichTreeView)
+    children: renderItemForRichTreeView ? children?.map(renderItemForRichTreeView) : null
   }));
 }, _fastObjectShallowCompare.fastObjectShallowCompare);
-if (process.env.NODE_ENV !== "production") WrappedTreeItem.displayName = "WrappedTreeItem";
+if (process.env.NODE_ENV !== "production") RichTreeViewItem.displayName = "RichTreeViewItem";
 function RichTreeViewItems(props) {
   const {
     slots,
-    slotProps
+    slotProps,
+    ownerState,
+    forwardedProps,
+    rootRef
   } = props;
   const {
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
+  const {
+    classes
+  } = (0, _TreeViewProvider.useTreeViewStyleContext)();
   const itemSlot = slots?.item;
   const itemSlotProps = slotProps?.item;
   const domStructure = (0, _store.useStore)(store, _items.itemsSelectors.domStructure);
   const items = (0, _store.useStore)(store, domStructure === 'flat' ? _expansion.expansionSelectors.flatList : selectorChildrenIdsNull);
+  const getRootProps = (0, _useTreeViewRootProps.useTreeViewRootProps)(store, forwardedProps, rootRef);
+  const Root = slots.root;
+  const rootProps = (0, _useSlotProps2.default)({
+    elementType: Root,
+    externalSlotProps: slotProps?.root,
+    className: classes.root,
+    getSlotProps: getRootProps,
+    ownerState
+  });
   const skipChildren = domStructure === 'flat';
   const renderItem = React.useCallback(itemId => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItem, {
       itemSlot: itemSlot,
       itemSlotProps: itemSlotProps,
       itemId: itemId,
@@ -79,6 +96,8 @@ function RichTreeViewItems(props) {
   }, [itemSlot, itemSlotProps, skipChildren]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemsContext.Provider, {
     value: renderItem,
-    children: items.map(renderItem)
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
+      children: items.map(renderItem)
+    }))
   });
 }

package/internals/hooks/useTreeViewRootProps.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { EventHandlers } from '@mui/utils/types';
 import { TreeViewCancellableEvent } from "../../models/index.js";
 import { TreeViewAnyStore } from "../models/index.js";
-export declare function useTreeViewRootProps<TStore extends TreeViewAnyStore>(store: TStore, forwardedProps: React.HTMLAttributes<HTMLUListElement>, ref: React.Ref<HTMLUListElement | null> | undefined): (otherHandlers: EventHandlers) => {
+import { TreeViewStoreInContext } from "../TreeViewProvider/index.js";
+export declare function useTreeViewRootProps<TStore extends TreeViewAnyStore>(store: TreeViewStoreInContext<TStore>, forwardedProps: React.HTMLAttributes<HTMLUListElement>, ref: React.Ref<HTMLUListElement | null> | undefined): (otherHandlers: EventHandlers) => {
   style: React.CSSProperties;
   onFocus: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;
   onBlur: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;

package/internals/index.d.ts

@@ -1,6 +1,6 @@
-export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
-export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
-export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
+export { TreeViewProvider, useTreeViewContext, useTreeViewStyleContext } from "./TreeViewProvider/index.js";
+export { RichTreeViewItems, RichTreeViewItem } from "./components/RichTreeViewItems.js";
+export type { RichTreeViewItemsProps, RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
 export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.js";
 export { useTreeViewStore } from "./hooks/useTreeViewStore.js";
 export type { UseTreeViewStoreParameters } from "./hooks/useTreeViewStore.js";

package/internals/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "MinimalTreeViewStore", {
     return _MinimalTreeViewStore.MinimalTreeViewStore;
   }
 });
+Object.defineProperty(exports, "RichTreeViewItem", {
+  enumerable: true,
+  get: function () {
+    return _RichTreeViewItems.RichTreeViewItem;
+  }
+});
 Object.defineProperty(exports, "RichTreeViewItems", {
   enumerable: true,
   get: function () {
@@ -99,6 +105,12 @@ Object.defineProperty(exports, "useTreeViewStore", {
     return _useTreeViewStore.useTreeViewStore;
   }
 });
+Object.defineProperty(exports, "useTreeViewStyleContext", {
+  enumerable: true,
+  get: function () {
+    return _TreeViewProvider.useTreeViewStyleContext;
+  }
+});
 var _TreeViewProvider = require("./TreeViewProvider");
 var _RichTreeViewItems = require("./components/RichTreeViewItems");
 var _useTreeViewRootProps = require("./hooks/useTreeViewRootProps");

package/internals/plugins/items/selectors.d.ts

@@ -1,10 +1,11 @@
 import { TreeViewItemMeta } from "../../models/index.js";
 import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+import { RichTreeViewState } from "../../RichTreeViewStore/index.js";
 export declare const itemsSelectors: {
   /**
    * Gets the DOM structure of the Tree View.
    */
-  domStructure: (state: MinimalTreeViewState<any, any>) => "flat" | "nested";
+  domStructure: (state: RichTreeViewState<any, any>) => import("../../../index.js").TreeViewDOMStructure;
   /**
    * Checks whether the disabled items are focusable.
    */
@@ -57,4 +58,8 @@ export declare const itemsSelectors: {
    * Gets the identation between an item and its children.
    */
   itemChildrenIndentation: (state: MinimalTreeViewState<any, any>) => string | number;
+  /**
+   * Gets the height of an individual item.
+   */
+  itemHeight: (state: MinimalTreeViewState<any, any>) => number | null;
 };

package/internals/plugins/items/selectors.js

@@ -66,5 +66,9 @@ const itemsSelectors = exports.itemsSelectors = {
   /**
    * Gets the identation between an item and its children.
    */
-  itemChildrenIndentation: (0, _store.createSelector)(state => state.itemChildrenIndentation)
+  itemChildrenIndentation: (0, _store.createSelector)(state => state.itemChildrenIndentation),
+  /**
+   * Gets the height of an individual item.
+   */
+  itemHeight: (0, _store.createSelector)(state => state.itemHeight)
 };

package/models/domStructure.d.ts

@@ -0,0 +1 @@
+export type TreeViewDOMStructure = 'flat' | 'nested';

package/models/domStructure.js

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

package/models/index.d.ts

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

package/models/index.js

@@ -24,4 +24,15 @@ Object.keys(_events).forEach(function (key) {
       return _events[key];
     }
   });
+});
+var _domStructure = require("./domStructure");
+Object.keys(_domStructure).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _domStructure[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _domStructure[key];
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.27.1",
+  "version": "9.0.0-alpha.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",
@@ -31,14 +31,14 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
+    "@babel/runtime": "^7.28.6",
     "@base-ui/utils": "^0.2.3",
-    "@mui/utils": "^7.3.5",
+    "@mui/utils": "^7.3.7",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.26.0"
+    "@mui/x-internals": "9.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem/useTreeItem.js

@@ -64,6 +64,7 @@ const useTreeItem = parameters => {
   const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _selection.selectionSelectors.isCheckboxSelectionEnabled);
   const idAttribute = (0, _store.useStore)(store, _id.idSelectors.treeItemIdAttribute, itemId, id);
   const shouldBeAccessibleWithTab = (0, _store.useStore)(store, _focus.focusSelectors.isItemTheDefaultFocusableItem, itemId);
+  const itemHeight = (0, _store.useStore)(store, _items.itemsSelectors.itemHeight);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
@@ -159,6 +160,8 @@ const useTreeItem = parameters => {
     }, externalProps, {
       style: (0, _extends2.default)({}, externalProps.style ?? {}, {
         '--TreeView-itemDepth': depth
+      }, itemHeight == null ? {} : {
+        '--TreeView-itemHeight': `${itemHeight}px`
       }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),