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

package/CHANGELOG.md

@@ -5,6 +5,137 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.14
+
+_Mar 7, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀📊 New Pro Chart: It is now possible to create Funnel charts—perfect for visualizing conversions, sales pipelines and more!
+  <img width="418" alt="Screenshot 2025-01-31 at 12 22 31" src="https://github.com/user-attachments/assets/8cd26821-5f11-46bf-a9bb-34d212880a47" />
+- 🎁 The first iteration of the radar chart is available. Features and refinements will be added in the coming weeks.
+- 🛠️ New and improved [Toolbar component](https://next.mui.com/x/react-data-grid/components/toolbar/) for the data grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community member for their valuable contributions:
+@vadimka123.
+
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @noraleonte, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The density selector has been removed from the toolbar. It is still possible to set the density programmatically via the `density` prop. A density selector can be added to a custom toolbar passed to `slots.toolbar`. See [Toolbar component—Settings menu](https://next.mui.com/x/react-data-grid/components/toolbar/#settings-menu) for an example.
+- The quick filter is now shown in the toolbar by default. Use `slotProps={{ toolbar: { showQuickFilter: false } }}` to hide it.
+- The `<GridSaveAltIcon />` icon is not exported anymore. Import `SaveAlt` from `@mui/icons-material` instead.
+
+#### `@mui/x-data-grid@8.0.0-alpha.14`
+
+- [DataGrid] Fix `aria-hidden` console error when scrollbar is dragged (#16829) @arminmeh
+- [DataGrid] Fix scroll jump with dynamic row height (#16763) @cherniavskii
+- [DataGrid] New `<Toolbar />` component (#14611) @KenanYusuf
+- [DataGrid] Use new toolbar by default (#16814) @KenanYusuf
+- [DataGrid] Remove the quick filtering on a given column (#16738) @vadimka123
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.14` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.14`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.14` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.14`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- All Date Time Picker variants now use Digital Clock for time editing.
+- Stop passing invalid date to `onChange` when the date is partially filled — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#treat-partially-filled-date-as-null-in-onchange).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.14`
+
+- [DateTimePicker] Use Digital Clock in all component variants (#16678) @LukasTy
+- [fields] Always use `props.value` as the source of truth when defined (#15875) @flaviendelangle
+- [fields] Fix Fields aria relationship with `helperText` (#16821) @LukasTy
+- [pickers] Add `TValidationProps` generic to the `PickerManager` interface (#16832) @flaviendelangle
+- [pickers] Fix `edge` property setting in different button position cases (#16838) @LukasTy
+- [pickers] Fix typo in JSDoc (#16831) @flaviendelangle
+- [pickers] Refactor the files in the `usePicker` folder (#16680) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.14` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.14`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.14`
+
+- [charts] Fix `undefined` behaving differently from missing value for axis size (#16844) @bernardobelchior
+- [charts] Fix x-axis text anchor default when language is RTL (#16836) @bernardobelchior
+- [charts] Add Radar chart (#16406) @alexfauquette
+- [charts] Move series default color generation in the series config (#16752) @alexfauquette
+- [charts] Render axis title within axis size (#16730) @bernardobelchior
+- [charts] Split `defaultizeAxis` function into two (#16745) @bernardobelchior
+- [charts] Warn if axes data don't have enough elements (#16830) @alexfauquette
+- [charts] XAxis: Add defaults for `textAnchor` and `dominantBaseline` based on `angle` (#16817) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.0.0-alpha.14` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.14`, plus:
+
+- [charts] Add Funnel chart (#14804) @JCQuintas
+
+### Tree View
+
+#### Breaking changes
+
+- The `selectItem` method has been renamed `setItemSelection`:
+
+  ```diff
+   const { publicAPI } = useTreeItemUtils();
+  
+   const handleSelectItem() {
+  -  publicAPI.selectItem({ event, itemId: props.itemId, shouldBeSelected: true })
+  +  publicAPI.setItemSelection({ event, itemId: props.itemId, shouldBeSelected: true })
+   }
+  ```
+
+- The `setItemExpansion` method now receives a single object instead of a list of parameters:
+
+  ```diff
+   const { publicAPI } = useTreeItemUtils();
+  
+   const handleExpandItem() {
+  -  publicAPI.setItemExpansion(event, props.itemId, true)
+  +  publicAPI.setItemExpansion({ event, itemId: props.itemId, shouldBeExpanded: true })
+   }
+  ```
+
+#### `@mui/x-tree-view@8.0.0-alpha.14`
+
+- [TreeView] Clean the expansion and selection API methods (#16795) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.14` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.14`.
+
+### Docs
+
+- [docs] Fix padding package install on mobile (#16794) @oliviertassinari
+- [docs] Typo fixes (#16835) @alexfauquette
+
+### Core
+
+- [code-infra] Fix console warning in telemetry package (#16816) @JCQuintas
+- [code-infra] Split date-picker test files (#16825) @JCQuintas
+- [infra] Replace PR label check workflow with reusable version (#16762) @michelengelen
+- [infra] Update label in priority-support issue template (#16767) @michelengelen
+- [test] Add timeout to flaky screenshot tests (#16852) @LukasTy
+
 ## 8.0.0-alpha.13
 
 _Feb 28, 2025_

package/RichTreeViewPro/RichTreeViewPro.js

@@ -113,8 +113,10 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
       getItemDOMElement: _propTypes.default.func.isRequired,
       getItemOrderedChildrenIds: _propTypes.default.func.isRequired,
       getItemTree: _propTypes.default.func.isRequired,
-      selectItem: _propTypes.default.func.isRequired,
+      getParentId: _propTypes.default.func.isRequired,
+      setIsItemDisabled: _propTypes.default.func.isRequired,
       setItemExpansion: _propTypes.default.func.isRequired,
+      setItemSelection: _propTypes.default.func.isRequired,
       updateItemLabel: _propTypes.default.func.isRequired
     })
   }),
@@ -137,6 +139,15 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
+  dataSource: _propTypes.default.shape({
+    getChildrenCount: _propTypes.default.func,
+    getTreeItems: _propTypes.default.func
+  }),
+  dataSourceCache: _propTypes.default.shape({
+    clear: _propTypes.default.func.isRequired,
+    get: _propTypes.default.func.isRequired,
+    set: _propTypes.default.func.isRequired
+  }),
   /**
    * Expanded item ids.
    * Used when the item's expansion is not controlled.
@@ -174,7 +185,9 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.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.default.object,
+  experimentalFeatures: _propTypes.default.shape({
+    lazyLoading: _propTypes.default.bool
+  }),
   /**
    * Used to determine the id of a given item.
    *
@@ -239,7 +252,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
   multiSelect: _propTypes.default.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.default.func,
@@ -251,7 +264,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
   onItemClick: _propTypes.default.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.
    */
@@ -278,14 +291,14 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
   onItemPositionChange: _propTypes.default.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.default.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/RichTreeViewPro/RichTreeViewPro.plugins.d.ts

@@ -1,7 +1,7 @@
-import { UseTreeViewItemsParameters, UseTreeViewExpansionParameters, UseTreeViewSelectionParameters, UseTreeViewFocusParameters, UseTreeViewIconsParameters, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewCorePluginParameters, UseTreeViewLabelParameters } from '@mui/x-tree-view/internals';
+import { UseTreeViewItemsParameters, UseTreeViewExpansionParameters, UseTreeViewSelectionParameters, UseTreeViewFocusParameters, UseTreeViewIconsParameters, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewCorePluginParameters, UseTreeViewLabelParameters, UseTreeViewLazyLoadingParameters } from '@mui/x-tree-view/internals';
 import { UseTreeViewItemsReorderingParameters } from "../internals/plugins/useTreeViewItemsReordering/index.js";
-export declare const RICH_TREE_VIEW_PRO_PLUGINS: readonly [import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewItemsSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewExpansionSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewSelectionSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewFocusSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewKeyboardNavigationSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewIconsSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewLabelSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("../internals").UseTreeViewItemsReorderingSignature>];
+export declare const RICH_TREE_VIEW_PRO_PLUGINS: readonly [import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewItemsSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewExpansionSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewSelectionSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewFocusSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewKeyboardNavigationSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewIconsSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewLabelSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewLazyLoadingSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("../internals").UseTreeViewItemsReorderingSignature>];
 export type RichTreeViewProPluginSignatures = ConvertPluginsIntoSignatures<typeof RICH_TREE_VIEW_PRO_PLUGINS>;
 export type RichTreeViewProPluginSlots = MergeSignaturesProperty<RichTreeViewProPluginSignatures, 'slots'>;
 export type RichTreeViewProPluginSlotProps = MergeSignaturesProperty<RichTreeViewProPluginSignatures, 'slotProps'>;
-export interface RichTreeViewProPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters, UseTreeViewLabelParameters<R>, UseTreeViewItemsReorderingParameters {}
+export interface RichTreeViewProPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters, UseTreeViewLabelParameters<R>, UseTreeViewLazyLoadingParameters<R>, UseTreeViewItemsReorderingParameters {}

package/RichTreeViewPro/RichTreeViewPro.plugins.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RICH_TREE_VIEW_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-tree-view/internals");
 var _useTreeViewItemsReordering = require("../internals/plugins/useTreeViewItemsReordering");
-const RICH_TREE_VIEW_PRO_PLUGINS = exports.RICH_TREE_VIEW_PRO_PLUGINS = [_internals.useTreeViewItems, _internals.useTreeViewExpansion, _internals.useTreeViewSelection, _internals.useTreeViewFocus, _internals.useTreeViewKeyboardNavigation, _internals.useTreeViewIcons, _internals.useTreeViewLabel, _useTreeViewItemsReordering.useTreeViewItemsReordering];
+var _useTreeViewLazyLoading = require("../internals/plugins/useTreeViewLazyLoading");
+const RICH_TREE_VIEW_PRO_PLUGINS = exports.RICH_TREE_VIEW_PRO_PLUGINS = [_internals.useTreeViewItems, _internals.useTreeViewExpansion, _internals.useTreeViewSelection, _internals.useTreeViewFocus, _internals.useTreeViewKeyboardNavigation, _internals.useTreeViewIcons, _internals.useTreeViewLabel, _useTreeViewLazyLoading.useTreeViewLazyLoading, _useTreeViewItemsReordering.useTreeViewItemsReordering];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/esm/RichTreeViewPro/RichTreeViewPro.js

@@ -106,8 +106,10 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.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
     })
   }),
@@ -130,6 +132,15 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
+  dataSource: PropTypes.shape({
+    getChildrenCount: PropTypes.func,
+    getTreeItems: PropTypes.func
+  }),
+  dataSourceCache: PropTypes.shape({
+    clear: PropTypes.func.isRequired,
+    get: PropTypes.func.isRequired,
+    set: PropTypes.func.isRequired
+  }),
   /**
    * Expanded item ids.
    * Used when the item's expansion is not controlled.
@@ -167,7 +178,9 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.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.object,
+  experimentalFeatures: PropTypes.shape({
+    lazyLoading: PropTypes.bool
+  }),
   /**
    * Used to determine the id of a given item.
    *
@@ -232,7 +245,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.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,
@@ -244,7 +257,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.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.
    */
@@ -271,14 +284,14 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
   onItemPositionChange: 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/esm/RichTreeViewPro/RichTreeViewPro.plugins.d.ts

@@ -1,7 +1,7 @@
-import { UseTreeViewItemsParameters, UseTreeViewExpansionParameters, UseTreeViewSelectionParameters, UseTreeViewFocusParameters, UseTreeViewIconsParameters, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewCorePluginParameters, UseTreeViewLabelParameters } from '@mui/x-tree-view/internals';
+import { UseTreeViewItemsParameters, UseTreeViewExpansionParameters, UseTreeViewSelectionParameters, UseTreeViewFocusParameters, UseTreeViewIconsParameters, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewCorePluginParameters, UseTreeViewLabelParameters, UseTreeViewLazyLoadingParameters } from '@mui/x-tree-view/internals';
 import { UseTreeViewItemsReorderingParameters } from "../internals/plugins/useTreeViewItemsReordering/index.js";
-export declare const RICH_TREE_VIEW_PRO_PLUGINS: readonly [import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewItemsSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewExpansionSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewSelectionSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewFocusSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewKeyboardNavigationSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewIconsSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewLabelSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("../internals").UseTreeViewItemsReorderingSignature>];
+export declare const RICH_TREE_VIEW_PRO_PLUGINS: readonly [import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewItemsSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewExpansionSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewSelectionSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewFocusSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewKeyboardNavigationSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewIconsSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewLabelSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("@mui/x-tree-view/internals").UseTreeViewLazyLoadingSignature>, import("@mui/x-tree-view/internals").TreeViewPlugin<import("../internals").UseTreeViewItemsReorderingSignature>];
 export type RichTreeViewProPluginSignatures = ConvertPluginsIntoSignatures<typeof RICH_TREE_VIEW_PRO_PLUGINS>;
 export type RichTreeViewProPluginSlots = MergeSignaturesProperty<RichTreeViewProPluginSignatures, 'slots'>;
 export type RichTreeViewProPluginSlotProps = MergeSignaturesProperty<RichTreeViewProPluginSignatures, 'slotProps'>;
-export interface RichTreeViewProPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters, UseTreeViewLabelParameters<R>, UseTreeViewItemsReorderingParameters {}
+export interface RichTreeViewProPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters, UseTreeViewLabelParameters<R>, UseTreeViewLazyLoadingParameters<R>, UseTreeViewItemsReorderingParameters {}

package/esm/RichTreeViewPro/RichTreeViewPro.plugins.js

@@ -1,5 +1,6 @@
 import { useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewLabel } from '@mui/x-tree-view/internals';
 import { useTreeViewItemsReordering } from "../internals/plugins/useTreeViewItemsReordering/index.js";
-export const RICH_TREE_VIEW_PRO_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewLabel, useTreeViewItemsReordering];
+import { useTreeViewLazyLoading } from "../internals/plugins/useTreeViewLazyLoading/index.js";
+export const RICH_TREE_VIEW_PRO_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewLabel, useTreeViewLazyLoading, useTreeViewItemsReordering];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/esm/index.js

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

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

@@ -89,6 +89,8 @@ export declare const selectorItemsReorderingDraggedItemProperties: ((state: any,
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
     };
@@ -108,6 +110,8 @@ export declare const selectorItemsReorderingDraggedItemProperties: ((state: any,
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: import("@mui/x-tree-view/internals").TreeViewItemMeta;
     }) & {

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

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

package/esm/internals/plugins/useTreeViewLazyLoading/index.js

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

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

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '@mui/x-tree-view/internals';
+import type { UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
+export declare const useTreeViewLazyLoading: TreeViewPlugin<UseTreeViewLazyLoadingSignature>;

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -0,0 +1,288 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { warnOnce } from '@mui/x-internals/warning';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { selectorItemMeta, selectorIsItemSelected, useInstanceEventHandler, selectorDataSourceState, selectorGetTreeItemError } from '@mui/x-tree-view/internals';
+import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';
+import { NestedDataManager } from "./utils.js";
+const INITIAL_STATE = {
+  loading: {},
+  errors: {}
+};
+const noopCache = {
+  clear: () => {},
+  get: () => undefined,
+  set: () => {}
+};
+function getCache(cacheProp) {
+  if (cacheProp === null) {
+    return noopCache;
+  }
+  return cacheProp ?? new DataSourceCacheDefault({});
+}
+export const useTreeViewLazyLoading = ({
+  instance,
+  params,
+  store
+}) => {
+  const isLazyLoadingEnabled = params.dataSource?.getChildrenCount !== undefined;
+  const firstRenderRef = React.useRef(true);
+  const nestedDataManager = useLazyRef(() => new NestedDataManager(instance)).current;
+  const cacheRef = useLazyRef(() => getCache(params.dataSourceCache));
+  const setDataSourceLoading = useEventCallback((itemId, isLoading) => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    store.update(prevState => {
+      if (!prevState.lazyLoading.dataSource.loading[itemId] && !isLoading) {
+        return prevState;
+      }
+      const loading = _extends({}, prevState.lazyLoading.dataSource.loading);
+      if (isLoading === false) {
+        delete loading[itemId];
+      } else {
+        loading[itemId] = isLoading;
+      }
+      return _extends({}, prevState, {
+        lazyLoading: _extends({}, prevState.lazyLoading, {
+          dataSource: _extends({}, prevState.lazyLoading.dataSource, {
+            loading
+          })
+        })
+      });
+    });
+  });
+  const setDataSourceError = (itemId, error) => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    store.update(prevState => {
+      const errors = _extends({}, prevState.lazyLoading.dataSource.errors);
+      if (error === null && errors[itemId] !== undefined) {
+        delete errors[itemId];
+      } else {
+        errors[itemId] = error;
+      }
+      errors[itemId] = error;
+      return _extends({}, prevState, {
+        lazyLoading: _extends({}, prevState.lazyLoading, {
+          dataSource: _extends({}, prevState.lazyLoading.dataSource, {
+            errors
+          })
+        })
+      });
+    });
+  };
+  const resetDataSourceState = useEventCallback(() => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    store.update(prevState => _extends({}, prevState, {
+      lazyLoading: _extends({}, prevState.lazyLoading, {
+        dataSource: INITIAL_STATE
+      })
+    }));
+  });
+  const fetchItems = useEventCallback(async parentIds => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
+    const getTreeItems = params.dataSource?.getTreeItems;
+    if (!getTreeItems) {
+      return;
+    }
+    if (parentIds) {
+      await nestedDataManager.queue(parentIds);
+      return;
+    }
+    nestedDataManager.clear();
+
+    // reset the state if we are refetching the first visible items
+    if (selectorDataSourceState(store.value) !== INITIAL_STATE) {
+      resetDataSourceState();
+    }
+    // handle caching here
+    const cachedData = cacheRef.current.get('root');
+    if (cachedData !== undefined) {
+      return;
+    }
+
+    // handle loading here
+    instance.setTreeViewLoading(true);
+    try {
+      const getTreeItemsResponse = await getTreeItems();
+
+      // set caching
+      cacheRef.current.set('root', getTreeItemsResponse);
+
+      // update the items in the state
+      instance.addItems({
+        items: getTreeItemsResponse,
+        depth: 0,
+        getChildrenCount
+      });
+    } catch (error) {
+      // set the items to empty
+      instance.addItems({
+        items: [],
+        depth: 0,
+        getChildrenCount
+      });
+      // set error state
+      instance.setTreeViewError(error);
+    } finally {
+      // set loading state
+      instance.setTreeViewLoading(false);
+    }
+  });
+  const fetchItemChildren = useEventCallback(async id => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
+    const getTreeItems = params.dataSource?.getTreeItems;
+    if (!getTreeItems) {
+      nestedDataManager.clearPendingRequest(id);
+      return;
+    }
+    const parent = selectorItemMeta(store.value, id);
+    if (!parent) {
+      nestedDataManager.clearPendingRequest(id);
+      return;
+    }
+    const depth = parent.depth ? parent.depth + 1 : 1;
+
+    // handle loading here
+    instance.setDataSourceLoading(id, true);
+
+    // handle caching here
+    const cachedData = cacheRef.current.get(id);
+    if (cachedData !== undefined && cachedData !== -1) {
+      nestedDataManager.setRequestSettled(id);
+      instance.addItems({
+        items: cachedData,
+        depth,
+        parentId: id,
+        getChildrenCount
+      });
+      instance.setDataSourceLoading(id, false);
+      return;
+    }
+    if (cachedData === -1) {
+      instance.removeChildren(id);
+    }
+    const existingError = selectorGetTreeItemError(store.value, id) ?? null;
+    if (existingError) {
+      instance.setDataSourceError(id, null);
+    }
+    try {
+      const getTreeItemsResponse = await getTreeItems(id);
+      nestedDataManager.setRequestSettled(id);
+
+      // set caching
+      cacheRef.current.set(id, getTreeItemsResponse);
+      // update the items in the state
+      instance.addItems({
+        items: getTreeItemsResponse,
+        depth,
+        parentId: id,
+        getChildrenCount
+      });
+    } catch (error) {
+      const childrenFetchError = error;
+      // handle errors here
+      instance.setDataSourceError(id, childrenFetchError);
+      instance.removeChildren(id);
+    } finally {
+      // unset loading
+      instance.setDataSourceLoading(id, false);
+      nestedDataManager.setRequestSettled(id);
+    }
+  });
+  useInstanceEventHandler(instance, 'beforeItemToggleExpansion', async eventParameters => {
+    if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
+      return;
+    }
+    eventParameters.isExpansionPrevented = true;
+    await instance.fetchItems([eventParameters.itemId]);
+    const fetchErrors = Boolean(selectorGetTreeItemError(store.value, eventParameters.itemId));
+    if (!fetchErrors) {
+      instance.applyItemExpansion({
+        itemId: eventParameters.itemId,
+        shouldBeExpanded: true,
+        event: eventParameters.event
+      });
+      if (selectorIsItemSelected(store.value, eventParameters.itemId)) {
+        // make sure selection propagation works correctly
+        instance.setItemSelection({
+          event: eventParameters.event,
+          itemId: eventParameters.itemId,
+          keepExistingSelection: true,
+          shouldBeSelected: true
+        });
+      }
+    }
+  });
+  React.useEffect(() => {
+    if (isLazyLoadingEnabled && firstRenderRef.current) {
+      store.update(prevState => _extends({}, prevState, {
+        lazyLoading: _extends({}, prevState.lazyLoading, {
+          enabled: true
+        })
+      }));
+      if (params.items.length) {
+        const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
+        instance.addItems({
+          items: params.items,
+          depth: 0,
+          getChildrenCount
+        });
+      } else {
+        instance.fetchItems();
+      }
+      firstRenderRef.current = false;
+    }
+  }, [instance, params.items, params.dataSource, isLazyLoadingEnabled, store]);
+  if (isLazyLoadingEnabled) {
+    instance.preventItemUpdates();
+  }
+  return {
+    instance: {
+      fetchItemChildren,
+      fetchItems,
+      setDataSourceLoading,
+      setDataSourceError
+    },
+    publicAPI: {}
+  };
+};
+useTreeViewLazyLoading.getDefaultizedParams = ({
+  params,
+  experimentalFeatures
+}) => {
+  const canUseFeature = experimentalFeatures?.lazyLoading;
+  if (process.env.NODE_ENV !== 'production') {
+    if (params.dataSource && !canUseFeature) {
+      warnOnce(['MUI X: The label editing feature requires the `lazyLoading` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ lazyLoading: true}}` to the Rich Tree View Pro component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/lazy-loading/']);
+    }
+  }
+  const defaultDataSource = params?.dataSource ?? {
+    getChildrenCount: () => 0,
+    getTreeItems: () => Promise.resolve([])
+  };
+  return _extends({}, params, {
+    dataSource: canUseFeature ? defaultDataSource : {}
+  });
+};
+useTreeViewLazyLoading.getInitialState = () => ({
+  lazyLoading: {
+    enabled: false,
+    dataSource: INITIAL_STATE
+  }
+});
+useTreeViewLazyLoading.params = {
+  dataSource: true,
+  dataSourceCache: true
+};