@mui/x-tree-view 8.17.0 → 8.18.0

package/internals/plugins/useTreeViewJSXItems/itemPlugin.js

@@ -0,0 +1,81 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewJSXItemsItemPlugin = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _store = require("@mui/x-internals/store");
+var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
+var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
+var _TreeViewProvider = require("../../TreeViewProvider");
+var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
+var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
+var _useTreeViewId = require("../../corePlugins/useTreeViewId");
+var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
+const useTreeViewJSXItemsItemPlugin = ({
+  props,
+  rootRef,
+  contentRef
+}) => {
+  const {
+    instance,
+    store
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  const {
+    children,
+    disabled = false,
+    label,
+    itemId,
+    id
+  } = props;
+  const parentContext = React.useContext(_TreeViewChildrenItemProvider.TreeViewChildrenItemContext);
+  if (parentContext == null) {
+    throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
+  }
+  const {
+    registerChild,
+    unregisterChild,
+    parentId
+  } = parentContext;
+  const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
+  const pluginContentRef = React.useRef(null);
+  const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
+  const treeId = (0, _store.useStore)(store, _useTreeViewId.idSelectors.treeId);
+
+  // Prevent any flashing
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
+      itemId,
+      treeId,
+      id
+    });
+    registerChild(idAttribute, itemId);
+    return () => {
+      unregisterChild(idAttribute);
+      unregisterChild(idAttribute);
+    };
+  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    return instance.insertJSXItem({
+      id: itemId,
+      idAttribute: id,
+      parentId,
+      expandable,
+      disabled
+    });
+  }, [instance, parentId, itemId, expandable, disabled, id]);
+  React.useEffect(() => {
+    if (label) {
+      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
+    }
+    return undefined;
+  }, [instance, itemId, label]);
+  return {
+    contentRef: handleContentRef,
+    rootRef
+  };
+};
+exports.useTreeViewJSXItemsItemPlugin = useTreeViewJSXItemsItemPlugin;

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -9,17 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewJSXItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _store = require("@mui/x-internals/store");
 var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
-var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
-var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
-var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
-var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
-var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
-var _useTreeViewId2 = require("../../corePlugins/useTreeViewId");
+var _itemPlugin = require("./itemPlugin");
 var _jsxRuntime = require("react/jsx-runtime");
 const useTreeViewJSXItems = ({
   instance,
@@ -86,70 +80,7 @@ const useTreeViewJSXItems = ({
   };
 };
 exports.useTreeViewJSXItems = useTreeViewJSXItems;
-const useTreeViewJSXItemsItemPlugin = ({
-  props,
-  rootRef,
-  contentRef
-}) => {
-  const {
-    instance,
-    store
-  } = (0, _TreeViewProvider.useTreeViewContext)();
-  const {
-    children,
-    disabled = false,
-    label,
-    itemId,
-    id
-  } = props;
-  const parentContext = React.useContext(_TreeViewChildrenItemProvider.TreeViewChildrenItemContext);
-  if (parentContext == null) {
-    throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
-  }
-  const {
-    registerChild,
-    unregisterChild,
-    parentId
-  } = parentContext;
-  const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
-  const pluginContentRef = React.useRef(null);
-  const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
-  const treeId = (0, _store.useStore)(store, _useTreeViewId2.idSelectors.treeId);
-
-  // Prevent any flashing
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
-      itemId,
-      treeId,
-      id
-    });
-    registerChild(idAttribute, itemId);
-    return () => {
-      unregisterChild(idAttribute);
-      unregisterChild(idAttribute);
-    };
-  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    return instance.insertJSXItem({
-      id: itemId,
-      idAttribute: id,
-      parentId,
-      expandable,
-      disabled
-    });
-  }, [instance, parentId, itemId, expandable, disabled, id]);
-  React.useEffect(() => {
-    if (label) {
-      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
-    }
-    return undefined;
-  }, [instance, itemId, label]);
-  return {
-    contentRef: handleContentRef,
-    rootRef
-  };
-};
-useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
+useTreeViewJSXItems.itemPlugin = _itemPlugin.useTreeViewJSXItemsItemPlugin;
 useTreeViewJSXItems.wrapItem = ({
   children,
   itemId,

package/internals/plugins/useTreeViewLabel/itemPlugin.d.ts

@@ -0,0 +1,11 @@
+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 {
+  editable?: boolean;
+}
+declare module '@mui/x-tree-view/useTreeItem' {
+  interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
+  interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
+}

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
-var _useTreeViewLabel = require("./useTreeViewLabel.itemPlugin");
-var _useTreeViewLabel2 = require("./useTreeViewLabel.selectors");
+var _itemPlugin = require("./itemPlugin");
+var _useTreeViewLabel = require("./useTreeViewLabel.selectors");
 const useTreeViewLabel = ({
   store,
   params
 }) => {
   const setEditedItem = editedItemId => {
     if (editedItemId !== null) {
-      const isEditable = _useTreeViewLabel2.labelSelectors.isItemEditable(store.state, editedItemId);
+      const isEditable = _useTreeViewLabel.labelSelectors.isItemEditable(store.state, editedItemId);
       if (!isEditable) {
         return;
       }
@@ -60,7 +60,7 @@ const useTreeViewLabel = ({
   };
 };
 exports.useTreeViewLabel = useTreeViewLabel;
-useTreeViewLabel.itemPlugin = _useTreeViewLabel.useTreeViewLabelItemPlugin;
+useTreeViewLabel.itemPlugin = _itemPlugin.useTreeViewLabelItemPlugin;
 useTreeViewLabel.applyDefaultValuesToParams = ({
   params
 }) => (0, _extends2.default)({}, params, {

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

@@ -2,7 +2,6 @@ import { DefaultizedProps } from '@mui/x-internals/types';
 import { TreeViewPluginSignature } from "../../models/index.js";
 import { TreeViewItemId } from "../../../models/index.js";
 import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
-import { TreeItemLabelInputProps } from "../../../TreeItemLabelInput/index.js";
 export interface UseTreeViewLabelPublicAPI {
   /**
    * Used to update the label of an item.
@@ -38,7 +37,7 @@ export type UseTreeViewLabelParametersWithDefaults<R extends {}> = DefaultizedPr
 export interface UseTreeViewLabelState {
   label: {
     isItemEditable: ((item: any) => boolean) | boolean;
-    editedItemId: string | null;
+    editedItemId: TreeViewItemId | null;
   };
 }
 export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
@@ -48,12 +47,4 @@ export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
   instance: UseTreeViewLabelInstance;
   state: UseTreeViewLabelState;
   dependencies: [UseTreeViewItemsSignature];
-}>;
-export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
-export interface UseTreeItemLabelSlotPropsFromLabelEditing {
-  editable?: boolean;
-}
-declare module '@mui/x-tree-view/useTreeItem' {
-  interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
-  interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
-}
+}>;

package/internals/plugins/useTreeViewSelection/itemPlugin.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { TreeViewCancellableEventHandler } from "../../../models/index.js";
+import { TreeViewItemPlugin } from "../../models/index.js";
+export declare const useTreeViewSelectionItemPlugin: TreeViewItemPlugin;
+interface UseTreeItemRootSlotPropsFromSelection {
+  'aria-checked': React.AriaAttributes['aria-checked'];
+}
+interface UseTreeItemCheckboxSlotPropsFromSelection {
+  visible?: boolean;
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  tabIndex?: -1;
+  onChange?: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
+}
+declare module '@mui/x-tree-view/useTreeItem' {
+  interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromSelection {}
+  interface UseTreeItemCheckboxSlotOwnProps extends UseTreeItemCheckboxSlotPropsFromSelection {}
+}
+export {};

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -13,7 +13,7 @@ var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect"
 var _tree = require("../../utils/tree");
 var _useTreeViewSelection = require("./useTreeViewSelection.utils");
 var _useTreeViewSelection2 = require("./useTreeViewSelection.selectors");
-var _useTreeViewSelection3 = require("./useTreeViewSelection.itemPlugin");
+var _itemPlugin = require("./itemPlugin");
 const useTreeViewSelection = ({
   store,
   params
@@ -206,7 +206,7 @@ const useTreeViewSelection = ({
   };
 };
 exports.useTreeViewSelection = useTreeViewSelection;
-useTreeViewSelection.itemPlugin = _useTreeViewSelection3.useTreeViewSelectionItemPlugin;
+useTreeViewSelection.itemPlugin = _itemPlugin.useTreeViewSelectionItemPlugin;
 const DEFAULT_SELECTED_ITEMS = [];
 const EMPTY_SELECTION_PROPAGATION = {};
 useTreeViewSelection.applyDefaultValuesToParams = ({

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

@@ -3,18 +3,18 @@ import type { DefaultizedProps } from '@mui/x-internals/types';
 import type { TreeViewPluginSignature } from "../../models/index.js";
 import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
 import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
-import { TreeViewSelectionPropagation, TreeViewCancellableEventHandler } from "../../../models/index.js";
+import { TreeViewSelectionPropagation, TreeViewItemId } from "../../../models/index.js";
 export interface UseTreeViewSelectionPublicAPI {
   /**
    * Select or deselect an item.
    * @param {object} parameters The parameters of the method.
-   * @param {string} parameters.itemId The id of the item to select or deselect.
+   * @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: (parameters: {
-    itemId: string;
+    itemId: TreeViewItemId;
     event?: React.SyntheticEvent;
     shouldBeSelected?: boolean;
     keepExistingSelection?: boolean;
@@ -29,33 +29,33 @@ export interface UseTreeViewSelectionInstance extends UseTreeViewSelectionPublic
   /**
    * Expand the current selection range up to the given item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item to expand the selection to.
+   * @param {TreeViewItemId} itemId The id of the item to expand the selection to.
    */
-  expandSelectionRange: (event: React.SyntheticEvent, itemId: string) => void;
+  expandSelectionRange: (event: React.SyntheticEvent, itemId: TreeViewItemId) => 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 {string} itemId The id of the item up to which the selection range should be expanded.
+   * @param {TreeViewItemId} itemId The id of the item up to which the selection range should be expanded.
    */
-  selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: string) => void;
+  selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: TreeViewItemId) => 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 {string} itemId The id of the item from which the selection range should be expanded.
+   * @param {TreeViewItemId} itemId The id of the item from which the selection range should be expanded.
    */
-  selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: string) => void;
+  selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Update the selection when navigating with ArrowUp / ArrowDown keys.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} currentItemId The id of the active item before the keyboard navigation.
-   * @param {string} nextItemId The id of the active item after the keyboard navigation.
+   * @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, currentItemId: string, nextItemId: string) => void;
+  selectItemFromArrowNavigation: (event: React.SyntheticEvent, currentItemId: TreeViewItemId, nextItemId: TreeViewItemId) => void;
 }
-export type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? string[] : string | null;
+export type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? TreeViewItemId[] : TreeViewItemId | null;
 export interface UseTreeViewSelectionParameters<Multiple extends boolean | undefined> {
   /**
-   * If `true` selection is disabled.
+   * Whether selection is disabled.
    * @default false
    */
   disableSelection?: boolean;
@@ -71,12 +71,12 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
    */
   selectedItems?: TreeViewSelectionValue<Multiple>;
   /**
-   * If `true`, `ctrl` and `shift` will trigger multiselect.
+   * Whether multiple items can be selected.
    * @default false
    */
   multiSelect?: Multiple;
   /**
-   * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
+   * Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
    * @default false
    */
   checkboxSelection?: boolean;
@@ -100,17 +100,17 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
   /**
    * Callback fired when Tree Items are selected/deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
-   * @param {string[] | string} itemIds The ids of the selected items.
+   * @param {TreeViewItemId[] | TreeViewItemId} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */
   onSelectedItemsChange?: (event: React.SyntheticEvent | null, itemIds: TreeViewSelectionValue<Multiple>) => void;
   /**
    * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
-   * @param {array} itemId The itemId of the modified item.
+   * @param {TreeViewItemId} itemId The itemId of the modified item.
    * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
-  onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: string, isSelected: boolean) => void;
+  onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId, isSelected: boolean) => void;
 }
 export type UseTreeViewSelectionParametersWithDefaults<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection' | 'selectionPropagation'>;
 export interface UseTreeViewSelectionState {
@@ -129,19 +129,4 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
   publicAPI: UseTreeViewSelectionPublicAPI;
   state: UseTreeViewSelectionState;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature];
-}>;
-export interface UseTreeItemRootSlotPropsFromSelection {
-  'aria-checked': React.AriaAttributes['aria-checked'];
-}
-export interface UseTreeItemCheckboxSlotPropsFromSelection {
-  visible?: boolean;
-  checked?: boolean;
-  indeterminate?: boolean;
-  disabled?: boolean;
-  tabIndex?: -1;
-  onChange?: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
-}
-declare module '@mui/x-tree-view/useTreeItem' {
-  interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromSelection {}
-  interface UseTreeItemCheckboxSlotOwnProps extends UseTreeItemCheckboxSlotPropsFromSelection {}
-}
+}>;

package/models/items.d.ts

@@ -2,6 +2,7 @@ export type TreeViewItemId = string;
 export type TreeViewDefaultItemModelProperties = {
   id: string;
   label: string;
+  children?: TreeViewDefaultItemModelProperties[];
 };
 export type TreeViewBaseItem<R extends {} = TreeViewDefaultItemModelProperties> = R & {
   children?: TreeViewBaseItem<R>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.17.0",
+  "version": "8.18.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",
@@ -33,12 +33,12 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "@base-ui-components/utils": "0.1.2",
-    "@mui/utils": "^7.3.3",
+    "@mui/utils": "^7.3.5",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.17.0"
+    "@mui/x-internals": "8.18.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

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

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

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

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

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts

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

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.d.ts

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