@mui/x-tree-view 7.7.0 → 7.7.1

package/CHANGELOG.md

@@ -3,6 +3,88 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.7.1
+
+_Jun 21, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Portuguese (pt-PT) locale on the Data Grid
+- 🌍 Improve Danish (da-DK) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.7.1`
+
+- [DataGrid][docs] Clarify enabling pagination (#13350) @oliviertassinari
+- [DataGrid] Fix CSV export escaping for non-string values (#13560) @joeycumines-scw
+- [l10n] Improve Portuguese (pt-PT) locale (#13348) @joaosreis
+
+#### `@mui/x-data-grid-pro@7.7.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.7.1`, plus:
+
+- [DataGrid] Warn about `getTreeDataPath` reference (#13519) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.7.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.7.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.7.1`
+
+- [fields] Prevent digit editing on the `Space` key down (#13510) @flaviendelangle
+- [l10n] Improve Danish (da-DK) locale (#13375) @jacrowland1
+- [pickers] Add context to `onAccept` callback (#13511) @flaviendelangle
+- [pickers] Always use the same timezone in the field, the view and the layout components (#13481) @flaviendelangle
+- [pickers] Fix `AdapterDateFnsV3` generated method types (#13464) @alexey-kozlenkov
+- [pickers] Fix controlled `view` behavior (#13552) @LukasTy
+- [TimePicker] Improves RTL verification for the time pickers default views  (#13447) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.7.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.7.1`, plus:
+
+- [DateRangePicker] Add accessible name to calendar grid (#13538) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.7.1`
+
+- [charts] Divide `CartesianProvider` to use logic in Pro package (#13531) @JCQuintas
+- [charts] Do not publish the pro package (#13539) @alexfauquette
+- [charts] Export `Pro` versions of regular charts (#13547) @JCQuintas
+- [charts] Prepare `ChartContainerPro` for future Zoom changes (#13532) @JCQuintas
+- [charts] Remove unnecessary proptypes from internal component (#13518) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.7.1`
+
+- [TreeView] Improve typing to support optional dependencies in plugins and in the item (#13523) @flaviendelangle
+- [TreeView] Move `useTreeViewId` to the core plugins (#13566) @flaviendelangle
+- [TreeView] Remove unused state from `useTreeViewId` (#13579) @flaviendelangle
+- [TreeView] Support `itemId` with escaping characters when using `SimpleTreeView` (#13487) @oukunan
+
+### Docs
+
+- [docs] Add section about the new uncovered product watermark (#13568) @michelengelen
+- [docs] Document the `PickerValidDate` type override (#13476) @flaviendelangle
+- [docs] Fix typo (#13507) @anshtiwatne
+- [docs] Remove "-" in heat-map and tree-map urls (#13569) @alexfauquette
+- [docs] Use dedicated tab for weather dataset (#13513) @alexfauquette
+- [x-license] license update proposal (#13459) @michelengelen
+
+### Core
+
+- [core] Fix failing CI test (#13574) @alexfauquette
+- [infra] Remove explicit `@testing-library/react` dependency (#13478) @LukasTy
+
 ## 7.7.0
 
 _Jun 13, 2024_

package/RichTreeView/RichTreeView.plugins.d.ts

@@ -1,13 +1,13 @@
-import { UseTreeViewIdParameters } from '../internals/plugins/useTreeViewId';
+import { TreeViewCorePluginParameters } from '../internals/corePlugins';
 import { UseTreeViewItemsParameters } from '../internals/plugins/useTreeViewItems';
 import { UseTreeViewExpansionParameters } from '../internals/plugins/useTreeViewExpansion';
 import { UseTreeViewSelectionParameters } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewFocusParameters } from '../internals/plugins/useTreeViewFocus';
 import { UseTreeViewIconsParameters } from '../internals/plugins/useTreeViewIcons';
 import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from '../internals/models';
-export declare const RICH_TREE_VIEW_PLUGINS: readonly [import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewId").UseTreeViewIdSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewItems").UseTreeViewItemsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewSelection").UseTreeViewSelectionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewFocus").UseTreeViewFocusSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewIcons").UseTreeViewIconsSignature>];
+export declare const RICH_TREE_VIEW_PLUGINS: readonly [import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewItems").UseTreeViewItemsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewSelection").UseTreeViewSelectionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewFocus").UseTreeViewFocusSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewIcons").UseTreeViewIconsSignature>];
 export type RichTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof RICH_TREE_VIEW_PLUGINS>;
 export type RichTreeViewPluginSlots = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slots'>;
 export type RichTreeViewPluginSlotProps = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slotProps'>;
-export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends UseTreeViewIdParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
+export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
 }

package/RichTreeView/RichTreeView.plugins.js

@@ -1,10 +1,9 @@
-import { useTreeViewId } from '../internals/plugins/useTreeViewId';
 import { useTreeViewItems } from '../internals/plugins/useTreeViewItems';
 import { useTreeViewExpansion } from '../internals/plugins/useTreeViewExpansion';
 import { useTreeViewSelection } from '../internals/plugins/useTreeViewSelection';
 import { useTreeViewFocus } from '../internals/plugins/useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from '../internals/plugins/useTreeViewKeyboardNavigation';
 import { useTreeViewIcons } from '../internals/plugins/useTreeViewIcons';
-export const RICH_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
+export const RICH_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -1,13 +1,13 @@
-import { UseTreeViewIdParameters } from '../internals/plugins/useTreeViewId';
+import { TreeViewCorePluginParameters } from '../internals/corePlugins';
 import { UseTreeViewItemsParameters } from '../internals/plugins/useTreeViewItems';
 import { UseTreeViewExpansionParameters } from '../internals/plugins/useTreeViewExpansion';
 import { UseTreeViewSelectionParameters } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewFocusParameters } from '../internals/plugins/useTreeViewFocus';
 import { UseTreeViewIconsParameters } from '../internals/plugins/useTreeViewIcons';
 import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from '../internals/models';
-export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewId").UseTreeViewIdSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewItems").UseTreeViewItemsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewSelection").UseTreeViewSelectionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewFocus").UseTreeViewFocusSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewIcons").UseTreeViewIconsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewJSXItems").UseTreeViewJSXItemsSignature>];
+export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewItems").UseTreeViewItemsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewSelection").UseTreeViewSelectionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewFocus").UseTreeViewFocusSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewIcons").UseTreeViewIconsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewJSXItems").UseTreeViewJSXItemsSignature>];
 export type SimpleTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
 export type SimpleTreeViewPluginSlots = MergeSignaturesProperty<SimpleTreeViewPluginSignatures, 'slots'>;
 export type SimpleTreeViewPluginSlotProps = MergeSignaturesProperty<SimpleTreeViewPluginSignatures, 'slotProps'>;
-export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends UseTreeViewIdParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
+export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
 }

package/SimpleTreeView/SimpleTreeView.plugins.js

@@ -1,4 +1,3 @@
-import { useTreeViewId } from '../internals/plugins/useTreeViewId';
 import { useTreeViewItems } from '../internals/plugins/useTreeViewItems';
 import { useTreeViewExpansion } from '../internals/plugins/useTreeViewExpansion';
 import { useTreeViewSelection } from '../internals/plugins/useTreeViewSelection';
@@ -6,6 +5,6 @@ import { useTreeViewFocus } from '../internals/plugins/useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from '../internals/plugins/useTreeViewKeyboardNavigation';
 import { useTreeViewIcons } from '../internals/plugins/useTreeViewIcons';
 import { useTreeViewJSXItems } from '../internals/plugins/useTreeViewJSXItems';
-export const SIMPLE_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewJSXItems];
+export const SIMPLE_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/TreeItem/TreeItem.types.d.ts

@@ -14,7 +14,6 @@ import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
 import { UseTreeViewExpansionSignature } from '../internals/plugins/useTreeViewExpansion';
 import { UseTreeViewKeyboardNavigationSignature } from '../internals/plugins/useTreeViewKeyboardNavigation';
-import { UseTreeViewIdSignature } from '../internals/plugins/useTreeViewId';
 export interface TreeItemSlots {
     /**
      * The icon used to collapse the item.
@@ -110,12 +109,18 @@ export interface TreeItemOwnerState extends TreeItemProps {
     disabled: boolean;
     indentationAtItemLevel: boolean;
 }
+/**
+ * Plugins that need to be present in the Tree View in order for `TreeItem` to work correctly.
+ */
 export type TreeItemMinimalPlugins = readonly [
     UseTreeViewIconsSignature,
     UseTreeViewSelectionSignature,
     UseTreeViewItemsSignature,
     UseTreeViewFocusSignature,
     UseTreeViewExpansionSignature,
-    UseTreeViewKeyboardNavigationSignature,
-    UseTreeViewIdSignature
+    UseTreeViewKeyboardNavigationSignature
 ];
+/**
+ * Plugins that `TreeItem` can use if they are present, but are not required.
+ */
+export type TreeItemOptionalPlugins = readonly [];

package/hooks/useTreeItem2Utils/useTreeItem2Utils.d.ts

@@ -9,6 +9,10 @@ interface UseTreeItem2UtilsReturnValue {
     interactions: UseTreeItem2Interactions;
     status: UseTreeItem2Status;
 }
+/**
+ * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ */
+export type UseTreeItem2UtilsOptionalPlugins = readonly [];
 export declare const useTreeItem2Utils: ({ itemId, children, }: {
     itemId: string;
     children: React.ReactNode;

package/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -5,6 +5,15 @@ const isItemExpandable = reactChildren => {
   }
   return Boolean(reactChildren);
 };
+
+/**
+ * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ */
+
+/**
+ * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ */
+
 export const useTreeItem2Utils = ({
   itemId,
   children

package/hooks/useTreeViewApiRef.d.ts

@@ -3,4 +3,4 @@ import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/mode
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */
-export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = readonly [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>() => React.MutableRefObject<TreeViewPublicAPI<TSignatures> | undefined>;
+export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = readonly [import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>() => React.MutableRefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/index.js

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

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from './useTreeViewContext';
+import { escapeOperandAttributeSelector } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -34,7 +35,8 @@ export function TreeViewChildrenItemProvider(props) {
       return;
     }
     const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
-    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${idAttr}"] `}[role="treeitem"]:not(*[id="${idAttr}"] [role="treeitem"] [role="treeitem"])`);
+    const escapedIdAttr = escapeOperandAttributeSelector(idAttr);
+    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${escapedIdAttr}"] `}[role="treeitem"]:not(*[id="${escapedIdAttr}"] [role="treeitem"] [role="treeitem"])`);
     const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
     const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);
     if (hasChanged) {

package/internals/TreeViewProvider/TreeViewContext.d.ts

@@ -1,12 +1,6 @@
 import * as React from 'react';
+import { TreeViewContextValue } from './TreeViewProvider.types';
 /**
  * @ignore - internal component.
  */
-export declare const TreeViewContext: React.Context<{
-    instance: import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsInstance;
-    publicAPI: {};
-    rootRef: React.RefObject<HTMLUListElement>;
-    wrapItem: import("../models").TreeItemWrapper<any>;
-    wrapRoot: import("../models").TreeRootWrapper<any>;
-    runItemPlugins: import("./TreeViewProvider.types").TreeViewItemPluginsRunner;
-} | null>;
+export declare const TreeViewContext: React.Context<TreeViewContextValue<any> | null>;

package/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { MergeSignaturesProperty, TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI } from '../models';
 export type TreeViewItemPluginsRunner = <TProps extends {}>(props: TProps) => Required<TreeViewItemPluginResponse>;
-export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergeSignaturesProperty<TSignatures, 'contextValue'> & {
-    instance: TreeViewInstance<TSignatures>;
-    publicAPI: TreeViewPublicAPI<TSignatures>;
+export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<TSignatures, 'contextValue'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'contextValue'>> & {
+    instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
+    publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
     rootRef: React.RefObject<HTMLUListElement>;
     wrapItem: TreeItemWrapper<TSignatures>;
     wrapRoot: TreeRootWrapper<TSignatures>;

package/internals/TreeViewProvider/useTreeViewContext.d.ts

@@ -1,3 +1,3 @@
 import { TreeViewAnyPluginSignature } from '../models';
 import { TreeViewContextValue } from './TreeViewProvider.types';
-export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[]>() => NonNullable<TreeViewContextValue<TSignatures>>;
+export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => NonNullable<TreeViewContextValue<TSignatures, TOptionalSignatures>>;

package/internals/corePlugins/corePlugins.d.ts

@@ -1,7 +1,10 @@
+import { UseTreeViewIdParameters } from './useTreeViewId';
 import { ConvertPluginsIntoSignatures } from '../models';
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.
  */
-export declare const TREE_VIEW_CORE_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewInstanceEvents").UseTreeViewInstanceEventsSignature>];
+export declare const TREE_VIEW_CORE_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewInstanceEvents").UseTreeViewInstanceEventsSignature>, import("../models").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>];
 export type TreeViewCorePluginSignatures = ConvertPluginsIntoSignatures<typeof TREE_VIEW_CORE_PLUGINS>;
+export interface TreeViewCorePluginParameters extends UseTreeViewIdParameters {
+}

package/internals/corePlugins/corePlugins.js

@@ -1,6 +1,7 @@
 import { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
+import { useTreeViewId } from './useTreeViewId';
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.
  */
-export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents];
+export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents, useTreeViewId];

package/internals/corePlugins/index.d.ts

@@ -1,2 +1,2 @@
 export { TREE_VIEW_CORE_PLUGINS } from './corePlugins';
-export type { TreeViewCorePluginSignatures } from './corePlugins';
+export type { TreeViewCorePluginSignatures, TreeViewCorePluginParameters } from './corePlugins';

package/internals/{plugins → corePlugins}/useTreeViewId/useTreeViewId.types.d.ts

@@ -19,12 +19,8 @@ export interface UseTreeViewIdParameters {
     id?: string;
 }
 export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
-export interface UseTreeViewIdState {
-    focusedItemId: string | null;
-}
 export type UseTreeViewIdSignature = TreeViewPluginSignature<{
     params: UseTreeViewIdParameters;
     defaultizedParams: UseTreeViewIdDefaultizedParameters;
     instance: UseTreeViewIdInstance;
-    state: UseTreeViewIdState;
 }>;

package/internals/hooks/useInstanceEventHandler.d.ts

@@ -7,9 +7,9 @@ interface RegistryContainer {
 }
 export declare function createUseInstanceEventHandler(registryContainer: RegistryContainer): <Instance extends UseTreeViewInstanceEventsInstance & {
     $$signature: TreeViewAnyPluginSignature;
-}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
+}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, import("../corePlugins/useTreeViewId").UseTreeViewIdSignature, ...Instance["$$signature"]["dependencies"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
 export declare const unstable_resetCleanupTracking: () => void;
 export declare const useInstanceEventHandler: <Instance extends UseTreeViewInstanceEventsInstance & {
     $$signature: TreeViewAnyPluginSignature;
-}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
+}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, import("../corePlugins/useTreeViewId").UseTreeViewIdSignature, ...Instance["$$signature"]["dependencies"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
 export {};

package/internals/index.d.ts

@@ -2,6 +2,7 @@ export { useTreeView } from './useTreeView';
 export { TreeViewProvider } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
 export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, } from './models';
+export type { TreeViewCorePluginParameters } from './corePlugins';
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, } from './plugins/useTreeViewExpansion';
 export { useTreeViewSelection } from './plugins/useTreeViewSelection';
@@ -10,8 +11,6 @@ export { useTreeViewFocus } from './plugins/useTreeViewFocus';
 export type { UseTreeViewFocusSignature, UseTreeViewFocusParameters, } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
 export type { UseTreeViewKeyboardNavigationSignature } from './plugins/useTreeViewKeyboardNavigation';
-export { useTreeViewId } from './plugins/useTreeViewId';
-export type { UseTreeViewIdSignature, UseTreeViewIdParameters } from './plugins/useTreeViewId';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export type { UseTreeViewIconsSignature, UseTreeViewIconsParameters, } from './plugins/useTreeViewIcons';
 export { useTreeViewItems } from './plugins/useTreeViewItems';

package/internals/index.js

@@ -1,12 +1,14 @@
 export { useTreeView } from './useTreeView';
 export { TreeViewProvider } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
+
+// Core plugins
+
 // Plugins
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export { useTreeViewSelection } from './plugins/useTreeViewSelection';
 export { useTreeViewFocus } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
-export { useTreeViewId } from './plugins/useTreeViewId';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export { useTreeViewItems } from './plugins/useTreeViewItems';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';

package/internals/models/plugin.d.ts

@@ -42,7 +42,8 @@ export type TreeViewPluginSignature<T extends {
     };
     modelNames?: keyof T['defaultizedParams'];
     experimentalFeatures?: string;
-    dependantPlugins?: readonly TreeViewAnyPluginSignature[];
+    dependencies?: readonly TreeViewAnyPluginSignature[];
+    optionalDependencies?: readonly TreeViewAnyPluginSignature[];
 }> = {
     params: T extends {
         params: {};
@@ -78,16 +79,20 @@ export type TreeViewPluginSignature<T extends {
         [TControlled in T['modelNames']]-?: TreeViewModel<Exclude<T['defaultizedParams'][TControlled], undefined>>;
     } : {};
     experimentalFeatures: T['experimentalFeatures'];
-    dependantPlugins: T extends {
-        dependantPlugins: Array<any>;
-    } ? T['dependantPlugins'] : [];
+    dependencies: T extends {
+        dependencies: Array<any>;
+    } ? T['dependencies'] : [];
+    optionalDependencies: T extends {
+        optionalDependencies: Array<any>;
+    } ? T['optionalDependencies'] : [];
 };
 export type TreeViewAnyPluginSignature = {
     state: any;
     instance: any;
     params: any;
     defaultizedParams: any;
-    dependantPlugins: any;
+    dependencies: any;
+    optionalDependencies: any;
     events: any;
     contextValue: any;
     slots: any;
@@ -96,25 +101,26 @@ export type TreeViewAnyPluginSignature = {
     experimentalFeatures: any;
     publicAPI: any;
 };
-type TreeViewUsedPlugins<TSignature extends TreeViewAnyPluginSignature> = [
+type TreeViewRequiredPlugins<TSignature extends TreeViewAnyPluginSignature> = [
     ...TreeViewCorePluginSignatures,
-    ...TSignature['dependantPlugins']
+    ...TSignature['dependencies']
 ];
-export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['params'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'params'>;
-type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['defaultizedParams'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'defaultizedParams'>;
-export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = TSignature['instance'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'instance'> & {
+type PluginPropertyWithDependencies<TSignature extends TreeViewAnyPluginSignature, TProperty extends keyof TreeViewAnyPluginSignature> = TSignature[TProperty] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, TProperty> & Partial<MergeSignaturesProperty<TSignature['optionalDependencies'], TProperty>>;
+export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'params'>;
+type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
+export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'instance'> & {
     /**
      * Private property only defined in TypeScript to be able to access the plugin signature from the instance object.
      */
     $$signature: TSignature;
 };
-type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = TSignature['state'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'state'>;
-type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[TSignature, ...TSignature['dependantPlugins']]>;
+type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'state'>;
+type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[TSignature, ...TSignature['dependencies']]>;
 type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
     [K in keyof Models]: Omit<Models[K], 'setValue'>;
 };
-export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'models'>>;
-export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'events'>;
+export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, 'models'>>;
+export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, 'events'>;
 export interface TreeViewItemPluginOptions<TProps extends {}> extends TreeViewItemPluginResponse {
     props: TProps;
 }
@@ -150,12 +156,12 @@ export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
      * @param {{ nodeId: TreeViewItemId; children: React.ReactNode; }} params The params of the item.
      * @returns {React.ReactNode} The wrapped item.
      */
-    wrapItem?: TreeItemWrapper<[TSignature, ...TSignature['dependantPlugins']]>;
+    wrapItem?: TreeItemWrapper<[TSignature, ...TSignature['dependencies']]>;
     /**
      * Render function used to add React wrappers around the TreeView.
      * @param {{ children: React.ReactNode; }} params The params of the root.
      * @returns {React.ReactNode} The wrapped root.
      */
-    wrapRoot?: TreeRootWrapper<[TSignature, ...TSignature['dependantPlugins']]>;
+    wrapRoot?: TreeRootWrapper<[TSignature, ...TSignature['dependencies']]>;
 };
 export {};

package/internals/models/treeView.d.ts

@@ -21,8 +21,8 @@ export interface TreeViewModel<TValue> {
     value: TValue;
     setControlledValue: (value: TValue | ((prevValue: TValue) => TValue)) => void;
 }
-export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'instance'>;
-export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'publicAPI'>;
+export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'instance'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
+export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'publicAPI'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
 export type TreeViewExperimentalFeatures<TSignatures extends readonly TreeViewAnyPluginSignature[]> = {
     [key in MergeSignaturesProperty<TSignatures, 'experimentalFeatures'>]?: boolean;
 };

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

@@ -73,5 +73,5 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     instance: UseTreeViewExpansionInstance;
     publicAPI: UseTreeViewExpansionPublicAPI;
     modelNames: 'expandedItems';
-    dependantPlugins: [UseTreeViewItemsSignature];
+    dependencies: [UseTreeViewItemsSignature];
 }>;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { TreeViewPluginSignature } from '../../models';
-import { UseTreeViewIdSignature } from '../useTreeViewId/useTreeViewId.types';
 import type { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
@@ -55,8 +54,7 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     instance: UseTreeViewFocusInstance;
     publicAPI: UseTreeViewFocusPublicAPI;
     state: UseTreeViewFocusState;
-    dependantPlugins: [
-        UseTreeViewIdSignature,
+    dependencies: [
         UseTreeViewItemsSignature,
         UseTreeViewSelectionSignature,
         UseTreeViewExpansionSignature

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

@@ -38,6 +38,6 @@ export type UseTreeViewIconsSignature = TreeViewPluginSignature<{
     contextValue: UseTreeViewIconsContextValue;
     slots: UseTreeViewIconsSlots;
     slotProps: UseTreeViewIconsSlotProps;
-    dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
+    dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
 }>;
 export {};

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

@@ -33,5 +33,5 @@ export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
     params: UseTreeViewJSXItemsParameters;
     defaultizedParams: UseTreeViewItemsDefaultizedParameters;
     instance: UseTreeViewItemsInstance;
-    dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
+    dependencies: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
 }>;

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

@@ -24,7 +24,7 @@ export interface UseTreeViewKeyboardNavigationInstance {
 }
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
     instance: UseTreeViewKeyboardNavigationInstance;
-    dependantPlugins: [
+    dependencies: [
         UseTreeViewItemsSignature,
         UseTreeViewSelectionSignature,
         UseTreeViewFocusSignature,

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

@@ -101,7 +101,7 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
     instance: UseTreeViewSelectionInstance;
     contextValue: UseTreeViewSelectionContextValue;
     modelNames: 'selectedItems';
-    dependantPlugins: [
+    dependencies: [
         UseTreeViewItemsSignature,
         UseTreeViewExpansionSignature,
         UseTreeViewItemsSignature

package/internals/utils/publishTreeViewEvent.d.ts

@@ -2,4 +2,4 @@ import { UseTreeViewInstanceEventsInstance } from '../corePlugins/useTreeViewIns
 import { TreeViewAnyPluginSignature, TreeViewUsedEvents } from '../models';
 export declare const publishTreeViewEvent: <Instance extends UseTreeViewInstanceEventsInstance & {
     $$signature: TreeViewAnyPluginSignature;
-}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance['$$signature']>[E]['params']) => void;
+}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, import("../corePlugins/useTreeViewId").UseTreeViewIdSignature, ...Instance["$$signature"]["dependencies"]], "events">>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance['$$signature']>[E]['params']) => void;

package/internals/utils/utils.d.ts

@@ -1 +1,2 @@
 export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
+export declare function escapeOperandAttributeSelector(operand: string): string;

package/internals/utils/utils.js

@@ -8,4 +8,10 @@ export const getActiveElement = (root = document) => {
     return getActiveElement(activeEl.shadowRoot);
   }
   return activeEl;
-};
+};
+
+// TODO, eventually replaces this function with CSS.escape, once available in jsdom, either added manually or built in
+// https://github.com/jsdom/jsdom/issues/1550#issuecomment-236734471
+export function escapeOperandAttributeSelector(operand) {
+  return operand.replace(/["\\]/g, '\\$&');
+}

package/modern/RichTreeView/RichTreeView.plugins.js

@@ -1,10 +1,9 @@
-import { useTreeViewId } from '../internals/plugins/useTreeViewId';
 import { useTreeViewItems } from '../internals/plugins/useTreeViewItems';
 import { useTreeViewExpansion } from '../internals/plugins/useTreeViewExpansion';
 import { useTreeViewSelection } from '../internals/plugins/useTreeViewSelection';
 import { useTreeViewFocus } from '../internals/plugins/useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from '../internals/plugins/useTreeViewKeyboardNavigation';
 import { useTreeViewIcons } from '../internals/plugins/useTreeViewIcons';
-export const RICH_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
+export const RICH_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/modern/SimpleTreeView/SimpleTreeView.plugins.js

@@ -1,4 +1,3 @@
-import { useTreeViewId } from '../internals/plugins/useTreeViewId';
 import { useTreeViewItems } from '../internals/plugins/useTreeViewItems';
 import { useTreeViewExpansion } from '../internals/plugins/useTreeViewExpansion';
 import { useTreeViewSelection } from '../internals/plugins/useTreeViewSelection';
@@ -6,6 +5,6 @@ import { useTreeViewFocus } from '../internals/plugins/useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from '../internals/plugins/useTreeViewKeyboardNavigation';
 import { useTreeViewIcons } from '../internals/plugins/useTreeViewIcons';
 import { useTreeViewJSXItems } from '../internals/plugins/useTreeViewJSXItems';
-export const SIMPLE_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewJSXItems];
+export const SIMPLE_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -5,6 +5,15 @@ const isItemExpandable = reactChildren => {
   }
   return Boolean(reactChildren);
 };
+
+/**
+ * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ */
+
+/**
+ * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ */
+
 export const useTreeItem2Utils = ({
   itemId,
   children

package/modern/index.js

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

package/modern/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from './useTreeViewContext';
+import { escapeOperandAttributeSelector } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -34,7 +35,8 @@ export function TreeViewChildrenItemProvider(props) {
       return;
     }
     const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
-    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${idAttr}"] `}[role="treeitem"]:not(*[id="${idAttr}"] [role="treeitem"] [role="treeitem"])`);
+    const escapedIdAttr = escapeOperandAttributeSelector(idAttr);
+    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${escapedIdAttr}"] `}[role="treeitem"]:not(*[id="${escapedIdAttr}"] [role="treeitem"] [role="treeitem"])`);
     const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
     const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);
     if (hasChanged) {

package/modern/internals/corePlugins/corePlugins.js

@@ -1,6 +1,7 @@
 import { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
+import { useTreeViewId } from './useTreeViewId';
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.
  */
-export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents];
+export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents, useTreeViewId];

package/modern/internals/index.js

@@ -1,12 +1,14 @@
 export { useTreeView } from './useTreeView';
 export { TreeViewProvider } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
+
+// Core plugins
+
 // Plugins
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export { useTreeViewSelection } from './plugins/useTreeViewSelection';
 export { useTreeViewFocus } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
-export { useTreeViewId } from './plugins/useTreeViewId';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export { useTreeViewItems } from './plugins/useTreeViewItems';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';

package/modern/internals/utils/utils.js

@@ -8,4 +8,10 @@ export const getActiveElement = (root = document) => {
     return getActiveElement(activeEl.shadowRoot);
   }
   return activeEl;
-};
+};
+
+// TODO, eventually replaces this function with CSS.escape, once available in jsdom, either added manually or built in
+// https://github.com/jsdom/jsdom/issues/1550#issuecomment-236734471
+export function escapeOperandAttributeSelector(operand) {
+  return operand.replace(/["\\]/g, '\\$&');
+}

package/node/RichTreeView/RichTreeView.plugins.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RICH_TREE_VIEW_PLUGINS = void 0;
-var _useTreeViewId = require("../internals/plugins/useTreeViewId");
 var _useTreeViewItems = require("../internals/plugins/useTreeViewItems");
 var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection");
 var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("../internals/plugins/useTreeViewKeyboardNavigation");
 var _useTreeViewIcons = require("../internals/plugins/useTreeViewIcons");
-const RICH_TREE_VIEW_PLUGINS = exports.RICH_TREE_VIEW_PLUGINS = [_useTreeViewId.useTreeViewId, _useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons];
+const RICH_TREE_VIEW_PLUGINS = exports.RICH_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/node/SimpleTreeView/SimpleTreeView.plugins.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SIMPLE_TREE_VIEW_PLUGINS = void 0;
-var _useTreeViewId = require("../internals/plugins/useTreeViewId");
 var _useTreeViewItems = require("../internals/plugins/useTreeViewItems");
 var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection");
@@ -12,6 +11,6 @@ var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("../internals/plugins/useTreeViewKeyboardNavigation");
 var _useTreeViewIcons = require("../internals/plugins/useTreeViewIcons");
 var _useTreeViewJSXItems = require("../internals/plugins/useTreeViewJSXItems");
-const SIMPLE_TREE_VIEW_PLUGINS = exports.SIMPLE_TREE_VIEW_PLUGINS = [_useTreeViewId.useTreeViewId, _useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons, _useTreeViewJSXItems.useTreeViewJSXItems];
+const SIMPLE_TREE_VIEW_PLUGINS = exports.SIMPLE_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons, _useTreeViewJSXItems.useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -11,6 +11,15 @@ const isItemExpandable = reactChildren => {
   }
   return Boolean(reactChildren);
 };
+
+/**
+ * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ */
+
+/**
+ * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ */
+
 const useTreeItem2Utils = ({
   itemId,
   children

package/node/index.js

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

package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -9,6 +9,7 @@ exports.TreeViewChildrenItemProvider = TreeViewChildrenItemProvider;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTreeViewContext = require("./useTreeViewContext");
+var _utils = require("../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -44,7 +45,8 @@ function TreeViewChildrenItemProvider(props) {
       return;
     }
     const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
-    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${idAttr}"] `}[role="treeitem"]:not(*[id="${idAttr}"] [role="treeitem"] [role="treeitem"])`);
+    const escapedIdAttr = (0, _utils.escapeOperandAttributeSelector)(idAttr);
+    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${escapedIdAttr}"] `}[role="treeitem"]:not(*[id="${escapedIdAttr}"] [role="treeitem"] [role="treeitem"])`);
     const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
     const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);
     if (hasChanged) {

package/node/internals/corePlugins/corePlugins.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TREE_VIEW_CORE_PLUGINS = void 0;
 var _useTreeViewInstanceEvents = require("./useTreeViewInstanceEvents");
+var _useTreeViewId = require("./useTreeViewId");
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.
  */
-const TREE_VIEW_CORE_PLUGINS = exports.TREE_VIEW_CORE_PLUGINS = [_useTreeViewInstanceEvents.useTreeViewInstanceEvents];
+const TREE_VIEW_CORE_PLUGINS = exports.TREE_VIEW_CORE_PLUGINS = [_useTreeViewInstanceEvents.useTreeViewInstanceEvents, _useTreeViewId.useTreeViewId];

package/node/internals/index.js

@@ -45,12 +45,6 @@ Object.defineProperty(exports, "useTreeViewIcons", {
     return _useTreeViewIcons.useTreeViewIcons;
   }
 });
-Object.defineProperty(exports, "useTreeViewId", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewId.useTreeViewId;
-  }
-});
 Object.defineProperty(exports, "useTreeViewItems", {
   enumerable: true,
   get: function () {
@@ -82,7 +76,6 @@ var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("./plugins/useTreeViewSelection");
 var _useTreeViewFocus = require("./plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("./plugins/useTreeViewKeyboardNavigation");
-var _useTreeViewId = require("./plugins/useTreeViewId");
 var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
 var _useTreeViewItems = require("./plugins/useTreeViewItems");
 var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");

package/node/internals/utils/utils.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.escapeOperandAttributeSelector = escapeOperandAttributeSelector;
 exports.getActiveElement = void 0;
 // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
 const getActiveElement = (root = document) => {
@@ -15,4 +16,10 @@ const getActiveElement = (root = document) => {
   }
   return activeEl;
 };
-exports.getActiveElement = getActiveElement;
+
+// TODO, eventually replaces this function with CSS.escape, once available in jsdom, either added manually or built in
+// https://github.com/jsdom/jsdom/issues/1550#issuecomment-236734471
+exports.getActiveElement = getActiveElement;
+function escapeOperandAttributeSelector(operand) {
+  return operand.replace(/["\\]/g, '\\$&');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.7.0",
+  "version": "7.7.1",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",

package/useTreeItem2/useTreeItem2.d.ts

@@ -1,2 +1,2 @@
 import { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2MinimalPlugins } from './useTreeItem2.types';
-export declare const useTreeItem2: <TSignatures extends UseTreeItem2MinimalPlugins = UseTreeItem2MinimalPlugins>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TSignatures>;
+export declare const useTreeItem2: <TSignatures extends UseTreeItem2MinimalPlugins = UseTreeItem2MinimalPlugins, TOptionalSignatures extends readonly [] = readonly []>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { TreeViewItemId } from '../models';
 import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
-import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
+import { TreeViewPublicAPI } from '../internals/models';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
-import { UseTreeViewIdSignature } from '../internals/plugins/useTreeViewId';
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
 import { UseTreeViewKeyboardNavigationSignature } from '../internals/plugins/useTreeViewKeyboardNavigation';
 export interface UseTreeItem2Parameters {
@@ -95,7 +94,7 @@ export interface UseTreeItem2Status {
     selected: boolean;
     disabled: boolean;
 }
-export interface UseTreeItem2ReturnValue<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+export interface UseTreeItem2ReturnValue<TSignatures extends UseTreeItem2MinimalPlugins, TOptionalSignatures extends UseTreeItem2OptionalPlugins> {
     /**
      * Resolver for the root slot's props.
      * @param {ExternalProps} externalProps Additional props for the root slot
@@ -143,12 +142,18 @@ export interface UseTreeItem2ReturnValue<TSignatures extends readonly TreeViewAn
     /**
      * The object the allows Tree View manipulation.
      */
-    publicAPI: TreeViewPublicAPI<TSignatures>;
+    publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
 }
+/**
+ * Plugins that need to be present in the Tree View in order for `useTreeItem2` to work correctly.
+ */
 export type UseTreeItem2MinimalPlugins = readonly [
     UseTreeViewSelectionSignature,
     UseTreeViewItemsSignature,
-    UseTreeViewIdSignature,
     UseTreeViewFocusSignature,
     UseTreeViewKeyboardNavigationSignature
 ];
+/**
+ * Plugins that `useTreeItem2` can use if they are present, but are not required.
+ */
+export type UseTreeItem2OptionalPlugins = readonly [];