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

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -9,46 +9,56 @@ exports.useTreeViewFocus = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _useInstanceEventHandler = require("../../hooks/useInstanceEventHandler");
-var _utils = require("../../utils/utils");
 var _tree = require("../../utils/tree");
 var _useTreeViewSelection = require("../useTreeViewSelection/useTreeViewSelection.utils");
-const useDefaultFocusableItemId = (instance, selectedItems) => {
-  let tabbableItemId = (0, _useTreeViewSelection.convertSelectedItemsToArray)(selectedItems).find(itemId => {
-    if (!instance.isItemNavigable(itemId)) {
-      return false;
-    }
-    const itemMeta = instance.getItemMeta(itemId);
-    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
-  });
-  if (tabbableItemId == null) {
-    tabbableItemId = (0, _tree.getFirstNavigableItem)(instance);
-  }
-  return tabbableItemId;
-};
+var _useTreeViewFocus = require("./useTreeViewFocus.selectors");
+var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 const useTreeViewFocus = ({
   instance,
   params,
-  state,
-  setState,
-  models,
-  rootRef
+  store,
+  models
 }) => {
-  const defaultFocusableItemId = useDefaultFocusableItemId(instance, models.selectedItems.value);
-  const setFocusedItemId = (0, _useEventCallback.default)(itemId => {
-    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
-    if (state.focusedItemId !== cleanItemId) {
-      setState(prevState => (0, _extends2.default)({}, prevState, {
-        focusedItemId: cleanItemId
-      }));
+  React.useEffect(() => {
+    let defaultFocusableItemId = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value).find(itemId => {
+      if (!(0, _useTreeViewItems.selectorCanItemBeFocused)(store.value, itemId)) {
+        return false;
+      }
+      const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, itemId);
+      return itemMeta && (itemMeta.parentId == null || (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemMeta.parentId));
+    });
+    if (defaultFocusableItemId == null) {
+      defaultFocusableItemId = (0, _tree.getFirstNavigableItem)(store.value) ?? null;
     }
+    store.update(prevState => {
+      if (defaultFocusableItemId === prevState.focus.defaultFocusableItemId) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        focus: (0, _extends2.default)({}, prevState.focus, {
+          defaultFocusableItemId
+        })
+      });
+    });
+  }, [store, models.selectedItems.value]);
+  const setFocusedItemId = (0, _useEventCallback.default)(itemId => {
+    store.update(prevState => {
+      const focusedItemId = (0, _useTreeViewFocus.selectorFocusedItemId)(prevState);
+      if (focusedItemId === itemId) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        focus: (0, _extends2.default)({}, prevState.focus, {
+          focusedItemId: itemId
+        })
+      });
+    });
   });
-  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains((0, _utils.getActiveElement)((0, _ownerDocument.default)(rootRef.current))), [rootRef]);
-  const isItemFocused = React.useCallback(itemId => state.focusedItemId === itemId && isTreeViewFocused(), [state.focusedItemId, isTreeViewFocused]);
   const isItemVisible = itemId => {
-    const itemMeta = instance.getItemMeta(itemId);
-    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
+    const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, itemId);
+    return itemMeta && (itemMeta.parentId == null || (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
     const itemElement = instance.getItemDOMElement(itemId);
@@ -67,23 +77,25 @@ const useTreeViewFocus = ({
     }
   });
   const removeFocusedItem = (0, _useEventCallback.default)(() => {
-    if (state.focusedItemId == null) {
+    const focusedItemId = (0, _useTreeViewFocus.selectorFocusedItemId)(store.value);
+    if (focusedItemId == null) {
       return;
     }
-    const itemMeta = instance.getItemMeta(state.focusedItemId);
+    const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, focusedItemId);
     if (itemMeta) {
-      const itemElement = instance.getItemDOMElement(state.focusedItemId);
+      const itemElement = instance.getItemDOMElement(focusedItemId);
       if (itemElement) {
         itemElement.blur();
       }
     }
     setFocusedItemId(null);
   });
-  const canItemBeTabbed = itemId => itemId === defaultFocusableItemId;
   (0, _useInstanceEventHandler.useInstanceEventHandler)(instance, 'removeItem', ({
     id
   }) => {
-    if (state.focusedItemId === id) {
+    const focusedItemId = (0, _useTreeViewFocus.selectorFocusedItemId)(store.value);
+    const defaultFocusableItemId = (0, _useTreeViewFocus.selectorDefaultFocusableItemId)(store.value);
+    if (focusedItemId === id && defaultFocusableItemId != null) {
       innerFocusItem(null, defaultFocusableItemId);
     }
   });
@@ -94,20 +106,27 @@ const useTreeViewFocus = ({
     }
 
     // if the event bubbled (which is React specific) we don't want to steal focus
-    if (event.target === event.currentTarget) {
+    const defaultFocusableItemId = (0, _useTreeViewFocus.selectorDefaultFocusableItemId)(store.value);
+    if (event.target === event.currentTarget && defaultFocusableItemId != null) {
       innerFocusItem(event, defaultFocusableItemId);
     }
   };
+  const createRootHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    setFocusedItemId(null);
+  };
   return {
     getRootProps: otherHandlers => ({
-      onFocus: createRootHandleFocus(otherHandlers)
+      onFocus: createRootHandleFocus(otherHandlers),
+      onBlur: createRootHandleBlur(otherHandlers)
     }),
     publicAPI: {
       focusItem
     },
     instance: {
-      isItemFocused,
-      canItemBeTabbed,
       focusItem,
       removeFocusedItem
     }
@@ -115,7 +134,10 @@ const useTreeViewFocus = ({
 };
 exports.useTreeViewFocus = useTreeViewFocus;
 useTreeViewFocus.getInitialState = () => ({
-  focusedItemId: null
+  focus: {
+    focusedItemId: null,
+    defaultFocusableItemId: null
+  }
 });
 useTreeViewFocus.params = {
   onItemFocus: true

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorIsItemTheDefaultFocusableItem = exports.selectorIsItemFocused = exports.selectorFocusedItemId = exports.selectorDefaultFocusableItemId = void 0;
+var _selectors = require("../../utils/selectors");
+const selectorTreeViewFocusState = state => state.focus;
+
+/**
+ * Get the item that should be sequentially focusable (usually with the Tab key).
+ * At any point in time, there is a single item that can be sequentially focused in the Tree View.
+ * This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that should be sequentially focusable.
+ */
+const selectorDefaultFocusableItemId = exports.selectorDefaultFocusableItemId = (0, _selectors.createSelector)(selectorTreeViewFocusState, focus => focus.defaultFocusableItemId);
+
+/**
+ * Check if an item is the default focusable item.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is the default focusable item, `false` otherwise.
+ */
+const selectorIsItemTheDefaultFocusableItem = exports.selectorIsItemTheDefaultFocusableItem = (0, _selectors.createSelector)([selectorDefaultFocusableItemId, (_, itemId) => itemId], (defaultFocusableItemId, itemId) => defaultFocusableItemId === itemId);
+
+/**
+ * Get the id of the item that is currently focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that is currently focused.
+ */
+const selectorFocusedItemId = exports.selectorFocusedItemId = (0, _selectors.createSelector)(selectorTreeViewFocusState, focus => focus.focusedItemId);
+
+/**
+ * Check if an item is focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is focused, `false` otherwise.
+ */
+const selectorIsItemFocused = exports.selectorIsItemFocused = (0, _selectors.createSelector)([selectorFocusedItemId, (_, itemId) => itemId], (focusedItemId, itemId) => focusedItemId === itemId);

package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js

@@ -1,28 +1,31 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewIcons = void 0;
+var React = _interopRequireWildcard(require("react"));
 const useTreeViewIcons = ({
   slots,
   slotProps
 }) => {
-  return {
-    contextValue: {
-      icons: {
-        slots: {
-          collapseIcon: slots.collapseIcon,
-          expandIcon: slots.expandIcon,
-          endIcon: slots.endIcon
-        },
-        slotProps: {
-          collapseIcon: slotProps.collapseIcon,
-          expandIcon: slotProps.expandIcon,
-          endIcon: slotProps.endIcon
-        }
+  const pluginContextValue = React.useMemo(() => ({
+    icons: {
+      slots: {
+        collapseIcon: slots.collapseIcon,
+        expandIcon: slots.expandIcon,
+        endIcon: slots.endIcon
+      },
+      slotProps: {
+        collapseIcon: slotProps.collapseIcon,
+        expandIcon: slotProps.expandIcon,
+        endIcon: slotProps.endIcon
       }
     }
+  }), [slots.collapseIcon, slots.expandIcon, slots.endIcon, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon]);
+  return {
+    contextValue: pluginContextValue
   };
 };
 exports.useTreeViewIcons = useTreeViewIcons;

package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -1,29 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
-var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useTreeViewItems2 = require("./useTreeViewItems.selectors");
+var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.selectors");
+var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children"];
 const updateItemsState = ({
+  disabledItemsFocusable,
   items,
   isItemDisabled,
   getItemLabel,
   getItemId
 }) => {
-  const itemMetaMap = {};
-  const itemMap = {};
-  const itemOrderedChildrenIds = {
+  const itemMetaLookup = {};
+  const itemModelLookup = {};
+  const itemOrderedChildrenIdsLookup = {
     [_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID]: []
   };
   const processItem = (item, depth, parentId) => {
@@ -31,14 +33,14 @@ const updateItemsState = ({
     if (id == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    if (itemMetaMap[id] != null) {
+    if (itemMetaLookup[id] != null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
     }
     const label = getItemLabel ? getItemLabel(item) : item.label;
     if (label == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    itemMetaMap[id] = {
+    itemMetaLookup[id] = {
       id,
       label,
       parentId,
@@ -47,88 +49,58 @@ const updateItemsState = ({
       disabled: isItemDisabled ? isItemDisabled(item) : false,
       depth
     };
-    itemMap[id] = item;
+    itemModelLookup[id] = item;
     const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
-    if (!itemOrderedChildrenIds[parentIdWithDefault]) {
-      itemOrderedChildrenIds[parentIdWithDefault] = [];
+    if (!itemOrderedChildrenIdsLookup[parentIdWithDefault]) {
+      itemOrderedChildrenIdsLookup[parentIdWithDefault] = [];
     }
-    itemOrderedChildrenIds[parentIdWithDefault].push(id);
+    itemOrderedChildrenIdsLookup[parentIdWithDefault].push(id);
     item.children?.forEach(child => processItem(child, depth + 1, id));
   };
   items.forEach(item => processItem(item, 0, null));
-  const itemChildrenIndexes = {};
-  Object.keys(itemOrderedChildrenIds).forEach(parentId => {
-    itemChildrenIndexes[parentId] = (0, _useTreeViewItems.buildSiblingIndexes)(itemOrderedChildrenIds[parentId]);
+  const itemChildrenIndexesLookup = {};
+  Object.keys(itemOrderedChildrenIdsLookup).forEach(parentId => {
+    itemChildrenIndexesLookup[parentId] = (0, _useTreeViewItems.buildSiblingIndexes)(itemOrderedChildrenIdsLookup[parentId]);
   });
   return {
-    itemMetaMap,
-    itemMap,
-    itemOrderedChildrenIds,
-    itemChildrenIndexes
+    disabledItemsFocusable,
+    itemMetaLookup,
+    itemModelLookup,
+    itemOrderedChildrenIdsLookup,
+    itemChildrenIndexesLookup
   };
 };
 const useTreeViewItems = ({
   instance,
   params,
-  state,
-  setState
+  store
 }) => {
-  const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
-  const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
+  const getItem = React.useCallback(itemId => (0, _useTreeViewItems2.selectorItemModel)(store.value, itemId), [store]);
   const getItemTree = React.useCallback(() => {
-    const getItemFromItemId = id => {
-      const _state$items$itemMap$ = state.items.itemMap[id],
-        item = (0, _objectWithoutPropertiesLoose2.default)(_state$items$itemMap$, _excluded);
-      const newChildren = state.items.itemOrderedChildrenIds[id];
-      if (newChildren) {
+    const getItemFromItemId = itemId => {
+      const item = (0, _useTreeViewItems2.selectorItemModel)(store.value, itemId);
+      const newChildren = (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, itemId);
+      if (newChildren.length > 0) {
         item.children = newChildren.map(getItemFromItemId);
+      } else {
+        delete item.children;
       }
       return item;
     };
-    return state.items.itemOrderedChildrenIds[_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID].map(getItemFromItemId);
-  }, [state.items.itemMap, state.items.itemOrderedChildrenIds]);
-  const isItemDisabled = React.useCallback(itemId => {
-    if (itemId == null) {
-      return false;
-    }
-    let itemMeta = instance.getItemMeta(itemId);
-
-    // This can be called before the item has been added to the item map.
-    if (!itemMeta) {
-      return false;
-    }
-    if (itemMeta.disabled) {
-      return true;
-    }
-    while (itemMeta.parentId != null) {
-      itemMeta = instance.getItemMeta(itemMeta.parentId);
-      if (itemMeta.disabled) {
-        return true;
-      }
-    }
-    return false;
-  }, [instance]);
-  const getItemIndex = React.useCallback(itemId => {
-    const parentId = instance.getItemMeta(itemId).parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
-    return state.items.itemChildrenIndexes[parentId][itemId];
-  }, [instance, state.items.itemChildrenIndexes]);
-  const getItemOrderedChildrenIds = React.useCallback(itemId => state.items.itemOrderedChildrenIds[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? [], [state.items.itemOrderedChildrenIds]);
+    return (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, null).map(getItemFromItemId);
+  }, [store]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, itemId), [store]);
   const getItemDOMElement = itemId => {
-    const itemMeta = instance.getItemMeta(itemId);
+    const itemMeta = (0, _useTreeViewItems2.selectorItemMeta)(store.value, itemId);
     if (itemMeta == null) {
       return null;
     }
-    return document.getElementById((0, _useTreeViewId.generateTreeItemIdAttribute)({
-      treeId: state.id.treeId,
+    const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
+      treeId: (0, _useTreeViewId.selectorTreeViewId)(store.value),
       itemId,
       id: itemMeta.idAttribute
-    }));
-  };
-  const isItemNavigable = itemId => {
-    if (params.disabledItemsFocusable) {
-      return true;
-    }
-    return !instance.isItemDisabled(itemId);
+    });
+    return document.getElementById(idAttribute);
   };
   const areItemUpdatesPreventedRef = React.useRef(false);
   const preventItemUpdates = React.useCallback(() => {
@@ -139,15 +111,16 @@ const useTreeViewItems = ({
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
-    setState(prevState => {
+    store.update(prevState => {
       const newState = updateItemsState({
+        disabledItemsFocusable: params.disabledItemsFocusable,
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.items.itemMetaMap).forEach(item => {
-        if (!newState.itemMetaMap[item.id]) {
+      Object.values(prevState.items.itemMetaLookup).forEach(item => {
+        if (!newState.itemMetaLookup[item.id]) {
           (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
             id: item.id
           });
@@ -157,19 +130,19 @@ const useTreeViewItems = ({
         items: newState
       });
     });
-  }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
-  const getItemsToRender = () => {
-    const getPropsFromItemId = id => {
-      const item = state.items.itemMetaMap[id];
-      return {
-        label: item.label,
-        itemId: item.id,
-        id: item.idAttribute,
-        children: state.items.itemOrderedChildrenIds[id]?.map(getPropsFromItemId)
-      };
-    };
-    return state.items.itemOrderedChildrenIds[_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID].map(getPropsFromItemId);
-  };
+  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
+
+  // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
+  const handleItemClick = (0, _useEventCallback.default)((event, itemId) => {
+    if (params.onItemClick) {
+      params.onItemClick(event, itemId);
+    }
+  });
+  const pluginContextValue = React.useMemo(() => ({
+    items: {
+      onItemClick: handleItemClick
+    }
+  }), [handleItemClick]);
   return {
     getRootProps: () => ({
       style: {
@@ -183,29 +156,17 @@ const useTreeViewItems = ({
       getItemOrderedChildrenIds
     },
     instance: {
-      getItemMeta,
-      getItem,
-      getItemTree,
-      getItemsToRender,
-      getItemIndex,
       getItemDOMElement,
-      getItemOrderedChildrenIds,
-      isItemDisabled,
-      isItemNavigable,
       preventItemUpdates,
       areItemUpdatesPrevented
     },
-    contextValue: {
-      items: {
-        onItemClick: params.onItemClick,
-        disabledItemsFocusable: params.disabledItemsFocusable
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
 exports.useTreeViewItems = useTreeViewItems;
 useTreeViewItems.getInitialState = params => ({
   items: updateItemsState({
+    disabledItemsFocusable: params.disabledItemsFocusable,
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
@@ -219,11 +180,10 @@ useTreeViewItems.getDefaultizedParams = ({
   itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });
 useTreeViewItems.wrapRoot = ({
-  children,
-  instance
+  children
 }) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
-    value: itemId => instance.getItemMeta(itemId)?.depth ?? 0,
+    value: _useTreeViewItems2.selectorItemDepth,
     children: children
   });
 };

package/node/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorItemParentId = exports.selectorItemOrderedChildrenIds = exports.selectorItemModel = exports.selectorItemMetaLookup = exports.selectorItemMeta = exports.selectorItemIndex = exports.selectorItemDepth = exports.selectorIsItemDisabled = exports.selectorCanItemBeFocused = void 0;
+var _selectors = require("../../utils/selectors");
+var _useTreeViewItems = require("./useTreeViewItems.utils");
+const selectorTreeViewItemsState = state => state.items;
+
+/**
+ * Get the meta-information of all items.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemMetaLookup} The meta-information of all items.
+ */
+const selectorItemMetaLookup = exports.selectorItemMetaLookup = (0, _selectors.createSelector)(selectorTreeViewItemsState, items => items.itemMetaLookup);
+const EMPTY_CHILDREN = [];
+
+/**
+ * Get the ordered children ids of a given item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the children of.
+ * @returns {TreeViewItemId[]} The ordered children ids of the item.
+ */
+const selectorItemOrderedChildrenIds = exports.selectorItemOrderedChildrenIds = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => itemsState.itemOrderedChildrenIdsLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN);
+
+/**
+ * Get the model of an item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the model of.
+ * @returns {R} The model of the item.
+ */
+const selectorItemModel = exports.selectorItemModel = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => {
+  const a = itemsState.itemModelLookup[itemId];
+  return a;
+});
+
+/**
+ * Get the meta-information of an item.
+ * Check the `TreeViewItemMeta` type for more information.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>}
+ * @param {TreeViewItemId} itemId The id of the item to get the meta-information of.
+ * @returns {TreeViewItemMeta | null} The meta-information of the item.
+ */
+const selectorItemMeta = exports.selectorItemMeta = (0, _selectors.createSelector)([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => itemMetaLookup[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? null);
+
+/**
+ * Check if an item is disabled.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is disabled, `false` otherwise.
+ */
+const selectorIsItemDisabled = exports.selectorIsItemDisabled = (0, _selectors.createSelector)([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => {
+  if (itemId == null) {
+    return false;
+  }
+  let itemMeta = itemMetaLookup[itemId];
+
+  // This can be called before the item has been added to the item map.
+  if (!itemMeta) {
+    return false;
+  }
+  if (itemMeta.disabled) {
+    return true;
+  }
+  while (itemMeta.parentId != null) {
+    itemMeta = itemMetaLookup[itemMeta.parentId];
+    if (itemMeta.disabled) {
+      return true;
+    }
+  }
+  return false;
+});
+
+/**
+ * Get the index of an item in its parent's children.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the index of.
+ * @returns {number} The index of the item in its parent's children.
+ */
+const selectorItemIndex = exports.selectorItemIndex = (0, _selectors.createSelector)([selectorTreeViewItemsState, selectorItemMeta], (itemsState, itemMeta) => {
+  if (itemMeta == null) {
+    return -1;
+  }
+  const parentIndexes = itemsState.itemChildrenIndexesLookup[itemMeta.parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID];
+  return parentIndexes[itemMeta.id];
+});
+
+/**
+ * Get the id of the parent of an item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the parent id of.
+ * @returns {TreeViewItemId | null} The id of the parent of the item.
+ */
+const selectorItemParentId = exports.selectorItemParentId = (0, _selectors.createSelector)([selectorItemMeta], itemMeta => itemMeta?.parentId ?? null);
+
+/**
+ * Get the depth of an item (items at the root level have a depth of 0).
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to get the depth of.
+ * @returns {number} The depth of the item.
+ */
+const selectorItemDepth = exports.selectorItemDepth = (0, _selectors.createSelector)([selectorItemMeta], itemMeta => itemMeta?.depth ?? 0);
+const selectorCanItemBeFocused = exports.selectorCanItemBeFocused = (0, _selectors.createSelector)([selectorTreeViewItemsState, selectorIsItemDisabled], (itemsState, isItemDisabled) => {
+  if (itemsState.disabledItemsFocusable) {
+    return true;
+  }
+  return !isItemDisabled;
+});