@carbon/upgrade 11.23.0 → 11.24.0

package/cli.js

@@ -52641,6 +52641,44 @@ var upgrades = [
           });
         }
       },
+      {
+        name: "enable-v12-overflowmenu",
+        description: `
+          Updates OverflowMenu components to v12 with optional FeatureFlags wrapping:
+          1. Migrates to new API (OverflowMenuItem -> MenuItem)
+          2. Updates props (itemText -> label, etc)
+          3. Optional FeatureFlags wrapping (--wrapWithFeatureFlag=false to disable)
+       
+          Example:
+          Before:  <OverflowMenu aria-label="menu"><OverflowMenuItem itemText="Option" /></OverflowMenu>
+          After:   <FeatureFlags enableV12Overflowmenu>
+                    <OverflowMenu label="menu"><MenuItem label="Option" /></OverflowMenu>
+                   </FeatureFlags>
+        `,
+        migrate: async (options) => {
+          const transform = import_path2.default.join(
+            TRANSFORM_DIR,
+            "enable-v12-overflowmenu.js"
+          );
+          const paths = Array.isArray(options.paths) && options.paths.length > 0 ? options.paths : await (0, import_fast_glob2.default)(["**/*.{js,jsx,ts,tsx}"], {
+            cwd: options.workspaceDir,
+            ignore: [
+              "**/es/**",
+              "**/lib/**",
+              "**/umd/**",
+              "**/node_modules/**",
+              "**/storybook-static/**"
+            ]
+          });
+          await run2({
+            dry: !options.write,
+            transform,
+            paths,
+            verbose: options.verbose,
+            wrapWithFeatureFlag: options.wrapWithFeatureFlag
+          });
+        }
+      },
       {
         name: "slug-prop-to-decorator-prop",
         description: `
@@ -52929,7 +52967,7 @@ var upgrades = [
 var package_default = {
   name: "@carbon/upgrade",
   description: "A tool for upgrading Carbon versions",
-  version: "11.23.0",
+  version: "11.24.0",
   license: "Apache-2.0",
   bin: {
     "carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -52969,7 +53007,7 @@ var package_default = {
   devDependencies: {
     chalk: "^4.1.1",
     "change-case": "^4.1.2",
-    esbuild: "^0.24.0",
+    esbuild: "^0.25.0",
     execa: "^5.1.1",
     "fast-glob": "^3.2.11",
     "fs-extra": "^11.0.0",
@@ -53009,6 +53047,10 @@ async function main({ argv, cwd }) {
     default: false,
     describe: "optionally include additional logs, useful for debugging",
     type: "boolean"
+  }).option("wrapWithFeatureFlag", {
+    default: true,
+    describe: "wrap the migration with a feature flag",
+    type: "boolean"
   });
   cli.usage("Usage: $0 [options]").command(
     ["upgrade", "$0"],
@@ -53040,14 +53082,19 @@ async function main({ argv, cwd }) {
       );
     },
     run3(async (args) => {
-      const { verbose, migration, write, paths } = args;
+      const { verbose, migration, write, paths, wrapWithFeatureFlag } = args;
       const options = {
         cwd: cwd(),
         verbose,
         write,
         migration,
-        paths
+        paths,
+        wrapWithFeatureFlag
       };
+      console.log(
+        "CLI options wrapWithFeatureFlag:",
+        options.wrapWithFeatureFlag
+      );
       await migrate(options, upgrades);
     })
   );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/upgrade",
   "description": "A tool for upgrading Carbon versions",
-  "version": "11.23.0",
+  "version": "11.24.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -41,7 +41,7 @@
   "devDependencies": {
     "chalk": "^4.1.1",
     "change-case": "^4.1.2",
-    "esbuild": "^0.24.0",
+    "esbuild": "^0.25.0",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.11",
     "fs-extra": "^11.0.0",
@@ -61,5 +61,5 @@
     "@ibm/telemetry-js": "^1.5.0",
     "jscodeshift": "^17.0.0"
   },
-  "gitHead": "fd1b7ab668473833c250488e0f7fc4feb55f1d88"
+  "gitHead": "2a32901cb1c74c149164122f0742305440716d35"
 }

package/transforms/__testfixtures__/enable-v12-overflowmenu-nowrap.input.js

@@ -0,0 +1,41 @@
+//prettier-ignore
+import React from 'react';
+import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
+
+function TestComponent({ menuProps }) {
+  return (
+    <div>
+      {/* Old API usage - with explicit props */}
+      <OverflowMenu
+        aria-label="overflow-menu"
+        align="bottom"
+        flipped={true}
+        light={true}
+        size="xl">
+        <OverflowMenuItem
+          className="test-class"
+          itemText="Stop app"
+          disabled={false}
+          onClick={() => {}}
+        />
+        <OverflowMenuItem itemText="Restart app" />
+        <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
+      </OverflowMenu>
+
+      {/* Old API with spread props */}
+      <OverflowMenu {...menuProps}>
+        <OverflowMenuItem itemText="Dynamic item" />
+        <OverflowMenuItem hasDivider isDelete itemText="Remove" />
+      </OverflowMenu>
+
+      {/* Already using new API - should not be transformed */}
+      <OverflowMenu label="Already migrated">
+        <MenuItem label="Option 1" />
+        <MenuItemDivider />
+        <MenuItem label="Delete" kind="danger" />
+      </OverflowMenu>
+    </div>
+  );
+}
+
+export default TestComponent;

package/transforms/__testfixtures__/enable-v12-overflowmenu-nowrap.input.tsx

@@ -0,0 +1,37 @@
+//prettier-ignore
+import React from 'react';
+import type { FC } from 'react';
+import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
+
+interface MenuItem {
+  id: string;
+  label: string;
+  action?: () => void;
+}
+
+interface Props {
+  items: MenuItem[];
+}
+
+const TestComponent: FC<Props> = ({ items }) => {
+  return (
+    <div>
+      {/* Old API usage - mapped items */}
+      <OverflowMenu aria-label="mapped-menu">
+        {items.map((item) => (
+          <OverflowMenuItem
+            key={item.id}
+            itemText={item.label}
+            onClick={item.action}
+          />
+        ))}
+      </OverflowMenu>
+      {/* Old API - explicit props */}
+      <OverflowMenu direction="top" size="lg" flipped={true}>
+        <OverflowMenuItem hasDivider isDelete itemText="TypeScript Item" />
+      </OverflowMenu>
+    </div>
+  );
+};
+
+export default TestComponent;

package/transforms/__testfixtures__/enable-v12-overflowmenu-nowrap.output.js

@@ -0,0 +1,50 @@
+//prettier-ignore
+import React from 'react';
+import { OverflowMenu, OverflowMenuItem, MenuItem, MenuItemDivider, Button } from '@carbon/react';
+import { FeatureFlags } from '@carbon/feature-flags';
+
+function TestComponent({ menuProps }) {
+ return (
+   <div>
+     {/* Old API usage with props - transformed */}
+       <OverflowMenu 
+         label="overflow-menu"
+         align="bottom"
+         flipped={true}
+         light={true}
+         size="xl"
+       >
+         <MenuItem 
+           className="test-class" 
+           label="Stop app" 
+           disabled={false}
+           onClick={() => {}}
+         />
+         <MenuItem label="Restart app" />
+         <MenuItemDivider />
+         <MenuItem label="Delete app" kind="danger" />
+       </OverflowMenu>
+
+     {/* Old API with spread props */}
+       <OverflowMenu {...menuProps}>
+         <MenuItem label="Dynamic item" />
+         <MenuItemDivider />
+         <MenuItem label="Remove" kind="danger" />
+       </OverflowMenu>
+
+      {/* Already using new API - should not be transformed */}
+     <FeatureFlags enableV12Overflowmenu>
+       <OverflowMenu label="Already migrated">
+         <MenuItem label="Option 1" />
+         <MenuItemDivider />
+         <MenuItem label="Delete" kind="danger" />
+       </OverflowMenu>
+     </FeatureFlags>
+
+     {/* Other components - unchanged */}
+     <Button>Normal button</Button>
+   </div>
+ );
+}
+
+export default TestComponent;

package/transforms/__testfixtures__/enable-v12-overflowmenu-nowrap.output.tsx

@@ -0,0 +1,42 @@
+//prettier-ignore
+import React from 'react';
+import { FeatureFlags } from '@carbon/feature-flags';
+import type { FC } from 'react';
+import { MenuItem, MenuItemDivider, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+
+interface MenuItem {
+  id: string;
+  label: string;
+  action?: () => void;
+}
+
+interface Props {
+  items: MenuItem[];
+}
+
+const TestComponent: FC<Props> = ({ items }) => {
+  return (
+    (<div>
+      {/* Old API usage - mapped items */}
+      <FeatureFlags enableV12Overflowmenu>
+        <OverflowMenu aria-label="mapped-menu">
+          {items.map((item) => (
+            <OverflowMenuItem
+              key={item.id}
+              itemText={item.label}
+              onClick={item.action}
+            />
+          ))}
+        </OverflowMenu>
+      </FeatureFlags>
+      {/* Old API - explicit props */}
+      <FeatureFlags enableV12Overflowmenu>
+        <OverflowMenu direction="top" size="lg" flipped={true}>
+          <MenuItemDivider /><MenuItem kind='danger' label="TypeScript Item" />
+        </OverflowMenu>
+      </FeatureFlags>
+    </div>)
+  );
+};
+
+export default TestComponent;

package/transforms/__testfixtures__/enable-v12-overflowmenu.input.js

@@ -0,0 +1,45 @@
+//prettier-ignore
+import React from 'react';
+import { OverflowMenu, OverflowMenuItem, Button } from '@carbon/react';
+
+function TestComponent({ menuProps }) {
+  return (
+    <div>
+      {/* Old API usage - with explicit props */}
+      <OverflowMenu
+        aria-label="overflow-menu"
+        flipped={true}
+        light={true}
+        size="xl">
+        <OverflowMenuItem
+          className="test-class"
+          itemText="Stop app"
+          disabled={false}
+          onClick={() => {}}
+        />
+        <OverflowMenuItem itemText="Restart app" />
+        <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
+      </OverflowMenu>
+
+      {/* Old API with spread props */}
+      <OverflowMenu {...menuProps}>
+        <OverflowMenuItem itemText="Dynamic item" />
+        <OverflowMenuItem hasDivider isDelete itemText="Remove" />
+      </OverflowMenu>
+
+      {/* Already using new API - should not be transformed */}
+      <FeatureFlags enableV12Overflowmenu>
+        <OverflowMenu label="Already migrated">
+          <MenuItem label="Option 1" />
+          <MenuItemDivider />
+          <MenuItem label="Delete" kind="danger" />
+        </OverflowMenu>
+      </FeatureFlags>
+
+      {/* Other components - should not be transformed */}
+      <Button>Normal button</Button>
+    </div>
+  );
+}
+
+export default TestComponent;

package/transforms/__testfixtures__/enable-v12-overflowmenu.input.tsx

@@ -0,0 +1,37 @@
+//prettier-ignore
+import React from 'react';
+import type { FC } from 'react';
+import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
+
+interface MenuItem {
+  id: string;
+  label: string;
+  action?: () => void;
+}
+
+interface Props {
+  items: MenuItem[];
+}
+
+const TestComponent: FC<Props> = ({ items }) => {
+  return (
+    <div>
+      {/* Old API usage - mapped items */}
+      <OverflowMenu aria-label="mapped-menu">
+        {items.map((item) => (
+          <OverflowMenuItem
+            key={item.id}
+            itemText={item.label}
+            onClick={item.action}
+          />
+        ))}
+      </OverflowMenu>
+      {/* Old API - explicit props */}
+      <OverflowMenu direction="top" size="lg" flipped={true}>
+        <OverflowMenuItem hasDivider isDelete itemText="TypeScript Item" />
+      </OverflowMenu>
+    </div>
+  );
+};
+
+export default TestComponent;

package/transforms/__testfixtures__/enable-v12-overflowmenu.output.js

@@ -0,0 +1,54 @@
+//prettier-ignore
+import React from 'react';
+import { OverflowMenu, OverflowMenuItem, MenuItem, MenuItemDivider, Button } from '@carbon/react';
+import { FeatureFlags } from '@carbon/feature-flags';
+
+function TestComponent({ menuProps }) {
+ return (  
+   (<div>
+     {/* Old API usage with props - transformed */}
+     <FeatureFlags enableV12Overflowmenu>
+       <OverflowMenu 
+         label="overflow-menu"
+         align="bottom"
+         flipped={true}
+         light={true}
+         size="xl"
+       >
+         <MenuItem 
+           className="test-class" 
+           label="Stop app" 
+           disabled={false}
+           onClick={() => {}}
+         />
+         <MenuItem label="Restart app" />
+         <MenuItemDivider />
+         <MenuItem label="Delete app" kind="danger" />
+       </OverflowMenu>
+     </FeatureFlags>
+
+     {/* Old API with spread props */}
+     <FeatureFlags enableV12Overflowmenu>
+       <OverflowMenu {...menuProps}>
+         <MenuItem label="Dynamic item" />
+         <MenuItemDivider />
+         <MenuItem label="Remove" kind="danger" />
+       </OverflowMenu>
+     </FeatureFlags>
+
+      {/* Already using new API - should not be transformed */}
+     <FeatureFlags enableV12Overflowmenu>
+       <OverflowMenu label="Already migrated">
+         <MenuItem label="Option 1" />
+         <MenuItemDivider />
+         <MenuItem label="Delete" kind="danger" />
+       </OverflowMenu>
+     </FeatureFlags>
+
+     {/* Other components - unchanged */}
+     <Button>Normal button</Button>
+   </div>)
+ );
+}
+
+export default TestComponent;

package/transforms/__testfixtures__/enable-v12-overflowmenu.output.tsx

@@ -0,0 +1,42 @@
+//prettier-ignore
+import React from 'react';
+import { FeatureFlags } from '@carbon/feature-flags';
+import type { FC } from 'react';
+import { MenuItem, MenuItemDivider, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+
+interface MenuItem {
+  id: string;
+  label: string;
+  action?: () => void;
+}
+
+interface Props {
+  items: MenuItem[];
+}
+
+const TestComponent: FC<Props> = ({ items }) => {
+  return (
+    (<div>
+      {/* Old API usage - mapped items */}
+      <FeatureFlags enableV12Overflowmenu>
+        <OverflowMenu aria-label="mapped-menu">
+          {items.map((item) => (
+            <OverflowMenuItem
+              key={item.id}
+              itemText={item.label}
+              onClick={item.action}
+            />
+          ))}
+        </OverflowMenu>
+      </FeatureFlags>
+      {/* Old API - explicit props */}
+      <FeatureFlags enableV12Overflowmenu>
+        <OverflowMenu direction="top" size="lg" flipped={true}>
+          <MenuItemDivider /><MenuItem kind='danger' label="TypeScript Item" />
+        </OverflowMenu>
+      </FeatureFlags>
+    </div>)
+  );
+};
+
+export default TestComponent;

package/transforms/__tests__/enable-v12-overflowmenu-test.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+// Test with wrapping (default)
+defineTest(
+  __dirname,
+  'enable-v12-overflowmenu',
+  { wrapWithFeatureFlag: 'true' },
+  'enable-v12-overflowmenu'
+);
+
+// Test without wrapping
+defineTest(
+  __dirname,
+  'enable-v12-overflowmenu',
+  { wrapWithFeatureFlag: 'false' },
+  'enable-v12-overflowmenu-nowrap'
+);

package/transforms/enable-v12-overflowmenu.js

@@ -0,0 +1,218 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Migrate OverflowMenu components to v12 API
+ */
+
+'use strict';
+
+const defaultOptions = {
+  quote: 'single',
+  trailingComma: true,
+};
+
+// Props mapping from OverflowMenuItem to MenuItem
+const MENU_ITEM_PROPS_MAP = {
+  itemText: 'label',
+  href: 'href',
+  disabled: 'disabled',
+  className: 'className',
+};
+
+const EVENT_HANDLERS = new Set(['onClick']);
+
+function transform(fileInfo, api, options) {
+  const { jscodeshift: j } = api;
+  const root = j(fileInfo.source);
+  const printOptions = options.printOptions || defaultOptions;
+  const shouldWrapWithFlags = options.wrapWithFeatureFlag !== false;
+  const overflowMenuElements = root
+    .find(j.JSXElement, {
+      openingElement: { name: { name: 'OverflowMenu' } },
+    })
+    .filter((path) => {
+      let parent = path.parent;
+      while (parent) {
+        if (
+          parent.node.type === 'JSXElement' &&
+          parent.node.openingElement.name.name === 'FeatureFlags'
+        ) {
+          return false;
+        }
+        parent = parent.parent;
+      }
+      return true;
+    });
+
+  if (!overflowMenuElements.length) {
+    return null;
+  }
+
+  // Add required imports
+  const importsToAdd = ['MenuItem', 'MenuItemDivider'].sort();
+  const carbonImport = root.find(j.ImportDeclaration, {
+    source: { value: '@carbon/react' },
+  });
+
+  if (carbonImport.length) {
+    const importNode = carbonImport.get(0);
+    const existingSpecifiers = new Set(
+      importNode.node.specifiers
+        .filter((spec) => spec.type === 'ImportSpecifier')
+        .map((spec) => spec.imported.name)
+    );
+
+    importsToAdd.forEach((importName) => {
+      if (!existingSpecifiers.has(importName)) {
+        importNode.node.specifiers.push(
+          j.importSpecifier(j.identifier(importName))
+        );
+      }
+    });
+
+    // Sort specifiers alphabetically
+    importNode.node.specifiers.sort((a, b) =>
+      a.imported.name.localeCompare(b.imported.name)
+    );
+  }
+
+  function transformOverflowMenuItems(elements) {
+    elements.forEach((path) => {
+      path.node.children.forEach((child, index) => {
+        if (
+          child.type === 'JSXElement' &&
+          child.openingElement.name.name === 'OverflowMenuItem'
+        ) {
+          const itemProps = [];
+          let needsDivider = false;
+          let classNames = [];
+
+          child.openingElement.attributes.forEach((attr) => {
+            if (attr.type === 'JSXSpreadAttribute') {
+              itemProps.push(attr);
+              return;
+            }
+
+            const propName = attr.name.name;
+
+            if (MENU_ITEM_PROPS_MAP[propName]) {
+              if (propName === 'className') {
+                classNames.push(attr.value.value);
+              } else {
+                itemProps.push(
+                  j.jsxAttribute(
+                    j.jsxIdentifier(MENU_ITEM_PROPS_MAP[propName]),
+                    attr.value
+                  )
+                );
+              }
+            } else if (propName === 'wrapperClassName') {
+              classNames.push(attr.value.value);
+            } else if (propName === 'hasDivider') {
+              needsDivider = true;
+            } else if (propName === 'isDelete') {
+              itemProps.push(
+                j.jsxAttribute(
+                  j.jsxIdentifier('kind'),
+                  j.stringLiteral('danger')
+                )
+              );
+            } else if (EVENT_HANDLERS.has(propName)) {
+              itemProps.push(attr);
+            }
+          });
+
+          if (classNames.length > 0) {
+            itemProps.push(
+              j.jsxAttribute(
+                j.jsxIdentifier('className'),
+                j.stringLiteral(classNames.join(' '))
+              )
+            );
+          }
+
+          if (needsDivider) {
+            path.node.children.splice(
+              index,
+              0,
+              j.jsxElement(
+                j.jsxOpeningElement(
+                  j.jsxIdentifier('MenuItemDivider'),
+                  [],
+                  true
+                ),
+                null,
+                [],
+                true
+              )
+            );
+          }
+
+          child.openingElement.name = j.jsxIdentifier('MenuItem');
+          child.openingElement.attributes = itemProps;
+          if (child.closingElement) {
+            child.closingElement.name = j.jsxIdentifier('MenuItem');
+          }
+        }
+      });
+    });
+  }
+
+  function addFeatureFlagsImport() {
+    const hasFeatureFlagsImport = root
+      .find(j.ImportDeclaration)
+      .some(
+        (path) =>
+          path.node.source.value === '@carbon/feature-flags' &&
+          path.node.specifiers.some(
+            (spec) => spec.imported && spec.imported.name === 'FeatureFlags'
+          )
+      );
+
+    if (!hasFeatureFlagsImport) {
+      const featureFlagsImport = j.importDeclaration(
+        [j.importSpecifier(j.identifier('FeatureFlags'))],
+        j.literal('@carbon/feature-flags')
+      );
+
+      const firstImport = root.find(j.ImportDeclaration).at(0);
+      if (firstImport.length) {
+        firstImport.insertAfter(featureFlagsImport);
+      } else {
+        root.get().node.program.body.unshift(featureFlagsImport);
+      }
+    }
+  }
+
+  function wrapWithFeatureFlags(elements) {
+    elements.forEach((path) => {
+      const wrappedElement = j.jsxElement(
+        j.jsxOpeningElement(
+          j.jsxIdentifier('FeatureFlags'),
+          [j.jsxAttribute(j.jsxIdentifier('enableV12Overflowmenu'))],
+          false
+        ),
+        j.jsxClosingElement(j.jsxIdentifier('FeatureFlags')),
+        [j.jsxText('\n      '), path.node, j.jsxText('\n    ')]
+      );
+
+      j(path).replaceWith(wrappedElement);
+    });
+  }
+
+  // Transform based on wrap option
+  transformOverflowMenuItems(overflowMenuElements);
+
+  if (shouldWrapWithFlags) {
+    addFeatureFlagsImport();
+    wrapWithFeatureFlags(overflowMenuElements);
+  }
+
+  return root.toSource(printOptions);
+}
+
+module.exports = transform;
+module.exports.parser = 'tsx';