@mui/x-tree-view-pro 8.23.0 → 8.24.0

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts

@@ -1,107 +0,0 @@
-import { DefaultizedProps } from '@mui/x-internals/types';
-import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
-import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
-export interface UseTreeViewItemsReorderingInstance {
-  /**
-   * Get the valid reordering action if a given item is the target of the ongoing reordering.
-   * @param {TreeViewItemId} itemId The id of the item to get the action of.
-   * @returns {TreeViewItemItemReorderingValidActions} The valid actions for the item.
-   */
-  getDroppingTargetValidActions: (itemId: TreeViewItemId) => TreeViewItemItemReorderingValidActions;
-  /**
-   * Start a reordering for the given item.
-   * @param {TreeViewItemId} itemId The id of the item to start the reordering for.
-   */
-  startDraggingItem: (itemId: TreeViewItemId) => void;
-  /**
-   * Complete the reordering of a given item.
-   * @param {TreeViewItemId} itemId The id of the item to complete the reordering for.
-   */
-  completeDraggingItem: (itemId: TreeViewItemId) => void;
-  /**
-   * Cancel the current reordering operation and reset the state.
-   */
-  cancelDraggingItem: () => void;
-  /**
-   * Set the new target item for the ongoing reordering.
-   * The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
-   * @param {object} params The params describing the new target item.
-   * @param {TreeViewItemId} params.itemId The id of the new target item.
-   * @param {TreeViewItemItemReorderingValidActions} params.validActions The valid actions for the new target item.
-   * @param {number} params.targetHeight The height of the target item.
-   * @param {number} params.cursorY The Y coordinate of the mouse cursor.
-   * @param {number} params.cursorX The X coordinate of the mouse cursor.
-   * @param {HTMLDivElement} params.contentElement The DOM element rendered for the content slot.
-   */
-  setDragTargetItem: (params: {
-    itemId: TreeViewItemId;
-    validActions: TreeViewItemItemReorderingValidActions;
-    targetHeight: number;
-    cursorY: number;
-    cursorX: number;
-    contentElement: HTMLDivElement;
-  }) => void;
-}
-export interface TreeViewItemReorderPosition {
-  parentId: TreeViewItemId | null;
-  index: number;
-}
-export type TreeViewItemItemReorderingValidActions = { [key in TreeViewItemsReorderingAction]?: TreeViewItemReorderPosition };
-export interface UseTreeViewItemsReorderingParameters {
-  /**
-   * If `true`, the reordering of items is enabled.
-   * @default false
-   */
-  itemsReordering?: boolean;
-  /**
-   * Determine if a given item can be reordered.
-   * @param {TreeViewItemId} itemId The id of the item to check.
-   * @returns {boolean} `true` if the item can be reordered.
-   * @default () => true
-   */
-  isItemReorderable?: (itemId: TreeViewItemId) => boolean;
-  /**
-   * Used to determine if a given item can move to some new position.
-   * @param {object} parameters The params describing the item re-ordering.
-   * @param {TreeViewItemId} parameters.itemId The id of the item that is being moved to a new position.
-   * @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
-   * @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
-   * @returns {boolean} `true` if the item can move to the new position.
-   */
-  canMoveItemToNewPosition?: (parameters: {
-    itemId: TreeViewItemId;
-    oldPosition: TreeViewItemReorderPosition;
-    newPosition: TreeViewItemReorderPosition;
-  }) => boolean;
-  /**
-   * Callback fired when a Tree Item is moved in the tree.
-   * @param {object} parameters The params describing the item re-ordering.
-   * @param {TreeViewItemId} parameters.itemId The id of the item moved.
-   * @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
-   * @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
-   */
-  onItemPositionChange?: (parameters: {
-    itemId: TreeViewItemId;
-    oldPosition: TreeViewItemReorderPosition;
-    newPosition: TreeViewItemReorderPosition;
-  }) => void;
-}
-export type UseTreeViewItemsReorderingParametersWithDefaults = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
-export interface UseTreeViewItemsReorderingState {
-  itemsReordering: {
-    isItemReorderable: (itemId: TreeViewItemId) => boolean;
-    currentReorder: {
-      draggedItemId: TreeViewItemId;
-      targetItemId: TreeViewItemId;
-      newPosition: TreeViewItemReorderPosition | null;
-      action: TreeViewItemsReorderingAction | null;
-    } | null;
-  };
-}
-export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
-  params: UseTreeViewItemsReorderingParameters;
-  paramsWithDefaults: UseTreeViewItemsReorderingParametersWithDefaults;
-  instance: UseTreeViewItemsReorderingInstance;
-  state: UseTreeViewItemsReorderingState;
-  dependencies: [UseTreeViewItemsSignature];
-}>;

package/internals/plugins/useTreeViewLazyLoading/index.d.ts

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

package/internals/plugins/useTreeViewLazyLoading/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "useTreeViewLazyLoading", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewLazyLoading.useTreeViewLazyLoading;
-  }
-});
-var _useTreeViewLazyLoading = require("./useTreeViewLazyLoading");

package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts

@@ -1,2 +0,0 @@
-import { TreeViewPlugin, UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
-export declare const useTreeViewLazyLoading: TreeViewPlugin<UseTreeViewLazyLoadingSignature>;

package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -1,259 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeViewLazyLoading = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _internals = require("@mui/x-tree-view/internals");
-var _utils = require("@mui/x-tree-view/utils");
-var _utils2 = require("./utils");
-const INITIAL_STATE = {
-  loading: {},
-  errors: {}
-};
-const useTreeViewLazyLoading = ({
-  instance,
-  params,
-  store
-}) => {
-  const nestedDataManager = (0, _useRefWithInit.useRefWithInit)(() => new _utils2.NestedDataManager(instance)).current;
-  const cache = (0, _useRefWithInit.useRefWithInit)(() => params.dataSourceCache ?? new _utils.DataSourceCacheDefault({})).current;
-  const setDataSourceLoading = (0, _useStableCallback.useStableCallback)((itemId, isLoading) => {
-    if (!params.dataSource) {
-      return;
-    }
-    const itemIdWithDefault = itemId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
-    if (_internals.lazyLoadingSelectors.isItemLoading(store.state, itemIdWithDefault) === isLoading) {
-      return;
-    }
-    const loading = (0, _extends2.default)({}, store.state.lazyLoading.dataSource.loading);
-    if (isLoading === false) {
-      delete loading[itemIdWithDefault];
-    } else {
-      loading[itemIdWithDefault] = isLoading;
-    }
-    store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
-      dataSource: (0, _extends2.default)({}, store.state.lazyLoading.dataSource, {
-        loading
-      })
-    }));
-  });
-  const setDataSourceError = (0, _useStableCallback.useStableCallback)((itemId, error) => {
-    if (!params.dataSource) {
-      return;
-    }
-    if (_internals.lazyLoadingSelectors.itemError(store.state, itemId) === error) {
-      return;
-    }
-    const stateId = itemId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
-    const errors = (0, _extends2.default)({}, store.state.lazyLoading.dataSource.errors);
-    if (error === null && errors[stateId] !== undefined) {
-      delete errors[stateId];
-    } else {
-      errors[stateId] = error;
-    }
-    store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
-      dataSource: (0, _extends2.default)({}, store.state.lazyLoading.dataSource, {
-        errors
-      })
-    }));
-  });
-  const fetchItems = (0, _useStableCallback.useStableCallback)(async parentIds => nestedDataManager.queue(parentIds));
-  const fetchItemChildren = (0, _useStableCallback.useStableCallback)(async ({
-    itemId,
-    forceRefresh
-  }) => {
-    if (!params.dataSource) {
-      return;
-    }
-    const {
-      getChildrenCount,
-      getTreeItems
-    } = params.dataSource;
-    // clear the request if the item is not in the tree
-    if (itemId != null && !_internals.itemsSelectors.itemMeta(store.state, itemId)) {
-      nestedDataManager.clearPendingRequest(itemId);
-      return;
-    }
-
-    // reset the state if we are fetching the root items
-    if (itemId == null && _internals.lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
-      store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
-        dataSource: INITIAL_STATE
-      }));
-    }
-    const cacheKey = itemId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
-    if (!forceRefresh) {
-      // reads from the value from the cache
-      const cachedData = cache.get(cacheKey);
-      if (cachedData !== undefined && cachedData !== -1) {
-        if (itemId != null) {
-          nestedDataManager.setRequestSettled(itemId);
-        }
-        instance.setItemChildren({
-          items: cachedData,
-          parentId: itemId,
-          getChildrenCount
-        });
-        instance.setDataSourceLoading(itemId, false);
-        return;
-      }
-
-      // set the item loading status to true
-      instance.setDataSourceLoading(itemId, true);
-      if (cachedData === -1) {
-        instance.removeChildren(itemId);
-      }
-    }
-
-    // reset existing error if any
-    if (_internals.lazyLoadingSelectors.itemError(store.state, itemId)) {
-      instance.setDataSourceError(itemId, null);
-    }
-    try {
-      let response;
-      if (itemId == null) {
-        response = await getTreeItems();
-      } else {
-        response = await getTreeItems(itemId);
-        nestedDataManager.setRequestSettled(itemId);
-      }
-      // save the response in the cache
-      cache.set(cacheKey, response);
-      // update the items in the state
-      instance.setItemChildren({
-        items: response,
-        parentId: itemId,
-        getChildrenCount
-      });
-    } catch (error) {
-      const childrenFetchError = error;
-      // set the item error in the state
-      instance.setDataSourceError(itemId, childrenFetchError);
-      if (forceRefresh) {
-        instance.removeChildren(itemId);
-      }
-    } finally {
-      // set the item loading status to false
-      instance.setDataSourceLoading(itemId, false);
-      if (itemId != null) {
-        nestedDataManager.setRequestSettled(itemId);
-      }
-    }
-  });
-  const updateItemChildren = (0, _useStableCallback.useStableCallback)(itemId => {
-    return instance.fetchItemChildren({
-      itemId,
-      forceRefresh: true
-    });
-  });
-  (0, _internals.useInstanceEventHandler)(instance, 'beforeItemToggleExpansion', async eventParameters => {
-    if (!params.dataSource || !eventParameters.shouldBeExpanded) {
-      return;
-    }
-
-    // prevent the default expansion behavior
-    eventParameters.isExpansionPrevented = true;
-    await instance.fetchItems([eventParameters.itemId]);
-    const hasError = _internals.lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
-    if (!hasError) {
-      instance.applyItemExpansion({
-        itemId: eventParameters.itemId,
-        shouldBeExpanded: true,
-        event: eventParameters.event
-      });
-      if (_internals.selectionSelectors.isItemSelected(store.state, eventParameters.itemId)) {
-        // make sure selection propagation works correctly
-        instance.setItemSelection({
-          event: eventParameters.event,
-          itemId: eventParameters.itemId,
-          keepExistingSelection: true,
-          shouldBeSelected: true
-        });
-      }
-    }
-  });
-  useLazyLoadOnMount({
-    instance,
-    params,
-    store
-  });
-  if (params.dataSource) {
-    instance.preventItemUpdates();
-  }
-  return {
-    instance: {
-      fetchItemChildren,
-      fetchItems,
-      updateItemChildren,
-      setDataSourceLoading,
-      setDataSourceError
-    },
-    publicAPI: {
-      updateItemChildren
-    }
-  };
-};
-exports.useTreeViewLazyLoading = useTreeViewLazyLoading;
-useTreeViewLazyLoading.getInitialState = () => ({
-  lazyLoading: {
-    enabled: false,
-    dataSource: INITIAL_STATE
-  }
-});
-useTreeViewLazyLoading.params = {
-  dataSource: true,
-  dataSourceCache: true
-};
-function useLazyLoadOnMount({
-  instance,
-  params,
-  store
-}) {
-  const firstRenderRef = React.useRef(true);
-  (0, _useEnhancedEffect.default)(() => {
-    if (!params.dataSource || !firstRenderRef.current) {
-      return;
-    }
-    firstRenderRef.current = false;
-    store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
-      enabled: true
-    }));
-    async function fetchAllExpandedItems() {
-      async function fetchChildrenIfExpanded(parentIds) {
-        const expandedItems = parentIds.filter(id => _internals.expansionSelectors.isItemExpanded(store.state, id));
-        if (expandedItems.length > 0) {
-          const itemsToLazyLoad = expandedItems.filter(id => _internals.itemsSelectors.itemOrderedChildrenIds(store.state, id).length === 0);
-          if (itemsToLazyLoad.length > 0) {
-            await instance.fetchItems(itemsToLazyLoad);
-          }
-          const childrenIds = expandedItems.flatMap(id => _internals.itemsSelectors.itemOrderedChildrenIds(store.state, id));
-          await fetchChildrenIfExpanded(childrenIds);
-        }
-      }
-      if (params.items.length) {
-        const newlyExpandableItems = getExpandableItemsFromDataSource(store, params.dataSource);
-        if (newlyExpandableItems.length > 0) {
-          instance.addExpandableItems(newlyExpandableItems);
-        }
-      } else {
-        await instance.fetchItemChildren({
-          itemId: null
-        });
-      }
-      await fetchChildrenIfExpanded(_internals.itemsSelectors.itemOrderedChildrenIds(store.state, null));
-    }
-    fetchAllExpandedItems();
-  }, [instance, params.items, params.dataSource, store]);
-}
-function getExpandableItemsFromDataSource(store, dataSource) {
-  return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) !== 0).map(item => item.id);
-}