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

package/{node → esm}/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.selectorIsItemTheDefaultFocusableItem = exports.selectorIsItemFocused = exports.selectorFocusedItemId = exports.selectorDefaultFocusableItemId = void 0;
-var _selectors = require("../../utils/selectors");
+import { createSelector } from "../../utils/selectors.js";
 const selectorTreeViewFocusState = state => state.focus;
 
 /**
@@ -14,7 +8,7 @@ const selectorTreeViewFocusState = state => state.focus;
  * @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);
+export const selectorDefaultFocusableItemId = createSelector(selectorTreeViewFocusState, focus => focus.defaultFocusableItemId);
 
 /**
  * Check if an item is the default focusable item.
@@ -22,14 +16,14 @@ const selectorDefaultFocusableItemId = exports.selectorDefaultFocusableItemId =
  * @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);
+export const selectorIsItemTheDefaultFocusableItem = 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);
+export const selectorFocusedItemId = createSelector(selectorTreeViewFocusState, focus => focus.focusedItemId);
 
 /**
  * Check if an item is focused.
@@ -37,4 +31,4 @@ const selectorFocusedItemId = exports.selectorFocusedItemId = (0, _selectors.cre
  * @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);
+export const selectorIsItemFocused = createSelector([selectorFocusedItemId, (_, itemId) => itemId], (focusedItemId, itemId) => focusedItemId === itemId);

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { TreeViewPluginSignature } from "../../models/index.js";
+import type { UseTreeViewItemsSignature } from '../useTreeViewItems';
+import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
+import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
+export interface UseTreeViewFocusPublicAPI {
+  /**
+   * Focus the item with the given id.
+   *
+   * If the item is the child of a collapsed item, then this method will do nothing.
+   * Make sure to expand the ancestors of the item before calling this method if needed.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item to focus.
+   */
+  focusItem: (event: React.SyntheticEvent, itemId: string) => void;
+}
+export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
+  /**
+   * Remove the focus from the currently focused item (both from the internal state and the DOM).
+   */
+  removeFocusedItem: () => void;
+}
+export interface UseTreeViewFocusParameters {
+  /**
+   * Callback fired when a given Tree Item is focused.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
+   * @param {string} itemId The id of the focused item.
+   */
+  onItemFocus?: (event: React.SyntheticEvent | null, itemId: string) => void;
+}
+export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
+export interface UseTreeViewFocusState {
+  focus: {
+    focusedItemId: string | null;
+    defaultFocusableItemId: string | null;
+  };
+}
+export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
+  params: UseTreeViewFocusParameters;
+  defaultizedParams: UseTreeViewFocusDefaultizedParameters;
+  instance: UseTreeViewFocusInstance;
+  publicAPI: UseTreeViewFocusPublicAPI;
+  state: UseTreeViewFocusState;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature, UseTreeViewExpansionSignature];
+}>;

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

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

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

@@ -0,0 +1,2 @@
+export { useTreeViewIcons } from "./useTreeViewIcons.js";
+export type { UseTreeViewIconsSignature, UseTreeViewIconsParameters, UseTreeViewIconsDefaultizedParameters } from './useTreeViewIcons.types';

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

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

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

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

package/{node → esm}/internals/plugins/useTreeViewIcons/useTreeViewIcons.js

@@ -1,12 +1,5 @@
-"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 = ({
+import * as React from 'react';
+export const useTreeViewIcons = ({
   slots,
   slotProps
 }) => {
@@ -28,5 +21,4 @@ const useTreeViewIcons = ({
     contextValue: pluginContextValue
   };
 };
-exports.useTreeViewIcons = useTreeViewIcons;
 useTreeViewIcons.params = {};

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils/types';
+import { TreeViewPluginSignature } from "../../models/index.js";
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
+export interface UseTreeViewIconsParameters {}
+export type UseTreeViewIconsDefaultizedParameters = UseTreeViewIconsParameters;
+interface UseTreeViewIconsSlots {
+  /**
+   * The default icon used to collapse the item.
+   */
+  collapseIcon?: React.ElementType;
+  /**
+   * The default icon used to expand the item.
+   */
+  expandIcon?: React.ElementType;
+  /**
+   * The default icon displayed next to an end item.
+   * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
+   */
+  endIcon?: React.ElementType;
+}
+interface UseTreeViewIconsSlotProps {
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+}
+interface UseTreeViewIconsContextValue {
+  icons: {
+    slots: UseTreeViewIconsSlots;
+    slotProps: UseTreeViewIconsSlotProps;
+  };
+}
+export type UseTreeViewIconsSignature = TreeViewPluginSignature<{
+  params: UseTreeViewIconsParameters;
+  defaultizedParams: UseTreeViewIconsDefaultizedParameters;
+  contextValue: UseTreeViewIconsContextValue;
+  slots: UseTreeViewIconsSlots;
+  slotProps: UseTreeViewIconsSlotProps;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
+}>;
+export {};

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

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

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

@@ -0,0 +1,3 @@
+export { useTreeViewItems } from "./useTreeViewItems.js";
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState } from './useTreeViewItems.types';
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";

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

@@ -0,0 +1,2 @@
+export { useTreeViewItems } from "./useTreeViewItems.js";
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";

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

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

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

@@ -0,0 +1,330 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
+import { selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemModel, selectorItemDepth } from "./useTreeViewItems.selectors.js";
+import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const checkId = (id, item, itemMetaLookup) => {
+  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 (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 processItemsLookups = ({
+  disabledItemsFocusable,
+  items,
+  isItemDisabled,
+  getItemLabel,
+  getItemId,
+  initialDepth = 0,
+  initialParentId = null,
+  getChildrenCount,
+  ignoreChildren = false
+}) => {
+  const itemMetaLookup = {};
+  const itemModelLookup = {};
+  const itemOrderedChildrenIdsLookup = {
+    [TREE_VIEW_ROOT_PARENT_ID]: []
+  };
+  const processItem = (item, depth, parentId) => {
+    const id = getItemId ? getItemId(item) : item.id;
+    checkId(id, item, itemMetaLookup);
+    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'));
+    }
+    itemMetaLookup[id] = {
+      id,
+      label,
+      parentId,
+      idAttribute: undefined,
+      expandable: getChildrenCount ? getChildrenCount(item) > 0 : !!item.children?.length,
+      disabled: isItemDisabled ? isItemDisabled(item) : false,
+      depth
+    };
+    itemModelLookup[id] = item;
+    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    if (!itemOrderedChildrenIdsLookup[parentIdWithDefault]) {
+      itemOrderedChildrenIdsLookup[parentIdWithDefault] = [];
+    }
+    itemOrderedChildrenIdsLookup[parentIdWithDefault].push(id);
+
+    // if lazy loading is enabled, we don't want to process children passed through the `items` prop
+    if (!ignoreChildren) {
+      item.children?.forEach(child => processItem(child, depth + 1, id));
+    }
+  };
+  items?.forEach(item => processItem(item, initialDepth, initialParentId));
+  const itemChildrenIndexesLookup = {};
+  Object.keys(itemOrderedChildrenIdsLookup).forEach(parentId => {
+    itemChildrenIndexesLookup[parentId] = buildSiblingIndexes(itemOrderedChildrenIdsLookup[parentId]);
+  });
+  return {
+    disabledItemsFocusable,
+    itemMetaLookup,
+    itemModelLookup,
+    itemOrderedChildrenIdsLookup,
+    itemChildrenIndexesLookup
+  };
+};
+export const useTreeViewItems = ({
+  instance,
+  params,
+  store
+}) => {
+  const getItem = React.useCallback(itemId => selectorItemModel(store.value, itemId), [store]);
+  const getParentId = React.useCallback(itemId => {
+    const itemMeta = selectorItemMeta(store.value, itemId);
+    return itemMeta?.parentId || null;
+  }, [store]);
+  const setTreeViewLoading = useEventCallback(isLoading => {
+    store.update(prevState => _extends({}, prevState, {
+      items: _extends({}, prevState.items, {
+        loading: isLoading
+      })
+    }));
+  });
+  const setTreeViewError = useEventCallback(error => {
+    store.update(prevState => _extends({}, prevState, {
+      items: _extends({}, prevState.items, {
+        error
+      })
+    }));
+  });
+  const setIsItemDisabled = useEventCallback(({
+    itemId,
+    shouldBeDisabled
+  }) => {
+    store.update(prevState => {
+      if (!prevState.items.itemMetaLookup[itemId]) {
+        return prevState;
+      }
+      const itemMetaLookup = _extends({}, prevState.items.itemMetaLookup);
+      itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
+        disabled: shouldBeDisabled ?? !itemMetaLookup[itemId].disabled
+      });
+      return _extends({}, prevState, {
+        items: _extends({}, prevState.items, {
+          itemMetaLookup
+        })
+      });
+    });
+  });
+  const getItemTree = React.useCallback(() => {
+    const getItemFromItemId = itemId => {
+      const item = selectorItemModel(store.value, itemId);
+      const newChildren = selectorItemOrderedChildrenIds(store.value, itemId);
+      if (newChildren.length > 0) {
+        item.children = newChildren.map(getItemFromItemId);
+      } else {
+        delete item.children;
+      }
+      return item;
+    };
+    return selectorItemOrderedChildrenIds(store.value, null).map(getItemFromItemId);
+  }, [store]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => selectorItemOrderedChildrenIds(store.value, itemId), [store]);
+  const getItemDOMElement = itemId => {
+    const itemMeta = selectorItemMeta(store.value, itemId);
+    if (itemMeta == null) {
+      return null;
+    }
+    const idAttribute = generateTreeItemIdAttribute({
+      treeId: selectorTreeViewId(store.value),
+      itemId,
+      id: itemMeta.idAttribute
+    });
+    return document.getElementById(idAttribute);
+  };
+  const areItemUpdatesPreventedRef = React.useRef(false);
+  const preventItemUpdates = React.useCallback(() => {
+    areItemUpdatesPreventedRef.current = true;
+  }, []);
+  const areItemUpdatesPrevented = React.useCallback(() => areItemUpdatesPreventedRef.current, []);
+  const addItems = ({
+    items,
+    parentId,
+    depth,
+    getChildrenCount
+  }) => {
+    if (items) {
+      const newState = processItemsLookups({
+        disabledItemsFocusable: params.disabledItemsFocusable,
+        items,
+        isItemDisabled: params.isItemDisabled,
+        getItemId: params.getItemId,
+        getItemLabel: params.getItemLabel,
+        getChildrenCount,
+        initialDepth: depth,
+        initialParentId: parentId,
+        ignoreChildren: true
+      });
+      store.update(prevState => {
+        let newItems;
+        if (parentId) {
+          newItems = {
+            itemModelLookup: _extends({}, prevState.items.itemModelLookup, newState.itemModelLookup),
+            itemMetaLookup: _extends({}, prevState.items.itemMetaLookup, newState.itemMetaLookup),
+            itemOrderedChildrenIdsLookup: _extends({}, newState.itemOrderedChildrenIdsLookup, prevState.items.itemOrderedChildrenIdsLookup),
+            itemChildrenIndexesLookup: _extends({}, newState.itemChildrenIndexesLookup, prevState.items.itemChildrenIndexesLookup)
+          };
+        } else {
+          newItems = {
+            itemModelLookup: newState.itemModelLookup,
+            itemMetaLookup: newState.itemMetaLookup,
+            itemOrderedChildrenIdsLookup: newState.itemOrderedChildrenIdsLookup,
+            itemChildrenIndexesLookup: newState.itemChildrenIndexesLookup
+          };
+        }
+        Object.values(prevState.items.itemMetaLookup).forEach(item => {
+          if (!newState.itemMetaLookup[item.id]) {
+            publishTreeViewEvent(instance, 'removeItem', {
+              id: item.id
+            });
+          }
+        });
+        return _extends({}, prevState, {
+          items: _extends({}, prevState.items, newItems)
+        });
+      });
+    }
+  };
+  const removeChildren = parentId => {
+    store.update(prevState => {
+      if (!parentId) {
+        return _extends({}, prevState, {
+          items: _extends({}, prevState.items, {
+            itemMetaLookup: {},
+            itemOrderedChildrenIdsLookup: {},
+            itemChildrenIndexesLookup: {}
+          })
+        });
+      }
+      const newMetaMap = Object.keys(prevState.items.itemMetaLookup).reduce((acc, key) => {
+        const item = prevState.items.itemMetaLookup[key];
+        if (item.parentId === parentId) {
+          publishTreeViewEvent(instance, 'removeItem', {
+            id: item.id
+          });
+          return acc;
+        }
+        return _extends({}, acc, {
+          [item.id]: item
+        });
+      }, {});
+      const newItemOrderedChildrenIdsLookup = prevState.items.itemOrderedChildrenIdsLookup;
+      const newItemChildrenIndexesLookup = prevState.items.itemChildrenIndexesLookup;
+      delete newItemChildrenIndexesLookup[parentId];
+      delete newItemOrderedChildrenIdsLookup[parentId];
+      return _extends({}, prevState, {
+        items: _extends({}, prevState.items, {
+          itemMetaLookup: newMetaMap,
+          itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
+          itemChildrenIndexesLookup: newItemChildrenIndexesLookup
+        })
+      });
+    });
+  };
+  React.useEffect(() => {
+    if (instance.areItemUpdatesPrevented()) {
+      return;
+    }
+    store.update(prevState => {
+      const newState = processItemsLookups({
+        disabledItemsFocusable: params.disabledItemsFocusable,
+        items: params.items,
+        isItemDisabled: params.isItemDisabled,
+        getItemId: params.getItemId,
+        getItemLabel: params.getItemLabel
+      });
+      Object.values(prevState.items.itemMetaLookup).forEach(item => {
+        if (!newState.itemMetaLookup[item.id]) {
+          publishTreeViewEvent(instance, 'removeItem', {
+            id: item.id
+          });
+        }
+      });
+      return _extends({}, prevState, {
+        items: _extends({}, prevState.items, newState)
+      });
+    });
+  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
+
+  // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
+  const handleItemClick = useEventCallback((event, itemId) => {
+    if (params.onItemClick) {
+      params.onItemClick(event, itemId);
+    }
+  });
+  const pluginContextValue = React.useMemo(() => ({
+    items: {
+      onItemClick: handleItemClick
+    }
+  }), [handleItemClick]);
+  return {
+    getRootProps: () => ({
+      style: {
+        '--TreeView-itemChildrenIndentation': typeof params.itemChildrenIndentation === 'number' ? `${params.itemChildrenIndentation}px` : params.itemChildrenIndentation
+      }
+    }),
+    publicAPI: {
+      getItem,
+      getItemDOMElement,
+      getItemTree,
+      getItemOrderedChildrenIds,
+      setIsItemDisabled,
+      getParentId
+    },
+    instance: {
+      getItemDOMElement,
+      preventItemUpdates,
+      areItemUpdatesPrevented,
+      addItems,
+      setTreeViewLoading,
+      setTreeViewError,
+      removeChildren
+    },
+    contextValue: pluginContextValue
+  };
+};
+useTreeViewItems.getInitialState = params => ({
+  items: _extends({}, processItemsLookups({
+    disabledItemsFocusable: params.disabledItemsFocusable,
+    items: params.items,
+    isItemDisabled: params.isItemDisabled,
+    getItemId: params.getItemId,
+    getItemLabel: params.getItemLabel
+  }), {
+    loading: false,
+    error: null
+  })
+});
+useTreeViewItems.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
+  disabledItemsFocusable: params.disabledItemsFocusable ?? false,
+  itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
+});
+useTreeViewItems.wrapRoot = ({
+  children
+}) => {
+  return /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
+    value: selectorItemDepth,
+    children: children
+  });
+};
+useTreeViewItems.params = {
+  disabledItemsFocusable: true,
+  items: true,
+  isItemDisabled: true,
+  getItemLabel: true,
+  getItemId: true,
+  onItemClick: true,
+  itemChildrenIndentation: true
+};