@carbon/upgrade 11.41.0 → 11.42.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/upgrade",
   "description": "A tool for upgrading Carbon versions",
-  "version": "11.41.0",
+  "version": "11.42.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -60,5 +60,5 @@
     "@ibm/telemetry-js": "^1.5.0",
     "jscodeshift": "^17.0.0"
   },
-  "gitHead": "30ca2b932469a5c89da10cb8d1fa82586ed14018"
+  "gitHead": "a57cf8a896fe3fe09c5ab27648cd58947f37360a"
 }

package/transforms/__testfixtures__/ibm-products-update-tearsheet-alias.input.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { Tearsheet as MyTearsheet } from '@carbon/ibm-products';
+
+// Test: Tearsheet with aliased import
+export const AliasedTearsheet = () => {
+  return (
+    <MyTearsheet
+      open={true}
+      onClose={() => {}}
+      title="Aliased Tearsheet"
+      label="Test">
+      <div>Content with alias</div>
+    </MyTearsheet>
+  );
+};

package/transforms/__testfixtures__/ibm-products-update-tearsheet-alias.output.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { preview__Tearsheet as MyTearsheet } from '@carbon/ibm-products';
+
+// Test: Tearsheet with aliased import
+export const AliasedTearsheet = () => {
+  return (
+    <MyTearsheet open={true} onClose={() => {}}>
+      <MyTearsheet.Header>
+        <MyTearsheet.HeaderContent title="Aliased Tearsheet" label="Test"></MyTearsheet.HeaderContent>
+      </MyTearsheet.Header>
+      <MyTearsheet.Body>
+        <MyTearsheet.MainContent>
+
+          <div>Content with alias</div>
+
+        </MyTearsheet.MainContent>
+      </MyTearsheet.Body>
+    </MyTearsheet>
+  );
+};

package/transforms/__testfixtures__/ibm-products-update-tearsheet-edge-cases.input.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import {
+  Tearsheet,
+  Tearsheet as MyTearsheet,
+  Tearsheet as AnotherSheet,
+} from '@carbon/ibm-products';
+import { Button } from '@carbon/react';
+
+// Edge Case 1: Multiple imports with different aliases
+export const MultipleAliases = () => {
+  return (
+    <>
+      <Tearsheet open={true} onClose={() => {}} title="Standard">
+        <div>Content 1</div>
+      </Tearsheet>
+      <MyTearsheet open={true} onClose={() => {}} title="Aliased">
+        <div>Content 2</div>
+      </MyTearsheet>
+    </>
+  );
+};
+
+// Edge Case 2: No JSX usage (import only)
+export const ImportOnly = () => {
+  const config = {
+    component: Tearsheet,
+  };
+  return <div>No Tearsheet JSX here</div>;
+};
+
+// Edge Case 3: Tearsheet with no props at all
+export const NoProps = () => {
+  return (
+    <Tearsheet>
+      <div>Minimal</div>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 4: Tearsheet with only root props (no header/footer)
+export const OnlyRootProps = () => {
+  return (
+    <Tearsheet open={true} onClose={() => {}} variant="wide">
+      <div>Just content</div>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 5: Tearsheet with spread props
+export const WithSpread = () => {
+  const props = { open: true, onClose: () => {} };
+  return (
+    <Tearsheet {...props} title="Spread">
+      <div>Content</div>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 6: Nested Tearsheets
+export const NestedTearsheets = () => {
+  return (
+    <Tearsheet open={true} onClose={() => {}} title="Outer">
+      <div>
+        <Tearsheet open={true} onClose={() => {}} title="Inner">
+          <div>Nested content</div>
+        </Tearsheet>
+      </div>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 7: Tearsheet in conditional
+export const ConditionalTearsheet = ({ show }: { show: boolean }) => {
+  return show ? (
+    <Tearsheet open={true} onClose={() => {}} title="Conditional">
+      <div>Content</div>
+    </Tearsheet>
+  ) : null;
+};
+
+// Edge Case 8: Tearsheet in array map
+export const MappedTearsheets = () => {
+  const items = [1, 2, 3];
+  return (
+    <>
+      {items.map((i) => (
+        <Tearsheet key={i} open={true} onClose={() => {}} title={`Item ${i}`}>
+          <div>Content {i}</div>
+        </Tearsheet>
+      ))}
+    </>
+  );
+};
+
+// Edge Case 9: Tearsheet with all deprecated props
+export const AllDeprecatedProps = () => {
+  return (
+    <Tearsheet
+      open={true}
+      onClose={() => {}}
+      slug={<div>Slug</div>}
+      influencerPosition="left"
+      title="Deprecated">
+      <div>Content</div>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 10: Empty Tearsheet
+export const EmptyTearsheet = () => {
+  return <Tearsheet open={true} onClose={() => {}} />;
+};

package/transforms/__testfixtures__/ibm-products-update-tearsheet-edge-cases.output.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import {
+  preview__Tearsheet as Tearsheet,
+  preview__Tearsheet as MyTearsheet,
+  preview__Tearsheet as AnotherSheet,
+} from '@carbon/ibm-products';
+import { Button } from '@carbon/react';
+
+// Edge Case 1: Multiple imports with different aliases
+export const MultipleAliases = () => {
+  return (<>
+    <Tearsheet open={true} onClose={() => {}}>
+      <Tearsheet.Header>
+        <Tearsheet.HeaderContent title="Standard"></Tearsheet.HeaderContent>
+      </Tearsheet.Header>
+      <Tearsheet.Body>
+        <Tearsheet.MainContent>
+
+          <div>Content 1</div>
+
+        </Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+    <MyTearsheet open={true} onClose={() => {}}>
+      <MyTearsheet.Header>
+        <MyTearsheet.HeaderContent title="Aliased"></MyTearsheet.HeaderContent>
+      </MyTearsheet.Header>
+      <MyTearsheet.Body>
+        <MyTearsheet.MainContent>
+
+          <div>Content 2</div>
+
+        </MyTearsheet.MainContent>
+      </MyTearsheet.Body>
+    </MyTearsheet>
+  </>);
+};
+
+// Edge Case 2: No JSX usage (import only)
+export const ImportOnly = () => {
+  const config = {
+    component: Tearsheet,
+  };
+  return <div>No Tearsheet JSX here</div>;
+};
+
+// Edge Case 3: Tearsheet with no props at all
+export const NoProps = () => {
+  return (
+    <Tearsheet>
+      <Tearsheet.Body>
+        <Tearsheet.MainContent>
+
+          <div>Minimal</div>
+
+        </Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 4: Tearsheet with only root props (no header/footer)
+export const OnlyRootProps = () => {
+  return (
+    <Tearsheet open={true} onClose={() => {}} variant="wide">
+      <Tearsheet.Body>
+        <Tearsheet.MainContent>
+
+          <div>Just content</div>
+
+        </Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 5: Tearsheet with spread props
+export const WithSpread = () => {
+  const props = { open: true, onClose: () => {} };
+  return (
+    <Tearsheet {...props}>
+      <Tearsheet.Header>
+        <Tearsheet.HeaderContent title="Spread"></Tearsheet.HeaderContent>
+      </Tearsheet.Header>
+      <Tearsheet.Body>
+        <Tearsheet.MainContent>
+
+          <div>Content</div>
+
+        </Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 6: Nested Tearsheets
+export const NestedTearsheets = () => {
+  return (
+    <Tearsheet open={true} onClose={() => {}}>
+      <Tearsheet.Header>
+        <Tearsheet.HeaderContent title="Outer"></Tearsheet.HeaderContent>
+      </Tearsheet.Header>
+      <Tearsheet.Body>
+        <Tearsheet.MainContent>
+
+          <div>
+            <Tearsheet open={true} onClose={() => {}}>
+              <Tearsheet.Header>
+                <Tearsheet.HeaderContent title="Inner"></Tearsheet.HeaderContent>
+              </Tearsheet.Header>
+              <Tearsheet.Body>
+                <Tearsheet.MainContent>
+
+                  <div>Nested content</div>
+
+                </Tearsheet.MainContent>
+              </Tearsheet.Body>
+            </Tearsheet>
+          </div>
+
+        </Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 7: Tearsheet in conditional
+export const ConditionalTearsheet = ({ show }: { show: boolean }) => {
+  return show ? (
+    <Tearsheet open={true} onClose={() => {}}>
+      <Tearsheet.Header>
+        <Tearsheet.HeaderContent title="Conditional"></Tearsheet.HeaderContent>
+      </Tearsheet.Header>
+      <Tearsheet.Body>
+        <Tearsheet.MainContent>
+
+          <div>Content</div>
+
+        </Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+  ) : null;
+};
+
+// Edge Case 8: Tearsheet in array map
+export const MappedTearsheets = () => {
+  const items = [1, 2, 3];
+  return (<>
+    {items.map((i) => (
+      <Tearsheet key={i} open={true} onClose={() => {}}>
+        <Tearsheet.Header>
+          <Tearsheet.HeaderContent title={`Item ${i}`}></Tearsheet.HeaderContent>
+        </Tearsheet.Header>
+        <Tearsheet.Body>
+          <Tearsheet.MainContent>
+
+            <div>Content {i}</div>
+
+          </Tearsheet.MainContent>
+        </Tearsheet.Body>
+      </Tearsheet>
+    ))}
+  </>);
+};
+
+// Edge Case 9: Tearsheet with all deprecated props
+export const AllDeprecatedProps = () => {
+  return (
+    <Tearsheet open={true} onClose={() => {}} decorator={<div>Slug</div>}>
+      <Tearsheet.Header>
+        <Tearsheet.HeaderContent title="Deprecated"></Tearsheet.HeaderContent>
+      </Tearsheet.Header>
+      <Tearsheet.Body>
+        <Tearsheet.MainContent>
+
+          <div>Content</div>
+
+        </Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+  );
+};
+
+// Edge Case 10: Empty Tearsheet
+export const EmptyTearsheet = () => {
+  return (
+    <Tearsheet open={true} onClose={() => {}}>
+      <Tearsheet.Body>
+        <Tearsheet.MainContent></Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+  );
+};

package/transforms/__testfixtures__/ibm-products-update-tearsheet-idempotent.input.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { preview__Tearsheet as Tearsheet } from '@carbon/ibm-products';
+
+// Test: Already migrated code should not be transformed again (idempotency)
+export const AlreadyMigrated = () => {
+  return (
+    <Tearsheet open={true} onClose={() => {}}>
+      <Tearsheet.Header>
+        <Tearsheet.HeaderContent title="Already Migrated" />
+      </Tearsheet.Header>
+      <Tearsheet.Body>
+        <Tearsheet.MainContent>
+          <div>Body content</div>
+        </Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+  );
+};

package/transforms/__testfixtures__/ibm-products-update-tearsheet-idempotent.output.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { preview__Tearsheet as Tearsheet } from '@carbon/ibm-products';
+
+// Test: Already migrated code should not be transformed again (idempotency)
+export const AlreadyMigrated = () => {
+  return (
+    <Tearsheet open={true} onClose={() => {}}>
+      <Tearsheet.Header>
+        <Tearsheet.HeaderContent title="Already Migrated" />
+      </Tearsheet.Header>
+      <Tearsheet.Body>
+        <Tearsheet.MainContent>
+          <div>Body content</div>
+        </Tearsheet.MainContent>
+      </Tearsheet.Body>
+    </Tearsheet>
+  );
+};

package/transforms/__testfixtures__/ibm-products-update-tearsheet.input.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import { Tearsheet } from '@carbon/ibm-products';
+import { Button, Form, FormGroup, TextInput } from '@carbon/react';
+
+// Test 1: Simple Tearsheet with title and actions
+function SimpleTearsheet() {
+  return (
+    <Tearsheet
+      open={true}
+      onClose={() => {}}
+      title="Simple Tearsheet"
+      label="Customer data"
+      actions={[
+        { label: 'Cancel', onClick: () => {} },
+        { label: 'Submit', onClick: () => {} },
+      ]}>
+      <Form>
+        <TextInput id="name" labelText="Name" />
+      </Form>
+    </Tearsheet>
+  );
+}
+
+// Test 2: Tearsheet with influencer
+function TearsheetWithInfluencer() {
+  return (
+    <Tearsheet
+      open={true}
+      onClose={() => {}}
+      title="With Influencer"
+      label="Data"
+      description="This is a description"
+      influencer={<div>Influencer content</div>}
+      influencerWidth="narrow">
+      <div>Main content</div>
+    </Tearsheet>
+  );
+}
+
+// Test 3: Tearsheet with navigation
+function TearsheetWithNavigation() {
+  return (
+    <Tearsheet
+      open={true}
+      onClose={() => {}}
+      title="With Navigation"
+      navigation={<div>Navigation tabs</div>}
+      actions={[{ label: 'Close', onClick: () => {} }]}>
+      <div>Content</div>
+    </Tearsheet>
+  );
+}
+
+// Test 4: Tearsheet with headerActions
+function TearsheetWithHeaderActions() {
+  return (
+    <Tearsheet
+      open={true}
+      onClose={() => {}}
+      title="With Header Actions"
+      label="Label"
+      headerActions={<Button>Action</Button>}>
+      <div>Content</div>
+    </Tearsheet>
+  );
+}
+
+// Test 5: Tearsheet with deprecated slug prop
+function TearsheetWithSlug() {
+  return (
+    <Tearsheet
+      open={true}
+      onClose={() => {}}
+      title="With Slug"
+      slug={<div>Slug content</div>}>
+      <div>Content</div>
+    </Tearsheet>
+  );
+}
+
+// Test 6: Tearsheet with all features
+function CompleteTearsheet() {
+  return (
+    <Tearsheet
+      open={true}
+      onClose={() => {}}
+      title="Complete Tearsheet"
+      label="All features"
+      description="This has everything"
+      decorator={<div>Decorator</div>}
+      influencer={<div>Influencer</div>}
+      influencerWidth="wide"
+      navigation={<div>Navigation</div>}
+      headerActions={<Button>Header Action</Button>}
+      actions={[
+        { label: 'Cancel', onClick: () => {} },
+        { label: 'Submit', onClick: () => {} },
+      ]}
+      preventCloseOnClickOutside={true}
+      variant="wide">
+      <Form>
+        <TextInput id="field1" labelText="Field 1" />
+        <TextInput id="field2" labelText="Field 2" />
+      </Form>
+    </Tearsheet>
+  );
+}
+
+// Test 7: Minimal Tearsheet (no header props)
+function MinimalTearsheet() {
+  return (
+    <Tearsheet open={true} onClose={() => {}}>
+      <div>Just content</div>
+    </Tearsheet>
+  );
+}
+
+// Test 8: Tearsheet with deprecated influencerPosition (should be removed)
+function TearsheetWithInfluencerPosition() {
+  return (
+    <Tearsheet
+      open={true}
+      onClose={() => {}}
+      title="Test"
+      influencer={<div>Influencer</div>}
+      influencerPosition="left">
+      <div>Content</div>
+    </Tearsheet>
+  );
+}
+
+// Test 9: Stacked Tearsheets (multiple tearsheets)
+function StackedTearsheets() {
+  const [open1, setOpen1] = React.useState(false);
+  const [open2, setOpen2] = React.useState(false);
+
+  return (
+    <>
+      <Tearsheet
+        open={open1}
+        onClose={() => setOpen1(false)}
+        title="Tearsheet 1"
+        label="First"
+        actions={[{ label: 'Close', onClick: () => setOpen1(false) }]}>
+        <div>Content 1</div>
+      </Tearsheet>
+      <Tearsheet
+        open={open2}
+        onClose={() => setOpen2(false)}
+        title="Tearsheet 2"
+        label="Second"
+        actions={[{ label: 'Close', onClick: () => setOpen2(false) }]}>
+        <div>Content 2</div>
+      </Tearsheet>
+    </>
+  );
+}
+
+// Test 10: Tearsheet with spread props
+function TearsheetWithSpreadProps() {
+  const commonProps = {
+    open: true,
+    onClose: () => {},
+    variant: 'wide',
+  };
+
+  return (
+    <Tearsheet {...commonProps} title="With Spread" label="Spread props">
+      <div>Content</div>
+    </Tearsheet>
+  );
+}
+
+// Test 11: Tearsheet with complex children
+function TearsheetWithComplexChildren() {
+  return (
+    <Tearsheet
+      open={true}
+      onClose={() => {}}
+      title="Complex Children"
+      actions={[{ label: 'Submit', onClick: () => {} }]}>
+      <Form>
+        <FormGroup legendText="Section 1">
+          <TextInput id="field1" labelText="Field 1" />
+          <TextInput id="field2" labelText="Field 2" />
+        </FormGroup>
+        <FormGroup legendText="Section 2">
+          <TextInput id="field3" labelText="Field 3" />
+        </FormGroup>
+      </Form>
+    </Tearsheet>
+  );
+}
+
+// Test 12: Tearsheet with only decorator (no other header props)
+function TearsheetWithOnlyDecorator() {
+  return (
+    <Tearsheet open={true} onClose={() => {}} decorator={<div>Decorator</div>}>
+      <div>Content</div>
+    </Tearsheet>
+  );
+}