@mui/x-tree-view 7.22.1 → 8.0.0-alpha.1

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js

@@ -1,3 +1,6 @@
+import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
+import { selectorItemOrderedChildrenIds, selectorItemParentId } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+
 /**
  * Transform the `selectedItems` model to be an array if it was a string or null.
  * @param {string[] | string | null} model The raw model.
@@ -12,10 +15,112 @@ export const convertSelectedItemsToArray = model => {
   }
   return [];
 };
+export const createSelectedItemsMap = selectedItems => {
+  const selectedItemsMap = new Map();
+  convertSelectedItemsToArray(selectedItems).forEach(id => {
+    selectedItemsMap.set(id, true);
+  });
+  return selectedItemsMap;
+};
 export const getLookupFromArray = array => {
   const lookup = {};
   array.forEach(itemId => {
     lookup[itemId] = true;
   });
   return lookup;
+};
+export const getAddedAndRemovedItems = ({
+  store,
+  oldModel,
+  newModel
+}) => {
+  const newModelLookup = createSelectedItemsMap(newModel);
+  return {
+    added: newModel.filter(itemId => !selectorIsItemSelected(store.value, itemId)),
+    removed: oldModel.filter(itemId => !newModelLookup.has(itemId))
+  };
+};
+export const propagateSelection = ({
+  store,
+  selectionPropagation,
+  newModel,
+  oldModel,
+  additionalItemsToPropagate
+}) => {
+  if (!selectionPropagation.descendants && !selectionPropagation.parents) {
+    return newModel;
+  }
+  let shouldRegenerateModel = false;
+  const newModelLookup = getLookupFromArray(newModel);
+  const changes = getAddedAndRemovedItems({
+    store,
+    newModel,
+    oldModel
+  });
+  additionalItemsToPropagate?.forEach(itemId => {
+    if (newModelLookup[itemId]) {
+      if (!changes.added.includes(itemId)) {
+        changes.added.push(itemId);
+      }
+    } else if (!changes.removed.includes(itemId)) {
+      changes.removed.push(itemId);
+    }
+  });
+  changes.added.forEach(addedItemId => {
+    if (selectionPropagation.descendants) {
+      const selectDescendants = itemId => {
+        if (itemId !== addedItemId) {
+          shouldRegenerateModel = true;
+          newModelLookup[itemId] = true;
+        }
+        selectorItemOrderedChildrenIds(store.value, itemId).forEach(selectDescendants);
+      };
+      selectDescendants(addedItemId);
+    }
+    if (selectionPropagation.parents) {
+      const checkAllDescendantsSelected = itemId => {
+        if (!newModelLookup[itemId]) {
+          return false;
+        }
+        const children = selectorItemOrderedChildrenIds(store.value, itemId);
+        return children.every(checkAllDescendantsSelected);
+      };
+      const selectParents = itemId => {
+        const parentId = selectorItemParentId(store.value, itemId);
+        if (parentId == null) {
+          return;
+        }
+        const siblings = selectorItemOrderedChildrenIds(store.value, parentId);
+        if (siblings.every(checkAllDescendantsSelected)) {
+          shouldRegenerateModel = true;
+          newModelLookup[parentId] = true;
+          selectParents(parentId);
+        }
+      };
+      selectParents(addedItemId);
+    }
+  });
+  changes.removed.forEach(removedItemId => {
+    if (selectionPropagation.parents) {
+      let parentId = selectorItemParentId(store.value, removedItemId);
+      while (parentId != null) {
+        if (newModelLookup[parentId]) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[parentId];
+        }
+        parentId = selectorItemParentId(store.value, parentId);
+      }
+    }
+    if (selectionPropagation.descendants) {
+      const deSelectDescendants = itemId => {
+        if (itemId !== removedItemId) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[itemId];
+        }
+        selectorItemOrderedChildrenIds(store.value, itemId).forEach(deSelectDescendants);
+      };
+      deSelectDescendants(removedItemId);
+    }
+  });
+  return shouldRegenerateModel ? Object.keys(newModelLookup) : newModel;
 };

package/internals/useTreeView/useTreeView.js

@@ -5,6 +5,7 @@ import { useTreeViewModels } from "./useTreeViewModels.js";
 import { TREE_VIEW_CORE_PLUGINS } from "../corePlugins/index.js";
 import { extractPluginParamsFromProps } from "./extractPluginParamsFromProps.js";
 import { useTreeViewBuildContext } from "./useTreeViewBuildContext.js";
+import { TreeViewStore } from "../utils/TreeViewStore.js";
 export function useTreeViewApiInitialization(inputApiRef) {
   const fallbackPublicApiRef = React.useRef({});
   if (inputApiRef) {
@@ -15,12 +16,13 @@ export function useTreeViewApiInitialization(inputApiRef) {
   }
   return fallbackPublicApiRef.current;
 }
+let globalId = 0;
 export const useTreeView = ({
   plugins: inPlugins,
   rootRef,
   props
 }) => {
-  const plugins = [...TREE_VIEW_CORE_PLUGINS, ...inPlugins];
+  const plugins = React.useMemo(() => [...TREE_VIEW_CORE_PLUGINS, ...inPlugins], [inPlugins]);
   const {
     pluginParams,
     forwardedProps,
@@ -38,22 +40,30 @@ export const useTreeView = ({
   const publicAPI = useTreeViewApiInitialization(apiRef);
   const innerRootRef = React.useRef(null);
   const handleRootRef = useForkRef(innerRootRef, rootRef);
-  const contextValue = useTreeViewBuildContext({
-    plugins,
-    instance,
-    publicAPI,
-    rootRef: innerRootRef
-  });
-  const [state, setState] = React.useState(() => {
-    const temp = {};
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    globalId += 1;
+    const initialState = {
+      cacheKey: {
+        id: globalId
+      }
+    };
     plugins.forEach(plugin => {
       if (plugin.getInitialState) {
-        Object.assign(temp, plugin.getInitialState(pluginParams));
+        Object.assign(initialState, plugin.getInitialState(pluginParams));
       }
     });
-    return temp;
+    storeRef.current = new TreeViewStore(initialState);
+  }
+  const baseContextValue = useTreeViewBuildContext({
+    plugins,
+    instance,
+    publicAPI,
+    store: storeRef.current,
+    rootRef: innerRootRef
   });
   const rootPropsGetters = [];
+  const pluginContextValues = [];
   const runPlugin = plugin => {
     const pluginResponse = plugin({
       instance,
@@ -61,11 +71,10 @@ export const useTreeView = ({
       slots,
       slotProps,
       experimentalFeatures,
-      state,
-      setState,
       rootRef: innerRootRef,
       models,
-      plugins
+      plugins,
+      store: storeRef.current
     });
     if (pluginResponse.getRootProps) {
       rootPropsGetters.push(pluginResponse.getRootProps);
@@ -77,7 +86,7 @@ export const useTreeView = ({
       Object.assign(instance, pluginResponse.instance);
     }
     if (pluginResponse.contextValue) {
-      Object.assign(contextValue, pluginResponse.contextValue);
+      pluginContextValues.push(pluginResponse.contextValue);
     }
   };
   plugins.forEach(runPlugin);
@@ -92,10 +101,14 @@ export const useTreeView = ({
     });
     return rootProps;
   };
+  const contextValue = React.useMemo(() => {
+    const copiedBaseContextValue = _extends({}, baseContextValue);
+    return Object.assign(copiedBaseContextValue, ...pluginContextValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [baseContextValue, ...pluginContextValues]);
   return {
     getRootProps,
     rootRef: handleRootRef,
-    contextValue,
-    instance
+    contextValue
   };
 };

package/internals/useTreeView/useTreeView.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils';
 import type { TreeViewContextValue } from '../TreeViewProvider';
-import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty, TreeViewInstance, TreeViewPublicAPI, TreeViewExperimentalFeatures } from '../models';
+import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures } from '../models';
 export interface UseTreeViewParameters<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> {
     plugins: ConvertSignaturesIntoPlugins<TSignatures>;
     rootRef?: React.Ref<HTMLUListElement> | undefined;
@@ -20,5 +20,4 @@ export interface UseTreeViewReturnValue<TSignatures extends readonly TreeViewAny
     getRootProps: <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseTreeViewRootSlotProps;
     rootRef: React.RefCallback<HTMLUListElement> | null;
     contextValue: TreeViewContextValue<TSignatures>;
-    instance: TreeViewInstance<TSignatures>;
 }

package/internals/useTreeView/useTreeViewBuildContext.d.ts

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { TreeViewContextValue } from '../TreeViewProvider';
 import { ConvertSignaturesIntoPlugins, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewPublicAPI } from '../models';
 import { TreeViewCorePluginSignatures } from '../corePlugins';
-export declare const useTreeViewBuildContext: <TSignatures extends readonly TreeViewAnyPluginSignature[]>({ plugins, instance, publicAPI, rootRef, }: {
+import { TreeViewStore } from '../utils/TreeViewStore';
+export declare const useTreeViewBuildContext: <TSignatures extends readonly TreeViewAnyPluginSignature[]>({ plugins, instance, publicAPI, store, rootRef, }: {
     plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
     instance: TreeViewInstance<TSignatures>;
     publicAPI: TreeViewPublicAPI<TSignatures>;
+    store: TreeViewStore<TSignatures>;
     rootRef: React.RefObject<HTMLUListElement>;
 }) => TreeViewContextValue<TSignatures>;

package/internals/useTreeView/useTreeViewBuildContext.js

@@ -1,10 +1,12 @@
+import * as React from 'react';
 export const useTreeViewBuildContext = ({
   plugins,
   instance,
   publicAPI,
+  store,
   rootRef
 }) => {
-  const runItemPlugins = itemPluginProps => {
+  const runItemPlugins = React.useCallback(itemPluginProps => {
     let finalRootRef = null;
     let finalContentRef = null;
     const pluginPropEnhancers = [];
@@ -49,10 +51,11 @@ export const useTreeViewBuildContext = ({
       rootRef: finalRootRef,
       propsEnhancers
     };
-  };
-  const wrapItem = ({
+  }, [plugins]);
+  const wrapItem = React.useCallback(({
     itemId,
-    children
+    children,
+    idAttribute
   }) => {
     let finalChildren = children;
     // The wrappers are reversed to ensure that the first wrapper is the outermost one.
@@ -60,15 +63,16 @@ export const useTreeViewBuildContext = ({
       const plugin = plugins[i];
       if (plugin.wrapItem) {
         finalChildren = plugin.wrapItem({
+          instance,
           itemId,
           children: finalChildren,
-          instance
+          idAttribute
         });
       }
     }
     return finalChildren;
-  };
-  const wrapRoot = ({
+  }, [plugins, instance]);
+  const wrapRoot = React.useCallback(({
     children
   }) => {
     let finalChildren = children;
@@ -77,19 +81,21 @@ export const useTreeViewBuildContext = ({
       const plugin = plugins[i];
       if (plugin.wrapRoot) {
         finalChildren = plugin.wrapRoot({
-          children: finalChildren,
-          instance
+          children: finalChildren
         });
       }
     }
     return finalChildren;
-  };
-  return {
-    runItemPlugins,
-    wrapItem,
-    wrapRoot,
-    instance,
-    rootRef,
-    publicAPI
-  };
+  }, [plugins]);
+  return React.useMemo(() => {
+    return {
+      runItemPlugins,
+      wrapItem,
+      wrapRoot,
+      instance,
+      publicAPI,
+      store,
+      rootRef
+    };
+  }, [runItemPlugins, wrapItem, wrapRoot, instance, publicAPI, store, rootRef]);
 };

package/internals/utils/TreeViewStore.d.ts

@@ -0,0 +1,12 @@
+import type { TreeViewAnyPluginSignature, TreeViewState } from '../models';
+type Listener<T> = (value: T) => void;
+export type StoreUpdater<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (prevState: TreeViewState<TSignatures>) => TreeViewState<TSignatures>;
+export declare class TreeViewStore<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+    value: TreeViewState<TSignatures>;
+    private listeners;
+    constructor(value: TreeViewState<TSignatures>);
+    subscribe: (fn: Listener<TreeViewState<TSignatures>>) => () => void;
+    getSnapshot: () => TreeViewState<TSignatures>;
+    update: (updater: StoreUpdater<TSignatures>) => void;
+}
+export {};

package/internals/utils/TreeViewStore.js

@@ -0,0 +1,24 @@
+export class TreeViewStore {
+  constructor(value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = updater => {
+      const newState = updater(this.value);
+      if (newState !== this.value) {
+        this.value = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.value = value;
+    this.listeners = new Set();
+  }
+}

package/internals/utils/selectors.d.ts

@@ -0,0 +1,9 @@
+import { CreateSelectorFunction } from 'reselect';
+import { TreeViewAnyPluginSignature, TreeViewState } from '../models';
+export type TreeViewRootSelector<TSignature extends TreeViewAnyPluginSignature> = <TSignatures extends [TSignature]>(state: TreeViewState<TSignatures>) => TSignature['state'][keyof TSignature['state']];
+export type TreeViewSelector<TState, TArgs, TResult> = (state: TState, args: TArgs) => TResult;
+/**
+ * Method wrapping reselect's createSelector to provide caching for tree view instances.
+ *
+ */
+export declare const createSelector: CreateSelectorFunction;

package/internals/utils/selectors.js

@@ -0,0 +1,37 @@
+import { lruMemoize, createSelectorCreator } from 'reselect';
+const reselectCreateSelector = createSelectorCreator({
+  memoize: lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+const cache = new WeakMap();
+/**
+ * Method wrapping reselect's createSelector to provide caching for tree view instances.
+ *
+ */
+export const createSelector = (...createSelectorArgs) => {
+  const selector = (state, selectorArgs) => {
+    const cacheKey = state.cacheKey;
+
+    // If there is no cache for the current tree view instance, create one.
+    let cacheForCurrentTreeViewInstance = cache.get(cacheKey);
+    if (!cacheForCurrentTreeViewInstance) {
+      cacheForCurrentTreeViewInstance = new Map();
+      cache.set(cacheKey, cacheForCurrentTreeViewInstance);
+    }
+
+    // If there is a cached selector, execute it.
+    const cachedSelector = cacheForCurrentTreeViewInstance.get(createSelectorArgs);
+    if (cachedSelector) {
+      return cachedSelector(state, selectorArgs);
+    }
+
+    // Otherwise, create a new selector and cache it and execute it.
+    const fn = reselectCreateSelector(...createSelectorArgs);
+    cacheForCurrentTreeViewInstance.set(createSelectorArgs, fn);
+    return fn(state, selectorArgs);
+  };
+  return selector;
+};

package/internals/utils/tree.d.ts

@@ -1,10 +1,10 @@
-import { TreeViewInstance } from '../models';
+import { TreeViewState } from '../models';
 import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
 import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
-export declare const getPreviousNavigableItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
-export declare const getNextNavigableItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemId: string) => string | null;
-export declare const getLastNavigableItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
-export declare const getFirstNavigableItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>) => string;
+export declare const getPreviousNavigableItem: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getNextNavigableItem: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getLastNavigableItem: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+export declare const getFirstNavigableItem: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
 /**
  * This is used to determine the start and end of a selection range so
  * we can get the items between the two border items.
@@ -19,9 +19,9 @@ export declare const getFirstNavigableItem: (instance: TreeViewInstance<[UseTree
  * Another way to put it is which item is shallower in a trémaux tree
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
  */
-export declare const findOrderInTremauxTree: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>, itemAId: string, itemBId: string) => string[];
-export declare const getNonDisabledItemsInRange: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemAId: string, itemBId: string) => string[];
-export declare const getAllNavigableItems: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>) => string[];
+export declare const findOrderInTremauxTree: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemAId: string, itemBId: string) => string[];
+export declare const getNonDisabledItemsInRange: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemAId: string, itemBId: string) => string[];
+export declare const getAllNavigableItems: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>) => string[];
 /**
  * Checks if the target is in a descendant of this item.
  * This can prevent from firing some logic on the ancestors on the interacted item when the event handler is on the root.

package/internals/utils/tree.js

@@ -1,7 +1,9 @@
-const getLastNavigableItemInArray = (instance, items) => {
+import { selectorIsItemExpandable, selectorIsItemExpanded } from "../plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorCanItemBeFocused, selectorIsItemDisabled, selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemParentId } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+const getLastNavigableItemInArray = (state, items) => {
   // Equivalent to Array.prototype.findLastIndex
   let itemIndex = items.length - 1;
-  while (itemIndex >= 0 && !instance.isItemNavigable(items[itemIndex])) {
+  while (itemIndex >= 0 && !selectorCanItemBeFocused(state, items[itemIndex])) {
     itemIndex -= 1;
   }
   if (itemIndex === -1) {
@@ -9,10 +11,13 @@ const getLastNavigableItemInArray = (instance, items) => {
   }
   return items[itemIndex];
 };
-export const getPreviousNavigableItem = (instance, itemId) => {
-  const itemMeta = instance.getItemMeta(itemId);
-  const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-  const itemIndex = instance.getItemIndex(itemId);
+export const getPreviousNavigableItem = (state, itemId) => {
+  const itemMeta = selectorItemMeta(state, itemId);
+  if (!itemMeta) {
+    return null;
+  }
+  const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
+  const itemIndex = selectorItemIndex(state, itemId);
 
   // TODO: What should we do if the parent is not navigable?
   if (itemIndex === 0) {
@@ -21,7 +26,7 @@ export const getPreviousNavigableItem = (instance, itemId) => {
 
   // Finds the previous navigable sibling.
   let previousNavigableSiblingIndex = itemIndex - 1;
-  while (!instance.isItemNavigable(siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
+  while (!selectorCanItemBeFocused(state, siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
     previousNavigableSiblingIndex -= 1;
   }
   if (previousNavigableSiblingIndex === -1) {
@@ -31,51 +36,51 @@ export const getPreviousNavigableItem = (instance, itemId) => {
     }
 
     // Otherwise, we can try to go up a level and find the previous navigable item.
-    return getPreviousNavigableItem(instance, itemMeta.parentId);
+    return getPreviousNavigableItem(state, itemMeta.parentId);
   }
 
   // Finds the last navigable ancestor of the previous navigable sibling.
   let currentItemId = siblings[previousNavigableSiblingIndex];
-  let lastNavigableChild = getLastNavigableItemInArray(instance, instance.getItemOrderedChildrenIds(currentItemId));
-  while (instance.isItemExpanded(currentItemId) && lastNavigableChild != null) {
+  let lastNavigableChild = getLastNavigableItemInArray(state, selectorItemOrderedChildrenIds(state, currentItemId));
+  while (selectorIsItemExpanded(state, currentItemId) && lastNavigableChild != null) {
     currentItemId = lastNavigableChild;
-    lastNavigableChild = instance.getItemOrderedChildrenIds(currentItemId).find(instance.isItemNavigable);
+    lastNavigableChild = selectorItemOrderedChildrenIds(state, currentItemId).find(childId => selectorCanItemBeFocused(state, childId));
   }
   return currentItemId;
 };
-export const getNextNavigableItem = (instance, itemId) => {
+export const getNextNavigableItem = (state, itemId) => {
   // If the item is expanded and has some navigable children, return the first of them.
-  if (instance.isItemExpanded(itemId)) {
-    const firstNavigableChild = instance.getItemOrderedChildrenIds(itemId).find(instance.isItemNavigable);
+  if (selectorIsItemExpanded(state, itemId)) {
+    const firstNavigableChild = selectorItemOrderedChildrenIds(state, itemId).find(childId => selectorCanItemBeFocused(state, childId));
     if (firstNavigableChild != null) {
       return firstNavigableChild;
     }
   }
-  let itemMeta = instance.getItemMeta(itemId);
+  let itemMeta = selectorItemMeta(state, itemId);
   while (itemMeta != null) {
     // Try to find the first navigable sibling after the current item.
-    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-    const currentItemIndex = instance.getItemIndex(itemMeta.id);
+    const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
+    const currentItemIndex = selectorItemIndex(state, itemMeta.id);
     if (currentItemIndex < siblings.length - 1) {
       let nextItemIndex = currentItemIndex + 1;
-      while (!instance.isItemNavigable(siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
+      while (!selectorCanItemBeFocused(state, siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
         nextItemIndex += 1;
       }
-      if (instance.isItemNavigable(siblings[nextItemIndex])) {
+      if (selectorCanItemBeFocused(state, siblings[nextItemIndex])) {
         return siblings[nextItemIndex];
       }
     }
 
     // If the sibling does not exist, go up a level to the parent and try again.
-    itemMeta = instance.getItemMeta(itemMeta.parentId);
+    itemMeta = selectorItemMeta(state, itemMeta.parentId);
   }
   return null;
 };
-export const getLastNavigableItem = instance => {
+export const getLastNavigableItem = state => {
   let itemId = null;
-  while (itemId == null || instance.isItemExpanded(itemId)) {
-    const children = instance.getItemOrderedChildrenIds(itemId);
-    const lastNavigableChild = getLastNavigableItemInArray(instance, children);
+  while (itemId == null || selectorIsItemExpanded(state, itemId)) {
+    const children = selectorItemOrderedChildrenIds(state, itemId);
+    const lastNavigableChild = getLastNavigableItemInArray(state, children);
 
     // The item has no navigable children.
     if (lastNavigableChild == null) {
@@ -85,7 +90,7 @@ export const getLastNavigableItem = instance => {
   }
   return itemId;
 };
-export const getFirstNavigableItem = instance => instance.getItemOrderedChildrenIds(null).find(instance.isItemNavigable);
+export const getFirstNavigableItem = state => selectorItemOrderedChildrenIds(state, null).find(itemId => selectorCanItemBeFocused(state, itemId));
 
 /**
  * This is used to determine the start and end of a selection range so
@@ -101,12 +106,15 @@ export const getFirstNavigableItem = instance => instance.getItemOrderedChildren
  * Another way to put it is which item is shallower in a trémaux tree
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
  */
-export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
+export const findOrderInTremauxTree = (state, itemAId, itemBId) => {
   if (itemAId === itemBId) {
     return [itemAId, itemBId];
   }
-  const itemMetaA = instance.getItemMeta(itemAId);
-  const itemMetaB = instance.getItemMeta(itemBId);
+  const itemMetaA = selectorItemMeta(state, itemAId);
+  const itemMetaB = selectorItemMeta(state, itemBId);
+  if (!itemMetaA || !itemMetaB) {
+    return [itemAId, itemBId];
+  }
   if (itemMetaA.parentId === itemMetaB.id || itemMetaB.parentId === itemMetaA.id) {
     return itemMetaB.parentId === itemMetaA.id ? [itemMetaA.id, itemMetaB.id] : [itemMetaB.id, itemMetaA.id];
   }
@@ -124,7 +132,7 @@ export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
       aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
       continueA = aAncestor !== null;
       if (!aAncestorIsCommon && continueA) {
-        aAncestor = instance.getItemMeta(aAncestor).parentId;
+        aAncestor = selectorItemParentId(state, aAncestor);
       }
     }
     if (continueB && !aAncestorIsCommon) {
@@ -132,53 +140,53 @@ export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
       bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
       continueB = bAncestor !== null;
       if (!bAncestorIsCommon && continueB) {
-        bAncestor = instance.getItemMeta(bAncestor).parentId;
+        bAncestor = selectorItemParentId(state, bAncestor);
       }
     }
   }
   const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
-  const ancestorFamily = instance.getItemOrderedChildrenIds(commonAncestor);
+  const ancestorFamily = selectorItemOrderedChildrenIds(state, commonAncestor);
   const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
   const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
   return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
 };
-export const getNonDisabledItemsInRange = (instance, itemAId, itemBId) => {
+export const getNonDisabledItemsInRange = (state, itemAId, itemBId) => {
   const getNextItem = itemId => {
     // If the item is expanded and has some children, return the first of them.
-    if (instance.isItemExpandable(itemId) && instance.isItemExpanded(itemId)) {
-      return instance.getItemOrderedChildrenIds(itemId)[0];
+    if (selectorIsItemExpandable(state, itemId) && selectorIsItemExpanded(state, itemId)) {
+      return selectorItemOrderedChildrenIds(state, itemId)[0];
     }
-    let itemMeta = instance.getItemMeta(itemId);
+    let itemMeta = selectorItemMeta(state, itemId);
     while (itemMeta != null) {
       // Try to find the first navigable sibling after the current item.
-      const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-      const currentItemIndex = instance.getItemIndex(itemMeta.id);
+      const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
+      const currentItemIndex = selectorItemIndex(state, itemMeta.id);
       if (currentItemIndex < siblings.length - 1) {
         return siblings[currentItemIndex + 1];
       }
 
       // If the item is the last of its siblings, go up a level to the parent and try again.
-      itemMeta = instance.getItemMeta(itemMeta.parentId);
+      itemMeta = itemMeta.parentId ? selectorItemMeta(state, itemMeta.parentId) : null;
     }
     throw new Error('Invalid range');
   };
-  const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
+  const [first, last] = findOrderInTremauxTree(state, itemAId, itemBId);
   const items = [first];
   let current = first;
   while (current !== last) {
     current = getNextItem(current);
-    if (!instance.isItemDisabled(current)) {
+    if (!selectorIsItemDisabled(state, current)) {
       items.push(current);
     }
   }
   return items;
 };
-export const getAllNavigableItems = instance => {
-  let item = getFirstNavigableItem(instance);
+export const getAllNavigableItems = state => {
+  let item = getFirstNavigableItem(state);
   const navigableItems = [];
   while (item != null) {
     navigableItems.push(item);
-    item = getNextNavigableItem(instance, item);
+    item = getNextNavigableItem(state, item);
   }
   return navigableItems;
 };