@react-spectrum/codemods 1.2.1 → 1.2.3

package/dist/s1-to-s2/src/codemods/shared/dimensions.js

@@ -98,39 +98,11 @@ const dimensions = {
     'single-line-width': 192 // size-2400
 };
 const spacingValues = [
-    0,
-    4,
-    8,
-    12,
-    16,
-    20,
-    24,
-    28,
-    32,
-    36,
-    40,
-    44,
-    48,
-    56,
-    64,
-    80,
-    96,
-    112,
-    128,
-    144,
-    160,
-    176,
-    192,
-    208,
-    224,
-    240,
-    256,
-    288,
-    320,
-    384
+    0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 80, 96, 112, 128, 144, 160, 176, 192,
+    208, 224, 240, 256, 288, 320, 384
 ];
 const sizing = {
-    'auto': 'auto',
+    auto: 'auto',
     '100vh': 'screen',
     'min-content': 'min',
     'max-content': 'max',
@@ -180,7 +152,8 @@ function convertDimension(value, type) {
     return `[${pixelValue}px]`;
 }
 function convertGridTrack(value, toPixels = false) {
-    if (typeof value === 'string' && /^max-content|min-content|minmax|auto|fit-content|repeat|\d+fr/.test(value)) {
+    if (typeof value === 'string' &&
+        /^max-content|min-content|minmax|auto|fit-content|repeat|\d+fr/.test(value)) {
         return value;
     }
     else {

package/dist/s1-to-s2/src/codemods/shared/styleProps.js

@@ -158,7 +158,9 @@ function getStylePropValue(prop, value, element, colorVersion, condition = '') {
             // return [mappedProp, customProp, [[customProp, value]]];
             return null;
         case 'flex':
-            if (value.type === 'BooleanLiteral' || value.type === 'StringLiteral' || value.type === 'NumericLiteral') {
+            if (value.type === 'BooleanLiteral' ||
+                value.type === 'StringLiteral' ||
+                value.type === 'NumericLiteral') {
                 let val = value.value;
                 if (val === true) {
                     val = 1;
@@ -257,16 +259,24 @@ function getStylePropValue(prop, value, element, colorVersion, condition = '') {
             break;
         case 'areas':
             if (element === 'Grid') {
-                if (value.type === 'ArrayExpression' && value.elements.every(e => e?.type === 'StringLiteral')) {
+                if (value.type === 'ArrayExpression' &&
+                    value.elements.every(e => e?.type === 'StringLiteral')) {
                     return {
-                        macroValues: [{ key: mappedProp, value: value.elements.map(e => e?.type === 'StringLiteral' && e.value) }]
+                        macroValues: [
+                            {
+                                key: mappedProp,
+                                value: value.elements.map(e => e?.type === 'StringLiteral' && e.value)
+                            }
+                        ]
                     };
                 }
                 else if (value.type === 'ObjectExpression') {
                     return getResponsiveValue(prop, value, element, colorVersion);
                 }
                 else {
-                    let val = t.callExpression(t.memberExpression(t.callExpression(t.memberExpression(value, t.identifier('map')), [t.arrowFunctionExpression([t.identifier('v')], t.templateLiteral([t.templateElement({ raw: '"' }, false), t.templateElement({ raw: '"' }, true)], [t.identifier('v')]))]), t.identifier('join')), [t.stringLiteral('')]);
+                    let val = t.callExpression(t.memberExpression(t.callExpression(t.memberExpression(value, t.identifier('map')), [
+                        t.arrowFunctionExpression([t.identifier('v')], t.templateLiteral([t.templateElement({ raw: '"' }, false), t.templateElement({ raw: '"' }, true)], [t.identifier('v')]))
+                    ]), t.identifier('join')), [t.stringLiteral('')]);
                     return {
                         macroValues: [],
                         dynamicValues: [{ key: mappedProp, value: val }]
@@ -285,16 +295,20 @@ function getStylePropValue(prop, value, element, colorVersion, condition = '') {
                 else if (value.type === 'ArrayExpression') {
                     let values = [];
                     for (let element of value.elements) {
+                        // oxlint-disable-next-line max-depth
                         if (element?.type === 'StringLiteral' || element?.type === 'NumericLiteral') {
                             values.push((0, dimensions_1.convertGridTrack)(element.value));
                         }
                         else if (element?.type === 'CallExpression') {
                             // TODO: match to import using scope
+                            // oxlint-disable-next-line max-depth
                             if (element.callee.type === 'Identifier' &&
                                 element.callee.name === 'minmax' &&
                                 element.arguments.length === 2 &&
-                                (element.arguments[0].type === 'StringLiteral' || element.arguments[0].type === 'NumericLiteral') &&
-                                (element.arguments[1].type === 'StringLiteral' || element.arguments[1].type === 'NumericLiteral')) {
+                                (element.arguments[0].type === 'StringLiteral' ||
+                                    element.arguments[0].type === 'NumericLiteral') &&
+                                (element.arguments[1].type === 'StringLiteral' ||
+                                    element.arguments[1].type === 'NumericLiteral')) {
                                 // TODO: use theme value somehow?
                                 let min = (0, dimensions_1.convertGridTrack)(element.arguments[0].value, true);
                                 let max = (0, dimensions_1.convertGridTrack)(element.arguments[1].value, true);
@@ -348,6 +362,7 @@ function getStylePropValue(prop, value, element, colorVersion, condition = '') {
                     if (prop === 'padding' && value.type === 'StringLiteral' && /\s/.test(value.value)) {
                         // Check if it has multiple whitespace-separated values
                         let expansions = expandSpaceShorthand(prop, value.value, dimensions_1.convertDimension);
+                        // oxlint-disable-next-line max-depth
                         if (!expansions) {
                             return null;
                         }
@@ -481,12 +496,15 @@ function getResponsiveValue(prop, value, element, colorVersion) {
     let res = {};
     let custom = [];
     for (let property of value.properties) {
-        if (property.type === 'ObjectProperty' && property.key.type === 'Identifier' && property.key.name in breakpoints) {
+        if (property.type === 'ObjectProperty' &&
+            property.key.type === 'Identifier' &&
+            property.key.name in breakpoints) {
             let propertyValue = (0, utils_1.getPropValue)(property.value);
             if (propertyValue && propertyValue.type !== 'ObjectExpression') {
                 let val = getStylePropValue(prop, propertyValue, element, colorVersion, property.key.name);
                 if (val && val.macroValues) {
-                    res[breakpoints[property.key.name]] = val.macroValues[0].value;
+                    res[breakpoints[property.key.name]] =
+                        val.macroValues[0].value;
                 }
                 if (val && val.dynamicValues) {
                     custom.push(...val.dynamicValues);
@@ -498,10 +516,12 @@ function getResponsiveValue(prop, value, element, colorVersion) {
         return null;
     }
     return {
-        macroValues: [{
+        macroValues: [
+            {
                 key: prop,
                 value: res
-            }],
+            }
+        ],
         dynamicValues: custom
     };
 }
@@ -596,9 +616,9 @@ function expandSpaceShorthand(prop, rawValue, convertFn) {
     }
 }
 function transformStyleProps(path, element) {
-    let macroValues = new Map;
-    let dynamicValues = new Map;
-    let conditions = new Map;
+    let macroValues = new Map();
+    let dynamicValues = new Map();
+    let conditions = new Map();
     let isDOMElement = element === 'Flex' || element === 'Grid' || element === 'View' || element === 'Well';
     if (element === 'Flex') {
         macroValues.set('display', 'flex');
@@ -650,11 +670,13 @@ function transformStyleProps(path, element) {
                     macroValues.set(val.key, val.value);
                 }
                 if (value.dynamicValues) {
+                    // oxlint-disable-next-line max-depth
                     for (let val of value.dynamicValues) {
                         dynamicValues.set(val.key, val.value);
                     }
                 }
                 if (value.conditions) {
+                    // oxlint-disable-next-line max-depth
                     for (let val of value.conditions) {
                         conditions.set(val.key, val.value);
                     }
@@ -688,9 +710,15 @@ function transformStyleProps(path, element) {
                 return t.arrayExpression(v.map(v => valueToAST(v)));
             }
             else if (typeof v === 'object') {
-                if ('default' in v && typeof v.default === 'string' && 'dark' in v && typeof v.dark === 'string') {
+                if ('default' in v &&
+                    typeof v.default === 'string' &&
+                    'dark' in v &&
+                    typeof v.dark === 'string') {
                     usedLightDark = true;
-                    return t.callExpression(t.identifier('lightDark'), [t.stringLiteral(v.default), t.stringLiteral(v.dark)]);
+                    return t.callExpression(t.identifier('lightDark'), [
+                        t.stringLiteral(v.default),
+                        t.stringLiteral(v.dark)
+                    ]);
                 }
                 return t.objectExpression(Object.entries(v).map(([k, v]) => t.objectProperty(t.identifier(k), valueToAST(v))));
             }
@@ -712,17 +740,25 @@ function transformStyleProps(path, element) {
             }))
         ]);
         if (conditions.size) {
-            macroCall = t.callExpression(macroCall, [t.objectExpression([...conditions].map(([k, v]) => t.objectProperty(t.identifier(k), v, false, v.type === 'Identifier' && v.name === k)))]);
+            macroCall = t.callExpression(macroCall, [
+                t.objectExpression([...conditions].map(([k, v]) => t.objectProperty(t.identifier(k), v, false, v.type === 'Identifier' && v.name === k)))
+            ]);
         }
         if (classNameAttribute?.isJSXAttribute()) {
-            classNameAttribute.get('value').replaceWith(t.jsxExpressionContainer(t.binaryExpression('+', (0, utils_1.getPropValue)(classNameAttribute.node.value), macroCall)));
+            classNameAttribute
+                .get('value')
+                .replaceWith(t.jsxExpressionContainer(t.binaryExpression('+', (0, utils_1.getPropValue)(classNameAttribute.node.value), macroCall)));
         }
         else {
-            path.get('openingElement').pushContainer('attributes', t.jsxAttribute(t.jsxIdentifier(isDOMElement ? 'className' : 'styles'), t.jsxExpressionContainer(macroCall)));
+            path
+                .get('openingElement')
+                .pushContainer('attributes', t.jsxAttribute(t.jsxIdentifier(isDOMElement ? 'className' : 'styles'), t.jsxExpressionContainer(macroCall)));
         }
     }
     if (dynamicValues.size) {
-        path.get('openingElement').pushContainer('attributes', t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.objectExpression([...dynamicValues].map(([key, value]) => t.objectProperty(key.startsWith('--') ? t.stringLiteral(key) : t.identifier(key), value))))));
+        path
+            .get('openingElement')
+            .pushContainer('attributes', t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.objectExpression([...dynamicValues].map(([key, value]) => t.objectProperty(key.startsWith('--') ? t.stringLiteral(key) : t.identifier(key), value))))));
     }
     return { hasMacros, usedLightDark };
 }

package/dist/s1-to-s2/src/codemods/shared/transforms.js

@@ -65,10 +65,12 @@ let availableComponents = (0, getComponents_1.getComponents)();
  */
 function updatePropNameAndValue(path, options) {
     const { oldPropName, oldPropValue, newPropName, newPropValue } = options;
-    let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === oldPropName);
+    let attrPath = path
+        .get('openingElement')
+        .get('attributes')
+        .find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === oldPropName);
     if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === oldPropName) {
-        if (t.isStringLiteral(attrPath.node.value) &&
-            attrPath.node.value.value === oldPropValue) {
+        if (t.isStringLiteral(attrPath.node.value) && attrPath.node.value.value === oldPropValue) {
             // Update old prop name to new prop name
             attrPath.node.name.name = newPropName;
             // If prop value is a string and matches the old value, replace it with the new value
@@ -86,8 +88,11 @@ function updatePropNameAndValue(path, options) {
         }
         else if (t.isJSXExpressionContainer(attrPath.node.value)) {
             if (t.isIdentifier(attrPath.node.value.expression)) {
+                if (
                 // @ts-ignore
-                if (attrPath.node.comments && [...attrPath.node.comments].some((comment) => comment.value.includes('could not be automatically'))) {
+                attrPath.node.comments &&
+                    // @ts-ignore
+                    [...attrPath.node.comments].some(comment => comment.value.includes('could not be automatically'))) {
                     return;
                 }
                 (0, utils_1.addComment)(attrPath.node, ` TODO(S2-upgrade): Prop ${oldPropName} could not be automatically updated because ${attrPath.node.value.expression.name} could not be followed.`);
@@ -96,8 +101,7 @@ function updatePropNameAndValue(path, options) {
                 // If prop value is an expression, traverse to find a string literal that matches the old and replace it with the new value
                 attrPath.traverse({
                     StringLiteral(stringPath) {
-                        if (t.isStringLiteral(stringPath.node) &&
-                            stringPath.node.value === oldPropValue) {
+                        if (t.isStringLiteral(stringPath.node) && stringPath.node.value === oldPropValue) {
                             // Update old prop name to new prop name
                             attrPath.node.name.name = newPropName;
                             if (typeof newPropValue === 'string') {
@@ -126,8 +130,13 @@ function updatePropNameAndValue(path, options) {
  */
 function updatePropValueAndAddNewPropName(path, options) {
     const { oldPropName, oldPropValue, newPropName, newPropValue, additionalPropName, additionalPropValue } = options;
-    let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === oldPropName);
-    if (attrPath && t.isStringLiteral(attrPath.node.value) && attrPath.node.value.value === oldPropValue) {
+    let attrPath = path
+        .get('openingElement')
+        .get('attributes')
+        .find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === oldPropName);
+    if (attrPath &&
+        t.isStringLiteral(attrPath.node.value) &&
+        attrPath.node.value.value === oldPropValue) {
         // Update old prop name to new prop name
         attrPath.node.name.name = newPropName;
         // If prop value is a string and matches the old value, replace it with the new value
@@ -145,8 +154,7 @@ function updatePropValueAndAddNewPropName(path, options) {
         // If prop value is an expression, traverse to find a string literal that matches the old and replace it with the new value
         attrPath.traverse({
             StringLiteral(stringPath) {
-                if (t.isStringLiteral(stringPath.node) &&
-                    stringPath.node.value === oldPropValue) {
+                if (t.isStringLiteral(stringPath.node) && stringPath.node.value === oldPropValue) {
                     // Update old prop name to new prop name
                     attrPath.node.name.name = newPropName;
                     if (typeof newPropValue === 'string') {
@@ -171,7 +179,10 @@ function updatePropValueAndAddNewPropName(path, options) {
  */
 function updatePropName(path, options) {
     const { oldPropName, newPropName, comment } = options;
-    let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === oldPropName);
+    let attrPath = path
+        .get('openingElement')
+        .get('attributes')
+        .find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === oldPropName);
     if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === oldPropName) {
         attrPath.node.name.name = newPropName;
         if (comment) {
@@ -187,7 +198,10 @@ function updatePropName(path, options) {
  */
 function removeProp(path, options) {
     const { propName, propValue } = options;
-    let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propName);
+    let attrPath = path
+        .get('openingElement')
+        .get('attributes')
+        .find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === propName);
     if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propName) {
         if (propValue) {
             // If prop value is provided, remove prop only if it matches the value
@@ -196,9 +210,12 @@ function removeProp(path, options) {
             }
             else if (t.isJSXExpressionContainer(attrPath.node.value)) {
                 if (t.isIdentifier(attrPath.node.value.expression)) {
-                    // @ts-ignore
                     // eslint-disable-next-line max-depth
-                    if (attrPath.node.comments && [...attrPath.node.comments].some((comment) => comment.value.includes('could not be automatically'))) {
+                    if (
+                    // @ts-ignore
+                    attrPath.node.comments &&
+                        // @ts-ignore
+                        [...attrPath.node.comments].some(comment => comment.value.includes('could not be automatically'))) {
                         return;
                     }
                     (0, utils_1.addComment)(attrPath.node, ` TODO(S2-upgrade): Prop ${propName} could not be automatically removed because ${attrPath.node.value.expression.name} could not be followed.`);
@@ -206,8 +223,7 @@ function removeProp(path, options) {
                 else {
                     attrPath.traverse({
                         StringLiteral(stringPath) {
-                            if (t.isStringLiteral(stringPath.node) &&
-                                stringPath.node.value === propValue) {
+                            if (t.isStringLiteral(stringPath.node) && stringPath.node.value === propValue) {
                                 // Invalid prop value was found inside expression.
                                 (0, utils_1.addComment)(attrPath.node, ` TODO(S2-upgrade): ${propName}="${propValue}" is no longer supported. You'll need to update this manually.`);
                             }
@@ -230,7 +246,10 @@ function removeProp(path, options) {
  */
 function commentOutProp(path, options) {
     const { propName, propValue } = options;
-    let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propName);
+    let attrPath = path
+        .get('openingElement')
+        .get('attributes')
+        .find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === propName);
     if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propName) {
         if (propValue) {
             // If prop value is provided, comment out prop only if it matches the value
@@ -241,8 +260,7 @@ function commentOutProp(path, options) {
             else {
                 attrPath.traverse({
                     StringLiteral(stringPath) {
-                        if (t.isStringLiteral(stringPath.node) &&
-                            stringPath.node.value === propValue) {
+                        if (t.isStringLiteral(stringPath.node) && stringPath.node.value === propValue) {
                             (0, utils_1.addComment)(attrPath.parentPath.node, ` TODO(S2-upgrade): ${propName}="${propValue}" has not been implemented yet.`);
                             attrPath.remove();
                         }
@@ -274,13 +292,16 @@ function addCommentToElement(path, options) {
  */
 function updateComponentIfPropPresent(path, options) {
     const { newComponentName, propName } = options;
-    let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propName);
+    let attrPath = path
+        .get('openingElement')
+        .get('attributes')
+        .find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === propName);
     if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propName) {
-        let node = attrPath.findParent((p) => t.isJSXElement(p.node))?.node;
+        let node = attrPath.findParent(p => t.isJSXElement(p.node))?.node;
         if (node && t.isJSXElement(node)) {
             let localName = newComponentName;
             if (availableComponents.has(newComponentName)) {
-                let program = path.findParent((p) => t.isProgram(p.node));
+                let program = path.findParent(p => t.isProgram(p.node));
                 localName = (0, utils_1.addComponentImport)(program, newComponentName);
             }
             node.openingElement.name = t.jsxIdentifier(localName);
@@ -293,12 +314,12 @@ function updateComponentIfPropPresent(path, options) {
 /**
  * Remove render props, and move usage to a child component.
  *
- * Example:
- * - DialogTrigger: Update children to remove render props usage, and note that `close` export function moved from `DialogTrigger` to `Dialog`.
+ * Example: - DialogTrigger: Update children to remove render props usage, and note that `close`
+ * export function moved from `DialogTrigger` to `Dialog`.
  */
 function moveRenderPropsToChild(path, options) {
     const { newChildComponentName } = options;
-    const renderFunctionIndex = path.node.children.findIndex((child) => t.isJSXExpressionContainer(child) &&
+    const renderFunctionIndex = path.node.children.findIndex(child => t.isJSXExpressionContainer(child) &&
         t.isArrowFunctionExpression(child.expression) &&
         t.isJSXElement(child.expression.body) &&
         t.isJSXIdentifier(child.expression.body.openingElement.name));
@@ -317,7 +338,7 @@ function moveRenderPropsToChild(path, options) {
         const dialogElement = renderFunction.expression.body;
         const originalParam = renderFunction.expression.params[0];
         if (!t.isIdentifier(originalParam)) {
-            (0, utils_1.addComment)(path.node.children[renderFunctionIndex], ' TODO(S2-upgrade): Could not automatically move the render props. You\'ll need to update this manually.');
+            (0, utils_1.addComment)(path.node.children[renderFunctionIndex], " TODO(S2-upgrade): Could not automatically move the render props. You'll need to update this manually.");
             return;
         }
         const paramName = originalParam.name;
@@ -326,7 +347,7 @@ function moveRenderPropsToChild(path, options) {
         ]);
         const newRenderFunction = t.jsxExpressionContainer(t.arrowFunctionExpression([objectPattern], t.jsxFragment(t.jsxOpeningFragment(), t.jsxClosingFragment(), dialogElement.children)));
         let removedOnDismiss = false;
-        const attributes = dialogElement.openingElement.attributes.filter((attr) => {
+        const attributes = dialogElement.openingElement.attributes.filter(attr => {
             if (t.isJSXAttribute(attr) && attr.name.name === 'onDismiss') {
                 removedOnDismiss = true;
                 return false;
@@ -349,11 +370,23 @@ function updateComponentWithinCollection(path, options) {
     const { parentComponentName, newComponentName } = options;
     // Collections currently implemented.
     // TODO: Add 'ActionGroup', 'ListBox' once implemented
-    const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'ListView', 'TabList', 'TabPanels', 'Collection', 'ContextualHelpTrigger']);
-    if (t.isJSXElement(path.node) &&
-        t.isJSXIdentifier(path.node.openingElement.name)) {
+    const collectionItemParents = new Set([
+        'Menu',
+        'ActionMenu',
+        'TagGroup',
+        'Breadcrumbs',
+        'Picker',
+        'ComboBox',
+        'ListBox',
+        'ListView',
+        'TabList',
+        'TabPanels',
+        'Collection',
+        'ContextualHelpTrigger'
+    ]);
+    if (t.isJSXElement(path.node) && t.isJSXIdentifier(path.node.openingElement.name)) {
         // Find closest parent collection component
-        let closestParentCollection = path.findParent((p) => t.isJSXElement(p.node) &&
+        let closestParentCollection = path.findParent(p => t.isJSXElement(p.node) &&
             t.isJSXIdentifier(p.node.openingElement.name) &&
             collectionItemParents.has((0, utils_1.getName)(path, p.node.openingElement.name)));
         if (closestParentCollection &&
@@ -364,7 +397,7 @@ function updateComponentWithinCollection(path, options) {
             updateKeyToId(path);
             let localName = newComponentName;
             if (availableComponents.has(newComponentName)) {
-                let program = path.findParent((p) => t.isProgram(p.node));
+                let program = path.findParent(p => t.isProgram(p.node));
                 localName = (0, utils_1.addComponentImport)(program, newComponentName);
             }
             let newNode = t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier(localName), path.node.openingElement.attributes), t.jsxClosingElement(t.jsxIdentifier(localName)), path.node.children);
@@ -378,23 +411,44 @@ function updateComponentWithinCollection(path, options) {
  * Example: If they're declaring declaring Items somewhere above the collection.
  */
 function commentIfParentCollectionNotDetected(path) {
-    const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'TabList', 'TabPanels', 'ActionGroup', 'ActionButtonGroup', 'ToggleButtonGroup', 'ListBox', 'ListView', 'Collection', 'SearchAutocomplete', 'Accordion', 'ActionBar', 'StepList', 'ContextualHelpTrigger']);
+    const collectionItemParents = new Set([
+        'Menu',
+        'ActionMenu',
+        'TagGroup',
+        'Breadcrumbs',
+        'Picker',
+        'ComboBox',
+        'ListBox',
+        'TabList',
+        'TabPanels',
+        'ActionGroup',
+        'ActionButtonGroup',
+        'ToggleButtonGroup',
+        'ListBox',
+        'ListView',
+        'Collection',
+        'SearchAutocomplete',
+        'Accordion',
+        'ActionBar',
+        'StepList',
+        'ContextualHelpTrigger'
+    ]);
     if (t.isJSXElement(path.node)) {
         // Find closest parent collection component
-        let closestParentCollection = path.findParent((p) => t.isJSXElement(p.node) &&
+        let closestParentCollection = path.findParent(p => t.isJSXElement(p.node) &&
             t.isJSXIdentifier(p.node.openingElement.name) &&
             collectionItemParents.has((0, utils_1.getName)(path, p.node.openingElement.name)));
         if (!closestParentCollection) {
             // If we couldn't find a parent collection parent, leave a comment for them to check manually
-            (0, utils_1.addComment)(path.node, ' TODO(S2-upgrade): Couldn\'t automatically detect what type of collection component this is rendered in. You\'ll need to update this manually.');
+            (0, utils_1.addComment)(path.node, " TODO(S2-upgrade): Couldn't automatically detect what type of collection component this is rendered in. You'll need to update this manually.");
         }
     }
 }
 /**
  * If within a component, moves prop to new child component.
  *
- * Example:
- * - Section: If within `Menu`, move `title` prop string to be a child of new `Heading` within a `Header`.
+ * Example: - Section: If within `Menu`, move `title` prop string to be a child of new `Heading`
+ * within a `Header`.
  */
 function movePropToNewChildComponentName(path, options) {
     const { parentComponentName, childComponentName, propName, newChildComponentName } = options;
@@ -406,17 +460,16 @@ function movePropToNewChildComponentName(path, options) {
         (0, utils_1.getName)(path, path.parentPath.node.openingElement.name) === parentComponentName) {
         let propValue;
         let localName = newChildComponentName;
-        path.node.openingElement.attributes =
-            path.node.openingElement.attributes.filter((attr) => {
-                if (t.isJSXAttribute(attr) && attr.name.name === propName) {
-                    propValue = attr.value;
-                    return false;
-                }
-                return true;
-            });
+        path.node.openingElement.attributes = path.node.openingElement.attributes.filter(attr => {
+            if (t.isJSXAttribute(attr) && attr.name.name === propName) {
+                propValue = attr.value;
+                return false;
+            }
+            return true;
+        });
         if (propValue) {
             if (availableComponents.has(newChildComponentName)) {
-                let program = path.findParent((p) => t.isProgram(p.node));
+                let program = path.findParent(p => t.isProgram(p.node));
                 localName = (0, utils_1.addComponentImport)(program, newChildComponentName);
             }
             path.node.children.unshift(t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier(localName), []), t.jsxClosingElement(t.jsxIdentifier(localName)), [t.isStringLiteral(propValue) ? t.jsxText(propValue.value) : propValue]));
@@ -463,7 +516,9 @@ function movePropToChildComponent(path, options) {
     if (!propAttr) {
         return;
     }
-    let childPath = path.get('children').find((child) => child.isJSXElement() &&
+    let childPath = path
+        .get('children')
+        .find(child => child.isJSXElement() &&
         t.isJSXIdentifier(child.node.openingElement.name) &&
         (0, utils_1.getName)(path, child.node.openingElement.name) === childComponentName);
     if (!childPath?.isJSXElement()) {
@@ -485,7 +540,7 @@ function updateToNewComponentName(path, options) {
     const { newComponentName } = options;
     let localName = newComponentName;
     if (availableComponents.has(newComponentName)) {
-        let program = path.findParent((p) => t.isProgram(p.node));
+        let program = path.findParent(p => t.isProgram(p.node));
         localName = (0, utils_1.addComponentImport)(program, newComponentName);
     }
     path.node.openingElement.name = t.jsxIdentifier(localName);
@@ -494,11 +549,11 @@ function updateToNewComponentName(path, options) {
     }
 }
 const conversions = {
-    'cm': 37.8,
-    'mm': 3.78,
-    'in': 96,
-    'pt': 1.33,
-    'pc': 16
+    cm: 37.8,
+    mm: 3.78,
+    in: 96,
+    pt: 1.33,
+    pc: 16
 };
 /**
  * Updates prop to use pixel value instead.
@@ -508,7 +563,10 @@ const conversions = {
  */
 function convertDimensionValueToPx(path, options) {
     const { propName } = options;
-    let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propName);
+    let attrPath = path
+        .get('openingElement')
+        .get('attributes')
+        .find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === propName);
     if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propName) {
         if (t.isStringLiteral(attrPath.node.value)) {
             try {
@@ -518,10 +576,10 @@ function convertDimensionValueToPx(path, options) {
                 }
                 else if (value && typeof value === 'string') {
                     // eslint-disable-next-line max-depth
-                    if ((/%|vw|vh|auto|ex|ch|rem|vmin|vmax/).test(value)) {
+                    if (/%|vw|vh|auto|ex|ch|rem|vmin|vmax/.test(value)) {
                         (0, utils_1.addComment)(attrPath.node, ' TODO(S2-upgrade): Unable to convert CSS unit to a pixel value');
                     }
-                    else if ((/cm|mm|in|pt|pc/).test(value)) {
+                    else if (/cm|mm|in|pt|pc/.test(value)) {
                         let unit = value.replace(/\[|\]|\d+/g, '');
                         let conversion = conversions[unit];
                         value = Number(value.replace(/\[|\]|cm|mm|in|pt|pc/g, ''));
@@ -531,7 +589,7 @@ function convertDimensionValueToPx(path, options) {
                             attrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(pixelValue));
                         }
                     }
-                    else if ((/px/).test(value)) {
+                    else if (/px/.test(value)) {
                         let pixelValue = Number(value.replace(/\[|\]|px/g, ''));
                         // eslint-disable-next-line max-depth
                         if (!isNaN(pixelValue)) {
@@ -577,13 +635,20 @@ function updatePlacementToSingleValue(path, options) {
         'end top',
         'end bottom'
     ]);
-    let elementPath = childComponentName ?
-        path.get('children').find((child) => t.isJSXElement(child.node) &&
+    let elementPath = childComponentName
+        ? path
+            .get('children')
+            .find(child => t.isJSXElement(child.node) &&
             t.isJSXIdentifier(child.node.openingElement.name) &&
-            (0, utils_1.getName)(path, child.node.openingElement.name) === childComponentName) : path;
-    let attrPath = elementPath.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propToUpdateName);
+            (0, utils_1.getName)(path, child.node.openingElement.name) === childComponentName)
+        : path;
+    let attrPath = elementPath
+        .get('openingElement')
+        .get('attributes')
+        .find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === propToUpdateName);
     if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propToUpdateName) {
-        if (t.isStringLiteral(attrPath.node.value) && doublePlacementValues.has(attrPath.node.value.value)) {
+        if (t.isStringLiteral(attrPath.node.value) &&
+            doublePlacementValues.has(attrPath.node.value.value)) {
             attrPath.replaceWith(t.jsxAttribute(t.jsxIdentifier(propToUpdateName), t.stringLiteral(attrPath.node.value.value.split(' ')[0])));
             return;
         }
@@ -621,9 +686,8 @@ function removeComponentIfWithinParent(path, options) {
  */
 function updateKeyToId(path) {
     let attributes = path.node.openingElement.attributes;
-    let keyProp = attributes.find((attr) => t.isJSXAttribute(attr) && attr.name.name === 'key');
-    if (keyProp &&
-        t.isJSXAttribute(keyProp)) {
+    let keyProp = attributes.find(attr => t.isJSXAttribute(attr) && attr.name.name === 'key');
+    if (keyProp && t.isJSXAttribute(keyProp)) {
         // Update key prop to be id
         keyProp.name = t.jsxIdentifier('id');
     }
@@ -634,8 +698,7 @@ function updateKeyToId(path) {
         path.parentPath.parentPath.node.callee.property.type === 'Identifier' &&
         path.parentPath.parentPath.node.callee.property.name === 'map') {
         // If Array.map is used, keep the key prop
-        if (keyProp &&
-            t.isJSXAttribute(keyProp)) {
+        if (keyProp && t.isJSXAttribute(keyProp)) {
             let newKeyProp = t.jsxAttribute(t.jsxIdentifier('key'), keyProp.value);
             attributes.push(newKeyProp);
         }