@mui/x-tree-view 8.23.0 → 8.24.0

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

@@ -1,64 +0,0 @@
-import { createSelector } from '@mui/x-internals/store';
-import { isItemDisabled, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
-const EMPTY_CHILDREN = [];
-export const itemsSelectors = {
-  /**
-   * Gets the DOM structure of the Tree View.
-   */
-  domStructure: createSelector(state => state.items.domStructure),
-  /**
-   * Checks whether the disabled items are focusable.
-   */
-  disabledItemFocusable: createSelector(state => state.items.disabledItemsFocusable),
-  /**
-   * Gets the meta-information of all items.
-   */
-  itemMetaLookup: createSelector(state => state.items.itemMetaLookup),
-  /**
-   * Gets the ordered children ids of all items.
-   */
-  itemOrderedChildrenIdsLookup: createSelector(state => state.items.itemOrderedChildrenIdsLookup),
-  /**
-   * Gets the meta-information of an item.
-   */
-  itemMeta: createSelector((state, itemId) => state.items.itemMetaLookup[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? null),
-  /**
-   * Gets the ordered children ids of an item.
-   */
-  itemOrderedChildrenIds: createSelector((state, itemId) => state.items.itemOrderedChildrenIdsLookup[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? EMPTY_CHILDREN),
-  /**
-   * Gets the model of an item.
-   */
-  itemModel: createSelector((state, itemId) => state.items.itemModelLookup[itemId]),
-  /**
-   * Checks whether an item is disabled.
-   */
-  isItemDisabled: createSelector((state, itemId) => isItemDisabled(state.items.itemMetaLookup, itemId)),
-  /**
-   * Gets the index of an item in its parent's children.
-   */
-  itemIndex: createSelector((state, itemId) => {
-    const itemMeta = state.items.itemMetaLookup[itemId];
-    if (itemMeta == null) {
-      return -1;
-    }
-    const parentIndexes = state.items.itemChildrenIndexesLookup[itemMeta.parentId ?? TREE_VIEW_ROOT_PARENT_ID];
-    return parentIndexes[itemMeta.id];
-  }),
-  /**
-   * Gets the id of an item's parent.
-   */
-  itemParentId: createSelector((state, itemId) => state.items.itemMetaLookup[itemId]?.parentId ?? null),
-  /**
-   * Gets the depth of an item (items at the root level have a depth of 0).
-   */
-  itemDepth: createSelector((state, itemId) => state.items.itemMetaLookup[itemId]?.depth ?? 0),
-  /**
-   * Checks whether an item can be focused.
-   */
-  canItemBeFocused: createSelector((state, itemId) => state.items.disabledItemsFocusable || !isItemDisabled(state.items.itemMetaLookup, itemId)),
-  /**
-   * Checks whether an item is selectable based on the `isItemSelectionDisabled` prop.
-   */
-  isItemSelectable: createSelector((state, itemId) => state.items.itemMetaLookup[itemId]?.selectable ?? true)
-};

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -1,204 +0,0 @@
-import * as React from 'react';
-import { DefaultizedProps } from '@mui/x-internals/types';
-import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
-import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../../../models/index.js";
-export type SetItemChildrenParameters<R> = {
-  items: readonly R[];
-  parentId: TreeViewItemId | null;
-  getChildrenCount: (item: R) => number;
-};
-export interface UseTreeViewItemsPublicAPI<R extends {}> {
-  /**
-   * Get the item with the given id.
-   * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
-   * @param {TreeViewItemId} itemId The id of the item to retrieve.
-   * @returns {R} The item with the given id.
-   */
-  getItem: (itemId: TreeViewItemId) => R;
-  /**
-   * Get the DOM element of the item with the given id.
-   * @param {TreeViewItemId} itemId The id of the item to get the DOM element of.
-   * @returns {HTMLElement | null} The DOM element of the item with the given id.
-   */
-  getItemDOMElement: (itemId: TreeViewItemId) => HTMLElement | null;
-  /**
-   * Get the ids of a given item's children.
-   * Those ids are returned in the order they should be rendered.
-   * To get the root items, pass `null` as the `itemId`.
-   * @param {TreeViewItemId | null} itemId The id of the item to get the children of.
-   * @returns {TreeViewItemId[]} The ids of the item's children.
-   */
-  getItemOrderedChildrenIds: (itemId: TreeViewItemId | null) => TreeViewItemId[];
-  /**
-   * Get all the items in the same format as provided by `props.items`.
-   * @returns {TreeViewBaseItem[]} The items in the tree.
-   */
-  getItemTree: () => TreeViewBaseItem[];
-  /**
-   * Toggle the disabled state of the item with the given id.
-   * @param {object} parameters The params of the method.
-   * @param {TreeViewItemId } parameters.itemId The id of the item to get the children of.
-   * @param {boolean } parameters.shouldBeDisabled true if the item should be disabled.
-   */
-  setIsItemDisabled: (parameters: {
-    itemId: TreeViewItemId;
-    shouldBeDisabled?: boolean;
-  }) => void;
-  /** * Get the id of the parent item.
-   * @param {TreeViewItemId} itemId The id of the item to whose parentId we want to retrieve.
-   * @returns {TreeViewItemId | null} The id of the parent item.
-   */
-  getParentId: (itemId: TreeViewItemId) => TreeViewItemId | null;
-}
-export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeViewItemsPublicAPI<R>, 'getItemDOMElement'> {
-  /**
-   * Freeze any future update to the state based on the `items` prop.
-   * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
-   */
-  preventItemUpdates: () => void;
-  /**
-   * Check if the updates to the state based on the `items` prop are prevented.
-   * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
-   * @returns {boolean} `true` if the updates to the state based on the `items` prop are prevented.
-   */
-  areItemUpdatesPrevented: () => boolean;
-  /**
-   * Add an array of items to the tree.
-   * @param {SetItemChildrenParameters<R>} args The items to add to the tree and information about their ancestors.
-   */
-  setItemChildren: (args: SetItemChildrenParameters<R>) => void;
-  /**
-   * Remove the children of an item.
-   * @param {TreeViewItemId | null} parentId The id of the item to remove the children of.
-   */
-  removeChildren: (parentId: TreeViewItemId | null) => void;
-  /**
-   * Event handler to fire when the `content` slot of a given Tree Item is clicked.
-   * @param {React.MouseEvent} event The DOM event that triggered the change.
-   * @param {TreeViewItemId} itemId The id of the item being clicked.
-   */
-  handleItemClick: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
-  /**
-   * Mark a list of items as expandable.
-   * @param {TreeViewItemId[]} items The ids of the items to mark as expandable.
-   */
-  addExpandableItems: (items: TreeViewItemId[]) => void;
-}
-export interface UseTreeViewItemsParameters<R extends {
-  children?: R[];
-}> {
-  /**
-   * Whether the items should be focusable when disabled.
-   * @default false
-   */
-  disabledItemsFocusable?: boolean;
-  items: readonly R[];
-  /**
-   * Used to determine if a given item should be disabled.
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {boolean} `true` if the item should be disabled.
-   */
-  isItemDisabled?: (item: R) => boolean;
-  /**
-   * Used to determine if a given item should have selection disabled.
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {boolean} `true` if the item should have selection disabled.
-   */
-  isItemSelectionDisabled?: (item: R) => boolean;
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The label of the item.
-   * @default (item) => item.label
-   */
-  getItemLabel?: (item: R) => string;
-  /**
-   * Used to determine the children of a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {R[]} The children of the item.
-   * @default (item) => item.children
-   */
-  getItemChildren?: (item: R) => R[] | undefined;
-  /**
-   * Used to determine the id of a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {TreeViewItemId} The id of the item.
-   * @default (item) => item.id
-   */
-  getItemId?: (item: R) => TreeViewItemId;
-  /**
-   * Callback fired when the `content` slot of a given Tree Item is clicked.
-   * @param {React.MouseEvent} event The DOM event that triggered the change.
-   * @param {TreeViewItemId} itemId The id of the focused item.
-   */
-  onItemClick?: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
-  /**
-   * Horizontal indentation between an item and its children.
-   * Examples: 24, "24px", "2rem", "2em".
-   * @default 12px
-   */
-  itemChildrenIndentation?: string | number;
-}
-export type UseTreeViewItemsParametersWithDefaults<R extends {
-  children?: R[];
-}> = DefaultizedProps<UseTreeViewItemsParameters<R>, 'disabledItemsFocusable' | 'itemChildrenIndentation'>;
-export interface UseTreeViewItemsState<R extends {}> {
-  items: {
-    /**
-     * Whether the items should be focusable when disabled.
-     * Always equal to `props.disabledItemsFocusable` (or `false` if not provided).
-     */
-    disabledItemsFocusable: boolean;
-    /**
-     * Model of each item as provided by `props.items` or by imperative items updates.
-     * It is not updated when properties derived from the model are updated:
-     * - when the label of an item is updated, `itemMetaLookup` is updated, not `itemModelLookup`.
-     * - when the children of an item are updated, `itemOrderedChildrenIdsLookup` and `itemChildrenIndexesLookup` are updated, not `itemModelLookup`.
-     * This means that the `children`, `label` or `id` properties of an item model should never be used directly, always use the structured sub-states instead.
-     */
-    itemModelLookup: {
-      [itemId: string]: TreeViewBaseItem<R>;
-    };
-    /**
-     * Meta data of each item.
-     */
-    itemMetaLookup: {
-      [itemId: string]: TreeViewItemMeta;
-    };
-    /**
-     * Ordered children ids of each item.
-     */
-    itemOrderedChildrenIdsLookup: {
-      [parentItemId: string]: TreeViewItemId[];
-    };
-    /**
-     * Index of each child in the ordered children ids of its parent.
-     */
-    itemChildrenIndexesLookup: {
-      [parentItemId: string]: {
-        [itemId: string]: number;
-      };
-    };
-    /**
-     * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
-     * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
-     * Nested DOM structure is not compatible with collapse / expansion animations.
-     */
-    domStructure: 'flat' | 'nested';
-  };
-}
-export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
-  params: UseTreeViewItemsParameters<any>;
-  paramsWithDefaults: UseTreeViewItemsParametersWithDefaults<any>;
-  instance: UseTreeViewItemsInstance<any>;
-  publicAPI: UseTreeViewItemsPublicAPI<any>;
-  state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
-}>;

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.types.js

@@ -1 +0,0 @@
-export {};

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.d.ts

@@ -1,49 +0,0 @@
-import { TreeViewBaseItem, TreeViewItemId } from "../../../models/index.js";
-import { TreeViewItemMeta } from "../../models/index.js";
-import { UseTreeViewItemsParametersWithDefaults, UseTreeViewItemsState } from "./useTreeViewItems.types.js";
-export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
-export declare const buildSiblingIndexes: (siblings: string[]) => {
-  [itemId: string]: number;
-};
-/**
- * Check if an item is disabled.
- * This method should only be used in selectors that are checking if several items are disabled.
- * Otherwise, use the `itemsSelector.isItemDisabled` selector.
- * @returns
- */
-export declare const isItemDisabled: (itemMetaLookup: {
-  [itemId: string]: TreeViewItemMeta;
-}, itemId: TreeViewItemId) => boolean;
-type State = UseTreeViewItemsState<any>['items'];
-export declare function buildItemsState(parameters: BuildItemsStateParameters): State;
-interface BuildItemsStateParameters extends Pick<BuildItemsLookupsParameters, 'items' | 'config'> {
-  disabledItemsFocusable: boolean;
-}
-export declare function buildItemsLookups(parameters: BuildItemsLookupsParameters): {
-  metaLookup: {
-    [itemId: string]: TreeViewItemMeta;
-  };
-  modelLookup: {
-    [itemId: string]: any;
-  };
-  orderedChildrenIds: string[];
-  childrenIndexes: {
-    [itemId: string]: number;
-  };
-  itemsChildren: {
-    id: string | null;
-    children: TreeViewBaseItem[];
-  }[];
-};
-interface BuildItemsLookupsParameters {
-  items: readonly TreeViewBaseItem[];
-  config: BuildItemsLookupConfig;
-  parentId: string | null;
-  depth: number;
-  isItemExpandable: (item: TreeViewBaseItem, children: TreeViewBaseItem[] | undefined) => boolean;
-  otherItemsMetaLookup: {
-    [itemId: string]: TreeViewItemMeta;
-  };
-}
-export interface BuildItemsLookupConfig extends Pick<UseTreeViewItemsParametersWithDefaults<TreeViewBaseItem>, 'isItemDisabled' | 'isItemSelectionDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'> {}
-export {};

package/esm/internals/plugins/useTreeViewJSXItems/index.d.ts

@@ -1,2 +0,0 @@
-export { useTreeViewJSXItems } from "./useTreeViewJSXItems.js";
-export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, UseTreeViewItemsParametersWithDefaults } from "./useTreeViewJSXItems.types.js";

package/esm/internals/plugins/useTreeViewJSXItems/index.js

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

package/esm/internals/plugins/useTreeViewJSXItems/itemPlugin.d.ts

@@ -1,2 +0,0 @@
-import { TreeViewItemPlugin } from "../../models/index.js";
-export declare const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin;

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.d.ts

@@ -1,3 +0,0 @@
-import { TreeViewPlugin } from "../../models/index.js";
-import { UseTreeViewJSXItemsSignature } from "./useTreeViewJSXItems.types.js";
-export declare const useTreeViewJSXItems: TreeViewPlugin<UseTreeViewJSXItemsSignature>;

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -1,104 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
-import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
-import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
-import { useTreeViewJSXItemsItemPlugin } from "./itemPlugin.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const useTreeViewJSXItems = ({
-  instance,
-  store
-}) => {
-  instance.preventItemUpdates();
-  const insertJSXItem = useStableCallback(item => {
-    if (store.state.items.itemMetaLookup[item.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: "${item.id}"`].join('\n'));
-    }
-    store.set('items', _extends({}, store.state.items, {
-      itemMetaLookup: _extends({}, store.state.items.itemMetaLookup, {
-        [item.id]: item
-      }),
-      // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
-      itemModelLookup: _extends({}, store.state.items.itemModelLookup, {
-        [item.id]: {
-          id: item.id,
-          label: item.label ?? ''
-        }
-      })
-    }));
-    return () => {
-      const newItemMetaLookup = _extends({}, store.state.items.itemMetaLookup);
-      const newItemModelLookup = _extends({}, store.state.items.itemModelLookup);
-      delete newItemMetaLookup[item.id];
-      delete newItemModelLookup[item.id];
-      store.set('items', _extends({}, store.state.items, {
-        itemMetaLookup: newItemMetaLookup,
-        itemModelLookup: newItemModelLookup
-      }));
-    };
-  });
-  const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
-    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
-    store.set('items', _extends({}, store.state.items, {
-      itemOrderedChildrenIdsLookup: _extends({}, store.state.items.itemOrderedChildrenIdsLookup, {
-        [parentIdWithDefault]: orderedChildrenIds
-      }),
-      itemChildrenIndexesLookup: _extends({}, store.state.items.itemChildrenIndexesLookup, {
-        [parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
-      })
-    }));
-  };
-  const mapLabelFromJSX = useStableCallback((itemId, label) => {
-    instance.updateLabelMap(labelMap => {
-      labelMap[itemId] = label;
-      return labelMap;
-    });
-    return () => {
-      instance.updateLabelMap(labelMap => {
-        const newMap = _extends({}, labelMap);
-        delete newMap[itemId];
-        return newMap;
-      });
-    };
-  });
-  return {
-    instance: {
-      insertJSXItem,
-      setJSXItemsOrderedChildrenIds,
-      mapLabelFromJSX
-    }
-  };
-};
-useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
-useTreeViewJSXItems.wrapItem = ({
-  children,
-  itemId,
-  idAttribute
-}) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const depthContext = React.useContext(TreeViewItemDepthContext);
-  return /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
-    itemId: itemId,
-    idAttribute: idAttribute,
-    children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
-      value: depthContext + 1,
-      children: children
-    })
-  });
-};
-if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapItem.displayName = "useTreeViewJSXItems.wrapItem";
-useTreeViewJSXItems.wrapRoot = ({
-  children
-}) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
-  itemId: null,
-  idAttribute: null,
-  children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
-    value: 0,
-    children: children
-  })
-});
-if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapRoot.displayName = "useTreeViewJSXItems.wrapRoot";
-useTreeViewJSXItems.params = {};

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.js

@@ -1 +0,0 @@
-export {};

package/esm/internals/plugins/useTreeViewKeyboardNavigation/index.d.ts

@@ -1,2 +0,0 @@
-export { useTreeViewKeyboardNavigation } from "./useTreeViewKeyboardNavigation.js";
-export type { UseTreeViewKeyboardNavigationSignature } from "./useTreeViewKeyboardNavigation.types.js";

package/esm/internals/plugins/useTreeViewKeyboardNavigation/index.js

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

package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.d.ts

@@ -1,3 +0,0 @@
-import { TreeViewPlugin } from "../../models/index.js";
-import { UseTreeViewKeyboardNavigationSignature } from "./useTreeViewKeyboardNavigation.types.js";
-export declare const useTreeViewKeyboardNavigation: TreeViewPlugin<UseTreeViewKeyboardNavigationSignature>;