@mui/x-tree-view 7.0.0-beta.5 → 7.0.0-beta.6

package/node/TreeItem/TreeItem.js

@@ -21,7 +21,7 @@ var _treeItemClasses = require("./treeItemClasses");
 var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"],
+const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"],
   _excluded4 = ["ownerState"];
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
     disabled: ['disabled'],
     iconContainer: ['iconContainer'],
     label: ['label'],
-    group: ['group']
+    groupTransition: ['groupTransition']
   };
   return (0, _base.unstable_composeClasses)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
 };
@@ -124,8 +124,8 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
 }));
 const TreeItemGroup = (0, _styles.styled)(_Collapse.default, {
   name: 'MuiTreeItem',
-  slot: 'Group',
-  overridesResolver: (props, styles) => styles.group
+  slot: 'GroupTransition',
+  overridesResolver: (props, styles) => styles.groupTransition
 })({
   margin: 0,
   padding: 0,
@@ -175,16 +175,15 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       id,
       label,
       onClick,
-      onMouseDown,
-      TransitionComponent = _Collapse.default,
-      TransitionProps
+      onMouseDown
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const slots = {
     expandIcon: inSlots?.expandIcon ?? contextIcons.slots.expandIcon ?? _icons.TreeViewExpandIcon,
     collapseIcon: inSlots?.collapseIcon ?? contextIcons.slots.collapseIcon ?? _icons.TreeViewCollapseIcon,
     endIcon: inSlots?.endIcon ?? contextIcons.slots.endIcon,
-    icon: inSlots?.icon
+    icon: inSlots?.icon,
+    groupTransition: inSlots?.groupTransition
   };
   const isExpandable = reactChildren => {
     if (Array.isArray(reactChildren)) {
@@ -204,6 +203,19 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     disabled
   });
   const classes = useUtilityClasses(ownerState);
+  const GroupTransition = slots.groupTransition ?? undefined;
+  const groupTransitionProps = (0, _utils.useSlotProps)({
+    elementType: GroupTransition,
+    ownerState: {},
+    externalSlotProps: inSlotProps?.groupTransition,
+    additionalProps: {
+      unmountOnExit: true,
+      in: expanded,
+      component: 'ul',
+      role: 'group'
+    },
+    className: classes.groupTransition
+  });
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
   const _useSlotProps = (0, _utils.useSlotProps)({
       elementType: ExpansionIcon,
@@ -293,13 +305,8 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       displayIcon: displayIcon,
       ownerState: ownerState
     }, ContentProps)), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
-      as: TransitionComponent,
-      unmountOnExit: true,
-      className: classes.group,
-      in: expanded,
-      component: "ul",
-      role: "group"
-    }, TransitionProps, {
+      as: GroupTransition
+    }, groupTransitionProps, {
       children: children
     }))]
   }));
@@ -359,16 +366,5 @@ TreeItem.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  /**
-   * The component used for the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
-   */
-  TransitionComponent: _propTypes.default.elementType,
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   */
-  TransitionProps: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 };

package/node/TreeItem/treeItemClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getTreeItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTreeItem', slot);
 }
-const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'group', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);
+const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);

package/node/TreeView/TreeView.js

@@ -78,7 +78,8 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
-      focusNode: _propTypes.default.func.isRequired
+      focusNode: _propTypes.default.func.isRequired,
+      getItem: _propTypes.default.func.isRequired
     })
   }),
   /**

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.0.0-beta.5
+ * @mui/x-tree-view v7.0.0-beta.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -22,22 +22,36 @@ const useTreeViewJSXNodes = ({
 }) => {
   const insertJSXNode = (0, _useEventCallback.default)(node => {
     setState(prevState => {
-      if (prevState.nodeMap[node.id] != null) {
+      if (prevState.nodes.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
+        nodes: (0, _extends2.default)({}, prevState.nodes, {
+          nodeMap: (0, _extends2.default)({}, prevState.nodes.nodeMap, {
+            [node.id]: node
+          }),
+          // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
+          itemMap: (0, _extends2.default)({}, prevState.nodes.itemMap, {
+            [node.id]: {
+              id: node.id,
+              label: node.label
+            }
+          })
         })
       });
     });
   });
   const removeJSXNode = (0, _useEventCallback.default)(nodeId => {
     setState(prevState => {
-      const newMap = (0, _extends2.default)({}, prevState.nodeMap);
-      delete newMap[nodeId];
+      const newNodeMap = (0, _extends2.default)({}, prevState.nodes.nodeMap);
+      const newItemMap = (0, _extends2.default)({}, prevState.nodes.itemMap);
+      delete newNodeMap[nodeId];
+      delete newItemMap[nodeId];
       return (0, _extends2.default)({}, prevState, {
-        nodeMap: newMap
+        nodes: (0, _extends2.default)({}, prevState.nodes, {
+          nodeMap: newNodeMap,
+          itemMap: newItemMap
+        })
       });
     });
     (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeNode', {

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

@@ -12,13 +12,14 @@ var _useTreeView = require("../../useTreeView/useTreeView.utils");
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const updateState = ({
+const updateNodesState = ({
   items,
   isItemDisabled,
   getItemLabel,
   getItemId
 }) => {
   const nodeMap = {};
+  const itemMap = {};
   const processItem = (item, index, parentId) => {
     const id = getItemId ? getItemId(item) : item.id;
     if (id == null) {
@@ -36,10 +37,11 @@ const updateState = ({
       label,
       index,
       parentId,
-      idAttribute: id,
+      idAttribute: undefined,
       expandable: !!item.children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false
     };
+    itemMap[id] = item;
     return {
       id,
       children: item.children?.map((child, childIndex) => processItem(child, childIndex, id))
@@ -48,16 +50,19 @@ const updateState = ({
   const nodeTree = items.map((item, itemIndex) => processItem(item, itemIndex, null));
   return {
     nodeMap,
-    nodeTree
+    nodeTree,
+    itemMap
   };
 };
 const useTreeViewNodes = ({
   instance,
+  publicAPI,
   params,
   state,
   setState
 }) => {
-  const getNode = React.useCallback(nodeId => state.nodeMap[nodeId], [state.nodeMap]);
+  const getNode = React.useCallback(nodeId => state.nodes.nodeMap[nodeId], [state.nodes.nodeMap]);
+  const getItem = React.useCallback(nodeId => state.nodes.itemMap[nodeId], [state.nodes.itemMap]);
   const isNodeDisabled = React.useCallback(nodeId => {
     if (nodeId == null) {
       return false;
@@ -79,7 +84,7 @@ const useTreeViewNodes = ({
     }
     return false;
   }, [instance]);
-  const getChildrenIds = (0, _useEventCallback.default)(nodeId => Object.values(state.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
+  const getChildrenIds = (0, _useEventCallback.default)(nodeId => Object.values(state.nodes.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
   const getNavigableChildrenIds = nodeId => {
     let childrenIds = instance.getChildrenIds(nodeId);
     if (!params.disabledItemsFocusable) {
@@ -89,20 +94,22 @@ const useTreeViewNodes = ({
   };
   React.useEffect(() => {
     setState(prevState => {
-      const newState = updateState({
+      const newState = updateNodesState({
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.nodeMap).forEach(node => {
+      Object.values(prevState.nodes.nodeMap).forEach(node => {
         if (!newState.nodeMap[node.id]) {
           (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeNode', {
             id: node.id
           });
         }
       });
-      return (0, _extends2.default)({}, prevState, newState);
+      return (0, _extends2.default)({}, prevState, {
+        nodes: newState
+      });
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
   const getNodesToRender = (0, _useEventCallback.default)(() => {
@@ -110,7 +117,7 @@ const useTreeViewNodes = ({
       id,
       children
     }) => {
-      const node = state.nodeMap[id];
+      const node = state.nodes.nodeMap[id];
       return {
         label: node.label,
         nodeId: node.id,
@@ -118,15 +125,19 @@ const useTreeViewNodes = ({
         children: children?.map(getPropsFromNodeId)
       };
     };
-    return state.nodeTree.map(getPropsFromNodeId);
+    return state.nodes.nodeTree.map(getPropsFromNodeId);
   });
   (0, _useTreeView.populateInstance)(instance, {
     getNode,
+    getItem,
     getNodesToRender,
     getChildrenIds,
     getNavigableChildrenIds,
     isNodeDisabled
   });
+  (0, _useTreeView.populatePublicAPI)(publicAPI, {
+    getItem
+  });
   return {
     contextValue: {
       disabledItemsFocusable: params.disabledItemsFocusable
@@ -134,11 +145,13 @@ const useTreeViewNodes = ({
   };
 };
 exports.useTreeViewNodes = useTreeViewNodes;
-useTreeViewNodes.getInitialState = params => updateState({
-  items: params.items,
-  isItemDisabled: params.isItemDisabled,
-  getItemId: params.getItemId,
-  getItemLabel: params.getItemLabel
+useTreeViewNodes.getInitialState = params => ({
+  nodes: updateNodesState({
+    items: params.items,
+    isItemDisabled: params.isItemDisabled,
+    getItemId: params.getItemId,
+    getItemLabel: params.getItemLabel
+  })
 });
 useTreeViewNodes.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.0.0-beta.5",
+  "version": "7.0.0-beta.6",
   "description": "The community edition of the tree view components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -32,7 +32,7 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.0",
     "@mui/base": "^5.0.0-beta.36",
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",