[TreeView] Prepare support for PigmentCSS (mui#13412)

DungTiger · Jul 23, 2024 · 02819e4 · 02819e4
1 parent a60647d
commit 02819e4
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 11 deletions.
diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { useSlotProps } from '@mui/base/utils';
@@ -10,6 +9,7 @@ import {
   buildWarning,
   extractPluginParamsFromProps,
 } from '@mui/x-tree-view/internals';
+import { styled, createUseThemeProps } from '../internals/zero-styled';
 import { getRichTreeViewProUtilityClass } from './richTreeViewProClasses';
 import {
   RichTreeViewProProps,
@@ -22,6 +22,8 @@ import {
 } from '../internals/plugins';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 
+const useThemeProps = createUseThemeProps('MuiRichTreeViewPro');
+
 const useUtilityClasses = <R extends {}, Multiple extends boolean | undefined>(
   ownerState: RichTreeViewProProps<R, Multiple>,
 ) => {

diff --git a/packages/x-tree-view-pro/src/internals/zero-styled/index.ts b/packages/x-tree-view-pro/src/internals/zero-styled/index.ts
@@ -0,0 +1,8 @@
+import { useThemeProps } from '@mui/material/styles';
+
+export { styled } from '@mui/material/styles';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createUseThemeProps(name: string) {
+  return useThemeProps;
+}
diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
@@ -1,17 +1,19 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import { getRichTreeViewUtilityClass } from './richTreeViewClasses';
 import { RichTreeViewProps, RichTreeViewSlotProps, RichTreeViewSlots } from './RichTreeView.types';
+import { styled, createUseThemeProps } from '../internals/zero-styled';
 import { useTreeView } from '../internals/useTreeView';
 import { TreeViewProvider } from '../internals/TreeViewProvider';
 import { DEFAULT_TREE_VIEW_PLUGINS, DefaultTreeViewPluginSignatures } from '../internals/plugins';
 import { TreeItem, TreeItemProps } from '../TreeItem';
 import { buildWarning } from '../internals/utils/warning';
 import { extractPluginParamsFromProps } from '../internals/utils/extractPluginParamsFromProps';
 
+const useThemeProps = createUseThemeProps('MuiRichTreeView');
+
 const useUtilityClasses = <R extends {}, Multiple extends boolean | undefined>(
   ownerState: RichTreeViewProps<R, Multiple>,
 ) => {

diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
+import { styled, createUseThemeProps } from '../internals/zero-styled';
 import { getSimpleTreeViewUtilityClass } from './simpleTreeViewClasses';
 import {
   SimpleTreeViewProps,
@@ -15,6 +15,8 @@ import { SIMPLE_TREE_VIEW_PLUGINS, SimpleTreeViewPluginSignatures } from './Simp
 import { buildWarning } from '../internals/utils/warning';
 import { extractPluginParamsFromProps } from '../internals/utils/extractPluginParamsFromProps';
 
+const useThemeProps = createUseThemeProps('MuiSimpleTreeView');
+
 const useUtilityClasses = <Multiple extends boolean | undefined>(
   ownerState: SimpleTreeViewProps<Multiple>,
 ) => {

diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
@@ -5,11 +5,12 @@ import Collapse from '@mui/material/Collapse';
 import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import useForkRef from '@mui/utils/useForkRef';
 import { shouldForwardProp } from '@mui/system/createStyled';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
 import { TransitionProps } from '@mui/material/transitions';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { styled, createUseThemeProps } from '../internals/zero-styled';
 import { TreeItemContent } from './TreeItemContent';
 import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
 import { TreeItemOwnerState, TreeItemProps } from './TreeItem.types';
@@ -19,6 +20,8 @@ import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
 
+const useThemeProps = createUseThemeProps('MuiTreeItem');
+
 const useUtilityClasses = (ownerState: TreeItemOwnerState) => {
   const { classes } = ownerState;
 

diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx
@@ -2,12 +2,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import unsupportedProp from '@mui/utils/unsupportedProp';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
 import MuiCheckbox, { CheckboxProps } from '@mui/material/Checkbox';
 import { useSlotProps } from '@mui/base/utils';
 import { shouldForwardProp } from '@mui/system/createStyled';
 import composeClasses from '@mui/utils/composeClasses';
+import { styled, createUseThemeProps } from '../internals/zero-styled';
 import { TreeItem2Props, TreeItem2OwnerState } from './TreeItem2.types';
 import {
   unstable_useTreeItem2 as useTreeItem2,
@@ -18,6 +19,8 @@ import { getTreeItemUtilityClass } from '../TreeItem';
 import { TreeItem2Icon } from '../TreeItem2Icon';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 
+const useThemeProps = createUseThemeProps('MuiTreeItem2');
+
 export const TreeItem2Root = styled('li', {
   name: 'MuiTreeItem2',
   slot: 'Root',

diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
+import { styled, createUseThemeProps } from '../internals/zero-styled';
 import { getTreeViewUtilityClass } from './treeViewClasses';
 import { TreeViewProps } from './TreeView.types';
 import { SimpleTreeView, SimpleTreeViewRoot } from '../SimpleTreeView';
 
+const useThemeProps = createUseThemeProps('MuiTreeView');
+
 const useUtilityClasses = <Multiple extends boolean | undefined>(
   ownerState: TreeViewProps<Multiple>,
 ) => {

diff --git a/...view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts b/...view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TreeViewItemMeta, TreeViewPlugin } from '../../models';
 import {
@@ -21,8 +21,7 @@ function isPrintableCharacter(string: string) {
 export const useTreeViewKeyboardNavigation: TreeViewPlugin<
   UseTreeViewKeyboardNavigationSignature
 > = ({ instance, params, state }) => {
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const firstCharMap = React.useRef<TreeViewFirstCharMap>({});
 
   const updateFirstCharMap = useEventCallback(
@@ -171,7 +170,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
 
       // If the focused item is expanded, we move the focus to its first child
       // If the focused item is collapsed and has children, we expand it
-      case (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL): {
+      case (key === 'ArrowRight' && !isRtl) || (key === 'ArrowLeft' && isRtl): {
         if (instance.isItemExpanded(itemId)) {
           const nextItemId = getNextNavigableItem(instance, itemId);
           if (nextItemId) {
@@ -188,7 +187,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
 
       // If the focused item is expanded, we collapse it
       // If the focused item is collapsed and has a parent, we move the focus to this parent
-      case (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL): {
+      case (key === 'ArrowLeft' && !isRtl) || (key === 'ArrowRight' && isRtl): {
         if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
           instance.toggleItemExpansion(event, itemId);
           event.preventDefault();

diff --git a/packages/x-tree-view/src/internals/zero-styled/index.ts b/packages/x-tree-view/src/internals/zero-styled/index.ts
@@ -0,0 +1,8 @@
+import { useThemeProps } from '@mui/material/styles';
+
+export { styled } from '@mui/material/styles';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createUseThemeProps(name: string) {
+  return useThemeProps;
+}