@mui/x-tree-view 7.7.0 → 7.8.0

package/CHANGELOG.md

@@ -3,6 +3,187 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.8.0
+
+_Jun 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce server-side data source for improved server integration in the Data Grid.
+
+  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
+
+  To enable, provide a `getRows` function to the `unstable_dataSource` prop on the Data Grid component.
+
+  ```tsx
+  const dataSource = {
+    getRows: async (params: GridServerGetRowsParams) => {
+      const data = await fetch(
+        `https://api.example.com/data?${new URLSearchParams({
+          page: params.page,
+          pageSize: params.pageSize,
+          sortModel: JSON.stringify(params.sortModel),
+          filterModel: JSON.stringify(params.filterModel),
+        }).toString()}`,
+      );
+      return {
+        rows: data.rows,
+        totalRows: data.totalRows,
+      };
+    },
+  }
+  <DataGridPro
+    unstable_dataSource={dataSource}
+    {...otherProps}
+  />
+  ```
+
+  See [server-side data documentation](https://mui.com/x/react-data-grid/server-side-data/) for more details.
+
+- 📈 Support Date data on the BarChart component
+- ↕️ Support custom column sort icons on the Data Grid
+- 🖱️ Support modifying the expansion trigger on the Tree View components
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.8.0`
+
+- [DataGrid] Add `columnHeaderSortIcon` slot (#13563) @arminmeh
+- [DataGrid] Fix dimensions lag issue after autosize (#13587) @MBilalShafi
+- [DataGrid] Fix print export failure when `hideFooter` option is set (#13034) @tarunrajput
+
+#### `@mui/x-data-grid-pro@7.8.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.8.0`, plus:
+
+- [DataGridPro] Fix multi-sorting indicator being cut off (#13625) @KenanYusuf
+- [DataGridPro] Server-side tree data support (#12317) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.8.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.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.8.0`
+
+- [fields] Fix section clearing behavior on Android (#13652) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.8.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.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.8.0`
+
+- [charts] Fix line chart props not passing correct event handlers (#13609) @JCQuintas
+- [charts] Support BarChart with `Date` data (#13471) @alexfauquette
+- [charts] Support RTL for y-axis (#13614) @alexfauquette
+- [charts] Use default values instead of non-null assertion to prevent error being thrown (#13637) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.8.0`
+
+- [TreeView] Add `expansionTrigger` prop (#13533) @noraleonte
+- [TreeView] Support experimental features from plugin's dependencies (#13632) @flaviendelangle
+
+### Docs
+
+- [docs] Add callout for `Luxon` `throwOnInvalid` support (#13621) @LukasTy
+- [docs] Add "Overlays" section to the Data Grid documentation (#13624) @KenanYusuf
+
+### Core
+
+- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
+- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle
+
+## 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.js

@@ -177,6 +177,11 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`,

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.js

@@ -139,6 +139,11 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`,

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.js

@@ -22,6 +22,7 @@ import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewCon
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
+import { useTreeItemState } from './useTreeItemState';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem');
 const useUtilityClasses = ownerState => {
@@ -168,6 +169,9 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     selection: {
       multiSelect
     },
+    expansion: {
+      expansionTrigger
+    },
     disabledItemsFocusable,
     indentationAtItemLevel,
     instance
@@ -193,6 +197,13 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       onKeyDown
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    expanded,
+    focused,
+    selected,
+    disabled,
+    handleExpansion
+  } = useTreeItemState(itemId);
   const {
     contentRef,
     rootRef
@@ -213,10 +224,6 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     return Boolean(reactChildren);
   };
   const expandable = isExpandable(children);
-  const expanded = instance.isItemExpanded(itemId);
-  const focused = instance.isItemFocused(itemId);
-  const selected = instance.isItemSelected(itemId);
-  const disabled = instance.isItemDisabled(itemId);
   const ownerState = _extends({}, props, {
     expanded,
     focused,
@@ -240,6 +247,11 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     } : {}),
     className: classes.groupTransition
   });
+  const handleIconContainerClick = event => {
+    if (expansionTrigger === 'iconContainer') {
+      handleExpansion(event);
+    }
+  };
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
   const _useSlotProps = useSlotProps({
       elementType: ExpansionIcon,
@@ -249,6 +261,9 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
           return _extends({}, resolveComponentProps(contextIcons.slotProps.collapseIcon, tempOwnerState), resolveComponentProps(inSlotProps?.collapseIcon, tempOwnerState));
         }
         return _extends({}, resolveComponentProps(contextIcons.slotProps.expandIcon, tempOwnerState), resolveComponentProps(inSlotProps?.expandIcon, tempOwnerState));
+      },
+      additionalProps: {
+        onClick: handleIconContainerClick
       }
     }),
     expansionIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);

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

@@ -33,7 +33,8 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     handleExpansion,
     handleSelection,
     handleCheckboxSelection,
-    preventSelection
+    preventSelection,
+    expansionTrigger
   } = useTreeItemState(itemId);
   const icon = iconProp || expansionIcon || displayIcon;
   const checkboxRef = React.useRef(null);
@@ -47,7 +48,9 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     if (checkboxRef.current?.contains(event.target)) {
       return;
     }
-    handleExpansion(event);
+    if (expansionTrigger === 'content') {
+      handleExpansion(event);
+    }
     if (!checkboxSelection) {
       handleSelection(event);
     }

package/TreeItem/useTreeItemState.d.ts

@@ -10,4 +10,5 @@ export declare function useTreeItemState(itemId: string): {
     handleSelection: (event: React.MouseEvent) => void;
     handleCheckboxSelection: (event: React.ChangeEvent<HTMLInputElement>) => void;
     preventSelection: (event: React.MouseEvent<HTMLDivElement>) => void;
+    expansionTrigger: "content" | "iconContainer" | undefined;
 };

package/TreeItem/useTreeItemState.js

@@ -6,6 +6,9 @@ export function useTreeItemState(itemId) {
       multiSelect,
       checkboxSelection,
       disableSelection
+    },
+    expansion: {
+      expansionTrigger
     }
   } = useTreeViewContext();
   const expandable = instance.isItemExpandable(itemId);
@@ -70,6 +73,7 @@ export function useTreeItemState(itemId) {
     handleExpansion,
     handleSelection,
     handleCheckboxSelection,
-    preventSelection
+    preventSelection,
+    expansionTrigger
   };
 }

package/TreeItem2/TreeItem2.d.ts

@@ -5,16 +5,16 @@ import { UseTreeItem2Status } from '../useTreeItem2';
 export declare const TreeItem2Root: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof React.ClassAttributes<HTMLLIElement> | keyof React.LiHTMLAttributes<HTMLLIElement>>, {}>;
 export declare const TreeItem2Content: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     status: UseTreeItem2Status;
-    indentationAtItemLevel?: true | undefined;
+    indentationAtItemLevel?: true;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TreeItem2Label: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const TreeItem2IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledComponent<import("@mui/material/Collapse").CollapseProps & import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    indentationAtItemLevel?: true | undefined;
+    indentationAtItemLevel?: true;
 }, {}, {}>;
 export declare const TreeItem2Checkbox: import("@emotion/styled").StyledComponent<Pick<Omit<CheckboxProps & {
     visible: boolean;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>, "hidden" | "visible" | "color" | "content" | "size" | "style" | "icon" | "translate" | "disabled" | "form" | "slot" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "readOnly" | "required" | "action" | "checked" | "component" | "sx" | "classes" | "onFocusVisible" | "inputRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "checkedIcon" | "inputProps" | "indeterminate" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "hidden" | "visible" | "color" | "content" | "size" | "style" | "icon" | "translate" | "disabled" | "form" | "slot" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "readOnly" | "required" | "action" | "checked" | "component" | "sx" | "classes" | "onFocusVisible" | "inputRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "checkedIcon" | "inputProps" | "indeterminate" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 type TreeItem2Component = ((props: TreeItem2Props & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/TreeItem2Provider/TreeItem2Provider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TreeItem2ProviderProps } from './TreeItem2Provider.types';
 declare function TreeItem2Provider(props: TreeItem2ProviderProps): import("react").ReactNode;
 declare namespace TreeItem2Provider {

package/TreeView/TreeView.js

@@ -116,6 +116,11 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`,

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.8.0
  *
  * @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];