@mui/x-tree-view 8.0.0-beta.3 → 8.1.0

package/esm/internals/utils/models.js

@@ -0,0 +1,23 @@
+import { warnOnce } from '@mui/x-internals/warning';
+import * as React from 'react';
+function useAssertModelConsistencyOutsideOfProduction(parameters) {
+  const {
+    state,
+    controlled,
+    defaultValue
+  } = parameters;
+  const [{
+    initialDefaultValue,
+    isControlled
+  }] = React.useState({
+    initialDefaultValue: defaultValue,
+    isControlled: controlled !== undefined
+  });
+  if (isControlled !== (controlled !== undefined)) {
+    warnOnce([`MUI X: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of Tree View to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${state} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'], 'error');
+  }
+  if (JSON.stringify(initialDefaultValue) !== JSON.stringify(defaultValue)) {
+    warnOnce([`MUI X: A component is changing the default ${state} state of an uncontrolled Tree View after being initialized. ` + `To suppress this warning opt to use a controlled Tree View.`], 'error');
+  }
+}
+export const useAssertModelConsistency = process.env.NODE_ENV === 'production' ? () => {} : useAssertModelConsistencyOutsideOfProduction;

package/esm/internals/utils/selectors.d.ts

@@ -3,7 +3,7 @@ import { TreeViewAnyPluginSignature, TreeViewState } from "../models/index.js";
 /**
  * Type of a selector that take the whole tree view state as input and returns a value based on a required plugin.
  */
-export type TreeViewRootSelector<TSignature extends TreeViewAnyPluginSignature, IsOptional extends boolean = false> = <TSignatures extends [TSignature]>(state: TreeViewState<TSignatures>) => IsOptional extends true ? TSignature['state'][keyof TSignature['state']] | undefined : TSignature['state'][keyof TSignature['state']];
+export type TreeViewRootSelector<TSignature extends TreeViewAnyPluginSignature, TIsOptional extends boolean = false> = <TSignatures extends (TIsOptional extends true ? [] : [TSignature]), TOptionalSignatures extends (TIsOptional extends true ? [TSignature] : [])>(state: TreeViewState<TSignatures, TOptionalSignatures>) => TIsOptional extends true ? TSignature['state'][keyof TSignature['state']] | undefined : TSignature['state'][keyof TSignature['state']];
 /**
  * Type of a selector that take the whole tree view state as input and returns a value based on an optional plugin.
  */

package/esm/utils/cache.d.ts

@@ -3,7 +3,7 @@ type DataSourceCacheDefaultConfig = {
   /**
    * Time To Live for each cache entry in milliseconds.
    * After this time the cache entry will become stale and the next query will result in cache miss.
-   * @default 300000 (5 minutes)
+   * @default 300_000 (5 minutes)
    */
   ttl?: number;
 };

package/esm/utils/cache.js

@@ -1,6 +1,6 @@
 export class DataSourceCacheDefault {
   constructor({
-    ttl = 300000
+    ttl = 300_000
   }) {
     this.cache = void 0;
     this.ttl = void 0;

package/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -84,7 +84,7 @@ const useTreeItemUtils = ({
     if (status.disabled) {
       return;
     }
-    if (!status.focused) {
+    if (!status.focused && !status.editing) {
       instance.focusItem(event, itemId);
     }
     const multiple = isMultiSelectEnabled && (event.shiftKey || event.ctrlKey || event.metaKey);

package/index.js

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

package/internals/TreeViewProvider/TreeViewContext.d.ts

@@ -4,5 +4,5 @@ import { TreeViewContextValue } from "./TreeViewProvider.types.js";
 /**
  * @ignore - internal component.
  */
-export declare const TreeViewContext: React.Context<TreeViewContextValue<any> | null>;
+export declare const TreeViewContext: React.Context<TreeViewContextValue<any, []> | null>;
 export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => TreeViewContextValue<TSignatures, TOptionalSignatures>;

package/internals/TreeViewProvider/TreeViewProvider.js

@@ -20,13 +20,23 @@ function TreeViewProvider(props) {
   const {
     contextValue,
     classes = EMPTY_OBJECT,
+    slots = EMPTY_OBJECT,
+    slotProps = EMPTY_OBJECT,
     children
   } = props;
-
-  // TODO: Add the icons to this context and drop useTreeViewIcons
   const styleContextValue = React.useMemo(() => ({
-    classes
-  }), [classes]);
+    classes,
+    slots: {
+      collapseIcon: slots.collapseIcon,
+      expandIcon: slots.expandIcon,
+      endIcon: slots.endIcon
+    },
+    slotProps: {
+      collapseIcon: slotProps.collapseIcon,
+      expandIcon: slotProps.expandIcon,
+      endIcon: slotProps.endIcon
+    }
+  }), [classes, slots.collapseIcon, slots.expandIcon, slots.endIcon, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewStyleContext.TreeViewStyleContext.Provider, {

package/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { MergeSignaturesProperty, TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI } from "../models/index.js";
+import { TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI } from "../models/index.js";
 import { TreeViewStore } from "../utils/TreeViewStore.js";
-import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
 import type { TreeItemProps } from '../../TreeItem/TreeItem.types';
-import { TreeViewClasses } from "./TreeViewStyleContext.js";
+import { TreeViewClasses, TreeViewSlotProps, TreeViewSlots } from "./TreeViewStyleContext.js";
 export type TreeViewItemPluginsRunner = (props: TreeItemProps) => Required<TreeViewItemPluginResponse>;
-export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'contextValue'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'contextValue'>> & {
+export interface TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> {
   instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
   publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
   store: TreeViewStore<TSignatures>;
@@ -13,9 +12,11 @@ export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginS
   wrapItem: TreeItemWrapper<TSignatures>;
   wrapRoot: TreeRootWrapper;
   runItemPlugins: TreeViewItemPluginsRunner;
-};
+}
 export interface TreeViewProviderProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
   contextValue: TreeViewContextValue<TSignatures>;
   children: React.ReactNode;
   classes: Partial<TreeViewClasses> | undefined;
+  slots: TreeViewSlots | undefined;
+  slotProps: TreeViewSlotProps | undefined;
 }

package/internals/TreeViewProvider/TreeViewStyleContext.d.ts

@@ -1,3 +1,4 @@
+import { SlotComponentProps } from '@mui/utils/types';
 import * as React from 'react';
 export interface TreeViewClasses {
   /** Styles applied to the root element. */
@@ -23,8 +24,30 @@ export interface TreeViewClasses {
   /** Styles applied to the item's loading icon element */
   itemLoadingIcon: string;
 }
+export interface TreeViewSlots {
+  /**
+   * 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;
+}
+export interface TreeViewSlotProps {
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+}
 export interface TreeViewStyleContextValue {
   classes: Partial<TreeViewClasses>;
+  slots: TreeViewSlots;
+  slotProps: TreeViewSlotProps;
 }
 /**
  * @ignore - internal component.

package/internals/TreeViewProvider/TreeViewStyleContext.js

@@ -10,7 +10,9 @@ var React = _interopRequireWildcard(require("react"));
  * @ignore - internal component.
  */
 const TreeViewStyleContext = exports.TreeViewStyleContext = /*#__PURE__*/React.createContext({
-  classes: {}
+  classes: {},
+  slots: {},
+  slotProps: {}
 });
 if (process.env.NODE_ENV !== 'production') {
   TreeViewStyleContext.displayName = 'TreeViewStyleContext';

package/internals/hooks/useSelector.js

@@ -4,11 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSelector = void 0;
-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
-
+var _withSelector = require("use-sync-external-store/with-selector");
 const defaultCompare = Object.is;
 const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
   const selectorWithArgs = state => selector(state, args);

package/internals/index.d.ts

@@ -14,12 +14,11 @@ export { useTreeViewFocus } from "./plugins/useTreeViewFocus/index.js";
 export type { UseTreeViewFocusSignature, UseTreeViewFocusParameters } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from "./plugins/useTreeViewKeyboardNavigation/index.js";
 export type { UseTreeViewKeyboardNavigationSignature } from './plugins/useTreeViewKeyboardNavigation';
-export { useTreeViewIcons } from "./plugins/useTreeViewIcons/index.js";
-export type { UseTreeViewIconsSignature, UseTreeViewIconsParameters } from './plugins/useTreeViewIcons';
 export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/useTreeViewItems/index.js";
 export { selectorItemMetaLookup, selectorItemMeta, selectorItemIndex, selectorItemOrderedChildrenIds } from "./plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState } from './plugins/useTreeViewItems';
 export { useTreeViewLabel } from "./plugins/useTreeViewLabel/index.js";
+export { selectorIsItemBeingEdited, selectorIsAnyItemBeingEdited as selectorIsAnItemEdited } from "./plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
 export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from './plugins/useTreeViewLabel';
 export { selectorIsItemExpanded } from "./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
 export { selectorIsItemSelected } from "./plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
@@ -31,4 +30,4 @@ export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from
 export { createSelector } from "./utils/selectors.js";
 export { isTargetInDescendants } from "./utils/tree.js";
 export { TreeViewStore } from "./utils/TreeViewStore.js";
-export type { TreeViewClasses } from './TreeViewProvider/TreeViewStyleContext';
+export type { TreeViewClasses, TreeViewSlots, TreeViewSlotProps } from './TreeViewProvider/TreeViewStyleContext';

package/internals/index.js

@@ -57,6 +57,18 @@ Object.defineProperty(exports, "selectorGetTreeItemError", {
     return _useTreeViewLazyLoading.selectorGetTreeItemError;
   }
 });
+Object.defineProperty(exports, "selectorIsAnItemEdited", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewLabel2.selectorIsAnyItemBeingEdited;
+  }
+});
+Object.defineProperty(exports, "selectorIsItemBeingEdited", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewLabel2.selectorIsItemBeingEdited;
+  }
+});
 Object.defineProperty(exports, "selectorIsItemExpanded", {
   enumerable: true,
   get: function () {
@@ -135,12 +147,6 @@ Object.defineProperty(exports, "useTreeViewFocus", {
     return _useTreeViewFocus.useTreeViewFocus;
   }
 });
-Object.defineProperty(exports, "useTreeViewIcons", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewIcons.useTreeViewIcons;
-  }
-});
 Object.defineProperty(exports, "useTreeViewItems", {
   enumerable: true,
   get: function () {
@@ -180,10 +186,10 @@ var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("./plugins/useTreeViewSelection");
 var _useTreeViewFocus = require("./plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("./plugins/useTreeViewKeyboardNavigation");
-var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
 var _useTreeViewItems = require("./plugins/useTreeViewItems");
 var _useTreeViewItems2 = require("./plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewLabel = require("./plugins/useTreeViewLabel");
+var _useTreeViewLabel2 = require("./plugins/useTreeViewLabel/useTreeViewLabel.selectors");
 var _useTreeViewExpansion2 = require("./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
 var _useTreeViewSelection2 = require("./plugins/useTreeViewSelection/useTreeViewSelection.selectors");
 var _useTreeViewLazyLoading = require("./plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors");

package/internals/models/events.d.ts

@@ -1,9 +1,5 @@
-import * as React from 'react';
+import { MuiEvent } from '@mui/x-internals/types';
 export interface TreeViewEventLookupElement {
   params: object;
 }
-export type TreeViewEventListener<E extends TreeViewEventLookupElement> = (params: E['params'], event: MuiEvent<{}>) => void;
-export type MuiBaseEvent = React.SyntheticEvent<HTMLElement> | DocumentEventMap[keyof DocumentEventMap] | {};
-export type MuiEvent<E extends MuiBaseEvent = MuiBaseEvent> = E & {
-  defaultMuiPrevented?: boolean;
-};
+export type TreeViewEventListener<E extends TreeViewEventLookupElement> = (params: E['params'], event: MuiEvent<{}>) => void;

package/internals/models/plugin.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils/types';
-import { TreeViewExperimentalFeatures, TreeViewInstance, TreeViewModel } from "./treeView.js";
+import { TreeViewExperimentalFeatures, TreeViewInstance } from "./treeView.js";
 import type { MergeSignaturesProperty, OptionalIfEmpty } from './helpers';
 import { TreeViewEventLookupElement } from "./events.js";
 import type { TreeViewCorePluginSignatures } from '../corePlugins';
@@ -8,22 +8,31 @@ import { TreeViewItemPlugin } from "./itemPlugin.js";
 import { TreeViewItemId } from "../../models/index.js";
 import { TreeViewStore } from "../utils/TreeViewStore.js";
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
+  /**
+   * An imperative API available for internal use. Used to access methods from other plugins.
+   */
   instance: TreeViewUsedInstance<TSignature>;
+  /**
+   * The Tree View parameters after being processed with the default values.
+   */
   params: TreeViewUsedDefaultizedParams<TSignature>;
-  slots: TSignature['slots'];
-  slotProps: TSignature['slotProps'];
   experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
-  models: TreeViewUsedModels<TSignature>;
+  /**
+   * The store that can be used to access the state of other plugins.
+   */
   store: TreeViewUsedStore<TSignature>;
+  /**
+   * Reference to the root element.
+   */
   rootRef: React.RefObject<HTMLUListElement | null>;
+  /**
+   * All the plugins that are used in the tree-view.
+   */
   plugins: TreeViewPlugin<TreeViewAnyPluginSignature>[];
 }
-type TreeViewModelsInitializer<TSignature extends TreeViewAnyPluginSignature> = { [TControlled in keyof TSignature['models']]: {
-  getDefaultValue: (params: TSignature['defaultizedParams']) => Exclude<TSignature['defaultizedParams'][TControlled], undefined>;
-} };
 type TreeViewResponse<TSignature extends TreeViewAnyPluginSignature> = {
   getRootProps?: <TOther extends EventHandlers = {}>(otherHandlers: TOther) => React.HTMLAttributes<HTMLUListElement>;
-} & OptionalIfEmpty<'publicAPI', TSignature['publicAPI']> & OptionalIfEmpty<'instance', TSignature['instance']> & OptionalIfEmpty<'contextValue', TSignature['contextValue']>;
+} & OptionalIfEmpty<'publicAPI', TSignature['publicAPI']> & OptionalIfEmpty<'instance', TSignature['instance']>;
 export type TreeViewPluginSignature<T extends {
   params?: {};
   defaultizedParams?: {};
@@ -31,61 +40,61 @@ export type TreeViewPluginSignature<T extends {
   publicAPI?: {};
   events?: { [key in keyof T['events']]: TreeViewEventLookupElement };
   state?: {};
-  cache?: {};
-  contextValue?: {};
-  slots?: { [key in keyof T['slots']]: React.ElementType };
-  slotProps?: { [key in keyof T['slotProps']]: {} | (() => {}) };
-  modelNames?: keyof T['defaultizedParams'];
   experimentalFeatures?: string;
   dependencies?: readonly TreeViewAnyPluginSignature[];
   optionalDependencies?: readonly TreeViewAnyPluginSignature[];
 }> = {
+  /**
+   * The raw properties that can be passed to the plugin.
+   */
   params: T extends {
     params: {};
   } ? T['params'] : {};
+  /**
+   * The params after being processed with the default values.
+   */
   defaultizedParams: T extends {
     defaultizedParams: {};
   } ? T['defaultizedParams'] : {};
+  /**
+   * An imperative api available for internal use.
+   */
   instance: T extends {
     instance: {};
   } ? T['instance'] : {};
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
   publicAPI: T extends {
     publicAPI: {};
   } ? T['publicAPI'] : {};
   events: T extends {
     events: {};
   } ? T['events'] : {};
+  /**
+   * The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins.
+   */
   state: T extends {
     state: {};
   } ? T['state'] : {};
-  cache: T extends {
-    cache: {};
-  } ? T['cache'] : {};
-  contextValue: T extends {
-    contextValue: {};
-  } ? T['contextValue'] : {};
-  slots: T extends {
-    slots: {};
-  } ? T['slots'] : {};
-  slotProps: T extends {
-    slotProps: {};
-  } ? T['slotProps'] : {};
-  models: T extends {
-    defaultizedParams: {};
-    modelNames: keyof T['defaultizedParams'];
-  } ? { [TControlled in T['modelNames']]-?: TreeViewModel<Exclude<T['defaultizedParams'][TControlled], undefined>> } : {};
   experimentalFeatures: T extends {
     experimentalFeatures: string;
   } ? { [key in T['experimentalFeatures']]?: boolean } : {};
+  /**
+   * Any plugins that this plugin depends on.
+   */
   dependencies: T extends {
     dependencies: Array<any>;
   } ? T['dependencies'] : [];
+  /**
+   * Same as dependencies but the plugin might not have been initialized. Used for dependencies on plugins of features that can be enabled conditionally.
+   */
   optionalDependencies: T extends {
     optionalDependencies: Array<any>;
   } ? T['optionalDependencies'] : [];
 };
 export type TreeViewAnyPluginSignature = {
-  cache: any;
   state: any;
   instance: any;
   params: any;
@@ -93,10 +102,6 @@ export type TreeViewAnyPluginSignature = {
   dependencies: any;
   optionalDependencies: any;
   events: any;
-  contextValue: any;
-  slots: any;
-  slotProps: any;
-  models: any;
   experimentalFeatures: any;
   publicAPI: any;
 };
@@ -112,8 +117,6 @@ export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature>
 };
 export type TreeViewUsedStore<TSignature extends TreeViewAnyPluginSignature> = TreeViewStore<[TSignature, ...TSignature['dependencies']]>;
 type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[TSignature, ...TSignature['dependencies']], TSignature['optionalDependencies']>;
-type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = { [K in keyof Models]: Omit<Models[K], 'setValue'> };
-export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, 'models'>>;
 export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, 'events'>;
 export type TreeItemWrapper<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (params: {
   itemId: TreeViewItemId;
@@ -125,14 +128,36 @@ export type TreeRootWrapper = (params: {
   children: React.ReactNode;
 }) => React.ReactNode;
 export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
+  /**
+   * The main function of the plugin that will be executed by the Tree View.
+   *
+   * This should be a valid React `use` function, as it will be executed in the render phase and can contain hooks.
+   */
   (options: TreeViewPluginOptions<TSignature>): TreeViewResponse<TSignature>;
+  /**
+   * A function that receives the parameters and returns them after being processed with the default values.
+   *
+   * @param {TreeViewUsedParams<TSignature>} options The options object.
+   * @param {TreeViewUsedParams<TSignature>['params']} options.params The parameters before being processed with the default values.
+   * @param {TreeViewUsedExperimentalFeatures<TSignature>} options.experimentalFeatures An object containing the experimental feature flags.
+   * @returns {TSignature['defaultizedParams']} The parameters after being processed with the default values.
+   */
   getDefaultizedParams?: (options: {
     params: TreeViewUsedParams<TSignature>;
     experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
   }) => TSignature['defaultizedParams'];
+  /**
+   * The initial state is computed after the default values are applied.
+   * It sets up the state for the first render.
+   * Other state modifications have to be done in effects and so could not be applied on the initial render.
+   *
+   * @param {TreeViewUsedDefaultizedParams<TSignature>} params The parameters after being processed with the default values.
+   * @returns {TSignature['state']} The initial state of the plugin.
+   */
   getInitialState?: (params: TreeViewUsedDefaultizedParams<TSignature>) => TSignature['state'];
-  getInitialCache?: () => TSignature['cache'];
-  models?: TreeViewModelsInitializer<TSignature>;
+  /**
+   * An object where each property used by the plugin is set to `true`.
+   */
   params: Record<keyof TSignature['params'], true>;
   itemPlugin?: TreeViewItemPlugin;
   /**

package/internals/models/treeView.d.ts

@@ -16,11 +16,6 @@ export interface TreeViewItemMeta {
    */
   label?: string;
 }
-export interface TreeViewModel<TValue> {
-  name: string;
-  value: TValue;
-  setControlledValue: (value: TValue | ((prevValue: TValue) => TValue)) => void;
-}
 export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'instance'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
 export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'publicAPI'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
 export type TreeViewExperimentalFeatures<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TSignatures, ...TOptionalSignatures], 'experimentalFeatures'>;

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -12,19 +12,17 @@ var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
 var _useTreeViewExpansion2 = require("./useTreeViewExpansion.utils");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
+var _models = require("../../utils/models");
 const useTreeViewExpansion = ({
   instance,
   store,
-  params,
-  models
+  params
 }) => {
-  (0, _useEnhancedEffect.default)(() => {
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      expansion: (0, _extends2.default)({}, prevState.expansion, {
-        expandedItemsMap: (0, _useTreeViewExpansion2.createExpandedItemsMap)(models.expandedItems.value)
-      })
-    }));
-  }, [store, models.expandedItems.value]);
+  (0, _models.useAssertModelConsistency)({
+    state: 'expandedItems',
+    controlled: params.expandedItems,
+    defaultValue: params.defaultExpandedItems
+  });
   (0, _useEnhancedEffect.default)(() => {
     store.update(prevState => {
       const newExpansionTrigger = (0, _useTreeViewExpansion2.getExpansionTrigger)({
@@ -42,19 +40,26 @@ const useTreeViewExpansion = ({
     });
   }, [store, params.isItemEditable, params.expansionTrigger]);
   const setExpandedItems = (event, value) => {
+    if (params.expandedItems === undefined) {
+      store.update(prevState => (0, _extends2.default)({}, prevState, {
+        expansion: (0, _extends2.default)({}, prevState.expansion, {
+          expandedItems: value
+        })
+      }));
+    }
     params.onExpandedItemsChange?.(event, value);
-    models.expandedItems.setControlledValue(value);
   };
   const applyItemExpansion = (0, _useEventCallback.default)(({
     itemId,
     event,
     shouldBeExpanded
   }) => {
+    const oldExpanded = (0, _useTreeViewExpansion.selectorExpandedItems)(store.value);
     let newExpanded;
     if (shouldBeExpanded) {
-      newExpanded = [itemId].concat(models.expandedItems.value);
+      newExpanded = [itemId].concat(oldExpanded);
     } else {
-      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
+      newExpanded = oldExpanded.filter(id => id !== itemId);
     }
     if (params.onItemExpansionToggle) {
       params.onItemExpansionToggle(event, itemId, shouldBeExpanded);
@@ -94,7 +99,7 @@ const useTreeViewExpansion = ({
     }
     const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemMeta.parentId);
     const diff = siblings.filter(child => (0, _useTreeViewExpansion.selectorIsItemExpandable)(store.value, child) && !(0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, child));
-    const newExpanded = models.expandedItems.value.concat(diff);
+    const newExpanded = (0, _useTreeViewExpansion.selectorExpandedItems)(store.value).concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
         diff.forEach(newlyExpandedItemId => {
@@ -104,6 +109,20 @@ const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
+
+  /**
+   * Update the controlled model when the `expandedItems` prop changes.
+   */
+  (0, _useEnhancedEffect.default)(() => {
+    const expandedItems = params.expandedItems;
+    if (expandedItems !== undefined) {
+      store.update(prevState => (0, _extends2.default)({}, prevState, {
+        expansion: (0, _extends2.default)({}, prevState.expansion, {
+          expandedItems
+        })
+      }));
+    }
+  }, [store, params.expandedItems]);
   return {
     publicAPI: {
       setItemExpansion
@@ -116,11 +135,6 @@ const useTreeViewExpansion = ({
   };
 };
 exports.useTreeViewExpansion = useTreeViewExpansion;
-useTreeViewExpansion.models = {
-  expandedItems: {
-    getDefaultValue: params => params.defaultExpandedItems
-  }
-};
 const DEFAULT_EXPANDED_ITEMS = [];
 useTreeViewExpansion.getDefaultizedParams = ({
   params
@@ -129,7 +143,7 @@ useTreeViewExpansion.getDefaultizedParams = ({
 });
 useTreeViewExpansion.getInitialState = params => ({
   expansion: {
-    expandedItemsMap: (0, _useTreeViewExpansion2.createExpandedItemsMap)(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems),
+    expandedItems: params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems,
     expansionTrigger: (0, _useTreeViewExpansion2.getExpansionTrigger)(params)
   }
 });