@mui/x-tree-view 7.0.0-alpha.9 → 7.0.0-beta.2

package/README.md

@@ -1,7 +1,7 @@
-# MUI X Tree View
+# MUI X Tree View
 
 This package is the community edition of the tree view components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
 
 ## Installation
 

package/SimpleTreeView/SimpleTreeView.js

@@ -127,24 +127,6 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedNodes: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The id of the item.
-   * @default `(item) => item.id`
-   */
-  getItemId: PropTypes.func,
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The label of the item.
-   * @default `(item) => item.label`
-   */
-  getItemLabel: PropTypes.func,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.

package/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -4,5 +4,5 @@ export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals/mo
 export type SimpleTreeViewPlugins = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
 export type SimpleTreeViewPluginSlots = DefaultTreeViewPluginSlots;
 export type SimpleTreeViewPluginSlotProps = DefaultTreeViewPluginSlotProps;
-export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends Omit<DefaultTreeViewPluginParameters<any, Multiple>, 'items' | 'isItemDisabled'> {
+export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends Omit<DefaultTreeViewPluginParameters<any, Multiple>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'> {
 }

package/TreeItem/TreeItem.js

@@ -59,12 +59,14 @@ const StyledTreeItemContent = styled(TreeItemContent, {
 })(({
   theme
 }) => ({
-  padding: '0 8px',
+  padding: theme.spacing(0.5, 1),
+  borderRadius: theme.shape.borderRadius,
   width: '100%',
   boxSizing: 'border-box',
   // prevent width + padding to overflow
   display: 'flex',
   alignItems: 'center',
+  gap: theme.spacing(1),
   cursor: 'pointer',
   WebkitTapHighlightColor: 'transparent',
   '&:hover': {
@@ -95,8 +97,7 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     }
   },
   [`& .${treeItemClasses.iconContainer}`]: {
-    marginRight: 4,
-    width: 15,
+    width: 16,
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'center',
@@ -105,7 +106,6 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     }
   },
   [`& .${treeItemClasses.label}`]: _extends({
-    paddingLeft: 4,
     width: '100%',
     boxSizing: 'border-box',
     // prevent width + padding to overflow
@@ -121,7 +121,7 @@ const TreeItemGroup = styled(Collapse, {
 })({
   margin: 0,
   padding: 0,
-  marginLeft: 17
+  paddingLeft: 12
 });
 
 /**
@@ -179,7 +179,13 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     endIcon: (_inSlots$endIcon = inSlots == null ? void 0 : inSlots.endIcon) != null ? _inSlots$endIcon : contextIcons.slots.endIcon,
     icon: inSlots == null ? void 0 : inSlots.icon
   };
-  const expandable = Boolean(Array.isArray(children) ? children.length : children);
+  const isExpandable = reactChildren => {
+    if (Array.isArray(reactChildren)) {
+      return reactChildren.length > 0 && reactChildren.some(isExpandable);
+    }
+    return Boolean(reactChildren);
+  };
+  const expandable = isExpandable(children);
   const expanded = instance.isNodeExpanded(nodeId);
   const focused = instance.isNodeFocused(nodeId);
   const selected = instance.isNodeSelected(nodeId);

package/TreeView/TreeView.js

@@ -100,24 +100,6 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedNodes: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The id of the item.
-   * @default `(item) => item.id`
-   */
-  getItemId: PropTypes.func,
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The label of the item.
-   * @default `(item) => item.label`
-   */
-  getItemLabel: PropTypes.func,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.

package/index.js

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

package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -12,11 +12,16 @@ export const useTreeViewJSXNodes = ({
   setState
 }) => {
   const insertJSXNode = useEventCallback(node => {
-    setState(prevState => _extends({}, prevState, {
-      nodeMap: _extends({}, 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 _extends({}, prevState, {
+        nodeMap: _extends({}, prevState.nodeMap, {
+          [node.id]: node
+        })
+      });
+    });
   });
   const removeJSXNode = useEventCallback(nodeId => {
     setState(prevState => {
@@ -64,7 +69,13 @@ const useTreeViewJSXNodesItemPlugin = ({
   const {
     instance
   } = useTreeViewContext();
-  const expandable = Boolean(Array.isArray(children) ? children.length : children);
+  const isExpandable = reactChildren => {
+    if (Array.isArray(reactChildren)) {
+      return reactChildren.length > 0 && reactChildren.some(isExpandable);
+    }
+    return Boolean(reactChildren);
+  };
+  const expandable = isExpandable(children);
   const [treeItemElement, setTreeItemElement] = React.useState(null);
   const contentRef = React.useRef(null);
   const handleRef = useForkRef(setTreeItemElement, ref);

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -16,6 +16,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'));

package/legacy/SimpleTreeView/SimpleTreeView.js

@@ -125,24 +125,6 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedNodes: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The id of the item.
-   * @default `(item) => item.id`
-   */
-  getItemId: PropTypes.func,
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The label of the item.
-   * @default `(item) => item.label`
-   */
-  getItemLabel: PropTypes.func,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.

package/legacy/TreeItem/TreeItem.js

@@ -56,12 +56,14 @@ var StyledTreeItemContent = styled(TreeItemContent, {
 })(function (_ref3) {
   var theme = _ref3.theme;
   return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    padding: '0 8px',
+    padding: theme.spacing(0.5, 1),
+    borderRadius: theme.shape.borderRadius,
     width: '100%',
     boxSizing: 'border-box',
     // prevent width + padding to overflow
     display: 'flex',
     alignItems: 'center',
+    gap: theme.spacing(1),
     cursor: 'pointer',
     WebkitTapHighlightColor: 'transparent',
     '&:hover': {
@@ -88,8 +90,7 @@ var StyledTreeItemContent = styled(TreeItemContent, {
   }, "&.".concat(treeItemClasses.focused), {
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   })), "& .".concat(treeItemClasses.iconContainer), {
-    marginRight: 4,
-    width: 15,
+    width: 16,
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'center',
@@ -97,7 +98,6 @@ var StyledTreeItemContent = styled(TreeItemContent, {
       fontSize: 18
     }
   }), "& .".concat(treeItemClasses.label), _extends({
-    paddingLeft: 4,
     width: '100%',
     boxSizing: 'border-box',
     // prevent width + padding to overflow
@@ -115,7 +115,7 @@ var TreeItemGroup = styled(Collapse, {
 })({
   margin: 0,
   padding: 0,
-  marginLeft: 17
+  paddingLeft: 12
 });
 
 /**
@@ -169,7 +169,13 @@ export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, i
     endIcon: (_inSlots$endIcon = inSlots == null ? void 0 : inSlots.endIcon) != null ? _inSlots$endIcon : contextIcons.slots.endIcon,
     icon: inSlots == null ? void 0 : inSlots.icon
   };
-  var expandable = Boolean(Array.isArray(children) ? children.length : children);
+  var isExpandable = function isExpandable(reactChildren) {
+    if (Array.isArray(reactChildren)) {
+      return reactChildren.length > 0 && reactChildren.some(isExpandable);
+    }
+    return Boolean(reactChildren);
+  };
+  var expandable = isExpandable(children);
   var expanded = instance.isNodeExpanded(nodeId);
   var focused = instance.isNodeFocused(nodeId);
   var selected = instance.isNodeSelected(nodeId);

package/legacy/TreeView/TreeView.js

@@ -100,24 +100,6 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedNodes: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The id of the item.
-   * @default `(item) => item.id`
-   */
-  getItemId: PropTypes.func,
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The label of the item.
-   * @default `(item) => item.label`
-   */
-  getItemLabel: PropTypes.func,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.

package/legacy/index.js

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

package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -14,6 +14,9 @@ export var useTreeViewJSXNodes = function useTreeViewJSXNodes(_ref) {
     setState = _ref.setState;
   var insertJSXNode = useEventCallback(function (node) {
     setState(function (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: \"".concat(node.id, "\"")].join('\n'));
+      }
       return _extends({}, prevState, {
         nodeMap: _extends({}, prevState.nodeMap, _defineProperty({}, node.id, node))
       });
@@ -62,7 +65,13 @@ var useTreeViewJSXNodesItemPlugin = function useTreeViewJSXNodesItemPlugin(_ref2
     inContentProps = props.ContentProps;
   var _useTreeViewContext = useTreeViewContext(),
     instance = _useTreeViewContext.instance;
-  var expandable = Boolean(Array.isArray(children) ? children.length : children);
+  var isExpandable = function isExpandable(reactChildren) {
+    if (Array.isArray(reactChildren)) {
+      return reactChildren.length > 0 && reactChildren.some(isExpandable);
+    }
+    return Boolean(reactChildren);
+  };
+  var expandable = isExpandable(children);
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     treeItemElement = _React$useState2[0],

package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -15,6 +15,9 @@ var updateState = function updateState(_ref) {
     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: \"".concat(id, "\"")].join('\n'));
+    }
     var 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'));

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -126,24 +126,6 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedNodes: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The id of the item.
-   * @default `(item) => item.id`
-   */
-  getItemId: PropTypes.func,
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The label of the item.
-   * @default `(item) => item.label`
-   */
-  getItemLabel: PropTypes.func,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.

package/modern/TreeItem/TreeItem.js

@@ -59,12 +59,14 @@ const StyledTreeItemContent = styled(TreeItemContent, {
 })(({
   theme
 }) => ({
-  padding: '0 8px',
+  padding: theme.spacing(0.5, 1),
+  borderRadius: theme.shape.borderRadius,
   width: '100%',
   boxSizing: 'border-box',
   // prevent width + padding to overflow
   display: 'flex',
   alignItems: 'center',
+  gap: theme.spacing(1),
   cursor: 'pointer',
   WebkitTapHighlightColor: 'transparent',
   '&:hover': {
@@ -95,8 +97,7 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     }
   },
   [`& .${treeItemClasses.iconContainer}`]: {
-    marginRight: 4,
-    width: 15,
+    width: 16,
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'center',
@@ -105,7 +106,6 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     }
   },
   [`& .${treeItemClasses.label}`]: _extends({
-    paddingLeft: 4,
     width: '100%',
     boxSizing: 'border-box',
     // prevent width + padding to overflow
@@ -121,7 +121,7 @@ const TreeItemGroup = styled(Collapse, {
 })({
   margin: 0,
   padding: 0,
-  marginLeft: 17
+  paddingLeft: 12
 });
 
 /**
@@ -178,7 +178,13 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     endIcon: inSlots?.endIcon ?? contextIcons.slots.endIcon,
     icon: inSlots?.icon
   };
-  const expandable = Boolean(Array.isArray(children) ? children.length : children);
+  const isExpandable = reactChildren => {
+    if (Array.isArray(reactChildren)) {
+      return reactChildren.length > 0 && reactChildren.some(isExpandable);
+    }
+    return Boolean(reactChildren);
+  };
+  const expandable = isExpandable(children);
   const expanded = instance.isNodeExpanded(nodeId);
   const focused = instance.isNodeFocused(nodeId);
   const selected = instance.isNodeSelected(nodeId);

package/modern/TreeView/TreeView.js

@@ -100,24 +100,6 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedNodes: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The id of the item.
-   * @default `(item) => item.id`
-   */
-  getItemId: PropTypes.func,
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The label of the item.
-   * @default `(item) => item.label`
-   */
-  getItemLabel: PropTypes.func,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.

package/modern/index.js

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

package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -12,11 +12,16 @@ export const useTreeViewJSXNodes = ({
   setState
 }) => {
   const insertJSXNode = useEventCallback(node => {
-    setState(prevState => _extends({}, prevState, {
-      nodeMap: _extends({}, 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 _extends({}, prevState, {
+        nodeMap: _extends({}, prevState.nodeMap, {
+          [node.id]: node
+        })
+      });
+    });
   });
   const removeJSXNode = useEventCallback(nodeId => {
     setState(prevState => {
@@ -64,7 +69,13 @@ const useTreeViewJSXNodesItemPlugin = ({
   const {
     instance
   } = useTreeViewContext();
-  const expandable = Boolean(Array.isArray(children) ? children.length : children);
+  const isExpandable = reactChildren => {
+    if (Array.isArray(reactChildren)) {
+      return reactChildren.length > 0 && reactChildren.some(isExpandable);
+    }
+    return Boolean(reactChildren);
+  };
+  const expandable = isExpandable(children);
   const [treeItemElement, setTreeItemElement] = React.useState(null);
   const contentRef = React.useRef(null);
   const handleRef = useForkRef(setTreeItemElement, ref);

package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -15,6 +15,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'));

package/node/SimpleTreeView/SimpleTreeView.js

@@ -135,24 +135,6 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The id of the item.
-   * @default `(item) => item.id`
-   */
-  getItemId: _propTypes.default.func,
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The label of the item.
-   * @default `(item) => item.label`
-   */
-  getItemLabel: _propTypes.default.func,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.

package/node/TreeItem/TreeItem.js

@@ -67,12 +67,14 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
 })(({
   theme
 }) => ({
-  padding: '0 8px',
+  padding: theme.spacing(0.5, 1),
+  borderRadius: theme.shape.borderRadius,
   width: '100%',
   boxSizing: 'border-box',
   // prevent width + padding to overflow
   display: 'flex',
   alignItems: 'center',
+  gap: theme.spacing(1),
   cursor: 'pointer',
   WebkitTapHighlightColor: 'transparent',
   '&:hover': {
@@ -103,8 +105,7 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
     }
   },
   [`& .${_treeItemClasses.treeItemClasses.iconContainer}`]: {
-    marginRight: 4,
-    width: 15,
+    width: 16,
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'center',
@@ -113,7 +114,6 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
     }
   },
   [`& .${_treeItemClasses.treeItemClasses.label}`]: (0, _extends2.default)({
-    paddingLeft: 4,
     width: '100%',
     boxSizing: 'border-box',
     // prevent width + padding to overflow
@@ -129,7 +129,7 @@ const TreeItemGroup = (0, _styles.styled)(_Collapse.default, {
 })({
   margin: 0,
   padding: 0,
-  marginLeft: 17
+  paddingLeft: 12
 });
 
 /**
@@ -186,7 +186,13 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     endIcon: inSlots?.endIcon ?? contextIcons.slots.endIcon,
     icon: inSlots?.icon
   };
-  const expandable = Boolean(Array.isArray(children) ? children.length : children);
+  const isExpandable = reactChildren => {
+    if (Array.isArray(reactChildren)) {
+      return reactChildren.length > 0 && reactChildren.some(isExpandable);
+    }
+    return Boolean(reactChildren);
+  };
+  const expandable = isExpandable(children);
   const expanded = instance.isNodeExpanded(nodeId);
   const focused = instance.isNodeFocused(nodeId);
   const selected = instance.isNodeSelected(nodeId);

package/node/TreeView/TreeView.js

@@ -109,24 +109,6 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedNodes: _propTypes.default.arrayOf(_propTypes.default.string),
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The id of the item.
-   * @default `(item) => item.id`
-   */
-  getItemId: _propTypes.default.func,
-  /**
-   * Used to determine the string label for a given item.
-   *
-   * @template R
-   * @param {R} item The item to check.
-   * @returns {string} The label of the item.
-   * @default `(item) => item.label`
-   */
-  getItemLabel: _propTypes.default.func,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.

package/node/index.js

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

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 => {
@@ -74,7 +79,13 @@ const useTreeViewJSXNodesItemPlugin = ({
   const {
     instance
   } = (0, _useTreeViewContext.useTreeViewContext)();
-  const expandable = Boolean(Array.isArray(children) ? children.length : children);
+  const isExpandable = reactChildren => {
+    if (Array.isArray(reactChildren)) {
+      return reactChildren.length > 0 && reactChildren.some(isExpandable);
+    }
+    return Boolean(reactChildren);
+  };
+  const expandable = isExpandable(children);
   const [treeItemElement, setTreeItemElement] = React.useState(null);
   const contentRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(setTreeItemElement, ref);