@mui/x-tree-view 7.0.0-beta.7 → 7.0.0

package/CHANGELOG.md

@@ -3,6 +3,189 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.0.0
+
+_Mar 22, 2024_
+
+We're excited to [announce the first v7 stable release](https://mui.com/blog/mui-x-v7/)! 🎉🚀
+
+This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements.
+Migration guides are available with a complete list of the breaking changes:
+
+- [Data Grid](https://mui.com/x/migration/migration-data-grid-v6/)
+- [Date and Time Pickers](https://mui.com/x/migration/migration-pickers-v6/)
+- [Tree View](https://mui.com/x/migration/migration-tree-view-v6/)
+- [Charts](https://mui.com/x/migration/migration-charts-v6/)
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improve the usage of custom `viewRenderers` on `DateTimePicker` (#12441) @LukasTy
+- ✨ Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- 🕹️ Support controlled `density` for the Data Grid (#12332) @MBilalShafi
+- 🎁 Dynamic virtualization range for the Data Grid (#12353) @romgrk
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `density` is a [controlled prop](https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically) now, if you were previously passing the `density` prop to the Data Grid, you will need to do one of the following:
+
+  1. Move it to the `initialState.density` to initialize it.
+
+  ```diff
+   <DataGrid
+  -  density="compact"
+  +  initialState={{ density: "compact" }}
+   />
+  ```
+
+  2. Move it to the state and use `onDensityChange` callback to update the `density` prop accordingly for it to work as expected.
+
+  ```diff
+  + const [density, setDensity] = React.useState<GridDensity>('compact');
+   <DataGrid
+  -  density="compact"
+  +  density={density}
+  +  onDensityChange={(newDensity) => setDensity(newDensity)}
+   />
+  ```
+
+- The selector `gridDensityValueSelector` was removed, use the `gridDensitySelector` instead.
+
+- The props `rowBuffer` and `columnBuffer` were renamed to `rowBufferPx` and `columnBufferPx`.
+  Their value is now a pixel value rather than a number of items. Their default value is now `150`.
+
+- The props `rowThreshold` and `columnThreshold` have been removed.
+  If you had the `rowThreshold` prop set to `0` to force new rows to be rendered more often – this is no longer necessary.
+
+#### `@mui/x-data-grid@7.0.0`
+
+- [DataGrid] Allow to control the grid density (#12332) @MBilalShafi
+- [DataGrid] Dynamic virtualization range (#12353) @romgrk
+- [DataGrid] Fix `ElementType` usage (#12479) @cherniavskii
+- [DataGrid] Fix cell value formatting on copy (#12357) @sai6855
+- [DataGrid] Fix checkbox selection is keeping selection when filtering (#11751) @g1mishra
+- [DataGrid] Make `rows` an optional prop (#12478) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.0.0` [![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`.
+
+#### `@mui/x-data-grid-premium@7.0.0` [![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`, plus:
+
+- [DataGridPremium] Add support for confirmation before clipboard paste (#12225) @cherniavskii
+- [DataGridPremium] Fix single grouping column sorting (#9679) @cherniavskii
+- [DataGridPremium] Fix boolean cell not rendered in group rows (#12492) @sai6855
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `DesktopDateTimePicker` view rendering has been optimized by using the same technique as for `DesktopDateTimeRangePicker`.
+  - The `dateTimeViewRenderers` have been removed in favor of reusing existing time view renderers (`renderTimeViewClock`, `renderDigitalClockTimeView` and `renderMultiSectionDigitalClockTimeView`) and date view renderer (`renderDateViewCalendar`).
+  - Passing `renderTimeViewClock` to time view renderers will no longer revert to the old behavior of rendering only date or time view.
+
+#### `@mui/x-date-pickers@7.0.0`
+
+- [fields] Allow to override the separator between the start and the end date in all range fields (#12174) @flaviendelangle
+- [fields] Support format without separator (#12489) @flaviendelangle
+- [pickers] Use renderer interceptor on `DesktopDateTimePicker` (#12441) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0` [![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`, plus:
+
+- [DateTimeRangePicker] Add component `JSDoc` (#12518) @LukasTy
+- [DateTimeRangePicker] Fix views behavior regression (#12529) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.0.0`
+
+- [charts] Fix small typo in `CartesianContextProvider` (#12461) @Janpot
+
+### Tree View
+
+#### Breaking changes
+
+- The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
+
+```diff
+ <TreeView>
+-    <TreeItem label="Item 1" nodeId="one">
++    <TreeItem label="Item 1" itemId="one">
+ </TreeView>
+```
+
+- The focus is now applied to the Tree Item root element instead of the Tree View root element.
+
+  This change will allow new features that require the focus to be on the Tree Item,
+  like the drag and drop reordering of items.
+  It also solves several issues with focus management,
+  like the inability to scroll to the focused item when a lot of items are rendered.
+
+  This will mostly impact how you write tests to interact with the Tree View:
+
+  For example, if you were writing a test with `react-testing-library`, here is what the changes could look like:
+
+  ```diff
+   it('test example on first item', () => {
+  -  const { getByRole } = render(
+  +  const { getAllByRole } = render(
+       <SimpleTreeView>
+         <TreeItem nodeId="one" />
+         <TreeItem nodeId="two" />
+      </SimpleTreeView>
+     );
+
+  -  const tree = getByRole('tree');
+  +  const firstTreeItem = getAllByRole('treeitem')[0];
+     act(() => {
+  -    tree.focus();
+  +    firstTreeItem.focus();
+     });
+  -  fireEvent.keyDown(tree, { key: 'ArrowDown' });
+  +  fireEvent.keyDown(firstTreeItem, { key: 'ArrowDown' });
+   })
+  ```
+
+#### `@mui/x-tree-view@7.0.0`
+
+- [TreeView] Rename `nodeId` to `itemId` (#12418) @noraleonte
+- [TreeView] Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- [TreeView] Update JSDoc of the `ContentComponent` prop to avoid using the word "node" (#12476) @flaviendelangle
+
+### `@mui/x-codemod@7.0.0`
+
+- [codemod] Add a codemod and update the grid migration guide (#12488) @MBilalShafi
+
+### Docs
+
+- [docs] Finalize migration guide (#12501) @noraleonte
+- [docs] Fix nested cells alignment in the popular features demo (#12450) @cherniavskii
+- [docs] Fix some Vale errors (#12469) @oliviertassinari
+- [docs] Remove mentions of pre release (#12513) @noraleonte
+- [docs] Update branch name and tags (#12498) @cherniavskii
+- [docs] Update links to v6 (#12496) @cherniavskii
+- [docs] Update links to v7 docs (#12500) @noraleonte
+- [docs] Update supported versions (#12508) @joserodolfofreitas
+- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
+
+### Core
+
+- [core] Bump `@mui/material` peer dependency for all packages (#12516) @LukasTy
+- [core] Fix `no-restricted-imports` ESLint rule not working for Data Grid packages (#12477) @cherniavskii
+- [core] Lower the frequency of `no-response` action runs (#12491) @michaldudak
+- [core] Remove leftover `legacy` `browserlistrc` entry (#12415) @LukasTy
+- [core] Update NPM tag (#12511) @cherniavskii
+- [core] Update supported browsers (browserlistrc) (#12521) @LukasTy
+- [core] Use Circle CI context @oliviertassinari
+- [license] Fix grammar on expired license error message (#12460) @joserodolfofreitas
+
 ## 7.0.0-beta.7
 
 _Mar 14, 2024_
@@ -90,7 +273,7 @@ The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
 - [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
 - [docs] Add missing luxon `Info` import (#12427) @LukasTy
 - [docs] Improve slots definitions for charts (#12408) @alexfauquette
-- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
 - [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
 - [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
 
@@ -252,7 +435,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 ### Docs
 
 - [docs] Fix image layout shift when loading @oliviertassinari
-- [docs] Match Material UI repo comment for redirections @oliviertassinari
+- [docs] Match Material UI repo comment for redirections @oliviertassinari
 - [docs] Non breaking spaces @oliviertassinari
 - [docs] Polish the Date Picker playground (#11869) @zanivan
 - [docs] Standardize WAI-ARIA references @oliviertassinari
@@ -263,9 +446,9 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 - [core] Remove grid folder from `getComponentInfo` RegExp (#12241) @flaviendelangle
 - [core] Remove `window.` reference for common globals @oliviertassinari
 - [core] Use runtime agnostic setTimeout type @oliviertassinari
-- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
+- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
 - [docs-infra] Fix missing non breaking spaces @oliviertassinari
-- [github] Update `no-response` workflow (#12193) @MBilalShafi
+- [infra] Update `no-response` workflow (#12193) @MBilalShafi
 - [infra] Fix missing permission reset @oliviertassinari
 
 ## 7.0.0-beta.4
@@ -282,7 +465,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 ### Breaking changes
 
-- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
+- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
 
 ### Data Grid
 
@@ -324,7 +507,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
 - The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
   This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure).
 
- When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
+  When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
 
   ```diff
     function MyCustomTextField(props) {
@@ -392,7 +575,7 @@ These components are no longer exported from `@mui/x-charts`:
 ### Docs
 
 - [docs] Add recipe for hiding separator on non-resizable columns (#12134) @michelengelen
-- [docs] Add small improvements to the Gauge Chart page (#12076) @danilo-leal
+- [docs] Add small improvements to the Gauge page (#12076) @danilo-leal
 - [docs] Add the 'point' scaleType to the axis documentation (#12179) @alexfauquette
 - [docs] Clarify Pickers 'Component composition' section (#12097) @LukasTy
 - [docs] Fix "Licensing" page link (#12156) @LukasTy
@@ -975,7 +1158,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 
 - [charts] Do not propagate `innerRadius` and `outerRadius` to the DOM (#11689) @alexfauquette
 - [charts] Fix default `stackOffset` for `LineChart` (#11647) @alexfauquette
-- [charts] Remove a TS ignore (#11688) @alexfauquette
+- [charts] Remove a TypeScript ignore (#11688) @alexfauquette
 
 ### Tree View
 
@@ -1404,7 +1587,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.7`.
 - [core] Fix release changelog (#11496) @romgrk
 - [core] Fix use of ::before & ::after (#11515) @oliviertassinari
 - [core] Localize the issue template to MUI X (#11511) @oliviertassinari
-- [core] Regen api files (#11542) @flaviendelangle
+- [core] Regenerate API files (#11542) @flaviendelangle
 - [core] Remove issue emoji @oliviertassinari
 - [core] Sync the release instructions with MUI Core @oliviertassinari
 - [core] Yaml format match most common convention @oliviertassinari
@@ -1447,7 +1630,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 
 - The `filterModel` now supports `Date` objects as values for `date` and `dateTime` column types.
   The `filterModel` still accepts strings as values for `date` and `dateTime` column types,
-  but all updates to the `filterModel` coming from the UI (e.g. filter panel) will set the value as a `Date` object.
+  but all updates to the `filterModel` coming from the UI (for example filter panel) will set the value as a `Date` object.
 
 #### `@mui/x-data-grid@7.0.0-alpha.6`
 
@@ -1658,7 +1841,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.5`, plus:
 ### Core
 
 - [core] Automate cherry-pick of PRs from `next` -> `master` (#11382) @MBilalShafi
-- [github] Update `no-response` workflow (#11369) @MBilalShafi
+- [infra] Update `no-response` workflow (#11369) @MBilalShafi
 - [test] Fix flaky screenshots (#11388) @cherniavskii
 
 ## 7.0.0-alpha.4
@@ -1896,7 +2079,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`.
 
 - [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11144) @michelengelen
 - [charts] Apply `labelStyle` and `tickLabelStyle` props on `<ChartsYAxis />` (#11180) @akamfoad
-- [charts] Fix TS config (#11259) @alexfauquette
+- [charts] Fix TypeScript config (#11259) @alexfauquette
 - [charts] Fix error with empty dataset (#11063) @alexfauquette
 - [charts] Fix export strategy (#11235) @alexfauquette
 - [charts] Remove outdated prop-types (#11045) @alexfauquette

package/README.md

@@ -15,7 +15,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.0",
+  "@mui/material": "^5.15.14",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/RichTreeView/RichTreeView.js

@@ -36,21 +36,20 @@ function WrappedTreeItem({
   slotProps,
   label,
   id,
-  nodeId,
+  itemId,
   children
 }) {
-  var _slots$item;
-  const Item = (_slots$item = slots == null ? void 0 : slots.item) != null ? _slots$item : TreeItem;
+  const Item = slots?.item ?? TreeItem;
   const itemProps = useSlotProps({
     elementType: Item,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.item,
+    externalSlotProps: slotProps?.item,
     additionalProps: {
-      nodeId,
+      itemId,
       id,
       label
     },
     ownerState: {
-      nodeId,
+      itemId,
       label
     }
   });
@@ -58,7 +57,7 @@ function WrappedTreeItem({
     children: children
   }));
 }
-const childrenWarning = buildWarning(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/rich-tree-view/items/']);
+const childrenWarning = buildWarning(['MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
 
 /**
  *
@@ -71,7 +70,6 @@ const childrenWarning = buildWarning(['MUI X: The `RichTreeView` component does
  * - [RichTreeView API](https://mui.com/x/api/tree-view/rich-tree-view/)
  */
 const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps, ref) {
-  var _slots$root;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiRichTreeView'
@@ -97,10 +95,10 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     instance
   } = useTreeView(pluginParams);
   const classes = useUtilityClasses(props);
-  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : RichTreeViewRoot;
+  const Root = slots?.root ?? RichTreeViewRoot;
   const rootProps = useSlotProps({
     elementType: Root,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
+    externalSlotProps: slotProps?.root,
     externalForwardedProps: otherProps,
     className: classes.root,
     getSlotProps: getRootProps,
@@ -109,7 +107,7 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
   const nodesToRender = instance.getNodesToRender();
   const renderNode = ({
     label,
-    nodeId,
+    itemId,
     id,
     children
   }) => {
@@ -118,9 +116,9 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
       slotProps: slotProps,
       label: label,
       id: id,
-      nodeId: nodeId,
-      children: children == null ? void 0 : children.map(renderNode)
-    }, nodeId);
+      itemId: itemId,
+      children: children?.map(renderNode)
+    }, itemId);
   };
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     value: contextValue,

package/RichTreeView/RichTreeView.types.d.ts

@@ -9,7 +9,7 @@ import { TreeItem2Props } from '../TreeItem2';
 import { TreeViewItemId } from '../models';
 import { TreeViewPublicAPI } from '../internals/models';
 interface RichTreeViewItemSlotOwnerState {
-    nodeId: TreeViewItemId;
+    itemId: TreeViewItemId;
     label: string;
 }
 export interface RichTreeViewSlots extends DefaultTreeViewPluginSlots {

package/SimpleTreeView/SimpleTreeView.js

@@ -31,7 +31,7 @@ export const SimpleTreeViewRoot = styled('ul', {
   outline: 0
 });
 const EMPTY_ITEMS = [];
-const itemsPropWarning = buildWarning(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/simple-tree-view/items/']);
+const itemsPropWarning = buildWarning(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/']);
 
 /**
  *
@@ -44,7 +44,6 @@ const itemsPropWarning = buildWarning(['MUI X: The `SimpleTreeView` component do
  * - [SimpleTreeView API](https://mui.com/x/api/tree-view/simple-tree-view/)
  */
 const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inProps, ref) {
-  var _slots$root;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiSimpleTreeView'
@@ -72,10 +71,10 @@ const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inP
     contextValue
   } = useTreeView(pluginParams);
   const classes = useUtilityClasses(props);
-  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : SimpleTreeViewRoot;
+  const Root = slots?.root ?? SimpleTreeViewRoot;
   const rootProps = useSlotProps({
     elementType: Root,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
+    externalSlotProps: slotProps?.root,
     externalForwardedProps: otherProps,
     className: classes.root,
     getSlotProps: getRootProps,

package/TreeItem/TreeItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown"],
+const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "itemId", "id", "label", "onClick", "onMouseDown", "onFocus", "onBlur", "onKeyDown"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"],
   _excluded4 = ["ownerState"];
@@ -137,7 +137,6 @@ const TreeItemGroup = styled(Collapse, {
  * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
  */
 export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, inRef) {
-  var _ref, _inSlots$expandIcon, _ref2, _inSlots$collapseIcon, _inSlots$endIcon, _slots$groupTransitio;
   const {
     icons: contextIcons,
     runItemPlugins,
@@ -158,11 +157,13 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       slotProps: inSlotProps,
       ContentComponent = TreeItemContent,
       ContentProps,
-      nodeId,
+      itemId,
       id,
       label,
       onClick,
-      onMouseDown
+      onMouseDown,
+      onBlur,
+      onKeyDown
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -170,13 +171,13 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     rootRef
   } = runItemPlugins(props);
   const handleRootRef = useForkRef(inRef, rootRef);
-  const handleContentRef = useForkRef(ContentProps == null ? void 0 : ContentProps.ref, contentRef);
+  const handleContentRef = useForkRef(ContentProps?.ref, contentRef);
   const slots = {
-    expandIcon: (_ref = (_inSlots$expandIcon = inSlots == null ? void 0 : inSlots.expandIcon) != null ? _inSlots$expandIcon : contextIcons.slots.expandIcon) != null ? _ref : TreeViewExpandIcon,
-    collapseIcon: (_ref2 = (_inSlots$collapseIcon = inSlots == null ? void 0 : inSlots.collapseIcon) != null ? _inSlots$collapseIcon : contextIcons.slots.collapseIcon) != null ? _ref2 : TreeViewCollapseIcon,
-    endIcon: (_inSlots$endIcon = inSlots == null ? void 0 : inSlots.endIcon) != null ? _inSlots$endIcon : contextIcons.slots.endIcon,
-    icon: inSlots == null ? void 0 : inSlots.icon,
-    groupTransition: inSlots == null ? void 0 : inSlots.groupTransition
+    expandIcon: inSlots?.expandIcon ?? contextIcons.slots.expandIcon ?? TreeViewExpandIcon,
+    collapseIcon: inSlots?.collapseIcon ?? contextIcons.slots.collapseIcon ?? TreeViewCollapseIcon,
+    endIcon: inSlots?.endIcon ?? contextIcons.slots.endIcon,
+    icon: inSlots?.icon,
+    groupTransition: inSlots?.groupTransition
   };
   const isExpandable = reactChildren => {
     if (Array.isArray(reactChildren)) {
@@ -185,10 +186,10 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     return Boolean(reactChildren);
   };
   const expandable = isExpandable(children);
-  const expanded = instance.isNodeExpanded(nodeId);
-  const focused = instance.isNodeFocused(nodeId);
-  const selected = instance.isNodeSelected(nodeId);
-  const disabled = instance.isNodeDisabled(nodeId);
+  const expanded = instance.isNodeExpanded(itemId);
+  const focused = instance.isNodeFocused(itemId);
+  const selected = instance.isNodeSelected(itemId);
+  const disabled = instance.isNodeDisabled(itemId);
   const ownerState = _extends({}, props, {
     expanded,
     focused,
@@ -196,11 +197,11 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     disabled
   });
   const classes = useUtilityClasses(ownerState);
-  const GroupTransition = (_slots$groupTransitio = slots.groupTransition) != null ? _slots$groupTransitio : undefined;
+  const GroupTransition = slots.groupTransition ?? undefined;
   const groupTransitionProps = useSlotProps({
     elementType: GroupTransition,
     ownerState: {},
-    externalSlotProps: inSlotProps == null ? void 0 : inSlotProps.groupTransition,
+    externalSlotProps: inSlotProps?.groupTransition,
     additionalProps: {
       unmountOnExit: true,
       in: expanded,
@@ -215,9 +216,9 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       ownerState: {},
       externalSlotProps: tempOwnerState => {
         if (expanded) {
-          return _extends({}, resolveComponentProps(contextIcons.slotProps.collapseIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.collapseIcon, tempOwnerState));
+          return _extends({}, resolveComponentProps(contextIcons.slotProps.collapseIcon, tempOwnerState), resolveComponentProps(inSlotProps?.collapseIcon, tempOwnerState));
         }
-        return _extends({}, resolveComponentProps(contextIcons.slotProps.expandIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.expandIcon, tempOwnerState));
+        return _extends({}, resolveComponentProps(contextIcons.slotProps.expandIcon, tempOwnerState), resolveComponentProps(inSlotProps?.expandIcon, tempOwnerState));
       }
     }),
     expansionIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
@@ -230,7 +231,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
         if (expandable) {
           return {};
         }
-        return _extends({}, resolveComponentProps(contextIcons.slotProps.endIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.endIcon, tempOwnerState));
+        return _extends({}, resolveComponentProps(contextIcons.slotProps.endIcon, tempOwnerState), resolveComponentProps(inSlotProps?.endIcon, tempOwnerState));
       }
     }),
     displayIconProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
@@ -239,7 +240,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
   const _useSlotProps3 = useSlotProps({
       elementType: Icon,
       ownerState: {},
-      externalSlotProps: inSlotProps == null ? void 0 : inSlotProps.icon
+      externalSlotProps: inSlotProps?.icon
     }),
     iconProps = _objectWithoutPropertiesLoose(_useSlotProps3, _excluded4);
   const icon = Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, iconProps)) : null;
@@ -250,24 +251,29 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     /* single-selection trees unset aria-selected on un-selected items.
      *
      * If the tree does not support multiple selection, aria-selected
-     * is set to true for the selected node and it is not present on any other node in the tree.
+     * is set to true for the selected item and it is not present on any other item in the tree.
      * Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
      */
     ariaSelected = true;
   }
   function handleFocus(event) {
-    // DOM focus stays on the tree which manages focus with aria-activedescendant
-    if (event.target === event.currentTarget) {
-      instance.focusRoot();
-    }
     const canBeFocused = !disabled || disabledItemsFocusable;
     if (!focused && canBeFocused && event.currentTarget === event.target) {
-      instance.focusItem(event, nodeId);
+      instance.focusItem(event, itemId);
     }
   }
-  const idAttribute = instance.getTreeItemId(nodeId, id);
+  function handleBlur(event) {
+    onBlur?.(event);
+    instance.removeFocusedItem();
+  }
+  const handleKeyDown = event => {
+    onKeyDown?.(event);
+    instance.handleItemKeyDown(event, itemId);
+  };
+  const idAttribute = instance.getTreeItemId(itemId, id);
+  const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   return /*#__PURE__*/_jsx(TreeItem2Provider, {
-    nodeId: nodeId,
+    itemId: itemId,
     children: /*#__PURE__*/_jsxs(TreeItemRoot, _extends({
       className: clsx(classes.root, className),
       role: "treeitem",
@@ -275,10 +281,12 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       "aria-selected": ariaSelected,
       "aria-disabled": disabled || undefined,
       id: idAttribute,
-      tabIndex: -1
+      tabIndex: tabIndex
     }, other, {
       ownerState: ownerState,
       onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
       ref: handleRootRef,
       children: [/*#__PURE__*/_jsx(StyledTreeItemContent, _extends({
         as: ContentComponent,
@@ -292,7 +300,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
           label: classes.label
         },
         label: label,
-        nodeId: nodeId,
+        itemId: itemId,
         onClick: onClick,
         onMouseDown: onMouseDown,
         icon: icon,
@@ -324,7 +332,7 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
-   * The component used for the content node.
+   * The component used to render the content of the item.
    * @default TreeItemContent
    */
   ContentComponent: elementTypeAcceptingRef,
@@ -338,13 +346,13 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * The tree item label.
+   * The id of the item.
    */
-  label: PropTypes.node,
+  itemId: PropTypes.string.isRequired,
   /**
-   * The id of the node.
+   * The tree item label.
    */
-  nodeId: PropTypes.string.isRequired,
+  label: PropTypes.node,
   /**
    * This prop isn't supported.
    * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.

package/TreeItem/TreeItem.types.d.ts

@@ -58,7 +58,7 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
      */
     slotProps?: TreeItemSlotProps;
     /**
-     * The component used for the content node.
+     * The component used to render the content of the item.
      * @default TreeItemContent
      */
     ContentComponent?: React.JSXElementConstructor<TreeItemContentProps>;
@@ -83,9 +83,9 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
      */
     label?: React.ReactNode;
     /**
-     * The id of the node.
+     * The id of the item.
      */
-    nodeId: TreeViewItemId;
+    itemId: TreeViewItemId;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */