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

package/internals/components/RichTreeViewItems.js

@@ -3,54 +3,66 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { TreeItem } from "../../TreeItem/index.js";
+import { useSelector } from "../hooks/useSelector.js";
+import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { useTreeViewContext } from "../TreeViewProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-function WrappedTreeItem({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  itemsToRender
+const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  RichTreeViewItemsContext.displayName = 'RichTreeViewItemsProvider';
+}
+const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
+  itemSlot,
+  itemSlotProps,
+  itemId
 }) {
-  const Item = slots?.item ?? TreeItem;
+  const renderItemForRichTreeView = React.useContext(RichTreeViewItemsContext);
+  const {
+    store
+  } = useTreeViewContext();
+  const itemMeta = useSelector(store, selectorItemMeta, itemId);
+  const children = useSelector(store, selectorItemOrderedChildrenIds, itemId);
+  const Item = itemSlot ?? TreeItem;
   const _useSlotProps = useSlotProps({
       elementType: Item,
-      externalSlotProps: slotProps?.item,
+      externalSlotProps: itemSlotProps,
       additionalProps: {
-        itemId,
-        id,
-        label
+        label: itemMeta?.label,
+        id: itemMeta?.idAttribute,
+        itemId
       },
       ownerState: {
         itemId,
-        label
+        label: itemMeta?.label
       }
     }),
     itemProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
-  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/_jsx(RichTreeViewItems, {
-    itemsToRender: itemsToRender,
-    slots: slots,
-    slotProps: slotProps
-  }) : null, [itemsToRender, slots, slotProps]);
   return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
-    children: children
+    children: children?.map(renderItemForRichTreeView)
   }));
-}
+}, fastObjectShallowCompare);
 export function RichTreeViewItems(props) {
   const {
-    itemsToRender,
     slots,
     slotProps
   } = props;
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: itemsToRender.map(item => /*#__PURE__*/_jsx(WrappedTreeItem, {
-      slots: slots,
-      slotProps: slotProps,
-      label: item.label,
-      id: item.id,
-      itemId: item.itemId,
-      itemsToRender: item.children
-    }, item.itemId))
+  const {
+    store
+  } = useTreeViewContext();
+  const itemSlot = slots?.item;
+  const itemSlotProps = slotProps?.item;
+  const items = useSelector(store, selectorItemOrderedChildrenIds, null);
+  const renderItem = React.useCallback(itemId => {
+    return /*#__PURE__*/_jsx(WrappedTreeItem, {
+      itemSlot: itemSlot,
+      itemSlotProps: itemSlotProps,
+      itemId: itemId
+    }, itemId);
+  }, [itemSlot, itemSlotProps]);
+  return /*#__PURE__*/_jsx(RichTreeViewItemsContext.Provider, {
+    value: renderItem,
+    children: items.map(renderItem)
   });
 }

package/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -1,14 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useSelector } from "../../hooks/useSelector.js";
+import { selectorTreeViewId } from "./useTreeViewId.selectors.js";
 import { createTreeViewDefaultId } from "./useTreeViewId.utils.js";
 export const useTreeViewId = ({
   params,
-  state,
-  setState
+  store
 }) => {
   React.useEffect(() => {
-    setState(prevState => {
-      if (prevState.id.treeId === params.id && prevState.id.treeId !== undefined) {
+    store.update(prevState => {
+      if (params.id === prevState.id.providedTreeId && prevState.id.treeId !== undefined) {
         return prevState;
       }
       return _extends({}, prevState, {
@@ -17,15 +18,12 @@ export const useTreeViewId = ({
         })
       });
     });
-  }, [setState, params.id]);
-  const treeId = params.id ?? state.id.treeId;
+  }, [store, params.id]);
+  const treeId = useSelector(store, selectorTreeViewId);
   return {
     getRootProps: () => ({
       id: treeId
-    }),
-    contextValue: {
-      treeId
-    }
+    })
   };
 };
 useTreeViewId.params = {
@@ -35,6 +33,7 @@ useTreeViewId.getInitialState = ({
   id
 }) => ({
   id: {
-    treeId: id ?? undefined
+    treeId: undefined,
+    providedTreeId: id
   }
 });

package/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.d.ts

@@ -0,0 +1,36 @@
+import { TreeViewRootSelector } from '../../utils/selectors';
+import { UseTreeViewIdSignature } from './useTreeViewId.types';
+/**
+ * Get the id attribute of the tree view.
+ * @param {TreeViewState<[UseTreeViewIdSignature]>} state The state of the tree view.
+ * @returns {string} The id attribute of the tree view.
+ */
+export declare const selectorTreeViewId: ((state: import("./useTreeViewId.types").UseTreeViewIdState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => string | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        treeId: string | undefined;
+        providedTreeId: string | undefined;
+    }) => string | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        treeId: string | undefined;
+        providedTreeId: string | undefined;
+    }) => string | undefined) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => string | undefined;
+    dependencies: [TreeViewRootSelector<UseTreeViewIdSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js

@@ -0,0 +1,9 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorTreeViewIdState = state => state.id;
+
+/**
+ * Get the id attribute of the tree view.
+ * @param {TreeViewState<[UseTreeViewIdSignature]>} state The state of the tree view.
+ * @returns {string} The id attribute of the tree view.
+ */
+export const selectorTreeViewId = createSelector(selectorTreeViewIdState, idState => idState.treeId);

package/internals/corePlugins/useTreeViewId/useTreeViewId.types.d.ts

@@ -10,15 +10,11 @@ export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
 export interface UseTreeViewIdState {
     id: {
         treeId: string | undefined;
+        providedTreeId: string | undefined;
     };
 }
-interface UseTreeViewIdContextValue {
-    treeId: string | undefined;
-}
 export type UseTreeViewIdSignature = TreeViewPluginSignature<{
     params: UseTreeViewIdParameters;
     defaultizedParams: UseTreeViewIdDefaultizedParameters;
     state: UseTreeViewIdState;
-    contextValue: UseTreeViewIdContextValue;
 }>;
-export {};

package/internals/hooks/useInstanceEventHandler.js

@@ -14,7 +14,7 @@ export function createUseInstanceEventHandler(registryContainer) {
     }
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(undefined);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/internals/hooks/useSelector.d.ts

@@ -0,0 +1,4 @@
+import { TreeViewAnyPluginSignature, TreeViewState } from '../models';
+import { TreeViewStore } from '../utils/TreeViewStore';
+import { TreeViewSelector } from '../utils/selectors';
+export declare const useSelector: <TSignatures extends readonly TreeViewAnyPluginSignature[], TArgs, TValue>(store: TreeViewStore<TSignatures>, selector: TreeViewSelector<TreeViewState<TSignatures>, TArgs, TValue>, args?: TArgs, equals?: (a: TValue, b: TValue) => boolean) => TValue;

package/internals/hooks/useSelector.js

@@ -0,0 +1,6 @@
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+const defaultCompare = Object.is;
+export const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
+  const selectorWithArgs = state => selector(state, args);
+  return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs, equals);
+};

package/internals/index.d.ts

@@ -1,8 +1,10 @@
 export { useTreeView } from './useTreeView';
 export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
 export { RichTreeViewItems } from './components/RichTreeViewItems';
+export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps, } from './components/RichTreeViewItems';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, } from './models';
+export { useSelector } from './hooks/useSelector';
+export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore, } from './models';
 export type { TreeViewCorePluginParameters } from './corePlugins';
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, } from './plugins/useTreeViewExpansion';
@@ -15,9 +17,12 @@ export type { UseTreeViewKeyboardNavigationSignature } from './plugins/useTreeVi
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export type { UseTreeViewIconsSignature, UseTreeViewIconsParameters, } from './plugins/useTreeViewIcons';
 export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID, } from './plugins/useTreeViewItems';
+export { selectorItemMetaLookup, selectorItemMeta, selectorItemIndex, selectorItemOrderedChildrenIds, } from './plugins/useTreeViewItems/useTreeViewItems.selectors';
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState, } from './plugins/useTreeViewItems';
 export { useTreeViewLabel } from './plugins/useTreeViewLabel';
 export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters, } from './plugins/useTreeViewLabel';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, } from './plugins/useTreeViewJSXItems';
+export { createSelector } from './utils/selectors';
 export { isTargetInDescendants } from './utils/tree';
+export { TreeViewStore } from './utils/TreeViewStore';

package/internals/index.js

@@ -2,6 +2,7 @@ export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export { unstable_resetCleanupTracking } from "./hooks/useInstanceEventHandler.js";
+export { useSelector } from "./hooks/useSelector.js";
 
 // Core plugins
 
@@ -12,6 +13,9 @@ export { useTreeViewFocus } from "./plugins/useTreeViewFocus/index.js";
 export { useTreeViewKeyboardNavigation } from "./plugins/useTreeViewKeyboardNavigation/index.js";
 export { useTreeViewIcons } from "./plugins/useTreeViewIcons/index.js";
 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 { useTreeViewLabel } from "./plugins/useTreeViewLabel/index.js";
 export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
-export { isTargetInDescendants } from "./utils/tree.js";
+export { createSelector } from "./utils/selectors.js";
+export { isTargetInDescendants } from "./utils/tree.js";
+export { TreeViewStore } from "./utils/TreeViewStore.js";

package/internals/models/itemPlugin.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { EventHandlers } from '@mui/utils';
-import type { TreeItemProps } from '../../TreeItem';
+import { EventHandlers } from '@mui/utils/types';
 import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemStatus } from '../../useTreeItem';
 import type { UseTreeItemInteractions } from '../../hooks/useTreeItemUtils/useTreeItemUtils';
+import type { TreeItemProps } from '../../TreeItem/TreeItem.types';
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
-    rootRefObject: React.MutableRefObject<HTMLLIElement | null>;
-    contentRefObject: React.MutableRefObject<HTMLDivElement | null>;
+    rootRefObject: React.RefObject<HTMLLIElement | null>;
+    contentRefObject: React.RefObject<HTMLDivElement | null>;
     externalEventHandlers: EventHandlers;
     interactions: UseTreeItemInteractions;
     status: UseTreeItemStatus;
@@ -36,8 +36,8 @@ export interface TreeViewItemPluginResponse {
      */
     propsEnhancers?: TreeViewItemPluginSlotPropsEnhancers;
 }
-export interface TreeViewItemPluginOptions<TProps extends {}> extends Omit<TreeViewItemPluginResponse, 'propsEnhancers'> {
-    props: TProps;
+export interface TreeViewItemPluginOptions extends Omit<TreeViewItemPluginResponse, 'propsEnhancers'> {
+    props: TreeItemProps;
 }
-export type TreeViewItemPlugin = (options: TreeViewItemPluginOptions<TreeItemProps>) => void | TreeViewItemPluginResponse;
+export type TreeViewItemPlugin = (options: TreeViewItemPluginOptions) => void | TreeViewItemPluginResponse;
 export {};

package/internals/models/plugin.d.ts

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import { EventHandlers } from '@mui/utils';
+import { EventHandlers } from '@mui/utils/types';
 import { TreeViewExperimentalFeatures, TreeViewInstance, TreeViewModel } from './treeView';
 import type { MergeSignaturesProperty, OptionalIfEmpty } from './helpers';
 import { TreeViewEventLookupElement } from './events';
 import type { TreeViewCorePluginSignatures } from '../corePlugins';
 import { TreeViewItemPlugin } from './itemPlugin';
 import { TreeViewItemId } from '../../models';
+import { TreeViewStore } from '../utils/TreeViewStore';
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
     instance: TreeViewUsedInstance<TSignature>;
     params: TreeViewUsedDefaultizedParams<TSignature>;
-    state: TreeViewUsedState<TSignature>;
     slots: TSignature['slots'];
     slotProps: TSignature['slotProps'];
     experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
     models: TreeViewUsedModels<TSignature>;
-    setState: React.Dispatch<React.SetStateAction<TreeViewUsedState<TSignature>>>;
-    rootRef: React.RefObject<HTMLUListElement>;
+    store: TreeViewUsedStore<TSignature>;
+    rootRef: React.RefObject<HTMLUListElement | null>;
     plugins: TreeViewPlugin<TreeViewAnyPluginSignature>[];
 }
 type TreeViewModelsInitializer<TSignature extends TreeViewAnyPluginSignature> = {
@@ -35,6 +35,7 @@ export type TreeViewPluginSignature<T extends {
         [key in keyof T['events']]: TreeViewEventLookupElement;
     };
     state?: {};
+    cache?: {};
     contextValue?: {};
     slots?: {
         [key in keyof T['slots']]: React.ElementType;
@@ -65,6 +66,9 @@ export type TreeViewPluginSignature<T extends {
     state: T extends {
         state: {};
     } ? T['state'] : {};
+    cache: T extends {
+        cache: {};
+    } ? T['cache'] : {};
     contextValue: T extends {
         contextValue: {};
     } ? T['contextValue'] : {};
@@ -93,6 +97,7 @@ export type TreeViewPluginSignature<T extends {
     } ? T['optionalDependencies'] : [];
 };
 export type TreeViewAnyPluginSignature = {
+    cache: any;
     state: any;
     instance: any;
     params: any;
@@ -113,15 +118,21 @@ type TreeViewRequiredPlugins<TSignature extends TreeViewAnyPluginSignature> = [
 ];
 type PluginPropertyWithDependencies<TSignature extends TreeViewAnyPluginSignature, TProperty extends keyof TreeViewAnyPluginSignature> = TSignature[TProperty] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, TProperty> & Partial<MergeSignaturesProperty<TSignature['optionalDependencies'], TProperty>>;
 export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'params'>;
-type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
+export type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
 export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'instance'> & {
     /**
      * Private property only defined in TypeScript to be able to access the plugin signature from the instance object.
      */
     $$signature: TSignature;
 };
-type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'state'>;
-type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[TSignature, ...TSignature['dependencies']]>;
+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'>;
 };
@@ -131,10 +142,10 @@ export type TreeItemWrapper<TSignatures extends readonly TreeViewAnyPluginSignat
     itemId: TreeViewItemId;
     children: React.ReactNode;
     instance: TreeViewInstance<TSignatures>;
+    idAttribute: string;
 }) => React.ReactNode;
-export type TreeRootWrapper<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (params: {
+export type TreeRootWrapper = (params: {
     children: React.ReactNode;
-    instance: TreeViewInstance<TSignatures>;
 }) => React.ReactNode;
 export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
     (options: TreeViewPluginOptions<TSignature>): TreeViewResponse<TSignature>;
@@ -143,6 +154,7 @@ export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
         experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
     }) => TSignature['defaultizedParams'];
     getInitialState?: (params: TreeViewUsedDefaultizedParams<TSignature>) => TSignature['state'];
+    getInitialCache?: () => TSignature['cache'];
     models?: TreeViewModelsInitializer<TSignature>;
     params: Record<keyof TSignature['params'], true>;
     itemPlugin?: TreeViewItemPlugin;
@@ -157,6 +169,6 @@ export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
      * @param {{ children: React.ReactNode; }} params The params of the root.
      * @returns {React.ReactNode} The wrapped root.
      */
-    wrapRoot?: TreeRootWrapper<[TSignature, ...TSignature['dependencies']]>;
+    wrapRoot?: TreeRootWrapper;
 };
 export {};

package/internals/models/treeView.d.ts

@@ -24,3 +24,9 @@ export interface TreeViewModel<TValue> {
 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'>;
+export type TreeViewStateCacheKey = {
+    id: number;
+};
+export type TreeViewState<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'state'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'state'>> & {
+    cacheKey: TreeViewStateCacheKey;
+};

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,30 +1,48 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { selectorIsItemExpandable, selectorIsItemExpanded } from "./useTreeViewExpansion.selectors.js";
+import { createExpandedItemsMap, getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
+import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 export const useTreeViewExpansion = ({
   instance,
+  store,
   params,
   models
 }) => {
-  const expandedItemsMap = React.useMemo(() => {
-    const temp = new Map();
-    models.expandedItems.value.forEach(id => {
-      temp.set(id, true);
+  useEnhancedEffect(() => {
+    store.update(prevState => _extends({}, prevState, {
+      expansion: _extends({}, prevState.expansion, {
+        expandedItemsMap: createExpandedItemsMap(models.expandedItems.value)
+      })
+    }));
+  }, [store, models.expandedItems.value]);
+  useEnhancedEffect(() => {
+    store.update(prevState => {
+      const newExpansionTrigger = getExpansionTrigger({
+        isItemEditable: params.isItemEditable,
+        expansionTrigger: params.expansionTrigger
+      });
+      if (prevState.expansion.expansionTrigger === newExpansionTrigger) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        expansion: _extends({}, prevState.expansion, {
+          expansionTrigger: newExpansionTrigger
+        })
+      });
     });
-    return temp;
-  }, [models.expandedItems.value]);
+  }, [store, params.isItemEditable, params.expansionTrigger]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
-  const isItemExpandable = React.useCallback(itemId => !!instance.getItemMeta(itemId)?.expandable, [instance]);
   const toggleItemExpansion = useEventCallback((event, itemId) => {
-    const isExpandedBefore = instance.isItemExpanded(itemId);
+    const isExpandedBefore = selectorIsItemExpanded(store.value, itemId);
     instance.setItemExpansion(event, itemId, !isExpandedBefore);
   });
   const setItemExpansion = useEventCallback((event, itemId, isExpanded) => {
-    const isExpandedBefore = instance.isItemExpanded(itemId);
+    const isExpandedBefore = selectorIsItemExpanded(store.value, itemId);
     if (isExpandedBefore === isExpanded) {
       return;
     }
@@ -40,9 +58,12 @@ export const useTreeViewExpansion = ({
     setExpandedItems(event, newExpanded);
   });
   const expandAllSiblings = (event, itemId) => {
-    const itemMeta = instance.getItemMeta(itemId);
-    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-    const diff = siblings.filter(child => instance.isItemExpandable(child) && !instance.isItemExpanded(child));
+    const itemMeta = selectorItemMeta(store.value, itemId);
+    if (itemMeta == null) {
+      return;
+    }
+    const siblings = selectorItemOrderedChildrenIds(store.value, itemMeta.parentId);
+    const diff = siblings.filter(child => selectorIsItemExpandable(store.value, child) && !selectorIsItemExpanded(store.value, child));
     const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
@@ -53,30 +74,14 @@ export const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  const expansionTrigger = React.useMemo(() => {
-    if (params.expansionTrigger) {
-      return params.expansionTrigger;
-    }
-    if (instance.isTreeViewEditable) {
-      return 'iconContainer';
-    }
-    return 'content';
-  }, [params.expansionTrigger, instance.isTreeViewEditable]);
   return {
     publicAPI: {
       setItemExpansion
     },
     instance: {
-      isItemExpanded,
-      isItemExpandable,
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
-    },
-    contextValue: {
-      expansion: {
-        expansionTrigger
-      }
     }
   };
 };
@@ -91,6 +96,12 @@ useTreeViewExpansion.getDefaultizedParams = ({
 }) => _extends({}, params, {
   defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS
 });
+useTreeViewExpansion.getInitialState = params => ({
+  expansion: {
+    expandedItemsMap: createExpandedItemsMap(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems),
+    expansionTrigger: getExpansionTrigger(params)
+  }
+});
 useTreeViewExpansion.params = {
   expandedItems: true,
   defaultExpandedItems: true,