@mui/x-tree-view 8.0.0-alpha.9 → 8.0.0-beta.0

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

@@ -1,43 +1,42 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils/types';
-import { TreeViewPluginSignature } from '../../models';
-import { UseTreeViewItemsSignature } from '../useTreeViewItems';
-import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
-export interface UseTreeViewIconsParameters {
-}
+import { TreeViewPluginSignature } from "../../models/index.js";
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
+export interface UseTreeViewIconsParameters {}
 export type UseTreeViewIconsDefaultizedParameters = UseTreeViewIconsParameters;
 interface UseTreeViewIconsSlots {
-    /**
-     * The default icon used to collapse the item.
-     */
-    collapseIcon?: React.ElementType;
-    /**
-     * The default icon used to expand the item.
-     */
-    expandIcon?: React.ElementType;
-    /**
-     * The default icon displayed next to an end item.
-     * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
-     */
-    endIcon?: React.ElementType;
+  /**
+   * The default icon used to collapse the item.
+   */
+  collapseIcon?: React.ElementType;
+  /**
+   * The default icon used to expand the item.
+   */
+  expandIcon?: React.ElementType;
+  /**
+   * The default icon displayed next to an end item.
+   * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
+   */
+  endIcon?: React.ElementType;
 }
 interface UseTreeViewIconsSlotProps {
-    collapseIcon?: SlotComponentProps<'svg', {}, {}>;
-    expandIcon?: SlotComponentProps<'svg', {}, {}>;
-    endIcon?: SlotComponentProps<'svg', {}, {}>;
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
 }
 interface UseTreeViewIconsContextValue {
-    icons: {
-        slots: UseTreeViewIconsSlots;
-        slotProps: UseTreeViewIconsSlotProps;
-    };
-}
-export type UseTreeViewIconsSignature = TreeViewPluginSignature<{
-    params: UseTreeViewIconsParameters;
-    defaultizedParams: UseTreeViewIconsDefaultizedParameters;
-    contextValue: UseTreeViewIconsContextValue;
+  icons: {
     slots: UseTreeViewIconsSlots;
     slotProps: UseTreeViewIconsSlotProps;
-    dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
+  };
+}
+export type UseTreeViewIconsSignature = TreeViewPluginSignature<{
+  params: UseTreeViewIconsParameters;
+  defaultizedParams: UseTreeViewIconsDefaultizedParameters;
+  contextValue: UseTreeViewIconsContextValue;
+  slots: UseTreeViewIconsSlots;
+  slotProps: UseTreeViewIconsSlotProps;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
 }>;
-export {};
+export {};

package/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.js

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

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

@@ -1,3 +1,3 @@
-export { useTreeViewItems } from './useTreeViewItems';
-export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, } from './useTreeViewItems.types';
-export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';
+export { useTreeViewItems } from "./useTreeViewItems.js";
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState } from './useTreeViewItems.types';
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";

package/internals/plugins/useTreeViewItems/index.js

@@ -1,2 +1,25 @@
-export { useTreeViewItems } from "./useTreeViewItems.js";
-export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TREE_VIEW_ROOT_PARENT_ID", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.TREE_VIEW_ROOT_PARENT_ID;
+  }
+});
+Object.defineProperty(exports, "buildSiblingIndexes", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.buildSiblingIndexes;
+  }
+});
+Object.defineProperty(exports, "useTreeViewItems", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems.useTreeViewItems;
+  }
+});
+var _useTreeViewItems = require("./useTreeViewItems");
+var _useTreeViewItems2 = require("./useTreeViewItems.utils");

package/internals/plugins/useTreeViewItems/useTreeViewItems.d.ts

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

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -1,33 +1,48 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
-import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
-import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
-import { selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemModel, selectorItemDepth } from "./useTreeViewItems.selectors.js";
-import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
-import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const updateItemsState = ({
+"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.useTreeViewItems = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
+var _useTreeViewItems = require("./useTreeViewItems.utils");
+var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
+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 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 = {};
   const itemOrderedChildrenIdsLookup = {
-    [TREE_VIEW_ROOT_PARENT_ID]: []
+    [_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID]: []
   };
   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'));
@@ -37,22 +52,26 @@ const updateItemsState = ({
       label,
       parentId,
       idAttribute: undefined,
-      expandable: !!item.children?.length,
+      expandable: getChildrenCount ? getChildrenCount(item) > 0 : !!item.children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false,
       depth
     };
     itemModelLookup[id] = item;
-    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
     if (!itemOrderedChildrenIdsLookup[parentIdWithDefault]) {
       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] = buildSiblingIndexes(itemOrderedChildrenIdsLookup[parentId]);
+    itemChildrenIndexesLookup[parentId] = (0, _useTreeViewItems.buildSiblingIndexes)(itemOrderedChildrenIdsLookup[parentId]);
   });
   return {
     disabledItemsFocusable,
@@ -62,16 +81,53 @@ const updateItemsState = ({
     itemChildrenIndexesLookup
   };
 };
-export const useTreeViewItems = ({
+const useTreeViewItems = ({
   instance,
   params,
   store
 }) => {
-  const getItem = React.useCallback(itemId => selectorItemModel(store.value, itemId), [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 = selectorItemModel(store.value, itemId);
-      const newChildren = selectorItemOrderedChildrenIds(store.value, itemId);
+      const item = (0, _useTreeViewItems2.selectorItemModel)(store.value, itemId);
+      const newChildren = (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, itemId);
       if (newChildren.length > 0) {
         item.children = newChildren.map(getItemFromItemId);
       } else {
@@ -79,16 +135,16 @@ export const useTreeViewItems = ({
       }
       return item;
     };
-    return selectorItemOrderedChildrenIds(store.value, null).map(getItemFromItemId);
+    return (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, null).map(getItemFromItemId);
   }, [store]);
-  const getItemOrderedChildrenIds = React.useCallback(itemId => selectorItemOrderedChildrenIds(store.value, itemId), [store]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, itemId), [store]);
   const getItemDOMElement = itemId => {
-    const itemMeta = selectorItemMeta(store.value, itemId);
+    const itemMeta = (0, _useTreeViewItems2.selectorItemMeta)(store.value, itemId);
     if (itemMeta == null) {
       return null;
     }
-    const idAttribute = generateTreeItemIdAttribute({
-      treeId: selectorTreeViewId(store.value),
+    const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
+      treeId: (0, _useTreeViewId.selectorTreeViewId)(store.value),
       itemId,
       id: itemMeta.idAttribute
     });
@@ -99,12 +155,96 @@ export 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,
@@ -113,19 +253,19 @@ export const useTreeViewItems = ({
       });
       Object.values(prevState.items.itemMetaLookup).forEach(item => {
         if (!newState.itemMetaLookup[item.id]) {
-          publishTreeViewEvent(instance, 'removeItem', {
+          (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
             id: item.id
           });
         }
       });
-      return _extends({}, prevState, {
-        items: newState
+      return (0, _extends2.default)({}, prevState, {
+        items: (0, _extends2.default)({}, prevState.items, newState)
       });
     });
   }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
 
   // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
-  const handleItemClick = useEventCallback((event, itemId) => {
+  const handleItemClick = (0, _useEventCallback.default)((event, itemId) => {
     if (params.onItemClick) {
       params.onItemClick(event, itemId);
     }
@@ -145,36 +285,46 @@ export 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 = ({
   params
-}) => _extends({}, params, {
+}) => (0, _extends2.default)({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false,
   itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });
 useTreeViewItems.wrapRoot = ({
   children
 }) => {
-  return /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
-    value: selectorItemDepth,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
+    value: _useTreeViewItems2.selectorItemDepth,
     children: children
   });
 };