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

package/modern/TreeItem/index.js

@@ -1,4 +1,2 @@
-export { TreeItem } from "./TreeItem.js";
-export * from "./treeItemClasses.js";
-export * from "./useTreeItemState.js";
-export { TreeItemContent } from "./TreeItemContent.js";
+export { TreeItem, TreeItemRoot, TreeItemContent, TreeItemIconContainer, TreeItemGroupTransition, TreeItemCheckbox, TreeItemLabel } from "./TreeItem.js";
+export * from "./treeItemClasses.js";

package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js}

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -5,8 +7,8 @@ import { alpha } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
 import { styled } from "../internals/zero-styled/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const TreeItem2DragAndDropOverlayRoot = styled('div', {
-  name: 'MuiTreeItem2DragAndDropOverlay',
+const TreeItemDragAndDropOverlayRoot = styled('div', {
+  name: 'MuiTreeItemDragAndDropOverlay',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'action'
@@ -55,13 +57,13 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     }
   }]
 }));
-function TreeItem2DragAndDropOverlay(props) {
+function TreeItemDragAndDropOverlay(props) {
   if (props.action == null) {
     return null;
   }
-  return /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlayRoot, _extends({}, props));
+  return /*#__PURE__*/_jsx(TreeItemDragAndDropOverlayRoot, _extends({}, props));
 }
-process.env.NODE_ENV !== "production" ? TreeItem2DragAndDropOverlay.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemDragAndDropOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -69,4 +71,4 @@ process.env.NODE_ENV !== "production" ? TreeItem2DragAndDropOverlay.propTypes =
   action: PropTypes.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
   style: PropTypes.object
 } : void 0;
-export { TreeItem2DragAndDropOverlay };
+export { TreeItemDragAndDropOverlay };

package/modern/TreeItemDragAndDropOverlay/index.js

@@ -0,0 +1 @@
+export { TreeItemDragAndDropOverlay } from "./TreeItemDragAndDropOverlay.js";

package/modern/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js}

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -6,7 +8,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-function TreeItem2Icon(props) {
+function TreeItemIcon(props) {
   const {
     slots,
     slotProps,
@@ -42,7 +44,7 @@ function TreeItem2Icon(props) {
   }
   return /*#__PURE__*/_jsx(Icon, _extends({}, iconProps));
 }
-process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemIcon.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -67,4 +69,4 @@ process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
     selected: PropTypes.bool.isRequired
   }).isRequired
 } : void 0;
-export { TreeItem2Icon };
+export { TreeItemIcon };

package/modern/TreeItemIcon/index.js

@@ -0,0 +1 @@
+export { TreeItemIcon } from "./TreeItemIcon.js";

package/modern/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js}

@@ -4,8 +4,8 @@ import { styled } from "../internals/zero-styled/index.js";
 /**
  * @ignore - internal component.
  */
-const TreeItem2LabelInput = styled('input', {
-  name: 'MuiTreeItem2',
+const TreeItemLabelInput = styled('input', {
+  name: 'MuiTreeItem',
   slot: 'LabelInput',
   overridesResolver: (props, styles) => styles.labelInput
 })(({
@@ -21,4 +21,4 @@ const TreeItem2LabelInput = styled('input', {
     outline: `1px solid ${theme.palette.primary.main}`
   }
 }));
-export { TreeItem2LabelInput };
+export { TreeItemLabelInput };

package/modern/TreeItemLabelInput/index.js

@@ -0,0 +1 @@
+export { TreeItemLabelInput } from "./TreeItemLabelInput.js";

package/modern/TreeItemProvider/TreeItemProvider.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
+import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+
+/**
+ * @ignore - internal component.
+ */
+function TreeItemProvider(props) {
+  const {
+    children,
+    itemId,
+    id
+  } = props;
+  const {
+    wrapItem,
+    instance,
+    store
+  } = useTreeViewContext();
+  const treeId = useSelector(store, selectorTreeViewId);
+  const idAttribute = generateTreeItemIdAttribute({
+    itemId,
+    treeId,
+    id
+  });
+  return wrapItem({
+    children,
+    itemId,
+    instance,
+    idAttribute
+  });
+}
+TreeItemProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  id: PropTypes.string,
+  itemId: PropTypes.string.isRequired
+};
+export { TreeItemProvider };

package/modern/TreeItemProvider/index.js

@@ -0,0 +1 @@
+export { TreeItemProvider } from "./TreeItemProvider.js";

package/modern/hooks/index.js

@@ -1,2 +1,3 @@
 export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
-export { useTreeItem2Utils } from "./useTreeItem2Utils/index.js";
+export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
+export { useTreeItemModel } from "./useTreeItemModel.js";

package/modern/hooks/useTreeItemModel.js

@@ -0,0 +1,11 @@
+'use client';
+
+import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorItemModel } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+export const useTreeItemModel = itemId => {
+  const {
+    store
+  } = useTreeViewContext();
+  return useSelector(store, selectorItemModel, itemId);
+};

package/modern/hooks/useTreeItemUtils/index.js

@@ -0,0 +1 @@
+export { useTreeItemUtils } from "./useTreeItemUtils.js";

package/{hooks/useTreeItem2Utils/useTreeItem2Utils.js → modern/hooks/useTreeItemUtils/useTreeItemUtils.js}

@@ -1,40 +1,59 @@
+'use client';
+
 import { useTreeViewContext } from "../../internals/TreeViewProvider/index.js";
 import { useTreeViewLabel } from "../../internals/plugins/useTreeViewLabel/index.js";
 import { hasPlugin } from "../../internals/utils/plugins.js";
+import { useSelector } from "../../internals/hooks/useSelector.js";
+import { selectorIsItemExpanded } from "../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorIsItemFocused } from "../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
+import { selectorIsItemDisabled } from "../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorIsItemSelected } from "../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { selectorIsItemBeingEdited, selectorIsItemEditable } from "../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
 
 /**
- * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
  */
 
 /**
- * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
 
-const isItemExpandable = reactChildren => {
+export const isItemExpandable = reactChildren => {
   if (Array.isArray(reactChildren)) {
     return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
   }
   return Boolean(reactChildren);
 };
-export const useTreeItem2Utils = ({
+export const useTreeItemUtils = ({
   itemId,
   children
 }) => {
   const {
     instance,
+    label,
+    store,
     selection: {
       multiSelect
     },
     publicAPI
   } = useTreeViewContext();
+  const isExpanded = useSelector(store, selectorIsItemExpanded, itemId);
+  const isFocused = useSelector(store, selectorIsItemFocused, itemId);
+  const isSelected = useSelector(store, selectorIsItemSelected, itemId);
+  const isDisabled = useSelector(store, selectorIsItemDisabled, itemId);
+  const isEditing = useSelector(store, state => label == null ? false : selectorIsItemBeingEdited(state, itemId));
+  const isEditable = useSelector(store, state => label == null ? false : selectorIsItemEditable(state, {
+    itemId,
+    isItemEditable: label.isItemEditable
+  }));
   const status = {
     expandable: isItemExpandable(children),
-    expanded: instance.isItemExpanded(itemId),
-    focused: instance.isItemFocused(itemId),
-    selected: instance.isItemSelected(itemId),
-    disabled: instance.isItemDisabled(itemId),
-    editing: instance?.isItemBeingEdited ? instance?.isItemBeingEdited(itemId) : false,
-    editable: instance.isItemEditable ? instance.isItemEditable(itemId) : false
+    expanded: isExpanded,
+    focused: isFocused,
+    selected: isSelected,
+    disabled: isDisabled,
+    editing: isEditing,
+    editable: isEditable
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -46,7 +65,7 @@ export const useTreeItem2Utils = ({
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
-    if (status.expandable && !(multiple && instance.isItemExpanded(itemId))) {
+    if (status.expandable && !(multiple && selectorIsItemExpanded(store.value, itemId))) {
       instance.toggleItemExpansion(event, itemId);
     }
   };
@@ -93,15 +112,15 @@ export const useTreeItem2Utils = ({
     if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
-    if (instance.isItemEditable(itemId)) {
-      if (instance.isItemBeingEdited(itemId)) {
+    if (isEditable) {
+      if (isEditing) {
         instance.setEditedItemId(null);
       } else {
         instance.setEditedItemId(itemId);
       }
     }
   };
-  const handleSaveItemLabel = (event, label) => {
+  const handleSaveItemLabel = (event, newLabel) => {
     if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
@@ -109,9 +128,8 @@ export const useTreeItem2Utils = ({
     // As a side effect of `instance.focusItem` called here and in `handleCancelItemLabelEditing` the `labelInput` is blurred
     // The `onBlur` event is triggered, which calls `handleSaveItemLabel` again.
     // To avoid creating an unwanted behavior we need to check if the item is being edited before calling `updateItemLabel`
-    // using `instance.isItemBeingEditedRef` instead of `instance.isItemBeingEdited` since the state is not yet updated in this point
-    if (instance.isItemBeingEditedRef(itemId)) {
-      instance.updateItemLabel(itemId, label);
+    if (selectorIsItemBeingEdited(store.value, itemId)) {
+      instance.updateItemLabel(itemId, newLabel);
       toggleItemEditing();
       instance.focusItem(event, itemId);
     }
@@ -120,7 +138,7 @@ export const useTreeItem2Utils = ({
     if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
-    if (instance.isItemBeingEditedRef(itemId)) {
+    if (selectorIsItemBeingEdited(store.value, itemId)) {
       toggleItemEditing();
       instance.focusItem(event, itemId);
     }

package/modern/index.js

@@ -1,23 +1,21 @@
 /**
- * @mui/x-tree-view v7.22.1
+ * @mui/x-tree-view v8.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 // Tree View
-export * from "./TreeView/index.js";
 export * from "./SimpleTreeView/index.js";
 export * from "./RichTreeView/index.js";
 
 // Tree Item
 export * from "./TreeItem/index.js";
-export * from "./TreeItem2/index.js";
-export * from "./useTreeItem2/index.js";
-export * from "./TreeItem2Icon/index.js";
-export * from "./TreeItem2Provider/index.js";
-export * from "./TreeItem2DragAndDropOverlay/index.js";
-export * from "./TreeItem2LabelInput/index.js";
+export * from "./useTreeItem/index.js";
+export * from "./TreeItemIcon/index.js";
+export * from "./TreeItemProvider/index.js";
+export * from "./TreeItemDragAndDropOverlay/index.js";
+export * from "./TreeItemLabelInput/index.js";
 export { unstable_resetCleanupTracking } from "./internals/hooks/useInstanceEventHandler.js";
 export * from "./models/index.js";
 export * from "./icons/index.js";

package/modern/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from "./useTreeViewContext.js";
 import { escapeOperandAttributeSelector } from "../utils/utils.js";
-import { generateTreeItemIdAttribute } from "../corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { selectorItemOrderedChildrenIds } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -11,11 +11,12 @@ if (process.env.NODE_ENV !== 'production') {
 export function TreeViewChildrenItemProvider(props) {
   const {
     children,
-    itemId = null
+    itemId = null,
+    idAttribute
   } = props;
   const {
     instance,
-    treeId,
+    store,
     rootRef
   } = useTreeViewContext();
   const childrenIdAttrToIdRef = React.useRef(new Map());
@@ -23,25 +24,8 @@ export function TreeViewChildrenItemProvider(props) {
     if (!rootRef.current) {
       return;
     }
-    let idAttr = null;
-    if (itemId == null) {
-      idAttr = rootRef.current.id;
-    } else {
-      // Undefined during 1st render
-      const itemMeta = instance.getItemMeta(itemId);
-      if (itemMeta !== undefined) {
-        idAttr = generateTreeItemIdAttribute({
-          itemId,
-          treeId,
-          id: itemMeta.idAttribute
-        });
-      }
-    }
-    if (idAttr == null) {
-      return;
-    }
-    const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
-    const escapedIdAttr = escapeOperandAttributeSelector(idAttr);
+    const previousChildrenIds = selectorItemOrderedChildrenIds(store.value, itemId ?? null) ?? [];
+    const escapedIdAttr = escapeOperandAttributeSelector(idAttribute ?? rootRef.current.id);
     const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${escapedIdAttr}"] `}[role="treeitem"]:not(*[id="${escapedIdAttr}"] [role="treeitem"] [role="treeitem"])`);
     const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
     const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);

package/modern/internals/TreeViewProvider/TreeViewProvider.js

@@ -14,8 +14,7 @@ export function TreeViewProvider(props) {
   return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: value,
     children: value.wrapRoot({
-      children,
-      instance: value.instance
+      children
     })
   });
 }

package/modern/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/modern/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/modern/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/modern/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/modern/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";