@react-spectrum/codemods 1.0.1 → 1.2.0

package/dist/index.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const { parseArgs } = require('node:util');
 const src_1 = require("./s1-to-s2/src");
 const src_2 = require("./use-monopackages/src");
+const src_3 = require("./use-subpaths/src");
 const codemods = {
     's1-to-s2': src_1.s1_to_s2,
-    'use-monopackages': src_2.use_monopackages
+    'use-monopackages': src_2.use_monopackages,
+    'use-subpaths': src_3.use_subpaths
 };
 // https://github.com/facebook/jscodeshift?tab=readme-ov-file#usage-cli
 const options = {
@@ -25,6 +27,9 @@ const options = {
     },
     'components': {
         type: 'string'
+    },
+    'agent': {
+        type: 'boolean'
     }
 };
 const { values, positionals } = parseArgs({
@@ -35,21 +40,22 @@ if (positionals.length < 1) {
     console.error('Please specify a codemod to run. Available codemods: ', Object.keys(codemods).join(', '));
     process.exit(1);
 }
-const codemodName = positionals[0];
-const codemodFunction = codemods[codemodName];
-if (!codemodFunction) {
-    console.error(`Unknown codemod: ${codemodName}, available codemods: ${Object.keys(codemods).join(', ')}`);
-    process.exit(1);
-}
-try {
-    codemodFunction({
+async function main() {
+    const codemodName = positionals[0];
+    const codemodFunction = codemods[codemodName];
+    if (!codemodFunction) {
+        console.error(`Unknown codemod: ${codemodName}, available codemods: ${Object.keys(codemods).join(', ')}`);
+        process.exit(1);
+    }
+    await Promise.resolve(codemodFunction({
         parser: 'tsx',
         ignorePattern: '**/node_modules/**',
         path: '.',
+        extensions: 'js,jsx,mjs,cjs,ts,tsx',
         ...values
-    });
+    }));
 }
-catch (error) {
+main().catch((error) => {
     console.error(`Error running codemod: ${error}`);
     process.exit(1);
-}
+});

package/dist/s1-to-s2/src/codemods/codemod.js

@@ -41,6 +41,7 @@ exports.default = transformer;
 const utils_1 = require("./shared/utils");
 const getComponents_1 = require("../getComponents");
 const iconMap_1 = require("./icons/iconMap");
+const illustrationMap_1 = require("./illustrations/illustrationMap");
 const recast_1 = require("recast");
 const t = __importStar(require("@babel/types"));
 const styleProps_1 = __importDefault(require("./shared/styleProps"));
@@ -59,6 +60,112 @@ availableComponents.add('Section');
 availableComponents.delete('Provider');
 // Replaced by ActionButtonGroup and ToggleButtonGroup
 availableComponents.add('ActionGroup');
+// components renamed between v3 and S2
+let renamedComponents = {
+    ContextualHelpTrigger: 'UnavailableMenuItemTrigger'
+};
+const relatedComponentGroups = {
+    ActionMenu: {
+        scopedComponents: {
+            Item: ['ActionMenu']
+        }
+    },
+    Breadcrumbs: {
+        scopedComponents: {
+            Item: ['Breadcrumbs']
+        }
+    },
+    ComboBox: {
+        scopedComponents: {
+            Item: ['ComboBox'],
+            Section: ['ComboBox']
+        }
+    },
+    DialogContainer: {
+        components: ['Dialog']
+    },
+    DialogTrigger: {
+        components: ['Dialog']
+    },
+    Menu: {
+        components: ['ContextualHelpTrigger', 'MenuTrigger', 'SubmenuTrigger'],
+        scopedComponents: {
+            Item: ['Menu'],
+            Section: ['Menu']
+        }
+    },
+    Picker: {
+        scopedComponents: {
+            Item: ['Picker'],
+            Section: ['Picker']
+        }
+    },
+    TableView: {
+        components: ['Cell', 'Column', 'Row', 'TableBody', 'TableHeader']
+    },
+    Tabs: {
+        components: ['TabList', 'TabPanels']
+    },
+    TagGroup: {
+        scopedComponents: {
+            Item: ['TagGroup']
+        }
+    },
+    TooltipTrigger: {
+        components: ['Tooltip']
+    }
+};
+function addScopedParents(scopedComponents, component, parents) {
+    let existingParents = scopedComponents.get(component) ?? new Set();
+    for (let parent of parents) {
+        existingParents.add(parent);
+    }
+    scopedComponents.set(component, existingParents);
+}
+function getComponentSelection(components) {
+    if (!components) {
+        return {
+            components: new Set(availableComponents),
+            explicitComponents: new Set(availableComponents),
+            scopedComponents: new Map()
+        };
+    }
+    let explicitComponents = new Set(components.split(',').map(s => s.trim()).filter(Boolean));
+    let expandedComponents = new Set(explicitComponents);
+    let scopedComponents = new Map();
+    for (let component of explicitComponents) {
+        let relatedComponents = relatedComponentGroups[component];
+        if (!relatedComponents) {
+            continue;
+        }
+        for (let relatedComponent of relatedComponents.components ?? []) {
+            expandedComponents.add(relatedComponent);
+        }
+        for (let [relatedComponent, parents] of Object.entries(relatedComponents.scopedComponents ?? {})) {
+            expandedComponents.add(relatedComponent);
+            if (!explicitComponents.has(relatedComponent)) {
+                addScopedParents(scopedComponents, relatedComponent, parents);
+            }
+        }
+    }
+    return {
+        components: new Set([...expandedComponents].filter(component => availableComponents.has(component))),
+        explicitComponents: new Set([...explicitComponents].filter(component => availableComponents.has(component))),
+        scopedComponents
+    };
+}
+function shouldTransformElement(componentName, path, selection) {
+    if (selection.explicitComponents.has(componentName)) {
+        return true;
+    }
+    let allowedParents = selection.scopedComponents.get(componentName);
+    if (!allowedParents || allowedParents.size === 0) {
+        return true;
+    }
+    return !!path.findParent((parentPath) => t.isJSXElement(parentPath.node)
+        && t.isJSXIdentifier(parentPath.node.openingElement.name)
+        && allowedParents.has((0, utils_1.getName)(path, parentPath.node.openingElement.name)));
+}
 function transformer(file, api, options) {
     let j = api.jscodeshift.withParser({
         parse(source) {
@@ -68,14 +175,22 @@ function transformer(file, api, options) {
         }
     });
     let root = j(file.source);
-    let componentsToTransform = options.components ? new Set(options.components.split(',').filter(s => availableComponents.has(s))) : availableComponents;
+    let selection = getComponentSelection(options.components);
+    let componentsToTransform = selection.components;
+    let v3ComponentsToRename = new Set(Object.keys(renamedComponents));
+    let S2ComponentsToImport = new Set();
     let bindings = [];
     let importedComponents = new Map();
     let elements = [];
     let lastImportPath = null;
     let iconImports = new Map();
+    let illustrationImports = new Map();
+    let programPath = null;
     const leadingComments = root.find(j.Program).get('body', 0).node.leadingComments;
     (0, traverse_1.default)(root.paths()[0].node, {
+        Program(path) {
+            programPath = path;
+        },
         ImportDeclaration(path) {
             if (path.node.source.value === '@adobe/react-spectrum' || (path.node.source.value.startsWith('@react-spectrum/') && path.node.source.value !== '@react-spectrum/s2')) {
                 lastImportPath = path;
@@ -87,9 +202,22 @@ function transformer(file, api, options) {
                         if (binding) {
                             let isUsed = false;
                             for (let path of binding.referencePaths) {
-                                if (path.parentPath?.isJSXMemberExpression() && componentsToTransform.has(path.parentPath.node.property.name) && path.parentPath.parentPath.parentPath?.isJSXElement()) {
-                                    importedComponents.set(path.parentPath.node.property.name, clonedSpecifier);
-                                    elements.push([path.parentPath.node.property.name, path.parentPath.parentPath.parentPath]);
+                                let propName = path.parentPath?.isJSXMemberExpression() && path.parentPath.node.property.name;
+                                if (propName && path.parentPath.parentPath?.parentPath?.isJSXElement()) {
+                                    if (componentsToTransform.has(propName)) {
+                                        importedComponents.set(propName, clonedSpecifier);
+                                        let elementPath = path.parentPath.parentPath.parentPath;
+                                        if (shouldTransformElement(propName, elementPath, selection)) {
+                                            elements.push([propName, elementPath]);
+                                        }
+                                    }
+                                    else if (v3ComponentsToRename.has(propName)) {
+                                        S2ComponentsToImport.add(renamedComponents[propName]);
+                                        elements.push([propName, path.parentPath.parentPath.parentPath]);
+                                    }
+                                    else {
+                                        isUsed = true;
+                                    }
                                 }
                                 else {
                                     isUsed = true;
@@ -112,15 +240,23 @@ function transformer(file, api, options) {
                         typeof specifier.local.name === 'string' &&
                         specifier.imported.type === 'Identifier' &&
                         typeof specifier.imported.name === 'string' &&
-                        componentsToTransform.has(specifier.imported.name)) {
-                        // e.g. import {Button} from '@adobe/react-spectrum';
+                        (componentsToTransform.has(specifier.imported.name) || v3ComponentsToRename.has(specifier.imported.name))) {
+                        // e.g. import {Button} from '@adobe/react-spectrum'; or import {ContextualHelpTrigger} from '@adobe/react-spectrum';
                         let binding = path.scope.getBinding(specifier.local.name);
                         if (binding) {
-                            importedComponents.set(specifier.imported.name, specifier);
+                            if (componentsToTransform.has(specifier.imported.name)) {
+                                importedComponents.set(specifier.imported.name, specifier);
+                            }
+                            else {
+                                S2ComponentsToImport.add(renamedComponents[specifier.imported.name]);
+                            }
                             bindings.push(binding);
                             for (let path of binding.referencePaths) {
                                 if (path.parentPath?.isJSXOpeningElement() && path.parentPath.parentPath.isJSXElement()) {
-                                    elements.push([specifier.imported.name, path.parentPath.parentPath]);
+                                    let elementPath = path.parentPath.parentPath;
+                                    if (shouldTransformElement(specifier.imported.name, elementPath, selection)) {
+                                        elements.push([specifier.imported.name, elementPath]);
+                                    }
                                 }
                             }
                         }
@@ -146,6 +282,24 @@ function transformer(file, api, options) {
                     iconImports.set(localName, { path, newName: null });
                 }
             }
+            else if (path.node.source.value.startsWith('@spectrum-icons/illustrations/')) {
+                let illustrationName = path.node.source.value.split('/').pop();
+                if (!illustrationName) {
+                    return;
+                }
+                let specifier = path.node.specifiers[0];
+                if (!specifier || !t.isImportDefaultSpecifier(specifier)) {
+                    return;
+                }
+                let localName = specifier.local.name;
+                if (illustrationMap_1.illustrationMap.has(illustrationName)) {
+                    let newIllustrationName = illustrationMap_1.illustrationMap.get(illustrationName);
+                    illustrationImports.set(localName, { path, newName: newIllustrationName });
+                }
+                else {
+                    illustrationImports.set(localName, { path, newName: null });
+                }
+            }
         },
         Import(path) {
             let call = path.parentPath;
@@ -156,7 +310,9 @@ function transformer(file, api, options) {
             if (arg.type !== 'StringLiteral') {
                 return;
             }
-            if (arg.value !== '@adobe/react-spectrum' && !arg.value.startsWith('@react-spectrum/')) {
+            let isV3ImportSource = arg.value === '@adobe/react-spectrum'
+                || (arg.value.startsWith('@react-spectrum/') && arg.value !== '@react-spectrum/s2');
+            if (!isV3ImportSource) {
                 return;
             }
             // TODO: implement this. could be a bit challenging. punting for now.
@@ -170,6 +326,12 @@ function transformer(file, api, options) {
                     (0, utils_1.addComment)(path.node, ` TODO(S2-upgrade): A Spectrum 2 equivalent to '${name.name}' was not found. Please update this icon manually.`);
                 }
             }
+            if (t.isJSXIdentifier(name) && illustrationImports.has(name.name)) {
+                let illustrationInfo = illustrationImports.get(name.name);
+                if (illustrationInfo.newName === null) {
+                    (0, utils_1.addComment)(path.node, ` TODO(S2-upgrade): A Spectrum 2 equivalent to '${name.name}' was not found. Please update this illustration manually.`);
+                }
+            }
         }
     });
     iconImports.forEach((iconInfo, localName) => {
@@ -195,6 +357,26 @@ function transformer(file, api, options) {
             path.node.specifiers = [t.importDefaultSpecifier(t.identifier(newLocalName))];
         }
     });
+    illustrationImports.forEach((illustrationInfo, localName) => {
+        let { path, newName } = illustrationInfo;
+        if (newName) {
+            let newImportSource = `@react-spectrum/s2/illustrations/linear/${newName}`;
+            let newLocalName = localName;
+            if (localName === path.node.source.value.split('/').pop() && localName !== newName) {
+                let binding = path.scope.getBinding(localName);
+                if (binding && !path.scope.hasBinding(newName)) {
+                    newLocalName = newName;
+                    binding.referencePaths.forEach(refPath => {
+                        if (t.isJSXIdentifier(refPath.node)) {
+                            refPath.node.name = newName;
+                        }
+                    });
+                }
+            }
+            path.node.source = t.stringLiteral(newImportSource);
+            path.node.specifiers = [t.importDefaultSpecifier(t.identifier(newLocalName))];
+        }
+    });
     let hasMacros = false;
     let usedLightDark = false;
     elements.forEach(([elementName, path]) => {
@@ -234,26 +416,37 @@ function transformer(file, api, options) {
         macroImport.assertions = [t.importAttribute(t.identifier('type'), t.stringLiteral('macro'))];
         lastImportPath.insertAfter(macroImport);
     }
-    if (importedComponents.size) {
+    if (importedComponents.size || S2ComponentsToImport.size) {
         // Add imports to existing @react-spectrum/s2 import if it exists, otherwise add a new one.
         let importSpecifiers = new Set([...importedComponents]
             .filter(([c]) => c !== 'Flex' && c !== 'Grid' && c !== 'View' && c !== 'Item' && c !== 'Section' && c !== 'ActionGroup')
             .map(([, specifier]) => specifier));
+        for (let s2Name of S2ComponentsToImport) {
+            importSpecifiers.add(t.importSpecifier(t.identifier(s2Name), t.identifier(s2Name)));
+        }
         let existingImport = root.find(j.ImportDeclaration, {
             source: { value: '@react-spectrum/s2' }
         });
         if (existingImport.length) {
             let importDecl = existingImport.get();
-            for (let specifier of importDecl.node.specifiers) {
-                if (specifier.type === 'ImportSpecifier'
-                    && importedComponents.has(specifier.imported.name)) {
-                    importSpecifiers.add(specifier);
-                }
-            }
+            let existingSpecifiers = importDecl.value.specifiers;
             // add importSpecifiers to existing import
             importDecl.value.specifiers = [...importDecl.value.specifiers, ...[...importSpecifiers].filter(specifier => {
-                    // @ts-ignore
-                    return specifier.imported.name !== 'Item' && ![...importDecl.value.specifiers].find(s => s.imported.name === specifier.imported.name);
+                    if (t.isImportSpecifier(specifier) && t.isIdentifier(specifier.imported)) {
+                        if (specifier.imported.name === 'Item') {
+                            return false;
+                        }
+                        let importedName = specifier.imported.name;
+                        let localName = specifier.local?.name || importedName;
+                        return !existingSpecifiers.find((s) => t.isImportSpecifier(s)
+                            && t.isIdentifier(s.imported)
+                            && s.imported.name === importedName
+                            && (s.local?.name || s.imported.name) === localName);
+                    }
+                    if (t.isImportNamespaceSpecifier(specifier)) {
+                        return !existingSpecifiers.find((s) => t.isImportNamespaceSpecifier(s) && s.local.name === specifier.local.name);
+                    }
+                    return false;
                 })];
         }
         else {
@@ -281,6 +474,9 @@ function transformer(file, api, options) {
             }
         });
     }
+    if (programPath) {
+        (0, utils_1.removeUnusedImports)(programPath, ['@react-spectrum/s2']);
+    }
     root.find(j.Program).get('body', 0).node.comments = leadingComments;
     return root.toSource().replace(/assert\s*\{\s*type:\s*"macro"\s*\}/g, 'with { type: "macro" }');
 }

package/dist/s1-to-s2/src/codemods/components/ActionGroup/transform.js

@@ -51,6 +51,7 @@ let availableComponents = (0, getComponents_1.getComponents)();
  * - Convert dynamic collections render function to items.map.
  */
 function transformActionGroup(path) {
+    let program = path.findParent((p) => t.isProgram(p.node));
     // Comment out overflowMode
     (0, transforms_1.commentOutProp)(path, { propName: 'overflowMode' });
     // Comment out buttonLabelBehavior
@@ -73,12 +74,10 @@ function transformActionGroup(path) {
     }
     let localName = newComponentName;
     if (availableComponents.has(newComponentName)) {
-        let program = path.findParent((p) => t.isProgram(p.node));
         localName = (0, utils_1.addComponentImport)(program, newComponentName);
     }
     let localChildName = childComponentName;
     if (availableComponents.has(childComponentName)) {
-        let program = path.findParent((p) => t.isProgram(p.node));
         localChildName = (0, utils_1.addComponentImport)(program, childComponentName);
     }
     // Convert dynamic collection to an array.map.
@@ -161,4 +160,5 @@ function transformActionGroup(path) {
     if (path.node.closingElement) {
         path.node.closingElement.name = t.jsxIdentifier(localName);
     }
+    (0, utils_1.removeComponentImportIfUnused)(program, 'Item');
 }

package/dist/s1-to-s2/src/codemods/components/ActionMenu/transform.js

@@ -4,12 +4,12 @@ exports.default = transformActionMenu;
 const transforms_1 = require("../../shared/transforms");
 /**
  * Transforms ActionMenu:
- * - Comment out closeOnSelect (it has not been implemented yet).
+ * - Rename `closeOnSelect` to `shouldCloseOnSelect`.
  * - Comment out trigger (it has not been implemented yet).
  */
 function transformActionMenu(path) {
-    // Comment out closeOnSelect
-    (0, transforms_1.commentOutProp)(path, { propName: 'closeOnSelect' });
+    // Rename `closeOnSelect` to `shouldCloseOnSelect`
+    (0, transforms_1.updatePropName)(path, { oldPropName: 'closeOnSelect', newPropName: 'shouldCloseOnSelect' });
     // Comment out trigger
     (0, transforms_1.commentOutProp)(path, { propName: 'trigger' });
 }

package/dist/s1-to-s2/src/codemods/components/ContextualHelpTrigger/transform.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformContextualHelpTrigger;
+const utils_1 = require("../../shared/utils");
+const getComponents_1 = require("../../../getComponents");
+const t = __importStar(require("@babel/types"));
+let availableComponents = (0, getComponents_1.getComponents)();
+/**
+ * Transforms ContextualHelpTrigger:
+ * - Rename ContextualHelpTrigger to UnavailableMenuItemTrigger.
+ * - Replace the old Dialog with ContextualHelpPopover.
+ */
+function transformContextualHelpTrigger(path) {
+    let program = path.findParent((p) => t.isProgram(p.node));
+    let localName = (0, utils_1.addComponentImport)(program, 'UnavailableMenuItemTrigger');
+    // replace ContextualHelpTrigger with UnavailableMenuItemTrigger
+    path.node.openingElement.name = t.jsxIdentifier(localName);
+    if (path.node.closingElement) {
+        path.node.closingElement.name = t.jsxIdentifier(localName);
+    }
+    // replace Dialog with ContextualHelpPopover
+    let dialog = path.node.children.filter((c) => t.isJSXElement(c))[1];
+    if (dialog && t.isJSXIdentifier(dialog.openingElement.name)) {
+        let name = (0, utils_1.getName)(path, dialog.openingElement.name);
+        if (name === 'Dialog') {
+            let contextualHelpPopover = availableComponents.has('ContextualHelpPopover')
+                ? (0, utils_1.addComponentImport)(program, 'ContextualHelpPopover')
+                : 'ContextualHelpPopover';
+            dialog.openingElement.name = t.jsxIdentifier(contextualHelpPopover);
+            if (dialog.closingElement) {
+                dialog.closingElement.name = t.jsxIdentifier(contextualHelpPopover);
+            }
+        }
+    }
+    (0, utils_1.removeComponentImportIfUnused)(program, 'Dialog');
+}

package/dist/s1-to-s2/src/codemods/components/DialogTrigger/transform.js

@@ -49,6 +49,7 @@ let availableComponents = (0, getComponents_1.getComponents)();
  * - When `type="fullscreenTakeover"`, replaces Dialog with `<FullscreenDialog variant="fullscreenTakeover">`.
  */
 function updateDialogChild(path) {
+    let program = path.findParent((p) => t.isProgram(p.node));
     let typePath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'type');
     let type = typePath?.node.value?.type === 'StringLiteral' ? typePath.node.value?.value : 'modal';
     let newComponentName = 'Dialog';
@@ -72,7 +73,6 @@ function updateDialogChild(path) {
     typePath?.remove();
     let localName = newComponentName;
     if (newComponentName !== 'Dialog' && availableComponents.has(newComponentName)) {
-        let program = path.findParent((p) => t.isProgram(p.node));
         localName = (0, utils_1.addComponentImport)(program, newComponentName);
     }
     path.traverse({
@@ -87,6 +87,20 @@ function updateDialogChild(path) {
             dialog.node.openingElement.attributes.push(...props);
         }
     });
+    path.traverse({
+        JSXElement(childPath) {
+            if (t.isJSXIdentifier(childPath.node.openingElement.name)
+                && (0, utils_1.getName)(childPath, childPath.node.openingElement.name) === 'Divider'
+                && t.isJSXElement(childPath.parentPath.node)
+                && t.isJSXIdentifier(childPath.parentPath.node.openingElement.name)) {
+                let parentName = (0, utils_1.getName)(childPath, childPath.parentPath.node.openingElement.name);
+                if (parentName === 'Dialog' || parentName === 'Popover' || parentName === 'FullscreenDialog') {
+                    childPath.remove();
+                }
+            }
+        }
+    });
+    (0, utils_1.removeComponentImportIfUnused)(program, 'Divider');
 }
 /**
  * Transforms DialogTrigger:

package/dist/s1-to-s2/src/codemods/components/Item/transform.js

@@ -10,16 +10,19 @@ const transforms_1 = require("../../shared/transforms");
  * - If within Breadcrumbs: Update Item to be a Breadcrumb.
  * - If within Picker: Update Item to be a PickerItem.
  * - If within ComboBox: Update Item to be a ComboBoxItem.
+ * - If within ListView: Update Item to be a ListViewItem.
  * - Update key to id (and keep key if rendered inside array.map).
  */
 function transformItem(path) {
     // Update Items based on parent collection component
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Menu', newComponentName: 'MenuItem' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ActionMenu', newComponentName: 'MenuItem' });
+    (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ContextualHelpTrigger', newComponentName: 'MenuItem' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'TagGroup', newComponentName: 'Tag' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Breadcrumbs', newComponentName: 'Breadcrumb' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Picker', newComponentName: 'PickerItem' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ComboBox', newComponentName: 'ComboBoxItem' });
+    (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ListView', newComponentName: 'ListViewItem' });
     // Comment if parent collection not detected
     (0, transforms_1.commentIfParentCollectionNotDetected)(path);
 }

package/dist/s1-to-s2/src/codemods/components/ListView/transform.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformListView;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms ListView:
+ * - Comment out density (it has not been implemented yet).
+ * - Comment out dragAndDropHooks (it has not been implemented yet).
+ */
+function transformListView(path) {
+    (0, transforms_1.commentOutProp)(path, { propName: 'density' });
+    (0, transforms_1.commentOutProp)(path, { propName: 'dragAndDropHooks' });
+}

package/dist/s1-to-s2/src/codemods/components/MenuTrigger/transform.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformMenuTrigger;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms MenuTrigger:
+ * - Rename `closeOnSelect` to `shouldCloseOnSelect` and move it to the child `Menu`.
+ */
+function transformMenuTrigger(path) {
+    (0, transforms_1.updatePropName)(path, { oldPropName: 'closeOnSelect', newPropName: 'shouldCloseOnSelect' });
+    (0, transforms_1.movePropToChildComponent)(path, {
+        parentComponentName: 'MenuTrigger',
+        childComponentName: 'Menu',
+        propName: 'shouldCloseOnSelect'
+    });
+}

package/dist/s1-to-s2/src/codemods/components/Picker/transform.js

@@ -9,6 +9,9 @@ const transforms_1 = require("../../shared/transforms");
  * - Change validationState="invalid" to isInvalid.
  * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
  * - Replace isLoading with loadingState.
+ * - Rename onSelectionChange to onChange.
+ * - Rename selectedKey to value.
+ * - Rename defaultSelectedKey to defaultValue.
  */
 function transformPicker(path) {
     // Change menuWidth value from a DimensionValue to a pixel value
@@ -30,4 +33,19 @@ function transformPicker(path) {
         newPropName: 'loadingState',
         comment: 'Replace boolean passed to isLoading with appropriate loadingState.'
     });
+    // Rename onSelectionChange to onChange
+    (0, transforms_1.updatePropName)(path, {
+        oldPropName: 'onSelectionChange',
+        newPropName: 'onChange'
+    });
+    // Rename selectedKey to value
+    (0, transforms_1.updatePropName)(path, {
+        oldPropName: 'selectedKey',
+        newPropName: 'value'
+    });
+    // Rename defaultSelectedKey to defaultValue
+    (0, transforms_1.updatePropName)(path, {
+        oldPropName: 'defaultSelectedKey',
+        newPropName: 'defaultValue'
+    });
 }

package/dist/s1-to-s2/src/codemods/components/Tabs/transform.js

@@ -38,11 +38,12 @@ const utils_1 = require("../../shared/utils");
 const transforms_1 = require("../../shared/transforms");
 const t = __importStar(require("@babel/types"));
 function transformTabList(tabListPath) {
-    tabListPath.get('children').forEach(itemPath => {
-        if (t.isJSXElement(itemPath.node) &&
-            t.isJSXIdentifier(itemPath.node.openingElement.name) &&
-            (0, utils_1.getName)(itemPath, itemPath.node.openingElement.name) === 'Item') {
-            (0, transforms_1.updateComponentWithinCollection)(itemPath, { parentComponentName: 'TabList', newComponentName: 'Tab' });
+    tabListPath.traverse({
+        JSXElement(itemPath) {
+            if (t.isJSXIdentifier(itemPath.node.openingElement.name) &&
+                (0, utils_1.getName)(itemPath, itemPath.node.openingElement.name) === 'Item') {
+                (0, transforms_1.updateComponentWithinCollection)(itemPath, { parentComponentName: 'TabList', newComponentName: 'Tab' });
+            }
         }
     });
     return tabListPath.node;
@@ -113,4 +114,5 @@ function transformTabs(path) {
     (0, transforms_1.removeProp)(path, { propName: 'isEmphasized' });
     // Remove isQuiet
     (0, transforms_1.removeProp)(path, { propName: 'isQuiet' });
+    (0, utils_1.removeComponentImportIfUnused)(program, 'Item');
 }

package/dist/s1-to-s2/src/codemods/illustrations/illustrationMap.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.illustrationMap = void 0;
+exports.illustrationMap = new Map([
+    ['Error', 'Error'],
+    ['File', 'Document'],
+    ['Folder', 'FolderClose'],
+    ['NoSearchResults', 'NoSearchResults'],
+    ['NotFound', 'NoSearchResults'],
+    ['Timeout', 'Clock'],
+    ['Unauthorized', 'LockClose'],
+    ['Unavailable', 'Error'],
+    ['Upload', 'Upload']
+]);