[material-ui][Popper] Deprecate components and componentProps props f…

…or v6 (#42111)

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1116,6 +1116,36 @@ The PaginationItems's `components` prop was deprecated in favor of `slots`:
  />
 ```
 
+## Popper
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#popper-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/popper-props <path>
+```
+
+### components
+
+The Popper's prop `components` was deprecated in favor of `slots`:
+
+```diff
+ <Popper
+-  components={{ Root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+ />
+```
+
+### componentsProps
+
+The Popper's prop `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Popper
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
 ## Slider
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-props) below to migrate the code as described in the following sections:

docs/pages/material-ui/api/popper.json

@@ -11,11 +11,15 @@
     "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disablePortal": { "type": { "name": "bool" }, "default": "false" },

packages/mui-codemod/README.md

@@ -1095,6 +1095,32 @@ npx @mui/codemod@next deprecations/pagination-item-classes <path>
 npx @mui/codemod@next deprecations/pagination-item-props <path>
 ```
 
+#### `popper-props`
+
+```diff
+ <Popper
+-  components={{ Root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
+```diff
+ MuiPopper: {
+   defaultProps: {
+-    components: { Root: CustomRoot }
++    slots: { root: CustomRoot },
+-    componentsProps: { root: { testid: 'test-id' }}
++    slotProps: { root: { testid: 'test-id' } },
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/popper-props <path>
+```
+
 #### `slider-props`
 
 ```diff

packages/mui-codemod/src/deprecations/popper-props/index.js

@@ -0,0 +1 @@
+export { default } from './popper-props';

packages/mui-codemod/src/deprecations/popper-props/popper-props.js

@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'Popper' });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/popper-props/popper-props.test.js

@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './popper-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'popper-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});

packages/mui-codemod/src/deprecations/popper-props/test-cases/actual.js

@@ -0,0 +1,12 @@
+import Popper from '@mui/material/Popper';
+
+<Popper
+  components={{ Root: ComponentsRoot }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+<Popper
+  slots={{ root: SlotsRoot }}
+  components={{ Root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;

packages/mui-codemod/src/deprecations/popper-props/test-cases/expected.js

@@ -0,0 +1,14 @@
+import Popper from '@mui/material/Popper';
+
+<Popper
+  slots={{
+    root: ComponentsRoot
+  }}
+  slotProps={{ root: componentsRootProps }}
+/>;
+<Popper
+  slots={{ root: SlotsRoot }}
+  slotProps={{ root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;

packages/mui-codemod/src/deprecations/popper-props/test-cases/theme.actual.js

@@ -0,0 +1,19 @@
+fn({
+  MuiPopper: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiPopper: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      slots: { root: SlotsRoot },
+      componentsProps: { root: componentsRootProps },
+      slotProps: { root: slotsRootProps },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/popper-props/test-cases/theme.expected.js

@@ -0,0 +1,30 @@
+fn({
+  MuiPopper: {
+    defaultProps: {
+      slots: {
+        root: ComponentsRoot
+      },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiPopper: {
+    defaultProps: {
+      slots: {
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        }
+      }
+    },
+  },
+});

packages/mui-material/src/Popper/Popper.tsx

@@ -17,13 +17,17 @@ export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components?: {
     Root?: React.ElementType;
   };
   /**
    * The props used for each slot inside the Popper.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps?: BasePopperProps['slotProps'];
@@ -137,13 +141,17 @@ Popper.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: PropTypes.shape({
     Root: PropTypes.elementType,
   }),
   /**
    * The props used for each slot inside the Popper.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: PropTypes.shape({