@mui/x-codemod 9.0.0-rc.0 → 9.0.4

package/README.md

@@ -69,7 +69,7 @@ To run codemods for a specific package, refer to the respective section.
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/preset-safe <path|folder>
+npx @mui/x-codemod@latest v9.0.0/preset-safe <path|folder>
 ```
 
 The corresponding sub-sections are listed below
@@ -90,7 +90,7 @@ If `charts` is the only property, the entire `experimentalFeatures` prop is remo
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/data-grid/remove-stabilized-experimentalFeatures <path|folder>
+npx @mui/x-codemod@latest v9.0.0/data-grid/remove-stabilized-experimentalFeatures <path|folder>
 ```
 
 ```diff
@@ -109,7 +109,7 @@ The `preset-safe` codemods for Charts.
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/charts/preset-safe <path|folder>
+npx @mui/x-codemod@latest v9.0.0/charts/preset-safe <path|folder>
 ```
 
 The list includes these transformers
@@ -320,7 +320,7 @@ The `preset-safe` codemods for Pickers.
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/pickers/preset-safe <path|folder>
+npx @mui/x-codemod@latest v9.0.0/pickers/preset-safe <path|folder>
 ```
 
 The list includes these transformers
@@ -332,6 +332,7 @@ The list includes these transformers
 - [`rename-pickers-day`](#rename-pickers-day)
 - [`rename-picker-classes`](#rename-picker-classes)
 - [`remove-disable-margin`](#remove-disable-margin)
+- [`migrate-text-field-props`](#migrate-text-field-props)
 
 #### `rename-field-ref`
 
@@ -351,7 +352,7 @@ Renames the `unstableFieldRef` prop to `fieldRef` on all Picker and Field compon
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/pickers/rename-field-ref <path|folder>
+npx @mui/x-codemod@latest v9.0.0/pickers/rename-field-ref <path|folder>
 ```
 
 #### `remove-enable-accessible-field-dom-structure`
@@ -373,7 +374,7 @@ The accessible DOM structure is now the only supported option and this prop has
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/pickers/remove-enable-accessible-field-dom-structure <path|folder>
+npx @mui/x-codemod@latest v9.0.0/pickers/remove-enable-accessible-field-dom-structure <path|folder>
 ```
 
 #### `remove-picker-day-2`
@@ -392,7 +393,7 @@ Also handles objects passed through variables (for example `const slots = { day:
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/pickers/remove-picker-day-2 <path>
+npx @mui/x-codemod@latest v9.0.0/pickers/remove-picker-day-2 <path>
 ```
 
 #### `rename-picker-day-2`
@@ -419,7 +420,7 @@ Renames `PickerDay2` and `DateRangePickerDay2` components and their related type
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/pickers/rename-picker-day-2 <path>
+npx @mui/x-codemod@latest v9.0.0/pickers/rename-picker-day-2 <path>
 ```
 
 #### `rename-pickers-day`
@@ -443,7 +444,7 @@ Renames `PickersDay` to `PickerDay` and all related types, classes, and theme co
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/pickers/rename-pickers-day <path>
+npx @mui/x-codemod@latest v9.0.0/pickers/rename-pickers-day <path>
 ```
 
 #### `rename-picker-classes`
@@ -464,7 +465,7 @@ Renames `PickerDay` and `DateRangePickerDay` CSS class keys to their new equival
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/pickers/rename-picker-classes <path>
+npx @mui/x-codemod@latest v9.0.0/pickers/rename-picker-classes <path>
 ```
 
 #### `remove-disable-margin`
@@ -484,7 +485,37 @@ When `disableMargin={false}`, the prop is simply removed without adding the CSS
 <!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/x-codemod@next v9.0.0/pickers/remove-disable-margin <path>
+npx @mui/x-codemod@latest v9.0.0/pickers/remove-disable-margin <path>
+```
+
+#### `migrate-text-field-props`
+
+Rewrites the legacy `InputProps`, `inputProps`, `InputLabelProps` and `FormHelperTextProps` props on Picker, Field and `PickersTextField` components into the new `slotProps.{input,htmlInput,inputLabel,formHelperText}` shape. On Picker and Field components the new keys are nested inside `slotProps.textField.slotProps`; on `PickersTextField` they live directly under `slotProps`.
+
+```diff
+-<DateField
+-  InputProps={{ name: 'birthday' }}
+-  inputProps={{ 'data-testid': 'html-input' }}
+-/>
++<DateField
++  slotProps={{
++    textField: {
++      slotProps: {
++        input: { name: 'birthday' },
++        htmlInput: { 'data-testid': 'html-input' },
++      },
++    },
++  }}
++/>
+
+-<DatePicker slotProps={{ textField: { InputProps: { name: 'date' } } }} />
++<DatePicker slotProps={{ textField: { slotProps: { input: { name: 'date' } } } }} />
+```
+
+<!-- #npm-tag-reference -->
+
+```bash
+npx @mui/x-codemod@next v9.0.0/pickers/migrate-text-field-props <path>
 ```
 
 ## v8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "9.0.0-rc.0",
+  "version": "9.0.4",
   "author": "MUI Team",
   "description": "Codemod scripts for MUI X.",
   "license": "MIT",
@@ -24,11 +24,11 @@
   },
   "dependencies": {
     "@babel/core": "^7.29.0",
-    "@babel/runtime": "^7.28.6",
+    "@babel/runtime": "^7.29.2",
     "@babel/traverse": "^7.29.0",
     "jscodeshift": "17.3.0",
     "yargs": "^18.0.0",
-    "@mui/x-internals": "9.0.0-rc.0"
+    "@mui/x-internals": "^9.0.4"
   },
   "sideEffects": false,
   "publishConfig": {

package/util/addComponentsSlots.js

@@ -15,11 +15,27 @@ const addItemToObject = (path, value, object, j) => {
 
   // Final case where we have to add the property to the object.
   if (splittedPath.length === 1) {
-    const propertyToAdd = j.objectProperty(j.identifier(path), value);
     if (object === null) {
+      const propertyToAdd = j.objectProperty(j.identifier(path), value);
       return j.objectExpression([propertyToAdd]);
     }
-    return j.objectExpression([...(object.properties ?? []).filter(property => property.key.name !== path), propertyToAdd]);
+
+    // When both the existing and new values are ObjectExpressions, merge their properties
+    // (new properties win on key conflicts) instead of replacing the entire object.
+    const existingProperty = (object.properties ?? []).find(property => property.key?.name === path || property.key?.value === path);
+    if (existingProperty && existingProperty.value.type === 'ObjectExpression' && value.type === 'ObjectExpression') {
+      // Spread elements (e.g. `{ ...rest }`) have no `key`, so guard against `undefined`
+      // sneaking into the dedup set — otherwise existing spreads would be filtered out.
+      const newKeys = new Set(value.properties.map(p => p.key?.name ?? p.key?.value).filter(key => key !== undefined));
+      const mergedValue = j.objectExpression([...existingProperty.value.properties.filter(p => {
+        const key = p.key?.name ?? p.key?.value;
+        return key === undefined || !newKeys.has(key);
+      }), ...value.properties]);
+      const mergedProperty = j.objectProperty(j.identifier(path), mergedValue);
+      return j.objectExpression([...(object.properties ?? []).filter(property => (property.key?.name ?? property.key?.value) !== path), mergedProperty]);
+    }
+    const propertyToAdd = j.objectProperty(j.identifier(path), value);
+    return j.objectExpression([...(object.properties ?? []).filter(property => (property.key?.name ?? property.key?.value) !== path), propertyToAdd]);
   }
   const remainingPath = splittedPath.slice(1).join('.');
   const targetKey = splittedPath[0];
@@ -30,11 +46,12 @@ const addItemToObject = (path, value, object, j) => {
   }
 
   // Look if the object we got already contains the property we have to use.
-  const correspondingObject = (object.properties ?? []).find(property => property.key.name === targetKey);
+  // `property.key` is missing on spread / rest elements, so guard the access.
+  const correspondingObject = (object.properties ?? []).find(property => (property.key?.name ?? property.key?.value) === targetKey);
   const propertyToAdd = j.objectProperty(j.identifier(targetKey),
   // Here we use recursion to mix the new value with the current one
   addItemToObject(remainingPath, value, correspondingObject?.value ?? null, j));
-  return j.objectExpression([...(object.properties ?? []).filter(property => property.key.name !== targetKey), propertyToAdd]);
+  return j.objectExpression([...(object.properties ?? []).filter(property => (property.key?.name ?? property.key?.value) !== targetKey), propertyToAdd]);
 };
 
 /**

package/v9.0.0/pickers/migrate-text-field-props/index.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+exports.testConfig = void 0;
+var _path = _interopRequireDefault(require("path"));
+var _readFile = _interopRequireDefault(require("../../../util/readFile"));
+var _addComponentsSlots = require("../../../util/addComponentsSlots");
+var _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
+// @ts-ignore - JS file without types
+
+/**
+ * Maps a legacy text-field prop name to the corresponding key inside `slotProps`.
+ */
+const PROP_TO_SLOT = {
+  InputProps: 'input',
+  inputProps: 'htmlInput',
+  InputLabelProps: 'inputLabel',
+  FormHelperTextProps: 'formHelperText'
+};
+const LEGACY_PROP_NAMES = Object.keys(PROP_TO_SLOT);
+const FIELD_AND_PICKER_NAMES = [
+// Fields
+'DateField', 'DateTimeField', 'TimeField', 'DateRangeField', 'DateTimeRangeField', 'TimeRangeField', 'MultiInputDateRangeField', 'MultiInputDateTimeRangeField', 'MultiInputTimeRangeField', 'SingleInputDateRangeField', 'SingleInputDateTimeRangeField', 'SingleInputTimeRangeField',
+// Pickers
+'DatePicker', 'DesktopDatePicker', 'MobileDatePicker', 'StaticDatePicker', 'DateTimePicker', 'DesktopDateTimePicker', 'MobileDateTimePicker', 'StaticDateTimePicker', 'TimePicker', 'DesktopTimePicker', 'MobileTimePicker', 'StaticTimePicker', 'DateRangePicker', 'DesktopDateRangePicker', 'MobileDateRangePicker', 'StaticDateRangePicker', 'DateTimeRangePicker', 'DesktopDateTimeRangePicker', 'MobileDateTimeRangePicker', 'TimeRangePicker', 'DesktopTimeRangePicker', 'MobileTimeRangePicker'];
+const ALL_TARGET_NAMES = [...FIELD_AND_PICKER_NAMES, 'PickersTextField'];
+const getKeyName = key => {
+  if (!key) {
+    return undefined;
+  }
+  if (key.type === 'Identifier') {
+    return key.name;
+  }
+  if (key.type === 'Literal' || key.type === 'StringLiteral') {
+    return String(key.value);
+  }
+  return undefined;
+};
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+
+  // 1. Rewrite legacy props passed directly as JSX attributes on field / picker components.
+  root.find(j.JSXElement).filter(elementPath => {
+    const nameNode = elementPath.value.openingElement.name;
+    return nameNode && nameNode.type === 'JSXIdentifier' && ALL_TARGET_NAMES.includes(nameNode.name);
+  }).forEach(elementPath => {
+    const nameNode = elementPath.value.openingElement.name;
+    // For PickersTextField the new keys live directly on `slotProps`.
+    // For every other component they live on a nested `textField.slotProps` object.
+    const pathPrefix = nameNode.name === 'PickersTextField' ? '' : 'textField.slotProps.';
+    const attributesToTransform = j(elementPath).find(j.JSXAttribute).filter(attribute => {
+      const attributeParent = attribute.parentPath.parentPath;
+      if (attributeParent.value.type !== 'JSXOpeningElement' || attributeParent.value.name.name !== nameNode.name) {
+        return false;
+      }
+      return LEGACY_PROP_NAMES.includes(attribute.value.name.name);
+    });
+    attributesToTransform.forEach(attribute => {
+      const attributeName = attribute.value.name.name;
+      const value = attribute.value.value?.type === 'JSXExpressionContainer' ? attribute.value.value.expression : attribute.value.value || j.booleanLiteral(true);
+      (0, _addComponentsSlots.transformNestedProp)(elementPath, 'slotProps', `${pathPrefix}${PROP_TO_SLOT[attributeName]}`, value, j);
+    });
+  });
+
+  // Drop the now-orphaned legacy attributes from the targeted components.
+  (0, _removeProps.default)({
+    root,
+    componentNames: ALL_TARGET_NAMES,
+    props: LEGACY_PROP_NAMES,
+    j
+  });
+
+  // 2. Rewrite legacy props found inside `slotProps={{ field: { ... } }}` and
+  //    `slotProps={{ textField: { ... } }}` regardless of which component they appear on.
+  root.find(j.JSXAttribute, {
+    name: {
+      name: 'slotProps'
+    }
+  }).forEach(attrPath => {
+    const openingElement = attrPath.parentPath?.parentPath?.value;
+    if (!openingElement || openingElement.type !== 'JSXOpeningElement' || openingElement.name?.type !== 'JSXIdentifier' || !FIELD_AND_PICKER_NAMES.includes(openingElement.name.name)) {
+      return;
+    }
+    const attrValue = attrPath.value.value;
+    if (!attrValue || attrValue.type !== 'JSXExpressionContainer') {
+      return;
+    }
+    const expression = attrValue.expression;
+    if (expression.type !== 'ObjectExpression') {
+      return;
+    }
+    // Collect legacy props found inside `field` / `textField` slot objects.
+    // - `textField` legacy props are migrated in-place under `textField.slotProps.<newKey>`.
+    // - `field` legacy props cannot be nested under `field.slotProps.textField.slotProps.<newKey>`
+    //   because the `field` slotProps type does not allow it. Hoist them to the sibling
+    //   `textField.slotProps.<newKey>` instead.
+    const fieldCollected = [];
+    expression.properties.forEach(prop => {
+      if (prop.type === 'SpreadElement' || prop.type === 'ExperimentalSpreadProperty') {
+        console.warn(`[migrate-text-field-props] ${file.path}: encountered a spread inside slotProps; ` + `cannot inspect for legacy text field props. Migrate manually if needed.`);
+        return;
+      }
+      if (prop.type !== 'Property' && prop.type !== 'ObjectProperty') {
+        return;
+      }
+      const keyName = getKeyName(prop.key);
+      if (keyName !== 'field' && keyName !== 'textField') {
+        return;
+      }
+      if (prop.value.type !== 'ObjectExpression') {
+        console.warn(`[migrate-text-field-props] ${file.path}: \`slotProps.${keyName}\` is set to a ` + `non-literal value (e.g. a variable or a function); cannot migrate legacy ` + `text field props automatically. Migrate manually if needed.`);
+        return;
+      }
+      let target = prop.value;
+      const remaining = [];
+      const collected = [];
+      target.properties.forEach(innerProp => {
+        if (innerProp.type !== 'Property' && innerProp.type !== 'ObjectProperty') {
+          remaining.push(innerProp);
+          return;
+        }
+        const innerKey = getKeyName(innerProp.key);
+        if (innerKey && LEGACY_PROP_NAMES.includes(innerKey)) {
+          collected.push({
+            newKey: PROP_TO_SLOT[innerKey],
+            value: innerProp.value
+          });
+          return;
+        }
+        remaining.push(innerProp);
+      });
+      if (collected.length === 0) {
+        return;
+      }
+      if (keyName === 'field') {
+        // Defer: hoist these to the sibling `textField` slot below.
+        target.properties = remaining;
+        fieldCollected.push(...collected);
+        return;
+      }
+      target.properties = remaining;
+      // Use the same recursive merge helper used by `transformNestedProp`.
+      collected.forEach(({
+        newKey,
+        value
+      }) => {
+        target = (0, _addComponentsSlots.addItemToObject)(`slotProps.${newKey}`, value, target, j);
+      });
+      prop.value = target;
+    });
+    if (fieldCollected.length > 0) {
+      // Drop `field` if it became empty.
+      expression.properties = expression.properties.filter(prop => {
+        if (prop.type !== 'Property' && prop.type !== 'ObjectProperty') {
+          return true;
+        }
+        if (getKeyName(prop.key) !== 'field') {
+          return true;
+        }
+        return prop.value.type !== 'ObjectExpression' || prop.value.properties.length > 0;
+      });
+      // Hoist the collected legacy props to `textField.slotProps.<newKey>`.
+      let merged = expression;
+      fieldCollected.forEach(({
+        newKey,
+        value
+      }) => {
+        merged = (0, _addComponentsSlots.addItemToObject)(`textField.slotProps.${newKey}`, value, merged, j);
+      });
+      expression.properties = merged.properties;
+    }
+  });
+  return root.toSource(printOptions);
+}
+const testConfig = () => ({
+  name: 'migrate-text-field-props',
+  specFiles: [{
+    name: 'migrate legacy text field props to slotProps',
+    actual: (0, _readFile.default)(_path.default.join(__dirname, 'actual.spec.tsx')),
+    expected: (0, _readFile.default)(_path.default.join(__dirname, 'expected.spec.tsx'))
+  }]
+});
+exports.testConfig = testConfig;

package/v9.0.0/pickers/preset-safe/index.js

@@ -13,11 +13,12 @@ var _renamePickersDay = _interopRequireDefault(require("../rename-pickers-day"))
 var _renamePickerClasses = _interopRequireDefault(require("../rename-picker-classes"));
 var _removeDisableMargin = _interopRequireDefault(require("../remove-disable-margin"));
 var _removeEnableAccessibleFieldDomStructure = _interopRequireDefault(require("../remove-enable-accessible-field-dom-structure"));
+var _migrateTextFieldProps = _interopRequireDefault(require("../migrate-text-field-props"));
 // Order matters: removePickerDay2 must run before renamePickerDay2
 // because it looks for `PickerDay2` identifiers in slot objects.
 // If renamePickerDay2 ran first, those identifiers would already be
 // renamed to `PickerDay` and removePickerDay2 would not find them.
-const allModules = [_renameFieldRef.default, _removePickerDay.default, _renamePickerDay.default, _renamePickersDay.default, _renamePickerClasses.default, _removeDisableMargin.default, _removeEnableAccessibleFieldDomStructure.default];
+const allModules = [_renameFieldRef.default, _removePickerDay.default, _renamePickerDay.default, _renamePickersDay.default, _renamePickerClasses.default, _removeDisableMargin.default, _removeEnableAccessibleFieldDomStructure.default, _migrateTextFieldProps.default];
 function transformer(file, api, options) {
   allModules.forEach(transform => {
     file.source = transform(file, api, options);