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

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

@@ -0,0 +1,32 @@
+import { TreeViewInstance, UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
+import { TreeViewItemId } from '@mui/x-tree-view/models';
+export declare enum RequestStatus {
+  QUEUED = 0,
+  PENDING = 1,
+  SETTLED = 2,
+  UNKNOWN = 3,
+}
+/**
+ * Plugins that the `NestedDataManager` class can use if they are present, but are not required.
+ */
+export type NestedDataManagerOptionalPlugins = readonly [];
+/**
+ * Fetches row children from the server with option to limit the number of concurrent requests
+ * Determines the status of a request based on the enum `RequestStatus`
+ * Uses `ParentId` to uniquely identify a request
+ */
+export declare class NestedDataManager {
+  private pendingRequests;
+  private queuedRequests;
+  private settledRequests;
+  private instance;
+  private maxConcurrentRequests;
+  constructor(instance: TreeViewInstance<[UseTreeViewLazyLoadingSignature]>, maxConcurrentRequests?: number);
+  private processQueue;
+  queue: (ids: TreeViewItemId[]) => Promise<void>;
+  setRequestSettled: (id: TreeViewItemId) => Promise<void>;
+  clear: () => void;
+  clearPendingRequest: (id: TreeViewItemId) => Promise<void>;
+  getRequestStatus: (id: TreeViewItemId) => RequestStatus;
+  getActiveRequestsCount: () => number;
+}

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

@@ -0,0 +1,85 @@
+const MAX_CONCURRENT_REQUESTS = Infinity;
+export let RequestStatus = /*#__PURE__*/function (RequestStatus) {
+  RequestStatus[RequestStatus["QUEUED"] = 0] = "QUEUED";
+  RequestStatus[RequestStatus["PENDING"] = 1] = "PENDING";
+  RequestStatus[RequestStatus["SETTLED"] = 2] = "SETTLED";
+  RequestStatus[RequestStatus["UNKNOWN"] = 3] = "UNKNOWN";
+  return RequestStatus;
+}({});
+
+/**
+ * Plugins that need to be present in the Tree View in order for the `NestedDataManager` class to work correctly.
+ */
+
+/**
+ * Plugins that the `NestedDataManager` class can use if they are present, but are not required.
+ */
+
+/**
+ * Fetches row children from the server with option to limit the number of concurrent requests
+ * Determines the status of a request based on the enum `RequestStatus`
+ * Uses `ParentId` to uniquely identify a request
+ */
+export class NestedDataManager {
+  constructor(instance, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS) {
+    this.pendingRequests = new Set();
+    this.queuedRequests = new Set();
+    this.settledRequests = new Set();
+    this.instance = void 0;
+    this.maxConcurrentRequests = void 0;
+    this.processQueue = async () => {
+      if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
+        return;
+      }
+      const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
+      if (loopLength === 0) {
+        return;
+      }
+      const fetchQueue = Array.from(this.queuedRequests);
+      const fetchPromises = [];
+      for (let i = 0; i < loopLength; i += 1) {
+        const id = fetchQueue[i];
+        this.queuedRequests.delete(id);
+        this.pendingRequests.add(id);
+        fetchPromises.push(this.instance.fetchItemChildren(id));
+      }
+      await Promise.all(fetchPromises);
+    };
+    this.queue = async ids => {
+      const loadingIds = {};
+      ids.forEach(id => {
+        this.queuedRequests.add(id);
+        loadingIds[id] = true;
+      });
+      await this.processQueue();
+    };
+    this.setRequestSettled = async id => {
+      this.pendingRequests.delete(id);
+      this.settledRequests.add(id);
+      await this.processQueue();
+    };
+    this.clear = () => {
+      this.queuedRequests.clear();
+      Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
+    };
+    this.clearPendingRequest = async id => {
+      this.pendingRequests.delete(id);
+      await this.processQueue();
+    };
+    this.getRequestStatus = id => {
+      if (this.pendingRequests.has(id)) {
+        return RequestStatus.PENDING;
+      }
+      if (this.queuedRequests.has(id)) {
+        return RequestStatus.QUEUED;
+      }
+      if (this.settledRequests.has(id)) {
+        return RequestStatus.SETTLED;
+      }
+      return RequestStatus.UNKNOWN;
+    };
+    this.getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
+    this.instance = instance;
+    this.maxConcurrentRequests = maxConcurrentRequests;
+  }
+}

package/esm/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import ponyfillGlobal from '@mui/utils/ponyfillGlobal';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTc0MDY5NzIwMDAwMA==";
+  const releaseInfo = "MTc0MTMwMjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/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/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/internals/plugins/useTreeViewLazyLoading/index.d.ts

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

package/internals/plugins/useTreeViewLazyLoading/index.js

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

package/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/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -0,0 +1,297 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewLazyLoading = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _warning = require("@mui/x-internals/warning");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _internals = require("@mui/x-tree-view/internals");
+var _utils = require("@mui/x-tree-view/utils");
+var _utils2 = require("./utils");
+const INITIAL_STATE = {
+  loading: {},
+  errors: {}
+};
+const noopCache = {
+  clear: () => {},
+  get: () => undefined,
+  set: () => {}
+};
+function getCache(cacheProp) {
+  if (cacheProp === null) {
+    return noopCache;
+  }
+  return cacheProp ?? new _utils.DataSourceCacheDefault({});
+}
+const useTreeViewLazyLoading = ({
+  instance,
+  params,
+  store
+}) => {
+  const isLazyLoadingEnabled = params.dataSource?.getChildrenCount !== undefined;
+  const firstRenderRef = React.useRef(true);
+  const nestedDataManager = (0, _useLazyRef.default)(() => new _utils2.NestedDataManager(instance)).current;
+  const cacheRef = (0, _useLazyRef.default)(() => getCache(params.dataSourceCache));
+  const setDataSourceLoading = (0, _useEventCallback.default)((itemId, isLoading) => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    store.update(prevState => {
+      if (!prevState.lazyLoading.dataSource.loading[itemId] && !isLoading) {
+        return prevState;
+      }
+      const loading = (0, _extends2.default)({}, prevState.lazyLoading.dataSource.loading);
+      if (isLoading === false) {
+        delete loading[itemId];
+      } else {
+        loading[itemId] = isLoading;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        lazyLoading: (0, _extends2.default)({}, prevState.lazyLoading, {
+          dataSource: (0, _extends2.default)({}, prevState.lazyLoading.dataSource, {
+            loading
+          })
+        })
+      });
+    });
+  });
+  const setDataSourceError = (itemId, error) => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    store.update(prevState => {
+      const errors = (0, _extends2.default)({}, prevState.lazyLoading.dataSource.errors);
+      if (error === null && errors[itemId] !== undefined) {
+        delete errors[itemId];
+      } else {
+        errors[itemId] = error;
+      }
+      errors[itemId] = error;
+      return (0, _extends2.default)({}, prevState, {
+        lazyLoading: (0, _extends2.default)({}, prevState.lazyLoading, {
+          dataSource: (0, _extends2.default)({}, prevState.lazyLoading.dataSource, {
+            errors
+          })
+        })
+      });
+    });
+  };
+  const resetDataSourceState = (0, _useEventCallback.default)(() => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      lazyLoading: (0, _extends2.default)({}, prevState.lazyLoading, {
+        dataSource: INITIAL_STATE
+      })
+    }));
+  });
+  const fetchItems = (0, _useEventCallback.default)(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 ((0, _internals.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 = (0, _useEventCallback.default)(async id => {
+    if (!isLazyLoadingEnabled) {
+      return;
+    }
+    const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
+    const getTreeItems = params.dataSource?.getTreeItems;
+    if (!getTreeItems) {
+      nestedDataManager.clearPendingRequest(id);
+      return;
+    }
+    const parent = (0, _internals.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 = (0, _internals.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);
+    }
+  });
+  (0, _internals.useInstanceEventHandler)(instance, 'beforeItemToggleExpansion', async eventParameters => {
+    if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
+      return;
+    }
+    eventParameters.isExpansionPrevented = true;
+    await instance.fetchItems([eventParameters.itemId]);
+    const fetchErrors = Boolean((0, _internals.selectorGetTreeItemError)(store.value, eventParameters.itemId));
+    if (!fetchErrors) {
+      instance.applyItemExpansion({
+        itemId: eventParameters.itemId,
+        shouldBeExpanded: true,
+        event: eventParameters.event
+      });
+      if ((0, _internals.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 => (0, _extends2.default)({}, prevState, {
+        lazyLoading: (0, _extends2.default)({}, 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: {}
+  };
+};
+exports.useTreeViewLazyLoading = useTreeViewLazyLoading;
+useTreeViewLazyLoading.getDefaultizedParams = ({
+  params,
+  experimentalFeatures
+}) => {
+  const canUseFeature = experimentalFeatures?.lazyLoading;
+  if (process.env.NODE_ENV !== 'production') {
+    if (params.dataSource && !canUseFeature) {
+      (0, _warning.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 (0, _extends2.default)({}, params, {
+    dataSource: canUseFeature ? defaultDataSource : {}
+  });
+};
+useTreeViewLazyLoading.getInitialState = () => ({
+  lazyLoading: {
+    enabled: false,
+    dataSource: INITIAL_STATE
+  }
+});
+useTreeViewLazyLoading.params = {
+  dataSource: true,
+  dataSourceCache: true
+};

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

@@ -0,0 +1,32 @@
+import { TreeViewInstance, UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
+import { TreeViewItemId } from '@mui/x-tree-view/models';
+export declare enum RequestStatus {
+  QUEUED = 0,
+  PENDING = 1,
+  SETTLED = 2,
+  UNKNOWN = 3,
+}
+/**
+ * Plugins that the `NestedDataManager` class can use if they are present, but are not required.
+ */
+export type NestedDataManagerOptionalPlugins = readonly [];
+/**
+ * Fetches row children from the server with option to limit the number of concurrent requests
+ * Determines the status of a request based on the enum `RequestStatus`
+ * Uses `ParentId` to uniquely identify a request
+ */
+export declare class NestedDataManager {
+  private pendingRequests;
+  private queuedRequests;
+  private settledRequests;
+  private instance;
+  private maxConcurrentRequests;
+  constructor(instance: TreeViewInstance<[UseTreeViewLazyLoadingSignature]>, maxConcurrentRequests?: number);
+  private processQueue;
+  queue: (ids: TreeViewItemId[]) => Promise<void>;
+  setRequestSettled: (id: TreeViewItemId) => Promise<void>;
+  clear: () => void;
+  clearPendingRequest: (id: TreeViewItemId) => Promise<void>;
+  getRequestStatus: (id: TreeViewItemId) => RequestStatus;
+  getActiveRequestsCount: () => number;
+}

package/internals/plugins/useTreeViewLazyLoading/utils.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RequestStatus = exports.NestedDataManager = void 0;
+const MAX_CONCURRENT_REQUESTS = Infinity;
+let RequestStatus = exports.RequestStatus = /*#__PURE__*/function (RequestStatus) {
+  RequestStatus[RequestStatus["QUEUED"] = 0] = "QUEUED";
+  RequestStatus[RequestStatus["PENDING"] = 1] = "PENDING";
+  RequestStatus[RequestStatus["SETTLED"] = 2] = "SETTLED";
+  RequestStatus[RequestStatus["UNKNOWN"] = 3] = "UNKNOWN";
+  return RequestStatus;
+}({});
+/**
+ * Plugins that need to be present in the Tree View in order for the `NestedDataManager` class to work correctly.
+ */
+/**
+ * Plugins that the `NestedDataManager` class can use if they are present, but are not required.
+ */
+/**
+ * Fetches row children from the server with option to limit the number of concurrent requests
+ * Determines the status of a request based on the enum `RequestStatus`
+ * Uses `ParentId` to uniquely identify a request
+ */
+class NestedDataManager {
+  constructor(instance, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS) {
+    this.pendingRequests = new Set();
+    this.queuedRequests = new Set();
+    this.settledRequests = new Set();
+    this.instance = void 0;
+    this.maxConcurrentRequests = void 0;
+    this.processQueue = async () => {
+      if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
+        return;
+      }
+      const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
+      if (loopLength === 0) {
+        return;
+      }
+      const fetchQueue = Array.from(this.queuedRequests);
+      const fetchPromises = [];
+      for (let i = 0; i < loopLength; i += 1) {
+        const id = fetchQueue[i];
+        this.queuedRequests.delete(id);
+        this.pendingRequests.add(id);
+        fetchPromises.push(this.instance.fetchItemChildren(id));
+      }
+      await Promise.all(fetchPromises);
+    };
+    this.queue = async ids => {
+      const loadingIds = {};
+      ids.forEach(id => {
+        this.queuedRequests.add(id);
+        loadingIds[id] = true;
+      });
+      await this.processQueue();
+    };
+    this.setRequestSettled = async id => {
+      this.pendingRequests.delete(id);
+      this.settledRequests.add(id);
+      await this.processQueue();
+    };
+    this.clear = () => {
+      this.queuedRequests.clear();
+      Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
+    };
+    this.clearPendingRequest = async id => {
+      this.pendingRequests.delete(id);
+      await this.processQueue();
+    };
+    this.getRequestStatus = id => {
+      if (this.pendingRequests.has(id)) {
+        return RequestStatus.PENDING;
+      }
+      if (this.queuedRequests.has(id)) {
+        return RequestStatus.QUEUED;
+      }
+      if (this.settledRequests.has(id)) {
+        return RequestStatus.SETTLED;
+      }
+      return RequestStatus.UNKNOWN;
+    };
+    this.getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
+    this.instance = instance;
+    this.maxConcurrentRequests = maxConcurrentRequests;
+  }
+}
+exports.NestedDataManager = NestedDataManager;

package/internals/utils/releaseInfo.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _ponyfillGlobal = _interopRequireDefault(require("@mui/utils/ponyfillGlobal"));
 const getReleaseInfo = () => {
-  const releaseInfo = "MTc0MDY5NzIwMDAwMA==";
+  const releaseInfo = "MTc0MTMwMjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/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.
    */