@mui/x-tree-view 8.23.0 → 8.24.0

package/internals/plugins/keyboardNavigation/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewKeyboardNavigationPlugin = require("./TreeViewKeyboardNavigationPlugin");
+Object.keys(_TreeViewKeyboardNavigationPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewKeyboardNavigationPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewKeyboardNavigationPlugin[key];
+    }
+  });
+});

package/internals/plugins/labelEditing/TreeViewLabelEditingPlugin.d.ts

@@ -0,0 +1,22 @@
+import { ExtendableRichTreeViewStore } from "../../RichTreeViewStore/RichTreeViewStore.js";
+import { TreeViewItemId } from "../../../models/index.js";
+export declare class TreeViewLabelEditingPlugin {
+  private store;
+  constructor(store: ExtendableRichTreeViewStore<any, any>);
+  buildPublicAPI: () => {
+    setEditedItem: (itemId: TreeViewItemId | null) => void;
+    updateItemLabel: (itemId: TreeViewItemId, label: string) => void;
+  };
+  /**
+   * Set which item is currently being edited.
+   * You can pass `null` to exit editing mode.
+   * @param {TreeViewItemId | null} itemId The id of the item to edit, or `null` to exit editing mode.
+   */
+  setEditedItem: (itemId: TreeViewItemId | null) => void;
+  /**
+   * Used to update the label of an item.
+   * @param {TreeViewItemId} itemId The id of the item to update the label of.
+   * @param {string} label The new label of the item.
+   */
+  updateItemLabel: (itemId: TreeViewItemId, label: string) => void;
+}

package/internals/plugins/labelEditing/TreeViewLabelEditingPlugin.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewLabelEditingPlugin = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _selectors = require("./selectors");
+var _itemPlugin = require("./itemPlugin");
+class TreeViewLabelEditingPlugin {
+  constructor(store) {
+    this.store = store;
+    store.itemPluginManager.register(_itemPlugin.useLabelEditingItemPlugin, null);
+  }
+  buildPublicAPI = () => {
+    return {
+      setEditedItem: this.setEditedItem,
+      updateItemLabel: this.updateItemLabel
+    };
+  };
+
+  /**
+   * Set which item is currently being edited.
+   * You can pass `null` to exit editing mode.
+   * @param {TreeViewItemId | null} itemId The id of the item to edit, or `null` to exit editing mode.
+   */
+  setEditedItem = itemId => {
+    if (itemId !== null && !_selectors.labelSelectors.isItemEditable(this.store.state, itemId)) {
+      return;
+    }
+    this.store.set('editedItemId', itemId);
+  };
+
+  /**
+   * Used to update the label of an item.
+   * @param {TreeViewItemId} itemId The id of the item to update the label of.
+   * @param {string} label The new label of the item.
+   */
+  updateItemLabel = (itemId, label) => {
+    if (!label) {
+      throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'The label of an item cannot be empty.', itemId].join('\n'));
+    }
+    const item = this.store.state.itemMetaLookup[itemId];
+    if (item.label === label) {
+      return;
+    }
+    this.store.set('itemMetaLookup', (0, _extends2.default)({}, this.store.state.itemMetaLookup, {
+      [itemId]: (0, _extends2.default)({}, item, {
+        label
+      })
+    }));
+    if (this.store.parameters.onItemLabelChange) {
+      this.store.parameters.onItemLabelChange(itemId, label);
+    }
+  };
+}
+exports.TreeViewLabelEditingPlugin = TreeViewLabelEditingPlugin;

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

@@ -0,0 +1,2 @@
+export * from "./TreeViewLabelEditingPlugin.js";
+export * from "./selectors.js";

package/internals/plugins/labelEditing/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewLabelEditingPlugin = require("./TreeViewLabelEditingPlugin");
+Object.keys(_TreeViewLabelEditingPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewLabelEditingPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewLabelEditingPlugin[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

package/{esm/internals/plugins/useTreeViewLabel → internals/plugins/labelEditing}/itemPlugin.d.ts

@@ -1,11 +1,12 @@
 import { TreeViewItemPlugin } from "../../models/index.js";
 import { TreeItemLabelInputProps } from "../../../TreeItemLabelInput/index.js";
-export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;
-export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
-export interface UseTreeItemLabelSlotPropsFromLabelEditing {
+export declare const useLabelEditingItemPlugin: TreeViewItemPlugin;
+interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
+interface UseTreeItemLabelSlotPropsFromLabelEditing {
   editable?: boolean;
 }
 declare module '@mui/x-tree-view/useTreeItem' {
   interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
   interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
-}
+}
+export {};

package/internals/plugins/{useTreeViewLabel → labelEditing}/itemPlugin.js

@@ -5,12 +5,12 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeViewLabelItemPlugin = void 0;
+exports.useLabelEditingItemPlugin = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@mui/x-internals/store");
 var _TreeViewProvider = require("../../TreeViewProvider");
-var _useTreeViewLabel = require("./useTreeViewLabel.selectors");
-const useTreeViewLabelItemPlugin = ({
+var _selectors = require("./selectors");
+const useLabelEditingItemPlugin = ({
   props
 }) => {
   const {
@@ -21,8 +21,8 @@ const useTreeViewLabelItemPlugin = ({
     itemId
   } = props;
   const [labelInputValue, setLabelInputValue] = React.useState(label);
-  const isItemEditable = (0, _store.useStore)(store, _useTreeViewLabel.labelSelectors.isItemEditable, itemId);
-  const isItemBeingEdited = (0, _store.useStore)(store, _useTreeViewLabel.labelSelectors.isItemBeingEdited, itemId);
+  const isItemEditable = (0, _store.useStore)(store, _selectors.labelSelectors.isItemEditable, itemId);
+  const isItemBeingEdited = (0, _store.useStore)(store, _selectors.labelSelectors.isItemBeingEdited, itemId);
   React.useEffect(() => {
     if (!isItemBeingEdited) {
       setLabelInputValue(label);
@@ -78,4 +78,4 @@ const useTreeViewLabelItemPlugin = ({
     }
   };
 };
-exports.useTreeViewLabelItemPlugin = useTreeViewLabelItemPlugin;
+exports.useLabelEditingItemPlugin = useLabelEditingItemPlugin;

package/internals/plugins/labelEditing/selectors.d.ts

@@ -0,0 +1,15 @@
+import { RichTreeViewState } from "../../RichTreeViewStore/index.js";
+export declare const labelSelectors: {
+  /**
+   * Checks whether an item is editable.
+   */
+  isItemEditable: (args_0: RichTreeViewState<any, any>, _itemId: string) => boolean;
+  /**
+   * Checks whether an item is being edited.
+   */
+  isItemBeingEdited: (state: RichTreeViewState<any, any>, itemId: string | null) => boolean;
+  /**
+   * Checks whether any item is being edited.
+   */
+  isAnyItemBeingEdited: (state: RichTreeViewState<any, any>) => boolean;
+};

package/internals/plugins/{useTreeViewLabel/useTreeViewLabel.selectors.js → labelEditing/selectors.js}

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.labelSelectors = void 0;
 var _store = require("@mui/x-internals/store");
-var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+var _selectors = require("../items/selectors");
 const labelSelectors = exports.labelSelectors = {
   /**
    * Checks whether an item is editable.
    */
-  isItemEditable: (0, _store.createSelector)(state => state.label?.isItemEditable, _useTreeViewItems.itemsSelectors.itemModel, (isItemEditable, itemModel, _itemId) => {
+  isItemEditable: (0, _store.createSelector)(state => state.isItemEditable, _selectors.itemsSelectors.itemModel, (isItemEditable, itemModel, _itemId) => {
     if (!itemModel || isItemEditable == null) {
       return false;
     }
@@ -22,9 +22,9 @@ const labelSelectors = exports.labelSelectors = {
   /**
    * Checks whether an item is being edited.
    */
-  isItemBeingEdited: (0, _store.createSelector)((state, itemId) => itemId == null ? false : state.label?.editedItemId === itemId),
+  isItemBeingEdited: (0, _store.createSelector)((state, itemId) => itemId == null ? false : state.editedItemId === itemId),
   /**
    * Checks whether any item is being edited.
    */
-  isAnyItemBeingEdited: (0, _store.createSelector)(state => !!state.label?.editedItemId)
+  isAnyItemBeingEdited: (0, _store.createSelector)(state => !!state.editedItemId)
 };

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

@@ -0,0 +1,2 @@
+export * from "./types.js";
+export * from "./selectors.js";

package/internals/plugins/lazyLoading/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

package/internals/plugins/lazyLoading/selectors.d.ts

@@ -0,0 +1,19 @@
+import { RichTreeViewState } from "../../RichTreeViewStore/index.js";
+export declare const lazyLoadingSelectors: {
+  /**
+   * Checks if the lazy loaded state is empty.
+   */
+  isEmpty: (state: RichTreeViewState<any, any>) => boolean;
+  /**
+   * Checks whether an item is loading.
+   */
+  isItemLoading: (state: RichTreeViewState<any, any>, itemId: string | null) => boolean;
+  /**
+   * Checks whether an item has errors.
+   */
+  itemHasError: (state: RichTreeViewState<any, any>, itemId: string | null) => boolean;
+  /**
+   * Get an item error.
+   */
+  itemError: (state: RichTreeViewState<any, any>, itemId: string | null) => Error | null | undefined;
+};

package/internals/plugins/{useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js → lazyLoading/selectors.js}

@@ -5,22 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.lazyLoadingSelectors = void 0;
 var _store = require("@mui/x-internals/store");
-var _useTreeViewItems = require("../useTreeViewItems");
+var _items = require("../items");
 const lazyLoadingSelectors = exports.lazyLoadingSelectors = {
   /**
-   * Gets the data source used to lazy load items.
+   * Checks if the lazy loaded state is empty.
    */
-  dataSource: (0, _store.createSelector)(state => state.lazyLoading?.dataSource),
+  isEmpty: (0, _store.createSelector)(state => {
+    if (state.lazyLoadedItems == null) {
+      return true;
+    }
+    return Object.keys(state.lazyLoadedItems.loading).length === 0 && Object.keys(state.lazyLoadedItems.errors).length === 0;
+  }),
   /**
    * Checks whether an item is loading.
    */
-  isItemLoading: (0, _store.createSelector)((state, itemId) => state.lazyLoading?.dataSource.loading[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? false),
+  isItemLoading: (0, _store.createSelector)((state, itemId) => state.lazyLoadedItems?.loading[itemId ?? _items.TREE_VIEW_ROOT_PARENT_ID] ?? false),
   /**
    * Checks whether an item has errors.
    */
-  itemHasError: (0, _store.createSelector)((state, itemId) => !!state.lazyLoading?.dataSource.errors[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID]),
+  itemHasError: (0, _store.createSelector)((state, itemId) => !!state.lazyLoadedItems?.errors[itemId ?? _items.TREE_VIEW_ROOT_PARENT_ID]),
   /**
    * Get an item error.
    */
-  itemError: (0, _store.createSelector)((state, itemId) => state.lazyLoading?.dataSource.errors[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID])
+  itemError: (0, _store.createSelector)((state, itemId) => state.lazyLoadedItems?.errors[itemId ?? _items.TREE_VIEW_ROOT_PARENT_ID])
 };

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

@@ -0,0 +1,5 @@
+import { TreeViewItemId } from "../../../models/index.js";
+export interface RichTreeViewLazyLoadedItemsStatus {
+  loading: Record<TreeViewItemId, boolean>;
+  errors: Record<TreeViewItemId, Error | null>;
+}

package/internals/plugins/selection/TreeViewSelectionPlugin.d.ts

@@ -0,0 +1,73 @@
+export declare class TreeViewSelectionPlugin<Multiple extends boolean | undefined> {
+  private store;
+  private lastSelectedItem;
+  private lastSelectedRange;
+  constructor(store: any);
+  private setSelectedItems;
+  private selectRange;
+  buildPublicAPI: () => {
+    setItemSelection: ({
+      itemId,
+      event,
+      keepExistingSelection,
+      shouldBeSelected
+    }: {
+      itemId: string;
+      event?: React.SyntheticEvent | null;
+      shouldBeSelected?: boolean;
+      keepExistingSelection?: boolean;
+    }) => void;
+  };
+  /**
+   * Select or deselect an item.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to select or deselect.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.keepExistingSelection If `true`, the other already selected items will remain selected, otherwise, they will be deselected. This parameter is only relevant when `multiSelect` is `true`
+   * @param {boolean | undefined} parameters.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's selection status will be toggled.
+   */
+  setItemSelection: ({
+    itemId,
+    event,
+    keepExistingSelection,
+    shouldBeSelected
+  }: {
+    itemId: string;
+    event?: React.SyntheticEvent | null;
+    shouldBeSelected?: boolean;
+    keepExistingSelection?: boolean;
+  }) => void;
+  /**
+   * Select all the navigable items in the tree.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   */
+  selectAllNavigableItems: (event: React.SyntheticEvent) => void;
+  /**
+   * Expand the current selection range up to the given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item to expand the selection to.
+   */
+  expandSelectionRange: (event: React.SyntheticEvent, itemId: string) => void;
+  /**
+   * Expand the current selection range from the first navigable item to the given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item up to which the selection range should be expanded.
+   */
+  selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: string) => void;
+  /**
+   * Expand the current selection range from the given item to the last navigable item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item from which the selection range should be expanded.
+   */
+  selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: string) => void;
+  /**
+   * Update the selection when navigating with ArrowUp / ArrowDown keys.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} currentItemId The id of the active item before the keyboard navigation.
+   * @param {TreeViewItemId} nextItemId The id of the active item after the keyboard navigation.
+   */
+  selectItemFromArrowNavigation: (event: React.SyntheticEvent, currentItem: string, nextItem: string) => void;
+}
+export declare function getLookupFromArray(array: string[]): {
+  [itemId: string]: true;
+};