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

package/CHANGELOG.md

@@ -3,6 +3,335 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.0.0-beta.3
+
+_Feb 16, 2024_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Charts get a [built in grid](https://next.mui.com/x/react-charts/axis/#grid)
+
+  <img src="https://github.com/mui/mui-x/assets/45398769/74299f54-f020-4135-b38c-dc88a230db30" width="510" alt="Charts Grid" />
+
+- 🎛️ Charts get a [Gauge component](https://next.mui.com/x/react-charts/gauge/).
+
+  <img src="https://github.com/mui/mui-x/assets/45398769/fb7a94b5-bef6-4fc2-a0cd-d6ff5b60fa8b" width="510" alt="Guage Chart" />
+
+- 🐞 Bugfixes
+
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `rowEditCommit` event and the related prop `onRowEditCommit` was removed. The [`processRowUpdate`](https://next.mui.com/x/react-data-grid/editing/#the-processrowupdate-callback) prop can be used in place.
+
+#### `@mui/x-data-grid@7.0.0-beta.3`
+
+- [DataGrid] Performance: avoid style invalidation (#12019) @romgrk
+- [DataGrid] Remove legacy editing API event: `rowEditCommit` (#12073) @MBilalShafi
+- [DataGrid] Fix styling grid filter input single select (#11520) @FreakDroid
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-beta.3`.
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.3`.
+
+### Charts / `@mui/x-charts@7.0.0-beta.3`
+
+- [charts] Add Gauge component (#11996) @alexfauquette
+- [charts] Add a `ChartsGrid` component (#11034) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@7.0.0-beta.3`
+
+- [TreeView] Remove instance existence checks (#12066) @flaviendelangle
+
+### Docs
+
+- [docs] Complete charts API pages (#12038) @alexfauquette
+- [docs] Add more illustrations to the charts overview page (#12041) @danilo-leal
+- [docs] Fix 301 redirection to StackBlitz @oliviertassinari
+- [docs] Fix Tree space to match the reset of the docs @oliviertassinari
+- [docs] Fix `dayOfWeekFormatter` typo in the pickers v6 to v7 migration document (#12043) @StylesTrip
+- [docs] Fix redirection @oliviertassinari
+- [docs] Fix typo for `AdapterDateFnsV3` (#12036) @flaviendelangle
+- [docs] Removed `focused` prop from demo (#12092) @michelengelen
+
+### Core
+
+- [core] Fix CodeSandbox CI template @oliviertassinari
+- [core] Sort prop asc (#12033) @oliviertassinari
+- [core] Bump monorepo (#12055) @alexfauquette
+
+## v7.0.0-beta.2
+
+_Feb 9, 2024_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Add slot typings on the Data Grid components (#11795) @romgrk
+- 🎁 Support UTC date formatting in Charts tooltip (#11943) @shaharyar-shamshi
+- 🌍 Improve Danish (da-DK) locale Data Grid (#11877) @ShahrazH
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.0.0-beta.2`
+
+- [DataGrid] Add `removeAllFilterItems` as a reason of `onFilterModelChange` callback (#11911) @shaharyar-shamshi
+- [DataGrid] Add slot typings (#11795) @romgrk
+- [DataGrid] Add support for dialogs in menu actions (#11909) @cherniavskii
+- [DataGrid] Allow passing readonly arrays to `pageSizeOptions` prop (#11609) @pcorpet
+- [DataGrid] Fix incorrect computation of `lastPage` in `GridPagination` (#11958) @MBilalShafi
+- [DataGrid] Improve vertical scrolling performance (#11924) @romgrk
+- [l10n] Improve Danish (da-DK) locale (#11877) @ShahrazH
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@v7.0.0-beta.2`.
+
+#### `@mui/x-data-grid-premium@v7.0.0-beta.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.2`, plus:
+
+- [DataGridPremium] Fix autosize grouping cell (#11870) @romgrk
+- [DataGridPremium] Fix clipboard paste not working with Caps Lock enabled (#11965) @shaharyar-shamshi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.2`
+
+- [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11936) @LukasTy
+- [pickers] Limit the valid values of `TDate` (#11791) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-beta.2`.
+
+### Charts / `@mui/x-charts@7.0.0-beta.2`
+
+- [charts] Add `reverse` property to axes (#11899) @alexfauquette
+- [charts] Allow series ids to be numbers (#11941) @alexfauquette
+- [charts] Support UTC date formatting in tooltip (#11943) @shaharyar-shamshi
+
+### Tree View / `@mui/x-tree-view@7.0.0-beta.2`
+
+- [TreeView] Correctly detect if an item is expandable (#11963) @swalker326
+- [TreeView] Polish the default design & revise the simple version pages (#11529) @danilo-leal
+
+### License
+
+#### Breaking changes
+
+- If you're using the [commercial license](https://next.mui.com/x/introduction/licensing), you need to update the import path:
+
+  ```diff
+  -import { LicenseInfo } from '@mui/x-license-pro';
+  +import { LicenseInfo } from '@mui/x-license';
+  ```
+
+`@mui/x-license@7.0.0-beta.2`
+
+- [license] Rename `@mui/x-license-pro` to `@mui/x-license` (#11938) @cherniavskii
+
+### Docs
+
+- [docs] Add a note about `AdapterDateFnsV3` on the Getting Started page (#11985) @flaviendelangle
+- [docs] Add missing `Charts` breaking change steps (#11971) @alexfauquette
+- [docs] Fix `ChartsTooltip` typo (#11961) @thisisharsh7
+- [docs] Refactor `Localization` documentation sections (#11989) @LukasTy
+- [docs] Use "cannot" instead of "can't" or "can not" (#11986) @flaviendelangle
+- [docs] Add quick fixes to the migration guide (#11806) @danilo-leal
+- [docs] Avoid use of shorthand (#12000) @oliviertassinari
+- [docs] Avoid the use of MUI Core @oliviertassinari
+- [docs] Fix image size and dark mode @oliviertassinari
+- [docs] Follow blank line convention with use client @oliviertassinari
+- [docs] Stable layout between light and dark mode @oliviertassinari
+
+### Core
+
+- [core] Add `docs:serve` script (#11935) @cherniavskii
+- [core] Bump monorepo (#12001) @cherniavskii
+- [core] Deprecate `LicenseInfo` re-exports (#11956) @cherniavskii
+- [core] Fix `test_types` failing on the `next` branch (#11944) @cherniavskii
+- [core] Fix failing `test_static` on the next branch (#11977) @cherniavskii
+- [core] Flatten grid packages folder (#11946) @cherniavskii
+- [core] Improve license info deprecation message (#11974) @cherniavskii
+- [core] Integrate changes from Core #40842 PR (#11801) @michaldudak
+- [core] Move next config to ESM (#11882) @Janpot
+- [core] Add auto-message on closed issues (#11805) @michelengelen
+- [core] Simplify bug reproduction (#11849) @oliviertassinari
+- [core] Fix npm reference @oliviertassinari
+- [core] Normalize issue template @oliviertassinari
+
+## 7.0.0-beta.1
+
+_Feb 1, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🏃 Improve the filtering performance of the Data Grid by changing the `GridColDef` methods signatures (#11573) @cherniavskii
+- 🎁 The Line Chart component now has animation by default (#11620) @alexfauquette
+- 🚀 All charts have click handlers (#11411) @alexfauquette
+  Test their respective documentation demonstrations to know more about the data format:
+
+  - [Scatter Chart](https://next.mui.com/x/react-charts/scatter/#click-event)
+  - [Line Chart](https://next.mui.com/x/react-charts/lines/#click-event)
+  - [Bar Chart](https://next.mui.com/x/react-charts/bars/#click-event)
+  - [Pie Chart](https://next.mui.com/x/react-charts/pie/#click-event)
+
+  Big thanks to @giladappsforce and @yaredtsy for their contribution on exploring this feature.
+
+### Data Grid
+
+### Breaking changes
+
+- The signature of `GridColDef['valueGetter']` has been changed for performance reasons:
+
+  ```diff
+  - valueGetter: ({ value, row }) => value,
+  + valueGetter: (value, row, column, apiRef) => value,
+  ```
+
+  The `GridValueGetterParams` interface has been removed:
+
+  ```diff
+  - const customValueGetter = (params: GridValueGetterParams) => params.row.budget;
+  + const customValueGetter: GridValueGetterFn = (value, row) => row.budget;
+  ```
+
+- The signature of `GridColDef['valueFormatter']` has been changed for performance reasons:
+
+  ```diff
+  - valueFormatter: ({ value }) => value,
+  + valueFormatter: (value, row, column, apiRef) => value,
+  ```
+
+  The `GridValueFormatterParams` interface has been removed:
+
+  ```diff
+  - const gridDateFormatter = ({ value, field, id }: GridValueFormatterParams<Date>) => value.toLocaleDateString();
+  + const gridDateFormatter: GridValueFormatter = (value: Date) => value.toLocaleDateString();
+  ```
+
+- The signature of `GridColDef['valueSetter']` has been changed for performance reasons:
+
+  ```diff
+  - valueSetter: (params) => {
+  -   const [firstName, lastName] = params.value!.toString().split(' ');
+  -   return { ...params.row, firstName, lastName };
+  - }
+  + valueSetter: (value, row) => {
+  +   const [firstName, lastName] = value!.toString().split(' ');
+  +   return { ...row, firstName, lastName };
+  +}
+  ```
+
+  The `GridValueSetterParams` interface has been removed:
+
+  ```diff
+  - const setFullName = (params: GridValueSetterParams) => {
+  -   const [firstName, lastName] = params.value!.toString().split(' ');
+  -   return { ...params.row, firstName, lastName };
+  - };
+  + const setFullName: GridValueSetter<Row> = (value, row) => {
+  +   const [firstName, lastName] = value!.toString().split(' ');
+  +   return { ...row, firstName, lastName };
+  + }
+  ```
+
+- The signature of `GridColDef['valueParser']` has been changed for performance reasons:
+
+  ```diff
+  - valueParser: (value, params: GridCellParams) => value.toLowerCase(),
+  + valueParser: (value, row, column, apiRef) => value.toLowerCase(),
+  ```
+
+- The signature of `GridColDef['colSpan']` has been changed for performance reasons:
+
+  ```diff
+  - colSpan: ({ row, field, value }: GridCellParams) => (row.id === 'total' ? 2 : 1),
+  + colSpan: (value, row, column, apiRef) => (row.id === 'total' ? 2 : 1),
+  ```
+
+- The signature of `GridColDef['pastedValueParser']` has been changed for performance reasons:
+
+  ```diff
+  - pastedValueParser: (value, params) => new Date(value),
+  + pastedValueParser: (value, row, column, apiRef) => new Date(value),
+  ```
+
+- The signature of `GridColDef['groupingValueGetter']` has been changed for performance reasons:
+
+  ```diff
+  - groupingValueGetter: (params) => params.value.name,
+  + groupingValueGetter: (value: { name: string }) => value.name,
+  ```
+
+#### `@mui/x-data-grid@7.0.0-beta.1`
+
+- [DataGrid] Add `toggleAllMode` prop to the `columnsManagement` slot (#10794) @H999
+- [DataGrid] Change `GridColDef` methods signatures (#11573) @cherniavskii
+- [DataGrid] Fix row reorder with cell selection (#11783) @PEsteves8
+- [DataGrid] Make columns management' casing consistent (#11858) @MBilalShafi
+- [l10n] Improve Hebrew (he-IL) locale (#11788) @danielmishan85
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-beta.1`.
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.1`
+
+- [TimePicker] Add missing toolbar classes descriptions (#11856) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-beta.1`.
+
+### Charts
+
+#### Breaking changes
+
+- The line chart now have animation by default.
+  You can disable it with `skipAnimation` prop.
+  See [animation documentation](next.mui.com/x/react-charts/lines/#animation) for more information.
+
+- Pie charts `onClick` get renamed `onItemClick` for consistency with other charts click callback.
+
+`@mui/x-charts@7.0.0-beta.1`
+
+- [charts] Add `onClick` support (#11411) @alexfauquette
+- [charts] Add line animation (#11620) @alexfauquette
+- [charts] Document how to modify color according to values (#11824) @alexfauquette
+- [charts] Fix Tooltip crash with out of range lines (#11898) @alexfauquette
+
+### Docs
+
+- [docs] Add a general uplift to the changelog page (#11396) @danilo-leal
+- [docs] Do not reference the Tree View overview page in the API pages (#11826) @flaviendelangle
+- [docs] Fix charts API links (#11832) @alexfauquette
+- [docs] Improve Support page (#11556) @oliviertassinari
+- [docs] Improve column visibility documentation (#11857) @MBilalShafi
+- [docs] Polish header @oliviertassinari
+- [docs] Sync support page with core @oliviertassinari
+- [docs] Update whats new page with "v7 Beta blogpost" content (#11879) @joserodolfofreitas
+
+### Core
+
+- [core] Rely on immutable ref when possible (#11847) @oliviertassinari
+- [core] Bump monorepo (#11897) @alexfauquette
+
 ## 7.0.0-beta.0
 
 _Jan 26, 2024_
@@ -1873,6 +2202,146 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## v6.19.4
+
+_Feb 9, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Danish (da-DK) locale on the Data Grid (#11972) @ShahrazH
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.19.4`
+
+- [DataGrid] Add support for dialogs in menu actions (#11937) @cherniavskii
+- [DataGrid] Allow passing readonly arrays to `pageSizeOptions` prop (#11992) @pcorpet
+- [DataGrid] Fix row reorder with cell selection (#11878) @PEsteves8
+- [DataGrid] Replace `eval` with `new Function` (#11962) @cherniavskii
+- [l10n] Improve Danish (da-DK) locale (#11972) @ShahrazH
+
+#### `@mui/x-data-grid-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@v6.19.4`.
+
+#### `@mui/x-data-grid-premium@v6.19.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@v6.19.4`, plus:
+
+- [DataGridPremium] Fix autosize grouping cell (#11990) @romgrk
+- [DataGridPremium] Fix error after closing print export (#11889) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.19.4`
+
+- [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11940) @LukasTy
+
+#### `@mui/x-date-pickers-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@v6.19.4`.
+
+### Charts / `@mui/x-charts@v6.19.4`
+
+- [charts] Add `reverse` property to axes (#11959) @alexfauquette
+- [charts] Allow series ids to be numbers (#11960) @alexfauquette
+- [charts] Fix Proptypes error by supporting string values for axes (#11953) @alexfauquette
+
+### Docs
+
+- [docs] Add a note about `AdapterDateFnsV3` on the Getting Started page (#11987) @flaviendelangle
+- [docs] Avoid the use of MUI Core @oliviertassinari
+- [docs] Fix API links (#11930) @alexfauquette
+- [docs] Fix `ChartsTooltip` typo (#11967) @thisisharsh7
+- [docs] Refactor `Localization` documentation sections (#11997) @LukasTy
+- [code] Simplify bug reproduction (#11932) @alexfauquette
+
+## 6.19.3
+
+_Feb 1, 2024_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Hebrew (he-IL) locale (#11831) @danielmishan85
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.3`
+
+- [l10n] Improve Hebrew (he-IL) locale (@danielmishan85) (#11831)
+
+#### `@mui/x-data-grid-pro@6.19.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.19.3`.
+
+#### `@mui/x-data-grid-premium@6.19.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.19.3`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.3`
+
+- [TimePicker] Add missing toolbar classes descriptions (#11862) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.3`.
+
+### Charts / `@mui/x-charts@6.19.3`
+
+- [charts] Document how to modify color according to values (#11854) @alexfauquette
+
+### Docs
+
+- [docs] Add a general uplift to the whats new page (#11883) @danilo-leal
+- [docs] Fix 404 (#11852) @alexfauquette
+- [docs] Fix <title> generation (#11825) @alexfauquette
+- [docs] Fix docs:api when typo in slots typing (#11861) @alexfauquette
+- [docs] Improve Support page (#11556) @oliviertassinari
+- [docs] Sync support page with core @oliviertassinari
+- [docs] These API don't exist in MUI X v6 @oliviertassinari
+- [docs] Update whats new page with v7 Beta blogpost content (#11886) @joserodolfofreitas
+
+## 6.19.2
+
+_Jan 25, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Apply the `layout.tabs` class to `Tabs` slot (@LukasTy) (#11782)
+- 🐞 Bugfixes
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.2`
+
+- [pickers] Apply the `layout.tabs` class to `Tabs` slot (@LukasTy) (#11782)
+
+#### `@mui/x-date-pickers-pro@6.19.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.2`, plus:
+
+- [DateRangePicker] Remove `calendars` prop on `Mobile` (@LukasTy) (#11771)
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.2`
+
+- [DataGrid] Fix support for tree with more than 50,000 children (@zenazn) (#11808)
+
+#### `@mui/x-data-grid-pro@6.19.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.19.2`.
+
+#### `@mui/x-data-grid-premium@6.19.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.19.2`.
+
 ## 6.19.1
 
 _Jan 19, 2024_
@@ -6876,7 +7345,7 @@ You can find more information about the new api, including how to set those tran
 - [core] Add link to the security page on the `README` (#6073) @oliviertassinari
 - [core] Fix scroll restoration in the docs (#5938) @oliviertassinari
 - [core] Remove the Storybook (#6099) @flaviendelangle
-- [core] Tag release as `next` in NPM (#6256) @m4theushw
+- [core] Tag release as `next` in npm (#6256) @m4theushw
 - [core] Update monorepo (#6180) @flaviendelangle
 - [core] Use the `next` branch for Prettier (#6097) @flaviendelangle
 - [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari

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/TreeItem/useTreeItemState.js

@@ -12,7 +12,7 @@ export function useTreeItemState(nodeId) {
   const selected = instance.isNodeSelected(nodeId);
   const disabled = instance.isNodeDisabled(nodeId);
   const handleExpansion = event => {
-    if (instance && !disabled) {
+    if (!disabled) {
       if (!focused) {
         instance.focusNode(event, nodeId);
       }
@@ -25,7 +25,7 @@ export function useTreeItemState(nodeId) {
     }
   };
   const handleSelection = event => {
-    if (instance && !disabled) {
+    if (!disabled) {
       if (!focused) {
         instance.focusNode(event, nodeId);
       }

package/index.js

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

package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -69,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);
@@ -83,7 +89,7 @@ const useTreeViewJSXNodesItemPlugin = ({
   } = useDescendant(descendant);
   React.useEffect(() => {
     // On the first render a node's index will be -1. We want to wait for the real index.
-    if (instance && index !== -1) {
+    if (index !== -1) {
       instance.insertJSXNode({
         id: nodeId,
         idAttribute: id,
@@ -97,7 +103,7 @@ const useTreeViewJSXNodesItemPlugin = ({
     return undefined;
   }, [instance, parentId, index, nodeId, expandable, disabled, id]);
   React.useEffect(() => {
-    if (instance && label) {
+    if (label) {
       var _contentRef$current$t, _contentRef$current;
       return instance.mapFirstCharFromJSX(nodeId, ((_contentRef$current$t = (_contentRef$current = contentRef.current) == null ? void 0 : _contentRef$current.textContent) != null ? _contentRef$current$t : '').substring(0, 1).toLowerCase());
     }

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/TreeItem/useTreeItemState.js

@@ -9,7 +9,7 @@ export function useTreeItemState(nodeId) {
   var selected = instance.isNodeSelected(nodeId);
   var disabled = instance.isNodeDisabled(nodeId);
   var handleExpansion = function handleExpansion(event) {
-    if (instance && !disabled) {
+    if (!disabled) {
       if (!focused) {
         instance.focusNode(event, nodeId);
       }
@@ -22,7 +22,7 @@ export function useTreeItemState(nodeId) {
     }
   };
   var handleSelection = function handleSelection(event) {
-    if (instance && !disabled) {
+    if (!disabled) {
       if (!focused) {
         instance.focusNode(event, nodeId);
       }

package/legacy/index.js

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

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

@@ -65,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],
@@ -83,7 +89,7 @@ var useTreeViewJSXNodesItemPlugin = function useTreeViewJSXNodesItemPlugin(_ref2
     parentId = _useDescendant.parentId;
   React.useEffect(function () {
     // On the first render a node's index will be -1. We want to wait for the real index.
-    if (instance && index !== -1) {
+    if (index !== -1) {
       instance.insertJSXNode({
         id: nodeId,
         idAttribute: id,
@@ -99,7 +105,7 @@ var useTreeViewJSXNodesItemPlugin = function useTreeViewJSXNodesItemPlugin(_ref2
     return undefined;
   }, [instance, parentId, index, nodeId, expandable, disabled, id]);
   React.useEffect(function () {
-    if (instance && label) {
+    if (label) {
       var _contentRef$current$t, _contentRef$current;
       return instance.mapFirstCharFromJSX(nodeId, ((_contentRef$current$t = (_contentRef$current = contentRef.current) == null ? void 0 : _contentRef$current.textContent) != null ? _contentRef$current$t : '').substring(0, 1).toLowerCase());
     }

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/TreeItem/useTreeItemState.js

@@ -12,7 +12,7 @@ export function useTreeItemState(nodeId) {
   const selected = instance.isNodeSelected(nodeId);
   const disabled = instance.isNodeDisabled(nodeId);
   const handleExpansion = event => {
-    if (instance && !disabled) {
+    if (!disabled) {
       if (!focused) {
         instance.focusNode(event, nodeId);
       }
@@ -25,7 +25,7 @@ export function useTreeItemState(nodeId) {
     }
   };
   const handleSelection = event => {
-    if (instance && !disabled) {
+    if (!disabled) {
       if (!focused) {
         instance.focusNode(event, nodeId);
       }

package/modern/index.js

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

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

@@ -69,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);
@@ -83,7 +89,7 @@ const useTreeViewJSXNodesItemPlugin = ({
   } = useDescendant(descendant);
   React.useEffect(() => {
     // On the first render a node's index will be -1. We want to wait for the real index.
-    if (instance && index !== -1) {
+    if (index !== -1) {
       instance.insertJSXNode({
         id: nodeId,
         idAttribute: id,
@@ -97,7 +103,7 @@ const useTreeViewJSXNodesItemPlugin = ({
     return undefined;
   }, [instance, parentId, index, nodeId, expandable, disabled, id]);
   React.useEffect(() => {
-    if (instance && label) {
+    if (label) {
       return instance.mapFirstCharFromJSX(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
     }
     return undefined;

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/TreeItem/useTreeItemState.js

@@ -18,7 +18,7 @@ function useTreeItemState(nodeId) {
   const selected = instance.isNodeSelected(nodeId);
   const disabled = instance.isNodeDisabled(nodeId);
   const handleExpansion = event => {
-    if (instance && !disabled) {
+    if (!disabled) {
       if (!focused) {
         instance.focusNode(event, nodeId);
       }
@@ -31,7 +31,7 @@ function useTreeItemState(nodeId) {
     }
   };
   const handleSelection = event => {
-    if (instance && !disabled) {
+    if (!disabled) {
       if (!focused) {
         instance.focusNode(event, nodeId);
       }

package/node/index.js

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

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

@@ -79,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);
@@ -93,7 +99,7 @@ const useTreeViewJSXNodesItemPlugin = ({
   } = (0, _DescendantProvider.useDescendant)(descendant);
   React.useEffect(() => {
     // On the first render a node's index will be -1. We want to wait for the real index.
-    if (instance && index !== -1) {
+    if (index !== -1) {
       instance.insertJSXNode({
         id: nodeId,
         idAttribute: id,
@@ -107,7 +113,7 @@ const useTreeViewJSXNodesItemPlugin = ({
     return undefined;
   }, [instance, parentId, index, nodeId, expandable, disabled, id]);
   React.useEffect(() => {
-    if (instance && label) {
+    if (label) {
       return instance.mapFirstCharFromJSX(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
     }
     return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.0.0-beta.0",
+  "version": "7.0.0-beta.3",
   "description": "The community edition of the tree view components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -32,10 +32,10 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.8",
-    "@mui/base": "^5.0.0-beta.33",
-    "@mui/system": "^5.15.6",
-    "@mui/utils": "^5.15.6",
+    "@babel/runtime": "^7.23.9",
+    "@mui/base": "^5.0.0-beta.36",
+    "@mui/system": "^5.15.9",
+    "@mui/utils": "^5.15.9",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",