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

package/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -4,7 +4,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeItemUtils = exports.isItemExpandable = void 0;
+exports.useTreeItemUtils = exports.itemHasChildren = void 0;
 var _TreeViewProvider = require("../../internals/TreeViewProvider");
 var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
 var _plugins = require("../../internals/utils/plugins");
@@ -13,6 +13,7 @@ var _useTreeViewExpansion = require("../../internals/plugins/useTreeViewExpansio
 var _useTreeViewFocus = require("../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
 var _useTreeViewItems = require("../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewSelection = require("../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors");
+var _useTreeViewLazyLoading = require("../../internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors");
 var _useTreeViewLabel2 = require("../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors");
 /**
  * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
@@ -22,13 +23,13 @@ var _useTreeViewLabel2 = require("../../internals/plugins/useTreeViewLabel/useTr
  * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
 
-const isItemExpandable = reactChildren => {
+const itemHasChildren = reactChildren => {
   if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
+    return reactChildren.length > 0 && reactChildren.some(itemHasChildren);
   }
   return Boolean(reactChildren);
 };
-exports.isItemExpandable = isItemExpandable;
+exports.itemHasChildren = itemHasChildren;
 const useTreeItemUtils = ({
   itemId,
   children
@@ -42,6 +43,11 @@ const useTreeItemUtils = ({
     },
     publicAPI
   } = (0, _TreeViewProvider.useTreeViewContext)();
+  const isItemExpandable = (0, _useSelector.useSelector)(store, _useTreeViewExpansion.selectorIsItemExpandable, itemId);
+  const isLazyLoadingEnabled = (0, _useSelector.useSelector)(store, _useTreeViewLazyLoading.selectorIsLazyLoadingEnabled);
+  const loading = (0, _useSelector.useSelector)(store, state => isLazyLoadingEnabled ? (0, _useTreeViewLazyLoading.selectorIsItemLoading)(state, itemId) : false);
+  const error = (0, _useSelector.useSelector)(store, state => isLazyLoadingEnabled ? Boolean((0, _useTreeViewLazyLoading.selectorGetTreeItemError)(state, itemId)) : false);
+  const isExpandable = itemHasChildren(children) || isItemExpandable;
   const isExpanded = (0, _useSelector.useSelector)(store, _useTreeViewExpansion.selectorIsItemExpanded, itemId);
   const isFocused = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemFocused, itemId);
   const isSelected = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsItemSelected, itemId);
@@ -52,13 +58,15 @@ const useTreeItemUtils = ({
     isItemEditable: label.isItemEditable
   }));
   const status = {
-    expandable: isItemExpandable(children),
+    expandable: isExpandable,
     expanded: isExpanded,
     focused: isFocused,
     selected: isSelected,
     disabled: isDisabled,
     editing: isEditing,
-    editable: isEditable
+    editable: isEditable,
+    loading,
+    error
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -71,7 +79,11 @@ const useTreeItemUtils = ({
 
     // If already expanded and trying to toggle selection don't close
     if (status.expandable && !(multiple && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId))) {
-      instance.toggleItemExpansion(event, itemId);
+      // make sure the children selection is propagated again
+      instance.setItemExpansion({
+        event,
+        itemId
+      });
     }
   };
   const handleSelection = event => {
@@ -86,14 +98,14 @@ const useTreeItemUtils = ({
       if (event.shiftKey) {
         instance.expandSelectionRange(event, itemId);
       } else {
-        instance.selectItem({
+        instance.setItemSelection({
           event,
           itemId,
           keepExistingSelection: true
         });
       }
     } else {
-      instance.selectItem({
+      instance.setItemSelection({
         event,
         itemId,
         shouldBeSelected: true
@@ -105,7 +117,7 @@ const useTreeItemUtils = ({
     if (multiSelect && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
-      instance.selectItem({
+      instance.setItemSelection({
         event,
         itemId,
         keepExistingSelection: multiSelect,

package/hooks/useTreeViewApiRef.d.ts

@@ -4,4 +4,4 @@ import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugi
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */
-export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = readonly [import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature, import("../internals").UseTreeViewLabelSignature]>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;
+export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/index.js

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

package/internals/hooks/useSelector.js

@@ -4,7 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSelector = void 0;
-var _withSelector = require("use-sync-external-store/with-selector");
+var _withSelector = require("use-sync-external-store/with-selector.js");
+// use-sync-external-store has no exports field defined
+// See https://github.com/facebook/react/issues/30698
+// eslint-disable-next-line import/extensions
+
 const defaultCompare = Object.is;
 const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
   const selectorWithArgs = state => selector(state, args);

package/internals/index.d.ts

@@ -2,7 +2,7 @@ export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from './components/RichTreeViewItems';
-export { unstable_resetCleanupTracking } from "./hooks/useInstanceEventHandler.js";
+export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
 export { useSelector } from "./hooks/useSelector.js";
 export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore } from './models';
 export type { TreeViewCorePluginParameters } from './corePlugins';
@@ -21,6 +21,11 @@ export { selectorItemMetaLookup, selectorItemMeta, selectorItemIndex, selectorIt
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState } from './plugins/useTreeViewItems';
 export { useTreeViewLabel } from "./plugins/useTreeViewLabel/index.js";
 export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from './plugins/useTreeViewLabel';
+export { selectorIsItemExpanded } from "./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+export { selectorIsItemSelected } from "./plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
+export { selectorDataSourceState, selectorGetTreeItemError } from "./plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
+export type { UseTreeViewLazyLoadingSignature } from './plugins/useTreeViewLazyLoading';
+export type { UseTreeViewLazyLoadingParameters } from './plugins/useTreeViewLazyLoading';
 export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from './plugins/useTreeViewJSXItems';
 export { createSelector } from "./utils/selectors.js";

package/internals/index.js

@@ -45,6 +45,30 @@ Object.defineProperty(exports, "isTargetInDescendants", {
     return _tree.isTargetInDescendants;
   }
 });
+Object.defineProperty(exports, "selectorDataSourceState", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewLazyLoading.selectorDataSourceState;
+  }
+});
+Object.defineProperty(exports, "selectorGetTreeItemError", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewLazyLoading.selectorGetTreeItemError;
+  }
+});
+Object.defineProperty(exports, "selectorIsItemExpanded", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewExpansion2.selectorIsItemExpanded;
+  }
+});
+Object.defineProperty(exports, "selectorIsItemSelected", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewSelection2.selectorIsItemSelected;
+  }
+});
 Object.defineProperty(exports, "selectorItemIndex", {
   enumerable: true,
   get: function () {
@@ -75,6 +99,12 @@ Object.defineProperty(exports, "unstable_resetCleanupTracking", {
     return _useInstanceEventHandler.unstable_resetCleanupTracking;
   }
 });
+Object.defineProperty(exports, "useInstanceEventHandler", {
+  enumerable: true,
+  get: function () {
+    return _useInstanceEventHandler.useInstanceEventHandler;
+  }
+});
 Object.defineProperty(exports, "useSelector", {
   enumerable: true,
   get: function () {
@@ -154,6 +184,9 @@ var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
 var _useTreeViewItems = require("./plugins/useTreeViewItems");
 var _useTreeViewItems2 = require("./plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewLabel = require("./plugins/useTreeViewLabel");
+var _useTreeViewExpansion2 = require("./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
+var _useTreeViewSelection2 = require("./plugins/useTreeViewSelection/useTreeViewSelection.selectors");
+var _useTreeViewLazyLoading = require("./plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors");
 var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");
 var _selectors = require("./utils/selectors");
 var _tree = require("./utils/tree");

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -11,6 +11,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
 var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
 var _useTreeViewExpansion2 = require("./useTreeViewExpansion.utils");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 const useTreeViewExpansion = ({
   instance,
   store,
@@ -44,26 +45,48 @@ const useTreeViewExpansion = ({
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const toggleItemExpansion = (0, _useEventCallback.default)((event, itemId) => {
-    const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId);
-    instance.setItemExpansion(event, itemId, !isExpandedBefore);
-  });
-  const setItemExpansion = (0, _useEventCallback.default)((event, itemId, isExpanded) => {
-    const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId);
-    if (isExpandedBefore === isExpanded) {
-      return;
-    }
+  const applyItemExpansion = (0, _useEventCallback.default)(({
+    itemId,
+    event,
+    shouldBeExpanded
+  }) => {
     let newExpanded;
-    if (isExpanded) {
+    if (shouldBeExpanded) {
       newExpanded = [itemId].concat(models.expandedItems.value);
     } else {
       newExpanded = models.expandedItems.value.filter(id => id !== itemId);
     }
     if (params.onItemExpansionToggle) {
-      params.onItemExpansionToggle(event, itemId, isExpanded);
+      params.onItemExpansionToggle(event, itemId, shouldBeExpanded);
     }
     setExpandedItems(event, newExpanded);
   });
+  const setItemExpansion = (0, _useEventCallback.default)(({
+    itemId,
+    event = null,
+    shouldBeExpanded
+  }) => {
+    const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId);
+    const cleanShouldBeExpanded = shouldBeExpanded ?? !isExpandedBefore;
+    if (isExpandedBefore === cleanShouldBeExpanded) {
+      return;
+    }
+    const eventParameters = {
+      isExpansionPrevented: false,
+      shouldBeExpanded: cleanShouldBeExpanded,
+      event,
+      itemId
+    };
+    (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'beforeItemToggleExpansion', eventParameters);
+    if (eventParameters.isExpansionPrevented) {
+      return;
+    }
+    instance.applyItemExpansion({
+      itemId,
+      event,
+      shouldBeExpanded: cleanShouldBeExpanded
+    });
+  });
   const expandAllSiblings = (event, itemId) => {
     const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, itemId);
     if (itemMeta == null) {
@@ -87,7 +110,7 @@ const useTreeViewExpansion = ({
     },
     instance: {
       setItemExpansion,
-      toggleItemExpansion,
+      applyItemExpansion,
       expandAllSiblings
     }
   };

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

@@ -90,6 +90,8 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: import("../..").TreeViewItemMeta;
       };
@@ -109,6 +111,8 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: import("../..").TreeViewItemMeta;
       }) & {

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

@@ -7,26 +7,38 @@ import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
 export interface UseTreeViewExpansionPublicAPI {
   /**
    * Change the expansion status of a given item.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item to expand of collapse.
-   * @param {boolean} isExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   * @param {object} parameters The parameters of the method.
+   * @param {string} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
    */
-  setItemExpansion: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+  setItemExpansion: (parameters: {
+    itemId: string;
+    event?: React.SyntheticEvent;
+    shouldBeExpanded?: boolean;
+  }) => void;
 }
 export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
-  /**
-   * Toggle the current expansion of an item.
-   * If it is expanded, it will be collapsed, and vice versa.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {TreeViewItemId} itemId The id of the item to toggle.
-   */
-  toggleItemExpansion: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Expand all the siblings (i.e.: the items that have the same parent) of a given item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {TreeViewItemId} itemId The id of the item whose siblings will be expanded.
    */
   expandAllSiblings: (event: React.KeyboardEvent, itemId: TreeViewItemId) => void;
+  /**
+   * APply the new expansion status of a given item.
+   * Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
+   * Unlike `setItemExpansion`, this method does not trigger the lazy loading.
+   * @param {object} parameters The parameters of the method.
+   * @param {string} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   */
+  applyItemExpansion: (parameters: {
+    itemId: string;
+    event: React.SyntheticEvent | null;
+    shouldBeExpanded: boolean;
+  }) => void;
 }
 export interface UseTreeViewExpansionParameters {
   /**
@@ -42,17 +54,17 @@ export interface UseTreeViewExpansionParameters {
   defaultExpandedItems?: string[];
   /**
    * 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?: (event: React.SyntheticEvent, itemIds: string[]) => void;
+  onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: string[]) => void;
   /**
    * 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.
    */
-  onItemExpansionToggle?: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+  onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: string, isExpanded: boolean) => void;
   /**
    * The slot that triggers the item's expansion when clicked.
    * @default 'content'
@@ -66,6 +78,16 @@ export interface UseTreeViewExpansionState {
     expansionTrigger: 'content' | 'iconContainer';
   };
 }
+interface UseTreeViewExpansionEventLookup {
+  beforeItemToggleExpansion: {
+    params: {
+      isExpansionPrevented: boolean;
+      shouldBeExpanded: boolean;
+      event: React.SyntheticEvent | null;
+      itemId: TreeViewItemId;
+    };
+  };
+}
 export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
   params: UseTreeViewExpansionParameters;
   defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
@@ -75,4 +97,6 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
   state: UseTreeViewExpansionState;
   dependencies: [UseTreeViewItemsSignature];
   optionalDependencies: [UseTreeViewLabelSignature];
-}>;
+  events: UseTreeViewExpansionEventLookup;
+}>;
+export {};

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -16,12 +16,24 @@ var _useTreeViewItems2 = require("./useTreeViewItems.selectors");
 var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.selectors");
 var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const updateItemsState = ({
+const checkId = (id, item, itemMetaLookup) => {
+  if (id == null) {
+    throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
+  }
+  if (itemMetaLookup[id] != null) {
+    throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
+  }
+};
+const processItemsLookups = ({
   disabledItemsFocusable,
   items,
   isItemDisabled,
   getItemLabel,
-  getItemId
+  getItemId,
+  initialDepth = 0,
+  initialParentId = null,
+  getChildrenCount,
+  ignoreChildren = false
 }) => {
   const itemMetaLookup = {};
   const itemModelLookup = {};
@@ -30,12 +42,7 @@ const updateItemsState = ({
   };
   const processItem = (item, depth, parentId) => {
     const id = getItemId ? getItemId(item) : item.id;
-    if (id == null) {
-      throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
-    }
-    if (itemMetaLookup[id] != null) {
-      throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
-    }
+    checkId(id, item, itemMetaLookup);
     const label = getItemLabel ? getItemLabel(item) : item.label;
     if (label == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
@@ -45,7 +52,7 @@ const updateItemsState = ({
       label,
       parentId,
       idAttribute: undefined,
-      expandable: !!item.children?.length,
+      expandable: getChildrenCount ? getChildrenCount(item) > 0 : !!item.children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false,
       depth
     };
@@ -55,9 +62,13 @@ const updateItemsState = ({
       itemOrderedChildrenIdsLookup[parentIdWithDefault] = [];
     }
     itemOrderedChildrenIdsLookup[parentIdWithDefault].push(id);
-    item.children?.forEach(child => processItem(child, depth + 1, id));
+
+    // if lazy loading is enabled, we don't want to process children passed through the `items` prop
+    if (!ignoreChildren) {
+      item.children?.forEach(child => processItem(child, depth + 1, id));
+    }
   };
-  items.forEach(item => processItem(item, 0, null));
+  items?.forEach(item => processItem(item, initialDepth, initialParentId));
   const itemChildrenIndexesLookup = {};
   Object.keys(itemOrderedChildrenIdsLookup).forEach(parentId => {
     itemChildrenIndexesLookup[parentId] = (0, _useTreeViewItems.buildSiblingIndexes)(itemOrderedChildrenIdsLookup[parentId]);
@@ -76,6 +87,43 @@ const useTreeViewItems = ({
   store
 }) => {
   const getItem = React.useCallback(itemId => (0, _useTreeViewItems2.selectorItemModel)(store.value, itemId), [store]);
+  const getParentId = React.useCallback(itemId => {
+    const itemMeta = (0, _useTreeViewItems2.selectorItemMeta)(store.value, itemId);
+    return itemMeta?.parentId || null;
+  }, [store]);
+  const setTreeViewLoading = (0, _useEventCallback.default)(isLoading => {
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      items: (0, _extends2.default)({}, prevState.items, {
+        loading: isLoading
+      })
+    }));
+  });
+  const setTreeViewError = (0, _useEventCallback.default)(error => {
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      items: (0, _extends2.default)({}, prevState.items, {
+        error
+      })
+    }));
+  });
+  const setIsItemDisabled = (0, _useEventCallback.default)(({
+    itemId,
+    shouldBeDisabled
+  }) => {
+    store.update(prevState => {
+      if (!prevState.items.itemMetaLookup[itemId]) {
+        return prevState;
+      }
+      const itemMetaLookup = (0, _extends2.default)({}, prevState.items.itemMetaLookup);
+      itemMetaLookup[itemId] = (0, _extends2.default)({}, itemMetaLookup[itemId], {
+        disabled: shouldBeDisabled ?? !itemMetaLookup[itemId].disabled
+      });
+      return (0, _extends2.default)({}, prevState, {
+        items: (0, _extends2.default)({}, prevState.items, {
+          itemMetaLookup
+        })
+      });
+    });
+  });
   const getItemTree = React.useCallback(() => {
     const getItemFromItemId = itemId => {
       const item = (0, _useTreeViewItems2.selectorItemModel)(store.value, itemId);
@@ -107,12 +155,96 @@ const useTreeViewItems = ({
     areItemUpdatesPreventedRef.current = true;
   }, []);
   const areItemUpdatesPrevented = React.useCallback(() => areItemUpdatesPreventedRef.current, []);
+  const addItems = ({
+    items,
+    parentId,
+    depth,
+    getChildrenCount
+  }) => {
+    if (items) {
+      const newState = processItemsLookups({
+        disabledItemsFocusable: params.disabledItemsFocusable,
+        items,
+        isItemDisabled: params.isItemDisabled,
+        getItemId: params.getItemId,
+        getItemLabel: params.getItemLabel,
+        getChildrenCount,
+        initialDepth: depth,
+        initialParentId: parentId,
+        ignoreChildren: true
+      });
+      store.update(prevState => {
+        let newItems;
+        if (parentId) {
+          newItems = {
+            itemModelLookup: (0, _extends2.default)({}, prevState.items.itemModelLookup, newState.itemModelLookup),
+            itemMetaLookup: (0, _extends2.default)({}, prevState.items.itemMetaLookup, newState.itemMetaLookup),
+            itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, newState.itemOrderedChildrenIdsLookup, prevState.items.itemOrderedChildrenIdsLookup),
+            itemChildrenIndexesLookup: (0, _extends2.default)({}, newState.itemChildrenIndexesLookup, prevState.items.itemChildrenIndexesLookup)
+          };
+        } else {
+          newItems = {
+            itemModelLookup: newState.itemModelLookup,
+            itemMetaLookup: newState.itemMetaLookup,
+            itemOrderedChildrenIdsLookup: newState.itemOrderedChildrenIdsLookup,
+            itemChildrenIndexesLookup: newState.itemChildrenIndexesLookup
+          };
+        }
+        Object.values(prevState.items.itemMetaLookup).forEach(item => {
+          if (!newState.itemMetaLookup[item.id]) {
+            (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
+              id: item.id
+            });
+          }
+        });
+        return (0, _extends2.default)({}, prevState, {
+          items: (0, _extends2.default)({}, prevState.items, newItems)
+        });
+      });
+    }
+  };
+  const removeChildren = parentId => {
+    store.update(prevState => {
+      if (!parentId) {
+        return (0, _extends2.default)({}, prevState, {
+          items: (0, _extends2.default)({}, prevState.items, {
+            itemMetaLookup: {},
+            itemOrderedChildrenIdsLookup: {},
+            itemChildrenIndexesLookup: {}
+          })
+        });
+      }
+      const newMetaMap = Object.keys(prevState.items.itemMetaLookup).reduce((acc, key) => {
+        const item = prevState.items.itemMetaLookup[key];
+        if (item.parentId === parentId) {
+          (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
+            id: item.id
+          });
+          return acc;
+        }
+        return (0, _extends2.default)({}, acc, {
+          [item.id]: item
+        });
+      }, {});
+      const newItemOrderedChildrenIdsLookup = prevState.items.itemOrderedChildrenIdsLookup;
+      const newItemChildrenIndexesLookup = prevState.items.itemChildrenIndexesLookup;
+      delete newItemChildrenIndexesLookup[parentId];
+      delete newItemOrderedChildrenIdsLookup[parentId];
+      return (0, _extends2.default)({}, prevState, {
+        items: (0, _extends2.default)({}, prevState.items, {
+          itemMetaLookup: newMetaMap,
+          itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
+          itemChildrenIndexesLookup: newItemChildrenIndexesLookup
+        })
+      });
+    });
+  };
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
     store.update(prevState => {
-      const newState = updateItemsState({
+      const newState = processItemsLookups({
         disabledItemsFocusable: params.disabledItemsFocusable,
         items: params.items,
         isItemDisabled: params.isItemDisabled,
@@ -127,7 +259,7 @@ const useTreeViewItems = ({
         }
       });
       return (0, _extends2.default)({}, prevState, {
-        items: newState
+        items: (0, _extends2.default)({}, prevState.items, newState)
       });
     });
   }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
@@ -153,24 +285,33 @@ const useTreeViewItems = ({
       getItem,
       getItemDOMElement,
       getItemTree,
-      getItemOrderedChildrenIds
+      getItemOrderedChildrenIds,
+      setIsItemDisabled,
+      getParentId
     },
     instance: {
       getItemDOMElement,
       preventItemUpdates,
-      areItemUpdatesPrevented
+      areItemUpdatesPrevented,
+      addItems,
+      setTreeViewLoading,
+      setTreeViewError,
+      removeChildren
     },
     contextValue: pluginContextValue
   };
 };
 exports.useTreeViewItems = useTreeViewItems;
 useTreeViewItems.getInitialState = params => ({
-  items: updateItemsState({
+  items: (0, _extends2.default)({}, processItemsLookups({
     disabledItemsFocusable: params.disabledItemsFocusable,
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
     getItemLabel: params.getItemLabel
+  }), {
+    loading: false,
+    error: null
   })
 });
 useTreeViewItems.getDefaultizedParams = ({