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

package/node/internals/plugins/useTreeViewIcons/useTreeViewIcons.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewIcons = void 0;
+const useTreeViewIcons = ({
+  slots,
+  slotProps
+}) => {
+  return {
+    contextValue: {
+      icons: {
+        slots: {
+          collapseIcon: slots.collapseIcon,
+          expandIcon: slots.expandIcon,
+          endIcon: slots.endIcon
+        },
+        slotProps: {
+          collapseIcon: slotProps.collapseIcon,
+          expandIcon: slotProps.expandIcon,
+          endIcon: slotProps.endIcon
+        }
+      }
+    }
+  };
+};
+exports.useTreeViewIcons = useTreeViewIcons;
+useTreeViewIcons.params = {};

package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -21,11 +21,16 @@ const useTreeViewJSXNodes = ({
   setState
 }) => {
   const insertJSXNode = (0, _useEventCallback.default)(node => {
-    setState(prevState => (0, _extends2.default)({}, prevState, {
-      nodeMap: (0, _extends2.default)({}, prevState.nodeMap, {
-        [node.id]: node
-      })
-    }));
+    setState(prevState => {
+      if (prevState.nodeMap[node.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.', `Tow items were provided with the same id in the \`items\` prop: "${node.id}"`].join('\n'));
+      }
+      return (0, _extends2.default)({}, prevState, {
+        nodeMap: (0, _extends2.default)({}, prevState.nodeMap, {
+          [node.id]: node
+        })
+      });
+    });
   });
   const removeJSXNode = (0, _useEventCallback.default)(nodeId => {
     setState(prevState => {

package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -24,6 +24,9 @@ const updateState = ({
     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 (nodeMap[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.', `Tow items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
+    }
     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'));
@@ -124,6 +127,11 @@ const useTreeViewNodes = ({
     getNavigableChildrenIds,
     isNodeDisabled
   });
+  return {
+    contextValue: {
+      disabledItemsFocusable: params.disabledItemsFocusable
+    }
+  };
 };
 exports.useTreeViewNodes = useTreeViewNodes;
 useTreeViewNodes.getInitialState = params => updateState({
@@ -132,6 +140,9 @@ useTreeViewNodes.getInitialState = params => updateState({
   getItemId: params.getItemId,
   getItemLabel: params.getItemLabel
 });
+useTreeViewNodes.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
+  disabledItemsFocusable: params.disabledItemsFocusable ?? false
+});
 useTreeViewNodes.params = {
   disabledItemsFocusable: true,
   items: true,

package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -19,7 +19,6 @@ const useTreeViewSelection = ({
   const lastSelectedNode = React.useRef(null);
   const lastSelectionWasRange = React.useRef(false);
   const currentRangeSelection = React.useRef([]);
-  const isNodeSelected = nodeId => Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
   const setSelectedNodes = (event, newSelectedNodes) => {
     if (params.onNodeSelectionToggle) {
       if (params.multiSelect) {
@@ -43,8 +42,9 @@ const useTreeViewSelection = ({
     if (params.onSelectedNodesChange) {
       params.onSelectedNodesChange(event, newSelectedNodes);
     }
-    models.selectedNodes.setValue(newSelectedNodes);
+    models.selectedNodes.setControlledValue(newSelectedNodes);
   };
+  const isNodeSelected = nodeId => Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
   const selectNode = (event, nodeId, multiple = false) => {
     if (params.disableSelection) {
       return;
@@ -174,14 +174,18 @@ const useTreeViewSelection = ({
   return {
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
-    })
+    }),
+    contextValue: {
+      selection: {
+        multiSelect: params.multiSelect
+      }
+    }
   };
 };
 exports.useTreeViewSelection = useTreeViewSelection;
 useTreeViewSelection.models = {
   selectedNodes: {
-    controlledProp: 'selectedNodes',
-    defaultProp: 'defaultSelectedNodes'
+    getDefaultValue: params => params.defaultSelectedNodes
   }
 };
 const DEFAULT_SELECTED_NODES = [];

package/node/internals/useTreeView/useTreeView.js

@@ -35,11 +35,15 @@ const useTreeView = inParams => {
     return temp;
   });
   const rootPropsGetters = [];
-  let contextValue = {};
+  const contextValue = {
+    instance: instance
+  };
   const runPlugin = plugin => {
     const pluginResponse = plugin({
       instance,
       params,
+      slots: params.slots,
+      slotProps: params.slotProps,
       state,
       setState,
       rootRef: innerRootRef,
@@ -49,7 +53,7 @@ const useTreeView = inParams => {
       rootPropsGetters.push(pluginResponse.getRootProps);
     }
     if (pluginResponse.contextValue) {
-      contextValue = pluginResponse.contextValue;
+      Object.assign(contextValue, pluginResponse.contextValue);
     }
   };
   plugins.forEach(runPlugin);
@@ -105,7 +109,7 @@ const useTreeView = inParams => {
   return {
     getRootProps,
     rootRef: handleRootRef,
-    contextValue,
+    contextValue: contextValue,
     instance: instance
   };
 };

package/node/internals/useTreeView/useTreeViewModels.js

@@ -19,23 +19,22 @@ const useTreeViewModels = (plugins, props) => {
     const initialState = {};
     plugins.forEach(plugin => {
       if (plugin.models) {
-        Object.entries(plugin.models).forEach(([modelName, model]) => {
+        Object.entries(plugin.models).forEach(([modelName, modelInitializer]) => {
           modelsRef.current[modelName] = {
-            controlledProp: model.controlledProp,
-            defaultProp: model.defaultProp,
-            isControlled: props[model.controlledProp] !== undefined
+            isControlled: props[modelName] !== undefined,
+            getDefaultValue: modelInitializer.getDefaultValue
           };
-          initialState[modelName] = props[model.defaultProp];
+          initialState[modelName] = modelInitializer.getDefaultValue(props);
         });
       }
     });
     return initialState;
   });
   const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
-    const value = model.isControlled ? props[model.controlledProp] : modelsState[modelName];
+    const value = model.isControlled ? props[modelName] : modelsState[modelName];
     return [modelName, {
       value,
-      setValue: newValue => {
+      setControlledValue: newValue => {
         if (!model.isControlled) {
           setModelsState(prevState => (0, _extends2.default)({}, prevState, {
             [modelName]: newValue
@@ -49,8 +48,8 @@ const useTreeViewModels = (plugins, props) => {
   /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
   if (process.env.NODE_ENV !== 'production') {
     Object.entries(modelsRef.current).forEach(([modelName, model]) => {
-      const controlled = props[model.controlledProp];
-      const defaultProp = props[model.defaultProp];
+      const controlled = props[modelName];
+      const newDefaultValue = model.getDefaultValue(props);
       React.useEffect(() => {
         if (model.isControlled !== (controlled !== undefined)) {
           console.error([`MUI X: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of TreeView to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
@@ -58,9 +57,9 @@ const useTreeViewModels = (plugins, props) => {
       }, [controlled]);
       const {
         current: defaultValue
-      } = React.useRef(defaultProp);
+      } = React.useRef(newDefaultValue);
       React.useEffect(() => {
-        if (!model.isControlled && defaultValue !== defaultProp) {
+        if (!model.isControlled && defaultValue !== newDefaultValue) {
           console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled TreeView after being initialized. ` + `To suppress this warning opt to use a controlled TreeView.`].join('\n'));
         }
       }, [JSON.stringify(defaultValue)]);

package/node/internals/utils/extractPluginParamsFromProps.js

@@ -1,21 +1,31 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractPluginParamsFromProps = void 0;
-const extractPluginParamsFromProps = ({
-  props,
-  plugins,
-  rootRef
-}) => {
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+const _excluded = ["slots", "slotProps"];
+const extractPluginParamsFromProps = _ref => {
+  let {
+      props: {
+        slots,
+        slotProps
+      },
+      plugins,
+      rootRef
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref.props, _excluded);
   const paramsLookup = {};
   plugins.forEach(plugin => {
     Object.assign(paramsLookup, plugin.params);
   });
   const pluginParams = {
     plugins,
-    rootRef
+    rootRef,
+    slots: slots ?? {},
+    slotProps: slotProps ?? {}
   };
   const otherProps = {};
   Object.keys(props).forEach(propName => {
@@ -28,6 +38,8 @@ const extractPluginParamsFromProps = ({
   });
   return {
     pluginParams,
+    slots,
+    slotProps,
     otherProps
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-beta.0",
   "description": "The community edition of the tree view components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -32,19 +32,19 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.7",
-    "@mui/base": "^5.0.0-beta.29",
-    "@mui/system": "^5.15.2",
-    "@mui/utils": "^5.15.2",
+    "@babel/runtime": "^7.23.8",
+    "@mui/base": "^5.0.0-beta.33",
+    "@mui/system": "^5.15.6",
+    "@mui/utils": "^5.15.6",
     "@types/react-transition-group": "^4.4.10",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.8.6",
+    "@mui/material": "^5.15.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

package/themeAugmentation/components.d.ts

@@ -4,22 +4,22 @@ export interface TreeViewComponents<Theme = unknown> {
   MuiSimpleTreeView?: {
     defaultProps?: ComponentsProps['MuiSimpleTreeView'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSimpleTreeView'];
-    variants?: ComponentsVariants['MuiSimpleTreeView'];
+    variants?: ComponentsVariants<Theme>['MuiSimpleTreeView'];
   };
   MuiRichTreeView?: {
     defaultProps?: ComponentsProps['MuiRichTreeView'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiRichTreeView'];
-    variants?: ComponentsVariants['MuiRichTreeView'];
+    variants?: ComponentsVariants<Theme>['MuiRichTreeView'];
   };
   MuiTreeView?: {
     defaultProps?: ComponentsProps['MuiTreeView'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTreeView'];
-    variants?: ComponentsVariants['MuiTreeView'];
+    variants?: ComponentsVariants<Theme>['MuiTreeView'];
   };
   MuiTreeItem?: {
     defaultProps?: ComponentsProps['MuiTreeItem'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTreeItem'];
-    variants?: ComponentsVariants['MuiTreeItem'];
+    variants?: ComponentsVariants<Theme>['MuiTreeItem'];
   };
 }
 

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

@@ -1,2 +0,0 @@
-export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
-export type { UseTreeViewContextValueBuilderSignature, UseTreeViewContextValueBuilderParameters, UseTreeViewContextValueBuilderDefaultizedParameters, } from './useTreeViewContextValueBuilder.types';

package/internals/plugins/useTreeViewContextValueBuilder/index.js

@@ -1 +0,0 @@
-export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';

package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.d.ts

@@ -1,3 +0,0 @@
-import { TreeViewPlugin } from '../../models';
-import { UseTreeViewContextValueBuilderSignature } from './useTreeViewContextValueBuilder.types';
-export declare const useTreeViewContextValueBuilder: TreeViewPlugin<UseTreeViewContextValueBuilderSignature>;

package/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js

@@ -1,32 +0,0 @@
-export const useTreeViewContextValueBuilder = ({
-  instance,
-  params
-}) => {
-  return {
-    contextValue: {
-      instance: instance,
-      multiSelect: params.multiSelect,
-      runItemPlugins: ({
-        props,
-        ref
-      }) => ({
-        props,
-        ref,
-        wrapItem: children => children
-      }),
-      disabledItemsFocusable: params.disabledItemsFocusable,
-      icons: {
-        defaultCollapseIcon: params.defaultCollapseIcon,
-        defaultEndIcon: params.defaultEndIcon,
-        defaultExpandIcon: params.defaultExpandIcon,
-        defaultParentIcon: params.defaultParentIcon
-      }
-    }
-  };
-};
-useTreeViewContextValueBuilder.params = {
-  defaultCollapseIcon: true,
-  defaultEndIcon: true,
-  defaultExpandIcon: true,
-  defaultParentIcon: true
-};

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

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { TreeViewPluginSignature } from '../../models';
-import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
-import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
-export interface UseTreeViewContextValueBuilderParameters {
-    /**
-     * The default icon used to collapse the node.
-     */
-    defaultCollapseIcon?: React.ReactNode;
-    /**
-     * The default icon displayed next to a end node. This is applied to all
-     * tree nodes and can be overridden by the TreeItem `icon` prop.
-     */
-    defaultEndIcon?: React.ReactNode;
-    /**
-     * The default icon used to expand the node.
-     */
-    defaultExpandIcon?: React.ReactNode;
-    /**
-     * The default icon displayed next to a parent node. This is applied to all
-     * parent nodes and can be overridden by the TreeItem `icon` prop.
-     */
-    defaultParentIcon?: React.ReactNode;
-}
-export type UseTreeViewContextValueBuilderDefaultizedParameters = UseTreeViewContextValueBuilderParameters;
-export type UseTreeViewContextValueBuilderSignature = TreeViewPluginSignature<UseTreeViewContextValueBuilderParameters, UseTreeViewContextValueBuilderDefaultizedParameters, {}, {}, {}, never, [
-    UseTreeViewNodesSignature,
-    UseTreeViewSelectionSignature
-]>;

package/legacy/internals/plugins/useTreeViewContextValueBuilder/index.js

@@ -1 +0,0 @@
-export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';

package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js

@@ -1,34 +0,0 @@
-export var useTreeViewContextValueBuilder = function useTreeViewContextValueBuilder(_ref) {
-  var instance = _ref.instance,
-    params = _ref.params;
-  return {
-    contextValue: {
-      instance: instance,
-      multiSelect: params.multiSelect,
-      runItemPlugins: function runItemPlugins(_ref2) {
-        var props = _ref2.props,
-          ref = _ref2.ref;
-        return {
-          props: props,
-          ref: ref,
-          wrapItem: function wrapItem(children) {
-            return children;
-          }
-        };
-      },
-      disabledItemsFocusable: params.disabledItemsFocusable,
-      icons: {
-        defaultCollapseIcon: params.defaultCollapseIcon,
-        defaultEndIcon: params.defaultEndIcon,
-        defaultExpandIcon: params.defaultExpandIcon,
-        defaultParentIcon: params.defaultParentIcon
-      }
-    }
-  };
-};
-useTreeViewContextValueBuilder.params = {
-  defaultCollapseIcon: true,
-  defaultEndIcon: true,
-  defaultExpandIcon: true,
-  defaultParentIcon: true
-};

package/modern/internals/plugins/useTreeViewContextValueBuilder/index.js

@@ -1 +0,0 @@
-export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';

package/modern/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js

@@ -1,32 +0,0 @@
-export const useTreeViewContextValueBuilder = ({
-  instance,
-  params
-}) => {
-  return {
-    contextValue: {
-      instance: instance,
-      multiSelect: params.multiSelect,
-      runItemPlugins: ({
-        props,
-        ref
-      }) => ({
-        props,
-        ref,
-        wrapItem: children => children
-      }),
-      disabledItemsFocusable: params.disabledItemsFocusable,
-      icons: {
-        defaultCollapseIcon: params.defaultCollapseIcon,
-        defaultEndIcon: params.defaultEndIcon,
-        defaultExpandIcon: params.defaultExpandIcon,
-        defaultParentIcon: params.defaultParentIcon
-      }
-    }
-  };
-};
-useTreeViewContextValueBuilder.params = {
-  defaultCollapseIcon: true,
-  defaultEndIcon: true,
-  defaultExpandIcon: true,
-  defaultParentIcon: true
-};

package/node/internals/plugins/useTreeViewContextValueBuilder/index.js

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

package/node/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeViewContextValueBuilder = void 0;
-const useTreeViewContextValueBuilder = ({
-  instance,
-  params
-}) => {
-  return {
-    contextValue: {
-      instance: instance,
-      multiSelect: params.multiSelect,
-      runItemPlugins: ({
-        props,
-        ref
-      }) => ({
-        props,
-        ref,
-        wrapItem: children => children
-      }),
-      disabledItemsFocusable: params.disabledItemsFocusable,
-      icons: {
-        defaultCollapseIcon: params.defaultCollapseIcon,
-        defaultEndIcon: params.defaultEndIcon,
-        defaultExpandIcon: params.defaultExpandIcon,
-        defaultParentIcon: params.defaultParentIcon
-      }
-    }
-  };
-};
-exports.useTreeViewContextValueBuilder = useTreeViewContextValueBuilder;
-useTreeViewContextValueBuilder.params = {
-  defaultCollapseIcon: true,
-  defaultEndIcon: true,
-  defaultExpandIcon: true,
-  defaultParentIcon: true
-};