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

package/CHANGELOG.md

@@ -3,6 +3,89 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.5
+
+_Mar 1, 2024_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add `getSortComparator` for more advanced sorting behaviors (#12215) @cherniavskii
+- 🚀 Add `use client` directive to the Grid packages (#11803) @MBilalShafi
+- 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.0.0-beta.5`
+
+- [DataGrid] Add `getSortComparator` for more advanced sorting behaviors (#12215) @cherniavskii
+- [DataGrid] Add `use client` directive to the Grid packages (#11803) @MBilalShafi
+- [DataGrid] Fix `disableResetButton` and `disableShowHideToggle` flags to not exclude each other (#12169) @adyry
+- [DataGrid] Fix cell range classnames (#12230) @romgrk
+- [DataGrid] Fix wrong offset for right-pinned columns when toggling dark/light modes (#12233) @cherniavskii
+- [DataGrid] Improve row virtualization and rendering performance (#12247) @romgrk
+- [DataGrid] Improve performance by removing `querySelector` call (#12229) @romgrk
+- [DataGrid] Fix `onColumnWidthChange` called before autosize affects column width (#12140) @shaharyar-shamshi
+- [DataGrid] Fix boolean "is" filter (#12117) @shaharyar-shamshi
+- [DataGrid] Fix `upsertFilterItems` removing filters that are not part of the update (#11954) @gitstart
+- [DataGrid] Render scrollbars only if there is scroll (#12265) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.5` [![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.5`, plus:
+
+- [DataGridPro] Fix column resize errors on MacOS with automatic scrollbars enabled (#12217) @cherniavskii
+- [DataGridPro] Fix lazy-loading crash (#12080) @romgrk
+- [DataGridPro] Fix useGridRows not giving error on reversed data (#10821) @martijn-basesoft
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.5` [![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.5`, plus:
+
+- [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12235) @MBilalShafi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.5`
+
+- [pickers] Fix toolbar components props handling (#12211) @LukasTy
+- [l10n] Improve Chinese (zh-CN) locale (#12245) @headironc
+- [l10n] Improve Korean (ko-KR) locale (#12192) @Luzi
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.5` [![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.5`.
+
+- [DateTimeRangePicker] Fix validation behavior (#12243) @LukasTy
+
+### Charts / `@mui/x-charts@7.0.0-beta.5`
+
+- [charts] Fix grid duplicated key (#12208) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@7.0.0-beta.5`
+
+- [TreeView] Add public API and expose focus method (#12143) @noraleonte
+
+### Docs
+
+- [docs] Fix image layout shift when loading @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
+
+### Core
+
+- [core] Allow local docs next.js settings (#12227) @romgrk
+- [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 missing non breaking spaces @oliviertassinari
+- [github] Update `no-response` workflow (#12193) @MBilalShafi
+- [infra] Fix missing permission reset @oliviertassinari
+
 ## 7.0.0-beta.4
 
 _Feb 23, 2024_
@@ -49,7 +132,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
    <DateField
   -  selectedSections={{ startIndex: 0, endIndex: 0 }}
   +  selectedSections={0}
-  
+
      // If the field has 3 sections
   -  selectedSections={{ startIndex: 0, endIndex: 2 }}
   +  selectedSections="all"
@@ -68,20 +151,20 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
   +     enableAccessibleFieldDOMStructure,
         // ... rest of the props you are using
       } = props;
-  
+
       return ( /* Some UI to edit the date */ )
     }
-  
+
     function MyCustomField(props) {
       const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
         ...props,
   +     // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application
   +     enableAccessibleFieldDOMStructure: false,
       });
-  
+
       return <MyCustomTextField ref={ref} {...fieldResponse} />;
     }
-  
+
     function App() {
       return <DatePicker slots={{ field: MyCustomField }} />;
     }
@@ -2352,6 +2435,47 @@ 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
 
+## 6.19.6
+
+_Mar 1, 2024_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.6`
+
+- [DataGrid] Fix error when existing rows are passed to `replaceRows` (@martijn-basesoft)
+
+#### `@mui/x-data-grid-pro@6.19.6` [![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.6`.
+
+#### `@mui/x-data-grid-premium@6.19.6` [![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.6`, plus:
+
+- [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12255) @MBilalShafi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.6`
+
+- [l10n] Improve Chinese (zh-CN) locale (#12250) @headironc
+- [l10n] Improve Korean (ko-KR) locale (#12186) @Luzi
+
+#### `@mui/x-date-pickers-pro@6.19.6` [![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.6`.
+
+### Docs
+
+- [docs] Update lazy loading demo to show skeleton rows during initial rows fetch (#12062) @cherniavskii
+
 ## 6.19.5
 
 _Feb 23, 2024_
@@ -2394,8 +2518,8 @@ Same changes as in `@mui/x-date-pickers@6.19.5`.
 
 - [docs] Clarify Pickers 'Component composition' section (#12147) @LukasTy
 - [docs] Fix 301 redirection to StackBlitz @oliviertassinari
-- [docs] Fix 301 to Material UI @oliviertassinari
-- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
 - [docs] Fix 404 links to translation source @oliviertassinari
 - [docs] Fix dead link to translations @oliviertassinari
 - [docs] Fix the Treemap illustration (#12189) @danilo-leal
@@ -4264,7 +4388,7 @@ We'd like to offer a big thanks to the 13 contributors who made this release pos
 
 #### `@mui/x-data-grid@6.9.1`
 
-- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii
+- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii
 - [DataGrid] Add section about enabling pagination on Pro and Premium (#8759) @joserodolfofreitas
 - [DataGrid] Don't forward `editCellState` prop to DOM element (#9501) @m4theushw
 - [DataGrid] Add experimental API for faster filtering performance (#9254) @romgrk
@@ -4395,7 +4519,7 @@ Same changes as in `@mui/x-date-pickers@6.9.0`.
 - [docs] Fix random screenshot generation (#9364) @cherniavskii
 - [docs] Remove random generation from chart doc example (#9343) @flaviendelangle
 - [docs] Sync h1 with sidenav link (#9252) @oliviertassinari
-- [docs] Use the mui-x Stack Overflow tag (#9352) @oliviertassinari
+- [docs] Use the mui-x Stack Overflow tag (#9352) @oliviertassinari
 
 ### Core
 
@@ -4722,8 +4846,8 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 - [DataGrid] Fix DataGrid rendering in JSDOM (#8968) @cherniavskii
 - [DataGrid] Fix layout when rendered inside a parent with `display: grid` (#8577) @cherniavskii
-- [DataGrid] Add Joy UI icon slots (#8940) @siriwatknp
-- [DataGrid] Add Joy UI pagination slot (#8871) @cherniavskii
+- [DataGrid] Add Joy UI icon slots (#8940) @siriwatknp
+- [DataGrid] Add Joy UI pagination slot (#8871) @cherniavskii
 - [DataGrid] Extract `baseChip` slot (#8748) @cherniavskii
 - [DataGridPremium] Implement Clipboard import (#7389) @cherniavskii
 - [l10n] Improve French (fr-FR) locale (#8825) @allereaugabriel
@@ -4773,7 +4897,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 - [DataGrid] Fix falsy filter values not showing in filter button tooltip (#8550) @ithrforu
 - [DataGrid] Fix missing watermark in Pro and Premium packages (#8797) @cherniavskii
 - [DataGrid] Remove unwarranted warning log (#8847) @romgrk
-- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii
+- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii
 - [DataGridPremium] Fix expanded groups being collapsed after calling `updateRows` (#8823) @cherniavskii
 
 ### `@mui/x-date-pickers@6.3.1` / `@mui/x-date-pickers-pro@6.3.1`
@@ -4824,7 +4948,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [DataGrid] Add overlay classes to `gridClasses` (#8686) @lindapaiste
 - [DataGrid] Avoid passing `api` prop to div (#8679) @someden
 - [DataGrid] Fix 'ResizeObserver loop limit exceeded' error (#8744) @m4theushw
-- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp
+- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp
 - [DataGrid] Fix aggregation label alignment (#8694) @joserodolfofreitas
 - [DataGridPremium] Fix infinite loop when updating grouped rows (#8693) @cherniavskii
 - [DataGridPro] Fix error after updating `columns` and `columnGroupingModel` at once (#8730) @cherniavskii
@@ -4886,7 +5010,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 #### Changes
 
 - [DataGrid] Add `getTogglableColumns` to `Hide all` and `Show all` actions (#8496) @MBilalShafi
-- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
+- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
 - [DataGrid] Fix print style when rendering inside Shadow DOM (#8656) @Bwatermelon
 - [DataGrid] Replace `GridAutoSizer` with `ResizeObserver` (#8091) @m4theushw
 - [DataGrid] Use stable ID for the placeholder filter item (#8603) @m4theushw

package/RichTreeView/RichTreeView.js

@@ -134,6 +134,14 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   */
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      focusNode: PropTypes.func.isRequired
+    })
+  }),
   /**
    * Override or extend the styles applied to the component.
    */

package/RichTreeView/RichTreeView.types.d.ts

@@ -3,9 +3,10 @@ import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base/utils';
 import { RichTreeViewClasses } from './richTreeViewClasses';
-import { DefaultTreeViewPluginParameters, DefaultTreeViewPluginSlotProps, DefaultTreeViewPluginSlots } from '../internals/plugins/defaultPlugins';
+import { DefaultTreeViewPluginParameters, DefaultTreeViewPluginSlotProps, DefaultTreeViewPluginSlots, DefaultTreeViewPlugins } from '../internals/plugins/defaultPlugins';
 import { TreeItem, TreeItemProps } from '../TreeItem';
 import { TreeViewItemId } from '../models';
+import { TreeViewPublicAPI } from '../internals/models';
 interface RichTreeViewItemSlotOwnerState {
     nodeId: TreeViewItemId;
     label: string;
@@ -26,6 +27,7 @@ export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean |
     root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
     item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemSlotOwnerState>;
 }
+export type RichTreeViewApiRef = React.MutableRefObject<TreeViewPublicAPI<DefaultTreeViewPlugins> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
     className?: string;
     /**
@@ -48,5 +50,9 @@ export interface RichTreeViewProps<R extends {}, Multiple extends boolean | unde
      * @default {}
      */
     slotProps?: RichTreeViewSlotProps<R, Multiple>;
+    /**
+     * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+     */
+    apiRef?: RichTreeViewApiRef;
 }
 export {};

package/SimpleTreeView/SimpleTreeView.js

@@ -91,6 +91,14 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   */
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      focusNode: PropTypes.func.isRequired
+    })
+  }),
   /**
    * The content of the component.
    */

package/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -3,7 +3,8 @@ import { Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/base/utils';
 import { SxProps } from '@mui/system';
 import { SimpleTreeViewClasses } from './simpleTreeViewClasses';
-import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots } from './SimpleTreeView.plugins';
+import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots, SimpleTreeViewPlugins } from './SimpleTreeView.plugins';
+import { TreeViewPublicAPI } from '../internals/models';
 export interface SimpleTreeViewSlots extends SimpleTreeViewPluginSlots {
     /**
      * Element rendered at the root.
@@ -14,6 +15,7 @@ export interface SimpleTreeViewSlots extends SimpleTreeViewPluginSlots {
 export interface SimpleTreeViewSlotProps extends SimpleTreeViewPluginSlotProps {
     root?: SlotComponentProps<'ul', {}, {}>;
 }
+export type SimpleTreeViewApiRef = React.MutableRefObject<TreeViewPublicAPI<SimpleTreeViewPlugins> | undefined>;
 export interface SimpleTreeViewProps<Multiple extends boolean | undefined> extends SimpleTreeViewPluginParameters<Multiple>, React.HTMLAttributes<HTMLUListElement> {
     /**
      * The content of the component.
@@ -36,4 +38,8 @@ export interface SimpleTreeViewProps<Multiple extends boolean | undefined> exten
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
+    /**
+     * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+     */
+    apiRef?: SimpleTreeViewApiRef;
 }

package/TreeView/TreeView.js

@@ -64,6 +64,14 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   */
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      focusNode: PropTypes.func.isRequired
+    })
+  }),
   /**
    * The content of the component.
    */

package/hooks/index.d.ts

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

package/hooks/index.js

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

package/hooks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/hooks/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/useTreeViewApiRef.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { TreeViewAnyPluginSignature, TreeViewUsedPublicAPI } from '../internals/models';
+/**
+ * Hook that instantiates a [[TreeViewApiRef]].
+ */
+export declare const useTreeViewApiRef: <T extends TreeViewAnyPluginSignature, Api extends TreeViewUsedPublicAPI<T>>() => React.MutableRefObject<Api>;

package/hooks/useTreeViewApiRef.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Hook that instantiates a [[TreeViewApiRef]].
+ */
+export const useTreeViewApiRef = () => React.useRef(undefined);

package/index.d.ts

@@ -5,3 +5,4 @@ export * from './RichTreeView';
 export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
 export * from './models';
 export * from './icons';
+export * from './hooks';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.0.0-beta.4
+ * @mui/x-tree-view v7.0.0-beta.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,4 +11,5 @@ export * from './SimpleTreeView';
 export * from './RichTreeView';
 export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
 export * from './models';
-export * from './icons';
+export * from './icons';
+export * from './hooks';

package/internals/hooks/useTimeout.d.ts

@@ -1,9 +1,11 @@
-declare class Timeout {
+export declare class Timeout {
     static create(): Timeout;
-    currentId: number;
+    currentId: ReturnType<typeof setTimeout> | null;
+    /**
+     * Executes `fn` after `delay`, clearing any previously scheduled call.
+     */
     start(delay: number, fn: Function): void;
     clear: () => void;
     disposeEffect: () => () => void;
 }
 export declare function useTimeout(): Timeout;
-export {};

package/internals/hooks/useTimeout.js

@@ -1,12 +1,14 @@
+'use client';
+
 import { useLazyRef } from './useLazyRef';
 import { useOnMount } from './useOnMount';
-class Timeout {
+export class Timeout {
   constructor() {
-    this.currentId = 0;
+    this.currentId = null;
     this.clear = () => {
-      if (this.currentId !== 0) {
+      if (this.currentId !== null) {
         clearTimeout(this.currentId);
-        this.currentId = 0;
+        this.currentId = null;
       }
     };
     this.disposeEffect = () => {
@@ -16,9 +18,15 @@ class Timeout {
   static create() {
     return new Timeout();
   }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
   start(delay, fn) {
     this.clear();
-    this.currentId = setTimeout(fn, delay);
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay);
   }
 }
 export function useTimeout() {

package/internals/models/helpers.d.ts

@@ -7,6 +7,7 @@ export type ConvertPluginsIntoSignatures<TPlugins extends readonly any[]> = TPlu
 export interface MergePlugins<TPlugins extends readonly any[]> {
     state: MergePluginsProperty<TPlugins, 'state'>;
     instance: MergePluginsProperty<TPlugins, 'instance'>;
+    publicAPI: MergePluginsProperty<TPlugins, 'publicAPI'>;
     params: MergePluginsProperty<TPlugins, 'params'>;
     defaultizedParams: MergePluginsProperty<TPlugins, 'defaultizedParams'>;
     dependantPlugins: MergePluginsProperty<TPlugins, 'dependantPlugins'>;

package/internals/models/plugin.d.ts

@@ -7,6 +7,7 @@ import type { TreeViewCorePluginsSignature } from '../corePlugins';
 import type { TreeItemProps } from '../../TreeItem';
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
     instance: TreeViewUsedInstance<TSignature>;
+    publicAPI: TreeViewUsedPublicAPI<TSignature>;
     params: TreeViewUsedDefaultizedParams<TSignature>;
     state: TreeViewUsedState<TSignature>;
     slots: TSignature['slots'];
@@ -27,6 +28,7 @@ export type TreeViewPluginSignature<T extends {
     params?: {};
     defaultizedParams?: {};
     instance?: {};
+    publicAPI?: {};
     events?: {
         [key in keyof T['events']]: TreeViewEventLookupElement;
     };
@@ -50,6 +52,9 @@ export type TreeViewPluginSignature<T extends {
     instance: T extends {
         instance: {};
     } ? T['instance'] : {};
+    publicAPI: T extends {
+        publicAPI: {};
+    } ? T['publicAPI'] : {};
     events: T extends {
         events: {};
     } ? T['events'] : {};
@@ -86,6 +91,7 @@ export type TreeViewAnyPluginSignature = {
     slots: any;
     slotProps: any;
     models: any;
+    publicAPI: any;
 };
 type TreeViewUsedPlugins<TSignature extends TreeViewAnyPluginSignature> = [
     TreeViewCorePluginsSignature,
@@ -99,6 +105,12 @@ export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature>
      */
     $$signature: TSignature;
 };
+export type TreeViewUsedPublicAPI<TSignature extends TreeViewAnyPluginSignature> = TSignature['publicAPI'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'publicAPI'> & {
+    /**
+     * Private property only defined in TypeScript to be able to access the plugin signature from the publicAPI object.
+     */
+    $$signature: TSignature;
+};
 type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = TSignature['state'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'state'>;
 type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
     [K in keyof Models]: Omit<Models[K], 'setValue'>;

package/internals/models/treeView.d.ts

@@ -24,3 +24,4 @@ export interface TreeViewModel<TValue> {
     setControlledValue: (value: TValue | ((prevValue: TValue) => TValue)) => void;
 }
 export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergePluginsProperty<TSignatures, 'instance'>;
+export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergePluginsProperty<TSignatures, 'publicAPI'>;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -2,10 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import ownerDocument from '@mui/utils/ownerDocument';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
+import { getActiveElement } from '../../utils/utils';
 export const useTreeViewFocus = ({
   instance,
+  publicAPI,
   params,
   state,
   setState,
@@ -14,19 +16,45 @@ export const useTreeViewFocus = ({
 }) => {
   const setFocusedNodeId = useEventCallback(nodeId => {
     const cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId;
-    setState(prevState => _extends({}, prevState, {
-      focusedNodeId: cleanNodeId
-    }));
+    if (state.focusedNodeId !== cleanNodeId) {
+      setState(prevState => _extends({}, prevState, {
+        focusedNodeId: cleanNodeId
+      }));
+    }
   });
-  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId, [state.focusedNodeId]);
+  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current === getActiveElement(ownerDocument(rootRef.current)), [rootRef]);
+  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
+  const isNodeVisible = nodeId => {
+    const node = instance.getNode(nodeId);
+    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+  };
   const focusNode = useEventCallback((event, nodeId) => {
-    if (nodeId) {
+    // if we receive a nodeId, and it is visible, the focus will be set to it
+    if (nodeId && isNodeVisible(nodeId)) {
+      if (!isTreeViewFocused()) {
+        instance.focusRoot();
+      }
       setFocusedNodeId(nodeId);
       if (params.onNodeFocus) {
         params.onNodeFocus(event, nodeId);
       }
     }
   });
+  const focusDefaultNode = useEventCallback(event => {
+    let nodeToFocusId;
+    if (Array.isArray(models.selectedNodes.value)) {
+      nodeToFocusId = models.selectedNodes.value.find(isNodeVisible);
+    } else if (models.selectedNodes.value != null && isNodeVisible(models.selectedNodes.value)) {
+      nodeToFocusId = models.selectedNodes.value;
+    }
+    if (nodeToFocusId == null) {
+      nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+    }
+    setFocusedNodeId(nodeToFocusId);
+    if (params.onNodeFocus) {
+      params.onNodeFocus(event, nodeToFocusId);
+    }
+  });
   const focusRoot = useEventCallback(() => {
     var _rootRef$current;
     (_rootRef$current = rootRef.current) == null || _rootRef$current.focus({
@@ -36,7 +64,11 @@ export const useTreeViewFocus = ({
   populateInstance(instance, {
     isNodeFocused,
     focusNode,
-    focusRoot
+    focusRoot,
+    focusDefaultNode
+  });
+  populatePublicAPI(publicAPI, {
+    focusNode
   });
   useInstanceEventHandler(instance, 'removeNode', ({
     id
@@ -51,23 +83,9 @@ export const useTreeViewFocus = ({
   const createHandleFocus = otherHandlers => event => {
     var _otherHandlers$onFocu;
     (_otherHandlers$onFocu = otherHandlers.onFocus) == null || _otherHandlers$onFocu.call(otherHandlers, event);
-
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
-      const isNodeVisible = nodeId => {
-        const node = instance.getNode(nodeId);
-        return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
-      };
-      let nodeToFocusId;
-      if (Array.isArray(models.selectedNodes.value)) {
-        nodeToFocusId = models.selectedNodes.value.find(isNodeVisible);
-      } else if (models.selectedNodes.value != null && isNodeVisible(models.selectedNodes.value)) {
-        nodeToFocusId = models.selectedNodes.value;
-      }
-      if (nodeToFocusId == null) {
-        nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
-      }
-      instance.focusNode(event, nodeToFocusId);
+      instance.focusDefaultNode(event);
     }
   };
   const createHandleBlur = otherHandlers => event => {

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

@@ -7,8 +7,12 @@ import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewFocusInstance {
     isNodeFocused: (nodeId: string) => boolean;
     focusNode: (event: React.SyntheticEvent, nodeId: string | null) => void;
+    focusDefaultNode: (event: React.SyntheticEvent) => void;
     focusRoot: () => void;
 }
+export interface UseTreeViewFocusPublicAPI {
+    focusNode: (event: React.SyntheticEvent, nodeId: string | null) => void;
+}
 export interface UseTreeViewFocusParameters {
     /**
      * Callback fired when tree items are focused.
@@ -26,6 +30,7 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     params: UseTreeViewFocusParameters;
     defaultizedParams: UseTreeViewFocusDefaultizedParameters;
     instance: UseTreeViewFocusInstance;
+    publicAPI: UseTreeViewFocusPublicAPI;
     state: UseTreeViewFocusState;
     dependantPlugins: [
         UseTreeViewIdSignature,

package/internals/useTreeView/useTreeView.d.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
 import { TreeViewAnyPluginSignature, TreeViewPlugin, ConvertPluginsIntoSignatures } from '../models';
 import { UseTreeViewParameters, UseTreeViewReturnValue } from './useTreeView.types';
+export declare function useTreeViewApiInitialization<T>(inputApiRef: React.MutableRefObject<T> | undefined): T;
 export declare const useTreeView: <Plugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]>(inParams: UseTreeViewParameters<Plugins>) => UseTreeViewReturnValue<ConvertPluginsIntoSignatures<Plugins>>;