[TreeView] Move useTreeViewId to the core plugins

mui · Jun 20, 2024 · 315ddf3 · 315ddf3
1 parent 5f49acf
commit 315ddf3
Show file tree

Hide file tree

Showing 22 changed files with 7 additions and 55 deletions.
diff --git a/docs/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json
@@ -37,7 +37,6 @@
         "returned": "string"
       }
     },
-    "id": { "type": { "name": "string" } },
     "isItemDisabled": {
       "type": { "name": "func" },
       "signature": {

diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json
@@ -20,7 +20,6 @@
     "experimentalFeatures": {
       "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
     },
-    "id": { "type": { "name": "string" } },
     "itemChildrenIndentation": {
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
       "default": "12px"

diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json
@@ -20,7 +20,6 @@
     "experimentalFeatures": {
       "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
     },
-    "id": { "type": { "name": "string" } },
     "itemChildrenIndentation": {
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
       "default": "12px"

diff --git a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
@@ -32,9 +32,6 @@
       "description": "Used to determine the string label for a given item.",
       "typeDescriptions": { "item": "The item to check.", "string": "The label of the item." }
     },
-    "id": {
-      "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."
-    },
     "isItemDisabled": {
       "description": "Used to determine if a given item should be disabled.",
       "typeDescriptions": {

diff --git a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json
@@ -25,9 +25,6 @@
     "experimentalFeatures": {
       "description": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, the feature will be fully disabled and any property / method call will not have any effect."
     },
-    "id": {
-      "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."
-    },
     "itemChildrenIndentation": {
       "description": "Horizontal indentation between an item and its children. Examples: 24, &quot;24px&quot;, &quot;2rem&quot;, &quot;2em&quot;."
     },

diff --git a/docs/translations/api-docs/tree-view/tree-view/tree-view.json b/docs/translations/api-docs/tree-view/tree-view/tree-view.json
@@ -25,9 +25,6 @@
     "experimentalFeatures": {
       "description": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, the feature will be fully disabled and any property / method call will not have any effect."
     },
-    "id": {
-      "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."
-    },
     "itemChildrenIndentation": {
       "description": "Horizontal indentation between an item and its children. Examples: 24, &quot;24px&quot;, &quot;2rem&quot;, &quot;2em&quot;."
     },

diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.plugins.ts b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.plugins.ts
@@ -1,6 +1,4 @@
 import {
-  useTreeViewId,
-  UseTreeViewIdParameters,
   useTreeViewItems,
   UseTreeViewItemsParameters,
   useTreeViewExpansion,
@@ -17,7 +15,6 @@ import {
 } from '@mui/x-tree-view/internals';
 
 export const RICH_TREE_VIEW_PRO_PLUGINS = [
-  useTreeViewId,
   useTreeViewItems,
   useTreeViewExpansion,
   useTreeViewSelection,
@@ -42,8 +39,7 @@ export type RichTreeViewProPluginSlotProps = MergeSignaturesProperty<
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.
 export interface RichTreeViewProPluginParameters<R extends {}, Multiple extends boolean | undefined>
-  extends UseTreeViewIdParameters,
-    UseTreeViewItemsParameters<R>,
+  extends UseTreeViewItemsParameters<R>,
     UseTreeViewExpansionParameters,
     UseTreeViewFocusParameters,
     UseTreeViewSelectionParameters<Multiple>,

diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.plugins.ts b/packages/x-tree-view/src/RichTreeView/RichTreeView.plugins.ts
@@ -1,4 +1,3 @@
-import { useTreeViewId, UseTreeViewIdParameters } from '../internals/plugins/useTreeViewId';
 import {
   useTreeViewItems,
   UseTreeViewItemsParameters,
@@ -23,7 +22,6 @@ import {
 import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from '../internals/models';
 
 export const RICH_TREE_VIEW_PLUGINS = [
-  useTreeViewId,
   useTreeViewItems,
   useTreeViewExpansion,
   useTreeViewSelection,
@@ -48,8 +46,7 @@ export type RichTreeViewPluginSlotProps = MergeSignaturesProperty<
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.
 export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined>
-  extends UseTreeViewIdParameters,
-    UseTreeViewItemsParameters<R>,
+  extends UseTreeViewItemsParameters<R>,
     UseTreeViewExpansionParameters,
     UseTreeViewFocusParameters,
     UseTreeViewSelectionParameters<Multiple>,

diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
@@ -217,11 +217,6 @@ RichTreeView.propTypes = {
    * @default (item) => item.label
    */
   getItemLabel: PropTypes.func,
-  /**
-   * This prop is used to help implement the accessibility logic.
-   * If you don't provide this prop. It falls back to a randomly generated id.
-   */
-  id: PropTypes.string,
   /**
    * Used to determine if a given item should be disabled.
    * @template R

diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.plugins.ts b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.plugins.ts
@@ -1,4 +1,3 @@
-import { useTreeViewId, UseTreeViewIdParameters } from '../internals/plugins/useTreeViewId';
 import {
   useTreeViewItems,
   UseTreeViewItemsParameters,
@@ -24,7 +23,6 @@ import { useTreeViewJSXItems } from '../internals/plugins/useTreeViewJSXItems';
 import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from '../internals/models';
 
 export const SIMPLE_TREE_VIEW_PLUGINS = [
-  useTreeViewId,
   useTreeViewItems,
   useTreeViewExpansion,
   useTreeViewSelection,
@@ -50,8 +48,7 @@ export type SimpleTreeViewPluginSlotProps = MergeSignaturesProperty<
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.
 export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined>
-  extends UseTreeViewIdParameters,
-    Omit<
+  extends Omit<
       UseTreeViewItemsParameters<any>,
       'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'
     >,

diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx
@@ -162,11 +162,6 @@ SimpleTreeView.propTypes = {
   experimentalFeatures: PropTypes.shape({
     indentationAtItemLevel: PropTypes.bool,
   }),
-  /**
-   * This prop is used to help implement the accessibility logic.
-   * If you don't provide this prop. It falls back to a randomly generated id.
-   */
-  id: PropTypes.string,
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".

diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts b/packages/x-tree-view/src/TreeItem/TreeItem.types.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 {
   /**
@@ -123,7 +122,6 @@ export type TreeItemMinimalPlugins = readonly [
   UseTreeViewFocusSignature,
   UseTreeViewExpansionSignature,
   UseTreeViewKeyboardNavigationSignature,
-  UseTreeViewIdSignature,
 ];
 
 /**

diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx
@@ -147,11 +147,6 @@ TreeView.propTypes = {
   experimentalFeatures: PropTypes.shape({
     indentationAtItemLevel: PropTypes.bool,
   }),
-  /**
-   * This prop is used to help implement the accessibility logic.
-   * If you don't provide this prop. It falls back to a randomly generated id.
-   */
-  id: PropTypes.string,
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".

diff --git a/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewChildrenItemProvider.tsx b/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewChildrenItemProvider.tsx
@@ -4,7 +4,6 @@ import { useTreeViewContext } from './useTreeViewContext';
 import { escapeOperandAttributeSelector } from '../utils/utils';
 import type { UseTreeViewJSXItemsSignature } from '../plugins/useTreeViewJSXItems';
 import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
-import type { UseTreeViewIdSignature } from '../plugins/useTreeViewId';
 
 export const TreeViewChildrenItemContext =
   React.createContext<TreeViewChildrenItemContextValue | null>(null);
@@ -22,9 +21,7 @@ export function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProvider
   const { children, itemId = null } = props;
 
   const { instance, rootRef } =
-    useTreeViewContext<
-      [UseTreeViewJSXItemsSignature, UseTreeViewItemsSignature, UseTreeViewIdSignature]
-    >();
+    useTreeViewContext<[UseTreeViewJSXItemsSignature, UseTreeViewItemsSignature]>();
   const childrenIdAttrToIdRef = React.useRef<Map<string, string>>(new Map());
 
   React.useEffect(() => {

diff --git a/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts b/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts
@@ -1,11 +1,12 @@
 import { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
+import { useTreeViewId } 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 const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents] as const;
+export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents, useTreeViewId] as const;
 
 export type TreeViewCorePluginSignatures = ConvertPluginsIntoSignatures<
   typeof TREE_VIEW_CORE_PLUGINS

diff --git a/.../internals/plugins/useTreeViewId/index.ts → ...ernals/corePlugins/useTreeViewId/index.ts b/.../internals/plugins/useTreeViewId/index.ts → ...ernals/corePlugins/useTreeViewId/index.ts
diff --git a/...ls/plugins/useTreeViewId/useTreeViewId.ts → ...orePlugins/useTreeViewId/useTreeViewId.ts b/...ls/plugins/useTreeViewId/useTreeViewId.ts → ...orePlugins/useTreeViewId/useTreeViewId.ts
diff --git a/...gins/useTreeViewId/useTreeViewId.types.ts → ...gins/useTreeViewId/useTreeViewId.types.ts b/...gins/useTreeViewId/useTreeViewId.types.ts → ...gins/useTreeViewId/useTreeViewId.types.ts
diff --git a/packages/x-tree-view/src/internals/index.ts b/packages/x-tree-view/src/internals/index.ts
@@ -30,8 +30,6 @@ export type {
 } 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,

diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.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';
@@ -62,7 +61,6 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
   publicAPI: UseTreeViewFocusPublicAPI;
   state: UseTreeViewFocusState;
   dependencies: [
-    UseTreeViewIdSignature,
     UseTreeViewItemsSignature,
     UseTreeViewSelectionSignature,
     UseTreeViewExpansionSignature,

diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx
@@ -16,7 +16,6 @@ import {
 } from '../useTreeViewItems/useTreeViewItems.utils';
 import type { TreeItemProps } from '../../../TreeItem';
 import type { TreeItem2Props } from '../../../TreeItem2';
-import { UseTreeViewIdSignature } from '../useTreeViewId';
 import { TreeViewItemDepthContext } from '../../TreeViewItemDepthContext';
 
 export const useTreeViewJSXItems: TreeViewPlugin<UseTreeViewJSXItemsSignature> = ({
@@ -122,7 +121,7 @@ const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin<TreeItemProps | TreeItem
   rootRef,
   contentRef,
 }) => {
-  const { instance } = useTreeViewContext<[UseTreeViewIdSignature, UseTreeViewJSXItemsSignature]>();
+  const { instance } = useTreeViewContext<[UseTreeViewJSXItemsSignature]>();
   const { children, disabled = false, label, itemId, id } = props;
 
   const parentContext = React.useContext(TreeViewChildrenItemContext);

diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts
@@ -4,7 +4,6 @@ import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEv
 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';
 
@@ -187,7 +186,6 @@ export interface UseTreeItem2ReturnValue<
 export type UseTreeItem2MinimalPlugins = readonly [
   UseTreeViewSelectionSignature,
   UseTreeViewItemsSignature,
-  UseTreeViewIdSignature,
   UseTreeViewFocusSignature,
   UseTreeViewKeyboardNavigationSignature,
 ];