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

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/util/renameClasses.js

@@ -44,7 +44,14 @@ function renameClasses(parameters) {
     localNameToOldClassName[hasAlias ? localName : oldName] = oldName;
     renamedIdentifiersMap[oldName] = config.newClassName;
     if (!hasAlias && alreadyAvailableIdentifiersMap.has(config.newClassName)) {
+      const importDeclarationCollection = j(path).closest(j.ImportDeclaration);
       path.prune();
+      if (importDeclarationCollection.length > 0) {
+        const importDeclaration = importDeclarationCollection.nodes()[0];
+        if (importDeclaration.specifiers?.length === 0) {
+          importDeclarationCollection.remove();
+        }
+      }
       return;
     }
     alreadyAvailableIdentifiersMap.add(config.newClassName);

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

@@ -5,10 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
+exports.testConfig = void 0;
 var _renameFieldRef = _interopRequireDefault(require("../rename-field-ref"));
+var _removePickerDay = _interopRequireDefault(require("../remove-picker-day-2"));
+var _renamePickerDay = _interopRequireDefault(require("../rename-picker-day-2"));
+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, _migrateTextFieldProps.default];
 function transformer(file, api, options) {
-  [_renameFieldRef.default].forEach(transform => {
+  allModules.forEach(transform => {
     file.source = transform(file, api, options);
   });
   return file.source;
-}
+}
+const testConfig = exports.testConfig = {
+  allModules
+};

package/v9.0.0/pickers/remove-disable-margin/index.js

@@ -0,0 +1,134 @@
+"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"));
+// Components on which disableMargin was a direct prop
+const dayComponentNames = ['PickerDay', 'PickersDay', 'DateRangePickerDay'];
+
+/**
+ * Returns true if a disableMargin JSX attribute is considered enabled (i.e. `disableMargin` or
+ * `disableMargin={true}`). Returns false for `disableMargin={false}`.
+ */
+function isDisableMarginEnabled(attr) {
+  if (!attr.value) {
+    // bare `disableMargin` with no value — equivalent to true
+    return true;
+  }
+  if (attr.value.type === 'JSXExpressionContainer' && attr.value.expression.type === 'BooleanLiteral') {
+    return attr.value.expression.value;
+  }
+  // Any other expression (variable, etc.) — conservatively treat as enabled
+  return true;
+}
+const cssVarKey = '--PickerDay-horizontalMargin';
+
+/**
+ * Merges `'--PickerDay-horizontalMargin': 0` into an existing ObjectExpression used as an `sx` value.
+ * Only merges when the expression is a plain object literal.
+ * Returns true if the merge succeeded.
+ */
+function mergeCssVarIntoSxObject(j, sxExpr) {
+  if (sxExpr.type !== 'ObjectExpression') {
+    return false;
+  }
+  // Avoid adding the CSS variable if it's already there
+  const alreadyHasVar = sxExpr.properties.some(p => p.type === 'ObjectProperty' && p.key?.value === cssVarKey);
+  if (!alreadyHasVar) {
+    sxExpr.properties.push(j.objectProperty(j.stringLiteral(cssVarKey), j.numericLiteral(0)));
+  }
+  return true;
+}
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+
+  // ─── Case 1: disableMargin directly on a day component JSX element ───────────
+  root.find(j.JSXOpeningElement).filter(p => {
+    const name = p.node.name;
+    return name.type === 'JSXIdentifier' && dayComponentNames.includes(name.name);
+  }).forEach(openingElPath => {
+    const attrs = openingElPath.node.attributes;
+    const dmIndex = attrs.findIndex(a => a.type === 'JSXAttribute' && a.name?.name === 'disableMargin');
+    if (dmIndex === -1) {
+      return;
+    }
+    const dmAttr = attrs[dmIndex];
+    const enabled = isDisableMarginEnabled(dmAttr);
+    attrs.splice(dmIndex, 1);
+    if (enabled) {
+      const sxIndex = attrs.findIndex(a => a.type === 'JSXAttribute' && a.name?.name === 'sx');
+      if (sxIndex === -1) {
+        attrs.push(j.jsxAttribute(j.jsxIdentifier('sx'), j.jsxExpressionContainer(j.objectExpression([j.objectProperty(j.stringLiteral(cssVarKey), j.numericLiteral(0))]))));
+      } else {
+        const sxAttr = attrs[sxIndex];
+        if (sxAttr.value?.type === 'JSXExpressionContainer') {
+          mergeCssVarIntoSxObject(j, sxAttr.value.expression);
+        }
+      }
+    }
+  });
+
+  // ─── Case 2: disableMargin inside a slotProps.day object ─────────────────────
+  root.find(j.JSXAttribute, {
+    name: {
+      name: 'slotProps'
+    }
+  }).forEach(slotPropsAttrPath => {
+    const container = slotPropsAttrPath.node.value;
+    if (container?.type !== 'JSXExpressionContainer') {
+      return;
+    }
+    const slotPropsObj = container.expression;
+    if (slotPropsObj.type !== 'ObjectExpression') {
+      return;
+    }
+    slotPropsObj.properties.forEach(prop => {
+      if (prop.type !== 'ObjectProperty') {
+        return;
+      }
+      const keyName = prop.key?.name ?? prop.key?.value;
+      if (keyName !== 'day') {
+        return;
+      }
+      const dayObj = prop.value;
+      if (dayObj.type !== 'ObjectExpression') {
+        return;
+      }
+      const dmIndex = dayObj.properties.findIndex(p => p.type === 'ObjectProperty' && (p.key?.name === 'disableMargin' || p.key?.value === 'disableMargin'));
+      if (dmIndex === -1) {
+        return;
+      }
+      const dmProp = dayObj.properties[dmIndex];
+      const enabled = dmProp.value.type === 'BooleanLiteral' ? dmProp.value.value : true;
+      dayObj.properties.splice(dmIndex, 1);
+      if (enabled) {
+        const sxIndex = dayObj.properties.findIndex(p => p.type === 'ObjectProperty' && (p.key?.name === 'sx' || p.key?.value === 'sx'));
+        if (sxIndex === -1) {
+          dayObj.properties.push(j.objectProperty(j.identifier('sx'), j.objectExpression([j.objectProperty(j.stringLiteral(cssVarKey), j.numericLiteral(0))])));
+        } else {
+          mergeCssVarIntoSxObject(j, dayObj.properties[sxIndex].value);
+        }
+      }
+    });
+  });
+  return root.toSource(printOptions);
+}
+const testConfig = () => ({
+  name: 'remove-disable-margin',
+  specFiles: [{
+    name: "remove disableMargin prop and replace with sx={{ '--PickerDay-horizontalMargin': 0 }}",
+    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/remove-enable-accessible-field-dom-structure/index.js

@@ -0,0 +1,72 @@
+"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 _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
+var _readFile = _interopRequireDefault(require("../../../util/readFile"));
+const componentNames = ['DateField', 'DateTimeField', 'TimeField', 'DateRangeField', 'DateTimeRangeField', 'TimeRangeField', 'MultiInputDateRangeField', 'MultiInputDateTimeRangeField', 'MultiInputTimeRangeField', 'SingleInputDateRangeField', 'SingleInputDateTimeRangeField', 'SingleInputTimeRangeField', 'DatePicker', 'DesktopDatePicker', 'MobileDatePicker', 'StaticDatePicker', 'DateTimePicker', 'DesktopDateTimePicker', 'MobileDateTimePicker', 'StaticDateTimePicker', 'TimePicker', 'DesktopTimePicker', 'MobileTimePicker', 'StaticTimePicker', 'DateRangePicker', 'DesktopDateRangePicker', 'MobileDateRangePicker', 'StaticDateRangePicker', 'DateTimeRangePicker', 'DesktopDateTimeRangePicker', 'MobileDateTimeRangePicker', 'TimeRangePicker', 'DesktopTimeRangePicker', 'MobileTimeRangePicker'];
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  (0, _removeProps.default)({
+    root,
+    j,
+    componentNames,
+    props: ['enableAccessibleFieldDOMStructure']
+  });
+
+  // Also remove enableAccessibleFieldDOMStructure from slotProps.field
+  componentNames.forEach(componentName => {
+    root.find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: componentName
+        }
+      }
+    }).forEach(elementPath => {
+      j(elementPath).find(j.JSXAttribute, {
+        name: {
+          name: 'slotProps'
+        }
+      }).forEach(slotPropsAttr => {
+        const value = slotPropsAttr.node.value;
+        if (value?.type !== 'JSXExpressionContainer' || value.expression.type !== 'ObjectExpression') {
+          return;
+        }
+        const fieldProp = value.expression.properties.find(p => p.key?.name === 'field' || p.key?.value === 'field');
+        if (!fieldProp || fieldProp.value.type !== 'ObjectExpression') {
+          return;
+        }
+        fieldProp.value.properties = fieldProp.value.properties.filter(p => p.key?.name !== 'enableAccessibleFieldDOMStructure' && p.key?.value !== 'enableAccessibleFieldDOMStructure');
+
+        // If field object is now empty, remove it from slotProps
+        if (fieldProp.value.properties.length === 0) {
+          value.expression.properties = value.expression.properties.filter(p => p !== fieldProp);
+          // If slotProps object is now empty, remove the whole attribute
+          if (value.expression.properties.length === 0) {
+            j(slotPropsAttr).remove();
+          }
+        }
+      });
+    });
+  });
+  return root.toSource(printOptions);
+}
+const testConfig = () => ({
+  name: 'remove-enable-accessible-field-dom-structure',
+  specFiles: [{
+    name: 'remove enableAccessibleFieldDOMStructure prop',
+    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/remove-picker-day-2/index.js

@@ -0,0 +1,155 @@
+"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"));
+const pickerNames = ['DatePicker', 'DesktopDatePicker', 'MobileDatePicker', 'StaticDatePicker', 'DateTimePicker', 'DesktopDateTimePicker', 'MobileDateTimePicker', 'StaticDateTimePicker', 'TimePicker', 'DesktopTimePicker', 'MobileTimePicker', 'StaticTimePicker', 'DateRangePicker', 'DesktopDateRangePicker', 'MobileDateRangePicker', 'StaticDateRangePicker', 'DateTimeRangePicker', 'DesktopDateTimeRangePicker', 'MobileDateTimeRangePicker', 'TimeRangePicker', 'DesktopTimeRangePicker', 'MobileTimeRangePicker', 'DateCalendar', 'DayCalendar'];
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  const dayComponents = ['PickerDay2', 'DateRangePickerDay2'];
+  root.find(j.ObjectExpression).forEach(objectExpressionPath => {
+    const properties = objectExpressionPath.node.properties;
+    const dayPropIndex = properties.findIndex(prop => {
+      const keyName = prop.key?.name || prop.key?.value;
+      if (keyName !== 'day') {
+        return false;
+      }
+      const val = prop.value;
+      return val.type === 'Identifier' && dayComponents.includes(val.name);
+    });
+    if (dayPropIndex !== -1) {
+      properties.splice(dayPropIndex, 1);
+      if (properties.length === 0) {
+        // Case 1: inline slots attribute — remove the entire slots prop
+        const attrCollection = j(objectExpressionPath).closest(j.JSXAttribute, {
+          name: {
+            name: 'slots'
+          }
+        });
+        if (attrCollection.length > 0) {
+          const openingElement = j(objectExpressionPath).closest(j.JSXOpeningElement);
+          if (openingElement.length > 0) {
+            const nameNode = openingElement.get().value.name;
+            const componentName = nameNode.type === 'JSXIdentifier' ? nameNode.name : null;
+            if (componentName && pickerNames.includes(componentName)) {
+              attrCollection.remove();
+            }
+          }
+        }
+
+        // Case 2: object is in a variable — remove slots={varName} on picker components,
+        // then remove the variable declaration if it becomes unreferenced
+        const varDeclarator = j(objectExpressionPath).closest(j.VariableDeclarator);
+        if (varDeclarator.length > 0) {
+          const varId = varDeclarator.get().value.id;
+          const varName = varId?.type === 'Identifier' ? varId.name : null;
+          if (varName) {
+            const slotsOnPickers = root.find(j.JSXAttribute, {
+              name: {
+                name: 'slots'
+              }
+            }).filter(attrPath => {
+              const val = attrPath.node.value;
+              return val?.type === 'JSXExpressionContainer' && val.expression.type === 'Identifier' && val.expression.name === varName;
+            }).filter(attrPath => {
+              const openingElement = j(attrPath).closest(j.JSXOpeningElement);
+              if (openingElement.length === 0) {
+                return false;
+              }
+              const nameNode = openingElement.get().value.name;
+              const componentName = nameNode.type === 'JSXIdentifier' ? nameNode.name : null;
+              return componentName !== null && pickerNames.includes(componentName);
+            });
+
+            // Check (before any mutation) whether varName has references outside
+            // of picker slots and the declaration binding itself.
+            const hasNonPickerRefs = root.find(j.Identifier, {
+              name: varName
+            }).filter(idPath => {
+              // find(j.Identifier) also matches JSXIdentifier (attribute names) — skip them
+              if (idPath.node.type !== 'Identifier') {
+                return false;
+              }
+              // Exclude the declaration binding (the `id` in `const varName = ...`)
+              if (idPath.name === 'id' && idPath.parent.value.type === 'VariableDeclarator') {
+                return false;
+              }
+              // Exclude references inside picker slots attributes (those are being removed)
+              const closestAttr = j(idPath).closest(j.JSXAttribute, {
+                name: {
+                  name: 'slots'
+                }
+              });
+              if (closestAttr.length > 0) {
+                const openingElement = j(closestAttr.get()).closest(j.JSXOpeningElement);
+                if (openingElement.length > 0) {
+                  const nameNode = openingElement.get().value.name;
+                  const componentName = nameNode.type === 'JSXIdentifier' ? nameNode.name : null;
+                  if (componentName && pickerNames.includes(componentName)) {
+                    return false;
+                  }
+                }
+              }
+              return true;
+            }).length > 0;
+            slotsOnPickers.remove();
+            if (!hasNonPickerRefs) {
+              varDeclarator.closest(j.VariableDeclaration).remove();
+            }
+          }
+        }
+      }
+    }
+  });
+
+  // Remove imports if no longer used
+  dayComponents.forEach(componentName => {
+    const usages = root.find(j.Identifier, {
+      name: componentName
+    }).filter(componentPath => {
+      const {
+        parent
+      } = componentPath;
+      if (parent.value.type === 'ImportSpecifier') {
+        return false;
+      }
+      return true;
+    });
+    if (usages.length === 0) {
+      root.find(j.ImportSpecifier, {
+        imported: {
+          name: componentName
+        }
+      }).filter(componentPath => {
+        const importDeclaration = componentPath.parentPath.parentPath.value;
+        return importDeclaration.source.value.startsWith('@mui/x-date-pickers') || importDeclaration.source.value.startsWith('@mui/x-date-pickers-pro');
+      }).forEach(componentPath => {
+        const importDeclaration = componentPath.parentPath.parentPath;
+        j(componentPath).remove();
+        if (importDeclaration.value.specifiers.length === 0) {
+          j(importDeclaration).remove();
+        }
+      });
+    }
+  });
+  return root.toSource(printOptions);
+}
+const testConfig = () => ({
+  name: 'remove-picker-day-2',
+  specFiles: [{
+    name: 'remove PickerDay2 and DateRangePickerDay2 from slots',
+    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;