add useDefaultProps

siriwatknp · Jun 26, 2024 · ac919fa · ac919fa
1 parent 661b5d4
commit ac919fa
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,6 +11,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { SxProps, Breakpoint } from '@mui/system';
 import { Theme } from '../styles';
 import { ContainerClasses } from '../Container/containerClasses';
+import { useDefaultProps } from '../DefaultPropsProvider';
 
 export interface PigmentContainerOwnProps {
   children?: React.ReactNode;
@@ -82,10 +84,10 @@ const useUtilityClasses = (ownerState: PigmentContainerOwnProps) => {
  *
  * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
  */
-const PigmentContainer = React.forwardRef(function PigmentContainer(
-  { className, disableGutters = false, fixed = false, maxWidth = 'lg', ...props },
-  ref,
-) {
+const PigmentContainer = React.forwardRef(function PigmentContainer(inProps, ref) {
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const props = useDefaultProps({ props: inProps, name: 'MuiContainer' });
+  const { className, disableGutters = false, fixed = false, maxWidth = 'lg', ...other } = props;
   const ownerState = {
     ...props,
     disableGutters,
@@ -95,13 +97,12 @@ const PigmentContainer = React.forwardRef(function PigmentContainer(
   const classes = useUtilityClasses(ownerState);
   return (
     <Container
+      ref={ref}
       className={clsx(classes.root, className)}
       disableGutters={disableGutters}
       fixed={fixed}
       maxWidth={maxWidth}
-      {...props}
-      // @ts-ignore
-      ref={ref}
+      {...other}
     />
   );
 }) as OverridableComponent<PigmentContainerTypeMap>;

diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';

diff --git a/packages/mui-material/src/PigmentStack/PigmentStack.tsx b/packages/mui-material/src/PigmentStack/PigmentStack.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -8,6 +9,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { SxProps } from '@mui/system';
 import { Breakpoint, Theme } from '../styles';
+import { useDefaultProps } from '../DefaultPropsProvider';
 
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 
@@ -69,9 +71,12 @@ const useUtilityClasses = () => {
  *
  * - [PigmentStack API](https://next.mui.com/material-ui/api/pigment-stack/)
  */
-const PigmentStack = React.forwardRef(function PigmentStack({ className, ...props }, ref) {
+const PigmentStack = React.forwardRef(function PigmentStack(inProps, ref) {
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const props = useDefaultProps({ props: inProps, name: 'MuiStack' });
+  const { className, ...other } = props;
   const classes = useUtilityClasses();
-  return <Stack className={clsx(classes.root, className)} {...props} ref={ref} />;
+  return <Stack ref={ref} className={clsx(classes.root, className)} {...other} />;
 }) as OverridableComponent<PigmentStackTypeMap>;
 
 PigmentStack.propTypes /* remove-proptypes */ = {