@mui/codemod 9.0.0-alpha.0 → 9.0.0-alpha.4

package/codemod.js

@@ -1,26 +1,20 @@
 #!/usr/bin/env node
+"use strict";
 
 const childProcess = require('child_process');
-const { promises: fs } = require('fs');
+const {
+  promises: fs
+} = require('fs');
 const path = require('path');
 const yargs = require('yargs');
 const jscodeshiftPackage = require('jscodeshift/package.json');
 const postcssCliPackage = require('postcss-cli/package.json');
-
 const jscodeshiftDirectory = path.dirname(require.resolve('jscodeshift'));
 const jscodeshiftExecutable = path.join(jscodeshiftDirectory, jscodeshiftPackage.bin.jscodeshift);
-
 const postcssCliDirectory = path.dirname(require.resolve('postcss-cli'));
 const postcssExecutable = path.join(postcssCliDirectory, postcssCliPackage.bin.postcss);
-
 async function runJscodeshiftTransform(transform, files, flags, codemodFlags) {
-  const paths = [
-    path.resolve(__dirname, './src', `${transform}/index.js`),
-    path.resolve(__dirname, './src', `${transform}.js`),
-    path.resolve(__dirname, './', `${transform}/index.js`),
-    path.resolve(__dirname, './', `${transform}.js`),
-  ];
-
+  const paths = [path.resolve(__dirname, './src', `${transform}/index.js`), path.resolve(__dirname, './src', `${transform}.js`), path.resolve(__dirname, './', `${transform}/index.js`), path.resolve(__dirname, './', `${transform}.js`)];
   let transformerPath;
   let error;
   for (const item of paths) {
@@ -35,35 +29,15 @@ async function runJscodeshiftTransform(transform, files, flags, codemodFlags) {
       continue;
     }
   }
-
   if (error) {
     if (error?.code === 'ENOENT') {
-      throw new Error(
-        `Transform '${transform}' not found. Check out ${path.resolve(
-          __dirname,
-          './README.md for a list of available codemods.',
-        )}`,
-      );
+      throw new Error(`Transform '${transform}' not found. Check out ${path.resolve(__dirname, './README.md for a list of available codemods.')}`);
     }
     throw error;
   }
-
   const args = [
-    // can't directly spawn `jscodeshiftExecutable` due to https://github.com/facebook/jscodeshift/issues/424
-    jscodeshiftExecutable,
-    '--transform',
-    transformerPath,
-    ...codemodFlags,
-    '--extensions',
-    'js,ts,jsx,tsx,json',
-    '--parser',
-    flags.parser || 'tsx',
-    '--ignore-pattern',
-    '**/node_modules/**',
-    '--ignore-pattern',
-    '**/*.css',
-  ];
-
+  // can't directly spawn `jscodeshiftExecutable` due to https://github.com/facebook/jscodeshift/issues/424
+  jscodeshiftExecutable, '--transform', transformerPath, ...codemodFlags, '--extensions', 'js,ts,jsx,tsx,json', '--parser', flags.parser || 'tsx', '--ignore-pattern', '**/node_modules/**', '--ignore-pattern', '**/*.css'];
   if (flags.dry) {
     args.push('--dry');
   }
@@ -76,43 +50,33 @@ async function runJscodeshiftTransform(transform, files, flags, codemodFlags) {
   if (flags.packageName) {
     args.push(`--packageName=${flags.packageName}`);
   }
-
   args.push(...files);
 
   // eslint-disable-next-line no-console -- debug information
   console.log(`Executing command: jscodeshift ${args.join(' ')}`);
-  const jscodeshiftProcess = childProcess.spawnSync('node', args, { stdio: 'inherit' });
-
+  const jscodeshiftProcess = childProcess.spawnSync('node', args, {
+    stdio: 'inherit'
+  });
   if (jscodeshiftProcess.error) {
     throw jscodeshiftProcess.error;
   }
 }
-
-const parseCssFilePaths = async (files) => {
-  const cssFiles = await Promise.all(
-    files.map(async (filePath) => {
-      const stat = await fs.stat(filePath);
-      if (stat.isDirectory()) {
-        return `${filePath}/**/*.css`;
-      }
-      if (filePath.endsWith('.css')) {
-        return filePath;
-      }
-
-      return null;
-    }),
-  );
-
+const parseCssFilePaths = async files => {
+  const cssFiles = await Promise.all(files.map(async filePath => {
+    const stat = await fs.stat(filePath);
+    if (stat.isDirectory()) {
+      return `${filePath}/**/*.css`;
+    }
+    if (filePath.endsWith('.css')) {
+      return filePath;
+    }
+    return null;
+  }));
   return cssFiles.filter(Boolean);
 };
-
 async function runPostcssTransform(transform, files) {
   // local postcss plugins are loaded through config files https://github.com/postcss/postcss-load-config/issues/17#issuecomment-253125559
-  const paths = [
-    path.resolve(__dirname, './src', `${transform}/postcss.config.js`),
-    path.resolve(__dirname, './', `${transform}/postcss.config.js`),
-  ];
-
+  const paths = [path.resolve(__dirname, './src', `${transform}/postcss.config.js`), path.resolve(__dirname, './', `${transform}/postcss.config.js`)];
   let configPath;
   let error;
   for (const item of paths) {
@@ -127,7 +91,6 @@ async function runPostcssTransform(transform, files) {
       continue;
     }
   }
-
   if (error) {
     // don't throw if the file is not found, postcss transform is optional
     if (error?.code !== 'ENOENT') {
@@ -135,81 +98,62 @@ async function runPostcssTransform(transform, files) {
     }
   } else {
     const cssPaths = await parseCssFilePaths(files);
-
     if (cssPaths.length > 0) {
-      const args = [
-        postcssExecutable,
-        ...cssPaths,
-        '--config',
-        configPath,
-        '--replace',
-        '--verbose',
-      ];
+      const args = [postcssExecutable, ...cssPaths, '--config', configPath, '--replace', '--verbose'];
 
       // eslint-disable-next-line no-console -- debug information
       console.log(`Executing command: postcss ${args.join(' ')}`);
-      const postcssProcess = childProcess.spawnSync('node', args, { stdio: 'inherit' });
-
+      const postcssProcess = childProcess.spawnSync('node', args, {
+        stdio: 'inherit'
+      });
       if (postcssProcess.error) {
         throw postcssProcess.error;
       }
     }
   }
 }
-
 function run(argv) {
-  const { codemod, paths, ...flags } = argv;
-  const files = paths.map((filePath) => path.resolve(filePath));
-
+  const {
+    codemod,
+    paths,
+    ...flags
+  } = argv;
+  const files = paths.map(filePath => path.resolve(filePath));
   runJscodeshiftTransform(codemod, files, flags, argv._);
   runPostcssTransform(codemod, files);
 }
-
-yargs
-  .command({
-    command: '$0 <codemod> <paths...>',
-    describe: 'Applies a `@mui/codemod` to the specified paths',
-    builder: (command) => {
-      return command
-        .positional('codemod', {
-          description: 'The name of the codemod',
-          type: 'string',
-        })
-        .positional('paths', {
-          array: true,
-          description: 'Paths forwarded to `jscodeshift`',
-          type: 'string',
-        })
-        .option('dry', {
-          description: 'dry run (no changes are made to files)',
-          default: false,
-          type: 'boolean',
-        })
-        .option('parser', {
-          description: 'which parser for jscodeshift to use',
-          default: 'tsx',
-          type: 'string',
-        })
-        .option('print', {
-          description: 'print transformed files to stdout, useful for development',
-          default: false,
-          type: 'boolean',
-        })
-        .option('jscodeshift', {
-          description: '(Advanced) Pass options directly to jscodeshift',
-          default: false,
-          type: 'string',
-        })
-        .option('packageName', {
-          description: 'The package name to look for in the import statements',
-          default: '@mui/material',
-          type: 'string',
-        });
-    },
-    handler: run,
-  })
-  .scriptName('npx @mui/codemod')
-  .example('$0 v4.0.0/theme-spacing-api src')
-  .example('$0 v5.0.0/component-rename-prop src -- --component=Grid --from=prop --to=newProp')
-  .help()
-  .parse();
+yargs.command({
+  command: '$0 <codemod> <paths...>',
+  describe: 'Applies a `@mui/codemod` to the specified paths',
+  builder: command => {
+    return command.positional('codemod', {
+      description: 'The name of the codemod',
+      type: 'string'
+    }).positional('paths', {
+      array: true,
+      description: 'Paths forwarded to `jscodeshift`',
+      type: 'string'
+    }).option('dry', {
+      description: 'dry run (no changes are made to files)',
+      default: false,
+      type: 'boolean'
+    }).option('parser', {
+      description: 'which parser for jscodeshift to use',
+      default: 'tsx',
+      type: 'string'
+    }).option('print', {
+      description: 'print transformed files to stdout, useful for development',
+      default: false,
+      type: 'boolean'
+    }).option('jscodeshift', {
+      description: '(Advanced) Pass options directly to jscodeshift',
+      default: false,
+      type: 'string'
+    }).option('packageName', {
+      description: 'The package name to look for in the import statements',
+      default: '@mui/material',
+      type: 'string'
+    });
+  },
+  handler: run
+}).scriptName('npx @mui/codemod').example('$0 v4.0.0/theme-spacing-api src').example('$0 v5.0.0/component-rename-prop src -- --component=Grid --from=prop --to=newProp').help().parse();

package/deprecations/autocomplete-props/autocomplete-props.js

@@ -12,6 +12,183 @@ var _findComponentJSX = _interopRequireDefault(require("../../util/findComponent
 var _findComponentDefaultProps = _interopRequireDefault(require("../../util/findComponentDefaultProps"));
 var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
 var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+function getImportedNames(j, root, packageName, componentName) {
+  const importNames = new Set();
+  root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^${packageName}(/${componentName})?$`))).forEach(path => {
+    path.node.specifiers.forEach(specifier => {
+      if (specifier.type === 'ImportDefaultSpecifier') {
+        importNames.add(specifier.local.name);
+      }
+      if (specifier.type === 'ImportSpecifier' && specifier.imported.name === componentName) {
+        importNames.add(specifier.local.name);
+      }
+    });
+  });
+  return importNames;
+}
+function getAttributeIndex(element, attributeName) {
+  return element.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === attributeName);
+}
+function upsertSlotPropsAttribute(j, element, callback) {
+  const slotPropsIndex = getAttributeIndex(element, 'slotProps');
+  if (slotPropsIndex === -1) {
+    const slotPropsExpression = j.objectExpression([]);
+    callback(slotPropsExpression);
+    (0, _appendAttribute.default)(j, {
+      target: element,
+      attributeName: 'slotProps',
+      expression: slotPropsExpression
+    });
+    return;
+  }
+  const slotPropsAttribute = element.openingElement.attributes[slotPropsIndex];
+  const slotPropsExpression = slotPropsAttribute.value.expression;
+  if (slotPropsExpression.type === 'ObjectExpression') {
+    callback(slotPropsExpression);
+    return;
+  }
+  const nextSlotPropsExpression = j.objectExpression([j.spreadElement(slotPropsExpression)]);
+  callback(nextSlotPropsExpression);
+  slotPropsAttribute.value.expression = nextSlotPropsExpression;
+}
+function moveJsxPropIntoSlotProps(j, element, propName, slotName) {
+  const propIndex = getAttributeIndex(element, propName);
+  if (propIndex === -1) {
+    return;
+  }
+  const removedAttribute = element.openingElement.attributes.splice(propIndex, 1)[0];
+  const removedValue = removedAttribute.value.type === 'StringLiteral' ? j.literal(removedAttribute.value.value) : removedAttribute.value.expression;
+  upsertSlotPropsAttribute(j, element, slotPropsExpression => {
+    const existingSlotIndex = slotPropsExpression.properties.findIndex(property => property.type !== 'SpreadElement' && property.key?.name === slotName);
+    if (existingSlotIndex === -1) {
+      slotPropsExpression.properties.push(j.objectProperty(j.identifier(slotName), removedValue));
+      return;
+    }
+    const existingSlot = slotPropsExpression.properties[existingSlotIndex].value;
+    slotPropsExpression.properties[existingSlotIndex].value = j.objectExpression([j.spreadElement(removedValue), j.spreadElement(existingSlot)]);
+  });
+}
+function ensureParamsSlotPropsSpread(j, element, paramsName) {
+  const hasParamsSpread = element.openingElement.attributes.some(attribute => attribute.type === 'JSXSpreadAttribute' && attribute.argument.type === 'Identifier' && attribute.argument.name === paramsName);
+  if (!hasParamsSpread) {
+    return;
+  }
+  upsertSlotPropsAttribute(j, element, slotPropsExpression => {
+    const hasSlotPropsSpread = slotPropsExpression.properties.some(property => property.type === 'SpreadElement' && property.argument.type === 'MemberExpression' && property.argument.object.type === 'Identifier' && property.argument.object.name === paramsName && property.argument.property.type === 'Identifier' && property.argument.property.name === 'slotProps');
+    if (!hasSlotPropsSpread) {
+      slotPropsExpression.properties.unshift(j.spreadElement(j.memberExpression(j.identifier(paramsName), j.identifier('slotProps'))));
+    }
+  });
+}
+function replaceRenderInputParamsMembers(j, callbackRoot, paramsName) {
+  const slotPropByDeprecatedName = {
+    InputProps: 'input',
+    inputProps: 'htmlInput',
+    InputLabelProps: 'inputLabel'
+  };
+  callbackRoot.find(j.MemberExpression).filter(path => path.node.object.type === 'Identifier' && path.node.object.name === paramsName && path.node.property.type === 'Identifier' && slotPropByDeprecatedName[path.node.property.name]).replaceWith(path => j.memberExpression(j.memberExpression(j.identifier(paramsName), j.identifier('slotProps')), j.identifier(slotPropByDeprecatedName[path.node.property.name])));
+}
+function transformRenderInput(j, root, options) {
+  const packageName = options.packageName || '@mui/material';
+  const textFieldNames = getImportedNames(j, root, packageName, 'TextField');
+  (0, _findComponentJSX.default)(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Autocomplete'
+  }, elementPath => {
+    const renderInputIndex = getAttributeIndex(elementPath.node, 'renderInput');
+    if (renderInputIndex === -1) {
+      return;
+    }
+    const renderInputAttribute = elementPath.node.openingElement.attributes[renderInputIndex];
+    const renderInputExpression = renderInputAttribute.value?.expression;
+    if (!renderInputExpression || !['ArrowFunctionExpression', 'FunctionExpression'].includes(renderInputExpression.type) || renderInputExpression.params.length === 0 || renderInputExpression.params[0].type !== 'Identifier') {
+      return;
+    }
+    const paramsName = renderInputExpression.params[0].name;
+    const callbackRoot = j(renderInputExpression.body);
+    replaceRenderInputParamsMembers(j, callbackRoot, paramsName);
+    textFieldNames.forEach(textFieldName => {
+      const textFieldElements = [];
+      if (renderInputExpression.body.type === 'JSXElement' && renderInputExpression.body.openingElement.name.type === 'JSXIdentifier' && renderInputExpression.body.openingElement.name.name === textFieldName) {
+        textFieldElements.push(renderInputExpression.body);
+      }
+      callbackRoot.find(j.JSXElement).filter(textFieldPath => textFieldPath.node.openingElement.name.type === 'JSXIdentifier' && textFieldPath.node.openingElement.name.name === textFieldName).forEach(textFieldPath => {
+        textFieldElements.push(textFieldPath.node);
+      });
+      textFieldElements.forEach(element => {
+        moveJsxPropIntoSlotProps(j, element, 'InputProps', 'input');
+        moveJsxPropIntoSlotProps(j, element, 'inputProps', 'htmlInput');
+        moveJsxPropIntoSlotProps(j, element, 'InputLabelProps', 'inputLabel');
+        moveJsxPropIntoSlotProps(j, element, 'SelectProps', 'select');
+        moveJsxPropIntoSlotProps(j, element, 'FormHelperTextProps', 'formHelperText');
+        if (getAttributeIndex(element, 'slotProps') !== -1) {
+          ensureParamsSlotPropsSpread(j, element, paramsName);
+        }
+      });
+    });
+  });
+}
+function isNonComputedKey(j, path) {
+  const parent = path.parent.node;
+  return (j.ObjectProperty.check(parent) || j.Property.check(parent)) && parent.key === path.node && !parent.computed;
+}
+function renameIdentifiersInScope(j, scopePath, oldName, newName) {
+  const bindingScope = scopePath.scope.lookup(oldName);
+  if (!bindingScope) {
+    return;
+  }
+  j(bindingScope.path).find(j.Identifier, {
+    name: oldName
+  }).filter(path => {
+    if (isNonComputedKey(j, path)) {
+      return false;
+    }
+    return path.scope.lookup(oldName) === bindingScope;
+  }).replaceWith(() => j.identifier(newName));
+}
+function renameRenderTagsCallback(j, callbackPath) {
+  const getTagPropsParam = callbackPath.node.params[1];
+  if (getTagPropsParam?.type === 'Identifier' && getTagPropsParam.name === 'getTagProps') {
+    renameIdentifiersInScope(j, callbackPath, 'getTagProps', 'getItemProps');
+  }
+}
+function renameRenderTagsProp(j, propertyPath) {
+  if (propertyPath.node.key.type === 'Identifier') {
+    propertyPath.node.key.name = 'renderValue';
+  }
+  if (propertyPath.node.value.type === 'ArrowFunctionExpression' || propertyPath.node.value.type === 'FunctionExpression') {
+    renameRenderTagsCallback(j, propertyPath.get('value'));
+  }
+}
+function renameUseAutocompleteReturnMembers(j, root) {
+  const renamedMembers = new Map([['getTagProps', 'getItemProps'], ['focusedTag', 'focusedItem']]);
+  root.find(j.VariableDeclarator).filter(path => {
+    const {
+      id,
+      init
+    } = path.node;
+    return id.type === 'ObjectPattern' && init?.type === 'CallExpression' && init.callee.type === 'Identifier' && init.callee.name === 'useAutocomplete';
+  }).forEach(path => {
+    path.node.id.properties.forEach(property => {
+      if (property.type !== 'ObjectProperty' || property.key.type !== 'Identifier') {
+        return;
+      }
+      const nextName = renamedMembers.get(property.key.name);
+      if (!nextName) {
+        return;
+      }
+      const isShorthand = property.shorthand === true;
+      const localName = property.value.type === 'Identifier' ? property.value.name : null;
+      property.key.name = nextName;
+      if (isShorthand && localName) {
+        renameIdentifiersInScope(j, path, localName, nextName);
+        property.shorthand = true;
+      }
+    });
+  });
+}
+
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -53,6 +230,7 @@ function transformer(file, api, options) {
     packageName: options.packageName,
     componentName: 'Autocomplete'
   });
+  transformRenderInput(j, root, options);
 
   // Move ListboxComponent JSX prop into slotProps.listbox.component
   (0, _findComponentJSX.default)(j, {
@@ -61,6 +239,15 @@ function transformer(file, api, options) {
     componentName: 'Autocomplete'
   }, elementPath => {
     const element = elementPath.node;
+    element.openingElement.attributes.forEach((attribute, index) => {
+      if (attribute.type !== 'JSXAttribute' || attribute.name.name !== 'renderTags') {
+        return;
+      }
+      attribute.name.name = 'renderValue';
+      if (attribute.value?.type === 'JSXExpressionContainer' && (attribute.value.expression.type === 'ArrowFunctionExpression' || attribute.value.expression.type === 'FunctionExpression')) {
+        renameRenderTagsCallback(j, elementPath.get('openingElement', 'attributes', index, 'value', 'expression'));
+      }
+    });
     const propIndex = element.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'ListboxComponent');
     if (propIndex !== -1) {
       const removedValue = element.openingElement.attributes.splice(propIndex, 1)[0].value.expression;
@@ -127,5 +314,13 @@ function transformer(file, api, options) {
     }
     path.prune();
   });
+  defaultPropsPathCollection.find(j.ObjectProperty, {
+    key: {
+      name: 'renderTags'
+    }
+  }).forEach(path => {
+    renameRenderTagsProp(j, path);
+  });
+  renameUseAutocompleteReturnMembers(j, root);
   return root.toSource(printOptions);
 }

package/deprecations/autocomplete-props/test-cases/actual.js

@@ -3,6 +3,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _material = require("@mui/material");
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _useAutocomplete = _interopRequireDefault(require("@mui/material/useAutocomplete"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
   ChipProps: {
@@ -110,4 +112,33 @@ var _jsxRuntime = require("react/jsx-runtime");
   ListboxProps: {
     height: 12
   }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+  multiple: true,
+  options: options,
+  renderTags: (value, getTagProps, ownerState) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    label: option.label,
+    "data-focused": ownerState.focused,
+    ...getTagProps({
+      index
+    })
+  }))
+});
+const {
+  getTagProps,
+  focusedTag
+} = (0, _useAutocomplete.default)(props);
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+  ...getTagProps({
+    index: focusedTag
+  })
+});
+const {
+  getTagProps: getAutocompleteTagProps,
+  focusedTag: focusedAutocompleteTag
+} = (0, _useAutocomplete.default)(props);
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+  ...getAutocompleteTagProps({
+    index: focusedAutocompleteTag
+  })
 });

package/deprecations/autocomplete-props/test-cases/expected.js

@@ -3,6 +3,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _material = require("@mui/material");
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _useAutocomplete = _interopRequireDefault(require("@mui/material/useAutocomplete"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
   slots: {
@@ -122,4 +124,33 @@ var _jsxRuntime = require("react/jsx-runtime");
   ListboxProps: {
     height: 12
   }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+  multiple: true,
+  options: options,
+  renderValue: (value, getItemProps, ownerState) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    label: option.label,
+    "data-focused": ownerState.focused,
+    ...getItemProps({
+      index
+    })
+  }))
+});
+const {
+  getItemProps,
+  focusedItem
+} = (0, _useAutocomplete.default)(props);
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+  ...getItemProps({
+    index: focusedItem
+  })
+});
+const {
+  getItemProps: getAutocompleteTagProps,
+  focusedItem: focusedAutocompleteTag
+} = (0, _useAutocomplete.default)(props);
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+  ...getAutocompleteTagProps({
+    index: focusedAutocompleteTag
+  })
 });

package/deprecations/autocomplete-props/test-cases/package.actual.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _Autocomplete = _interopRequireDefault(require("@org/ui/material/Autocomplete"));
 var _material = require("@org/ui/material");
+var _Chip = _interopRequireDefault(require("@org/ui/material/Chip"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
   ChipProps: {
@@ -110,4 +111,14 @@ var _jsxRuntime = require("react/jsx-runtime");
   ListboxProps: {
     height: 12
   }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+  multiple: true,
+  options: options,
+  renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    label: option.label,
+    ...getTagProps({
+      index
+    })
+  }))
 });

package/deprecations/autocomplete-props/test-cases/package.expected.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _Autocomplete = _interopRequireDefault(require("@org/ui/material/Autocomplete"));
 var _material = require("@org/ui/material");
+var _Chip = _interopRequireDefault(require("@org/ui/material/Chip"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
   slots: {
@@ -122,4 +123,14 @@ var _jsxRuntime = require("react/jsx-runtime");
   ListboxProps: {
     height: 12
   }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+  multiple: true,
+  options: options,
+  renderValue: (value, getItemProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    label: option.label,
+    ...getItemProps({
+      index
+    })
+  }))
 });

package/deprecations/autocomplete-props/test-cases/render-input-package.actual.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _TextField = _interopRequireDefault(require("@org/ui/material/TextField"));
+var _Autocomplete = _interopRequireDefault(require("@org/ui/material/Autocomplete"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+  renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+    ...params,
+    inputProps: {
+      ...params.inputProps,
+      autoComplete: 'new-password'
+    }
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+  renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+    ...params,
+    inputProps: {
+      ...params.inputProps,
+      autoComplete: 'new-password'
+    }
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomAutocomplete, {
+  renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+    ...params,
+    inputProps: {
+      ...params.inputProps,
+      autoComplete: 'new-password'
+    }
+  })
+});