From 02819e4c684f8128b657186b44d1c3d956453db9 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 10 Jun 2024 10:51:56 +0200 Subject: [PATCH] [TreeView] Prepare support for PigmentCSS (#13412) --- .../src/RichTreeViewPro/RichTreeViewPro.tsx | 4 +++- .../x-tree-view-pro/src/internals/zero-styled/index.ts | 8 ++++++++ packages/x-tree-view/src/RichTreeView/RichTreeView.tsx | 4 +++- .../x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx | 4 +++- packages/x-tree-view/src/TreeItem/TreeItem.tsx | 5 ++++- packages/x-tree-view/src/TreeItem2/TreeItem2.tsx | 5 ++++- packages/x-tree-view/src/TreeView/TreeView.tsx | 4 +++- .../useTreeViewKeyboardNavigation.ts | 9 ++++----- packages/x-tree-view/src/internals/zero-styled/index.ts | 8 ++++++++ 9 files changed, 40 insertions(+), 11 deletions(-) create mode 100644 packages/x-tree-view-pro/src/internals/zero-styled/index.ts create mode 100644 packages/x-tree-view/src/internals/zero-styled/index.ts diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx index 5e5111eccb959..4294bc362a34e 100644 --- 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 = ( ownerState: RichTreeViewProProps, ) => { 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 new file mode 100644 index 0000000000000..ac070a82614df --- /dev/null +++ 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 index 6493a4abf9020..53f7f2257588d 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx @@ -1,10 +1,10 @@ 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'; @@ -12,6 +12,8 @@ import { TreeItem, TreeItemProps } from '../TreeItem'; import { buildWarning } from '../internals/utils/warning'; import { extractPluginParamsFromProps } from '../internals/utils/extractPluginParamsFromProps'; +const useThemeProps = createUseThemeProps('MuiRichTreeView'); + const useUtilityClasses = ( ownerState: RichTreeViewProps, ) => { diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx index f16185817fd17..7a159b1eda55e 100644 --- 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 = ( ownerState: SimpleTreeViewProps, ) => { diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index 853f0371cffaf..fbc06f53a7f0a 100644 --- 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 index fd905cda2caa3..47b555ff14c34 100644 --- 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 index b6944f2df05aa..2149524f39fd0 100644 --- 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 = ( ownerState: TreeViewProps, ) => { diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts index b16b3d4577873..40d6dd3ce6d2e 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts +++ b/packages/x-tree-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({}); 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 new file mode 100644 index 0000000000000..ac070a82614df --- /dev/null +++ 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; +}