only inherit components with only styles

siriwatknp · siriwatknp · commit edfdd3b85f7b · 2022-10-31T13:18:09.000+07:00
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -13,7 +13,7 @@ import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import styled from '../styles/styled';
 // slot components
-import { IconButtonRoot } from '../IconButton/IconButton';
+import { StyledIconButton } from '../IconButton/IconButton';
 // default render components
 import Chip, { chipClasses } from '../Chip';
 import ChipDelete from '../ChipDelete';
@@ -31,8 +31,8 @@ import {
   AutocompleteOwnerState,
 } from './AutocompleteProps';
 import FormControlContext from '../FormControl/FormControlContext';
-import { AutocompleteOptionRoot } from '../AutocompleteOption/AutocompleteOption';
-import { AutocompleteListboxRoot } from '../AutocompleteListbox/AutocompleteListbox';
+import { StyledAutocompleteListbox } from '../AutocompleteListbox/AutocompleteListbox';
+import { StyledAutocompleteOption } from '../AutocompleteOption/AutocompleteOption';
 import useSlot from '../utils/useSlot';
 
 type OwnerState = Omit<AutocompleteOwnerState<any, any, any, any>, 'onChange' | 'defaultValue'>;
@@ -133,18 +133,18 @@ const AutocompleteRoot = styled('div', {
   ];
 });
 
-const AutocompleteClearIndicator = styled(IconButtonRoot, {
+const AutocompleteClearIndicator = styled(StyledIconButton, {
   name: 'JoyAutocomplete',
   slot: 'ClearIndicator',
   overridesResolver: (props, styles) => styles.clearIndicator,
 })<{ ownerState: OwnerState & IconButtonOwnerState }>(({ ownerState }) => ({
   ...(!ownerState.freeSolo && {
-    marginInlineEnd: 0, // prevent the automatic adjustment between Input and IconButtonRoot
+    marginInlineEnd: 0, // prevent the automatic adjustment between Input and IconButton
   }),
   visibility: ownerState.focused ? 'visible' : 'hidden',
 }));
 
-const AutocompletePopupIndicator = styled(IconButtonRoot, {
+const AutocompletePopupIndicator = styled(StyledIconButton, {
   name: 'JoyAutocomplete',
   slot: 'PopupIndicator',
   overridesResolver: (props, styles) => styles.popupIndicator,
@@ -153,14 +153,13 @@ const AutocompletePopupIndicator = styled(IconButtonRoot, {
     transform: 'rotate(180deg)',
   }),
 }));
-
-const AutocompleteListbox = styled(AutocompleteListboxRoot, {
+const AutocompleteListbox = styled(StyledAutocompleteListbox, {
   name: 'JoyAutocomplete',
   slot: 'Listbox',
   overridesResolver: (props, styles) => styles.listbox,
 })<{ ownerState: OwnerState }>({});
 
-const AutocompleteOption = styled(AutocompleteOptionRoot, {
+const AutocompleteOption = styled(StyledAutocompleteOption, {
   name: 'JoyAutocomplete',
   slot: 'Option',
   overridesResolver: (props, styles) => styles.option,
@@ -343,7 +342,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
   const [SlotClearIndicator, clearIndicatorProps] = useSlot('clearIndicator', {
     className: classes.clearIndicator,
     elementType: AutocompleteClearIndicator,
-    getSlotProps: getClearProps as unknown as () => React.HTMLAttributes<HTMLButtonElement>,
+    getSlotProps: getClearProps,
     externalForwardedProps: other,
     ownerState,
     getSlotOwnerState: (mergedProps) => ({
@@ -360,8 +359,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
   const [SlotPopupIndicator, popupIndicatorProps] = useSlot('popupIndicator', {
     className: classes.popupIndicator,
     elementType: AutocompletePopupIndicator,
-    getSlotProps:
-      getPopupIndicatorProps as unknown as () => React.HTMLAttributes<HTMLButtonElement>,
+    getSlotProps: getPopupIndicatorProps,
     externalForwardedProps: other,
     ownerState,
     getSlotOwnerState: (mergedProps) => ({
diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
@@ -4,7 +4,7 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/base/composeClasses';
-import { ListRoot } from '../List/List';
+import { StyledList } from '../List/List';
 import { styled, useThemeProps } from '../styles';
 import { getAutocompleteListboxUtilityClass } from './autocompleteListboxClasses';
 import {
@@ -29,11 +29,9 @@ const useUtilityClasses = (ownerState: AutocompleteListboxOwnerState) => {
   return composeClasses(slots, getAutocompleteListboxUtilityClass, {});
 };
 
-export const AutocompleteListboxRoot = styled(ListRoot, {
-  name: 'JoyAutocompleteListbox',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: AutocompleteListboxOwnerState }>(({ theme, ownerState }) => {
+export const StyledAutocompleteListbox = styled(StyledList)<{
+  ownerState: AutocompleteListboxOwnerState;
+}>(({ theme, ownerState }) => {
   const variantStyle = theme.variants[ownerState.variant!]?.[ownerState.color!];
   return {
     '--focus-outline-offset': `calc(${theme.vars.focus.thickness} * -1)`, // to prevent the focus outline from being cut by overflow
@@ -66,6 +64,12 @@ export const AutocompleteListboxRoot = styled(ListRoot, {
   };
 });
 
+const AutocompleteListboxRoot = styled(StyledAutocompleteListbox, {
+  name: 'JoyAutocompleteListbox',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({});
+
 const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProps, ref) {
   const props = useThemeProps<typeof inProps & { component?: React.ElementType }>({
     props: inProps,
diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import composeClasses from '@mui/base/composeClasses';
-import { ListItemButtonRoot } from '../ListItemButton/ListItemButton';
+import { StyledListItemButton } from '../ListItemButton/ListItemButton';
 import { styled, useThemeProps } from '../styles';
 import autocompleteOptionClasses, {
   getAutocompleteOptionUtilityClass,
@@ -25,11 +25,9 @@ const useUtilityClasses = (ownerState: AutocompleteOptionOwnerState) => {
   return composeClasses(slots, getAutocompleteOptionUtilityClass, {});
 };
 
-export const AutocompleteOptionRoot = styled(ListItemButtonRoot as unknown as 'li', {
-  name: 'JoyAutocompleteOption',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: AutocompleteOptionOwnerState }>(({ theme, ownerState }) => ({
+export const StyledAutocompleteOption = styled(StyledListItemButton as unknown as 'li')<{
+  ownerState: AutocompleteOptionOwnerState;
+}>(({ theme, ownerState }) => ({
   '&:not(:hover)': {
     transition: 'none', // prevent flicker when using keyboard arrows to move between options
   },
@@ -46,6 +44,12 @@ export const AutocompleteOptionRoot = styled(ListItemButtonRoot as unknown as 'l
   },
 }));
 
+const AutocompleteOptionRoot = styled(StyledAutocompleteOption, {
+  name: 'JoyAutocompleteOption',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({});
+
 const AutocompleteOption = React.forwardRef(function AutocompleteOption(inProps, ref) {
   const props = useThemeProps<typeof inProps & { component?: React.ElementType }>({
     props: inProps,
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -31,61 +31,65 @@ const useUtilityClasses = (ownerState: IconButtonOwnerState) => {
   return composedClasses;
 };
 
-export const IconButtonRoot = styled('button', {
+export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerState }>(
+  ({ theme, ownerState }) => [
+    {
+      '--Icon-margin': 'initial', // reset the icon's margin.
+      '--CircularProgress-size': 'var(--Icon-fontSize)',
+      ...(ownerState.size === 'sm' && {
+        '--Icon-fontSize': 'calc(var(--IconButton-size, 2rem) / 1.6)', // 1.25rem by default
+        minWidth: 'var(--IconButton-size, 2rem)', // use min-width instead of height to make the button resilient to its content
+        minHeight: 'var(--IconButton-size, 2rem)', // use min-height instead of height to make the button resilient to its content
+        fontSize: theme.vars.fontSize.sm,
+        paddingInline: '2px', // add a gap, in case the content is long, e.g. multiple icons
+      }),
+      ...(ownerState.size === 'md' && {
+        '--Icon-fontSize': 'calc(var(--IconButton-size, 2.5rem) / 1.667)', // 1.5rem by default
+        minWidth: 'var(--IconButton-size, 2.5rem)',
+        minHeight: 'var(--IconButton-size, 2.5rem)',
+        fontSize: theme.vars.fontSize.md,
+        paddingInline: '0.25rem',
+      }),
+      ...(ownerState.size === 'lg' && {
+        '--Icon-fontSize': 'calc(var(--IconButton-size, 3rem) / 1.714)', // 1.75rem by default
+        minWidth: 'var(--IconButton-size, 3rem)',
+        minHeight: 'var(--IconButton-size, 3rem)',
+        fontSize: theme.vars.fontSize.lg,
+        paddingInline: '0.375rem',
+      }),
+      WebkitTapHighlightColor: 'transparent',
+      paddingBlock: 0,
+      fontFamily: theme.vars.fontFamily.body,
+      fontWeight: theme.vars.fontWeight.md,
+      margin: `var(--IconButton-margin)`, // to be controlled by other components, eg. Input
+      borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, eg. Input
+      border: 'none',
+      boxSizing: 'border-box',
+      backgroundColor: 'transparent',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
+      transition:
+        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      [theme.focus.selector]: theme.focus.default,
+    },
+    theme.variants[ownerState.variant!]?.[ownerState.color!],
+    { '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
+    { '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
+    {
+      [`&.${iconButtonClasses.disabled}`]:
+        theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
+    },
+  ],
+);
+
+export const IconButtonRoot = styled(StyledIconButton, {
   name: 'JoyIconButton',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: IconButtonOwnerState }>(({ theme, ownerState }) => [
-  {
-    '--Icon-margin': 'initial', // reset the icon's margin.
-    '--CircularProgress-size': 'var(--Icon-fontSize)',
-    ...(ownerState.size === 'sm' && {
-      '--Icon-fontSize': 'calc(var(--IconButton-size, 2rem) / 1.6)', // 1.25rem by default
-      minWidth: 'var(--IconButton-size, 2rem)', // use min-width instead of height to make the button resilient to its content
-      minHeight: 'var(--IconButton-size, 2rem)', // use min-height instead of height to make the button resilient to its content
-      fontSize: theme.vars.fontSize.sm,
-      paddingInline: '2px', // add a gap, in case the content is long, e.g. multiple icons
-    }),
-    ...(ownerState.size === 'md' && {
-      '--Icon-fontSize': 'calc(var(--IconButton-size, 2.5rem) / 1.667)', // 1.5rem by default
-      minWidth: 'var(--IconButton-size, 2.5rem)',
-      minHeight: 'var(--IconButton-size, 2.5rem)',
-      fontSize: theme.vars.fontSize.md,
-      paddingInline: '0.25rem',
-    }),
-    ...(ownerState.size === 'lg' && {
-      '--Icon-fontSize': 'calc(var(--IconButton-size, 3rem) / 1.714)', // 1.75rem by default
-      minWidth: 'var(--IconButton-size, 3rem)',
-      minHeight: 'var(--IconButton-size, 3rem)',
-      fontSize: theme.vars.fontSize.lg,
-      paddingInline: '0.375rem',
-    }),
-    WebkitTapHighlightColor: 'transparent',
-    paddingBlock: 0,
-    fontFamily: theme.vars.fontFamily.body,
-    fontWeight: theme.vars.fontWeight.md,
-    margin: `var(--IconButton-margin)`, // to be controlled by other components, eg. Input
-    borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, eg. Input
-    border: 'none',
-    boxSizing: 'border-box',
-    backgroundColor: 'transparent',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-    // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-    transition:
-      'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    [theme.focus.selector]: theme.focus.default,
-  },
-  theme.variants[ownerState.variant!]?.[ownerState.color!],
-  { '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
-  { '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
-  {
-    [`&.${iconButtonClasses.disabled}`]:
-      theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
-  },
-]);
+})({});
 
 const IconButton = React.forwardRef(function IconButton(inProps, ref) {
   const props = useThemeProps<typeof inProps & { component?: React.ElementType }>({
diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
@@ -31,11 +31,7 @@ const useUtilityClasses = (ownerState: ListOwnerState) => {
   return composeClasses(slots, getListUtilityClass, {});
 };
 
-export const ListRoot = styled('ul', {
-  name: 'JoyList',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: ListOwnerState }>(({ theme, ownerState }) => {
+export const StyledList = styled('ul')<{ ownerState: ListOwnerState }>(({ theme, ownerState }) => {
   function applySizeVars(size: ListProps['size']) {
     if (size === 'sm') {
       return {
@@ -140,6 +136,12 @@ export const ListRoot = styled('ul', {
   ];
 });
 
+export const ListRoot = styled(StyledList, {
+  name: 'JoyList',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({});
+
 const List = React.forwardRef(function List(inProps, ref) {
   const nesting = React.useContext(NestedListContext);
   const menuContext = React.useContext(MenuUnstyledContext);
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
