From 949d5e849dadafa8e1544d2e9090d2513d3ef7c1 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 30 Sep 2024 10:22:45 +0200 Subject: [PATCH 1/2] [TreeView] Use useDefaultProps instead of useThemeProps --- .../src/RichTreeViewPro/RichTreeViewPro.tsx | 9 ++++----- .../x-tree-view-pro/src/internals/zero-styled/index.ts | 7 ------- packages/x-tree-view/src/RichTreeView/RichTreeView.tsx | 7 +++---- .../x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx | 7 +++---- packages/x-tree-view/src/TreeItem/TreeItem.tsx | 7 +++---- packages/x-tree-view/src/TreeItem2/TreeItem2.tsx | 7 +++---- packages/x-tree-view/src/TreeView/TreeView.tsx | 7 +++---- packages/x-tree-view/src/internals/zero-styled/index.ts | 7 ------- 8 files changed, 19 insertions(+), 39 deletions(-) diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx index 0cb18fa82006c..be3813861e12b 100644 --- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx +++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx @@ -2,12 +2,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; -import { useLicenseVerifier, Watermark } from '@mui/x-license'; import useSlotProps from '@mui/utils/useSlotProps'; +import { useDefaultProps } from '@mui/material/DefaultPropsProvider'; +import { useLicenseVerifier, Watermark } from '@mui/x-license'; import { TreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem'; import { useTreeView, TreeViewProvider } from '@mui/x-tree-view/internals'; import { warnOnce } from '@mui/x-internals/warning'; -import { styled, createUseThemeProps } from '../internals/zero-styled'; +import { styled } from '../internals/zero-styled'; import { getRichTreeViewProUtilityClass } from './richTreeViewProClasses'; import { RichTreeViewProProps } from './RichTreeViewPro.types'; import { @@ -16,8 +17,6 @@ import { } from './RichTreeViewPro.plugins'; import { getReleaseInfo } from '../internals/utils/releaseInfo'; -const useThemeProps = createUseThemeProps('MuiRichTreeViewPro'); - const useUtilityClasses = ( ownerState: RichTreeViewProProps, ) => { @@ -108,7 +107,7 @@ const RichTreeViewPro = React.forwardRef(function RichTreeViewPro< R extends {}, Multiple extends boolean | undefined = undefined, >(inProps: RichTreeViewProProps, ref: React.Ref) { - const props = useThemeProps({ props: inProps, name: 'MuiRichTreeViewPro' }); + const props = useDefaultProps({ props: inProps, name: 'MuiRichTreeViewPro' }); useLicenseVerifier('x-tree-view-pro', releaseInfo); 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 index ac070a82614df..2b736a2e17525 100644 --- a/packages/x-tree-view-pro/src/internals/zero-styled/index.ts +++ b/packages/x-tree-view-pro/src/internals/zero-styled/index.ts @@ -1,8 +1 @@ -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 755b5f8213619..f0f71421cf0ed 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx @@ -3,17 +3,16 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; import useSlotProps from '@mui/utils/useSlotProps'; +import { useDefaultProps } from '@mui/material/DefaultPropsProvider'; import { warnOnce } from '@mui/x-internals/warning'; import { getRichTreeViewUtilityClass } from './richTreeViewClasses'; import { RichTreeViewProps } from './RichTreeView.types'; -import { styled, createUseThemeProps } from '../internals/zero-styled'; +import { styled } from '../internals/zero-styled'; import { useTreeView } from '../internals/useTreeView'; import { TreeViewProvider } from '../internals/TreeViewProvider'; import { RICH_TREE_VIEW_PLUGINS, RichTreeViewPluginSignatures } from './RichTreeView.plugins'; import { TreeItem, TreeItemProps } from '../TreeItem'; -const useThemeProps = createUseThemeProps('MuiRichTreeView'); - const useUtilityClasses = ( ownerState: RichTreeViewProps, ) => { @@ -76,7 +75,7 @@ const RichTreeView = React.forwardRef(function RichTreeView< R extends {}, Multiple extends boolean | undefined = undefined, >(inProps: RichTreeViewProps, ref: React.Ref) { - const props = useThemeProps({ props: inProps, name: 'MuiRichTreeView' }); + const props = useDefaultProps({ props: inProps, name: 'MuiRichTreeView' }); if (process.env.NODE_ENV !== 'production') { if ((props as any).children != null) { diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx index adfe2d35415b4..9729e4cdd1f85 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx @@ -3,16 +3,15 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; import useSlotProps from '@mui/utils/useSlotProps'; +import { useDefaultProps } from '@mui/material/DefaultPropsProvider'; import { warnOnce } from '@mui/x-internals/warning'; -import { styled, createUseThemeProps } from '../internals/zero-styled'; +import { styled } from '../internals/zero-styled'; import { getSimpleTreeViewUtilityClass } from './simpleTreeViewClasses'; import { SimpleTreeViewProps } from './SimpleTreeView.types'; import { useTreeView } from '../internals/useTreeView'; import { TreeViewProvider } from '../internals/TreeViewProvider'; import { SIMPLE_TREE_VIEW_PLUGINS, SimpleTreeViewPluginSignatures } from './SimpleTreeView.plugins'; -const useThemeProps = createUseThemeProps('MuiSimpleTreeView'); - const useUtilityClasses = ( ownerState: SimpleTreeViewProps, ) => { @@ -56,7 +55,7 @@ const EMPTY_ITEMS: any[] = []; const SimpleTreeView = React.forwardRef(function SimpleTreeView< Multiple extends boolean | undefined = undefined, >(inProps: SimpleTreeViewProps, ref: React.Ref) { - const props = useThemeProps({ props: inProps, name: 'MuiSimpleTreeView' }); + const props = useDefaultProps({ props: inProps, name: 'MuiSimpleTreeView' }); const ownerState = props as SimpleTreeViewProps; if (process.env.NODE_ENV !== 'production') { diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index e3f8de04e3412..bb90350aed179 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx @@ -13,7 +13,8 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps'; import useSlotProps from '@mui/utils/useSlotProps'; import unsupportedProp from '@mui/utils/unsupportedProp'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; -import { styled, createUseThemeProps } from '../internals/zero-styled'; +import { useDefaultProps } from '@mui/material/DefaultPropsProvider'; +import { styled } from '../internals/zero-styled'; import { TreeItemContent } from './TreeItemContent'; import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses'; import { @@ -31,8 +32,6 @@ import { isTargetInDescendants } from '../internals/utils/tree'; import { TreeViewItemPluginSlotPropsEnhancerParams } from '../internals/models'; import { generateTreeItemIdAttribute } from '../internals/corePlugins/useTreeViewId/useTreeViewId.utils'; -const useThemeProps = createUseThemeProps('MuiTreeItem'); - const useUtilityClasses = (ownerState: TreeItemOwnerState) => { const { classes } = ownerState; @@ -205,7 +204,7 @@ export const TreeItem = React.forwardRef(function TreeItem( } = useTreeViewContext(); const depthContext = React.useContext(TreeViewItemDepthContext); - const props = useThemeProps({ props: inProps, name: 'MuiTreeItem' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTreeItem' }); const { children, diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx index 86a398dee5d4f..4126df92a4223 100644 --- a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx +++ b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx @@ -9,7 +9,8 @@ import MuiCheckbox, { CheckboxProps } from '@mui/material/Checkbox'; import useSlotProps from '@mui/utils/useSlotProps'; import { shouldForwardProp } from '@mui/system/createStyled'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps } from '../internals/zero-styled'; +import { useDefaultProps } from '@mui/material/DefaultPropsProvider'; +import { styled } from '../internals/zero-styled'; import { TreeItem2Props, TreeItem2OwnerState } from './TreeItem2.types'; import { useTreeItem2, @@ -23,8 +24,6 @@ import { TreeItem2DragAndDropOverlay } from '../TreeItem2DragAndDropOverlay'; import { TreeItem2Provider } from '../TreeItem2Provider'; import { TreeItem2LabelInput } from '../TreeItem2LabelInput'; -const useThemeProps = createUseThemeProps('MuiTreeItem2'); - export const TreeItem2Root = styled('li', { name: 'MuiTreeItem2', slot: 'Root', @@ -229,7 +228,7 @@ export const TreeItem2 = React.forwardRef(function TreeItem2( inProps: TreeItem2Props, forwardedRef: React.Ref, ) { - const props = useThemeProps({ props: inProps, name: 'MuiTreeItem2' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTreeItem2' }); const { id, itemId, label, disabled, children, slots = {}, slotProps = {}, ...other } = props; diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx index 73c38055ee9a9..eb763b0d4b93d 100644 --- a/packages/x-tree-view/src/TreeView/TreeView.tsx +++ b/packages/x-tree-view/src/TreeView/TreeView.tsx @@ -2,13 +2,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps } from '../internals/zero-styled'; +import { useDefaultProps } from '@mui/material/DefaultPropsProvider'; +import { styled } 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, ) => { @@ -70,7 +69,7 @@ const TreeView = React.forwardRef(function TreeView< warn(); } - const props = useThemeProps({ props: inProps, name: 'MuiTreeView' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTreeView' }); const classes = useUtilityClasses(props); diff --git a/packages/x-tree-view/src/internals/zero-styled/index.ts b/packages/x-tree-view/src/internals/zero-styled/index.ts index ac070a82614df..2b736a2e17525 100644 --- a/packages/x-tree-view/src/internals/zero-styled/index.ts +++ b/packages/x-tree-view/src/internals/zero-styled/index.ts @@ -1,8 +1 @@ -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; -} From d5652c8f8f772e9bdf54c4ee6438c5f16d1c235d Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 30 Sep 2024 11:43:50 +0200 Subject: [PATCH 2/2] Code review: June --- .../TreeItem2DragAndDropOverlay.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx index 52294d0cb180e..4075ece74e87c 100644 --- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx +++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx @@ -24,16 +24,16 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', borderRadius: theme.shape.borderRadius, - backgroundColor: alpha((theme.vars || theme).palette.primary.dark, 0.15), + backgroundColor: alpha(theme.palette.primary.dark, 0.15), }, }, { props: { action: 'reorder-above' }, style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', - borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`, + borderTop: `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderTopColor: alpha((theme.vars || theme).palette.grey[100], 0.6), + borderTopColor: alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -41,9 +41,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { props: { action: 'reorder-below' }, style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', - borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`, + borderBottom: `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: alpha((theme.vars || theme).palette.grey[100], 0.6), + borderBottomColor: alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -52,9 +52,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))' as any, - borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`, + borderBottom: `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: alpha((theme.vars || theme).palette.grey[900], 0.6), + borderBottomColor: alpha(theme.palette.grey[900], 0.6), }), }, },