) {
isDisabled,
disabledKeys,
orientation = 'horizontal'
- } = props
+ } = props;
let domRef = useDOMRef(ref);
return (
diff --git a/packages/dev/codemods/package.json b/packages/dev/codemods/package.json
index 36bd00779e3..8a9024c03ac 100644
--- a/packages/dev/codemods/package.json
+++ b/packages/dev/codemods/package.json
@@ -43,5 +43,8 @@
},
"rsp": {
"type": "cli"
+ },
+ "publishConfig": {
+ "access": "public"
}
}
diff --git a/packages/dev/codemods/src/index.ts b/packages/dev/codemods/src/index.ts
index f5397efbc2e..3bb350ba739 100644
--- a/packages/dev/codemods/src/index.ts
+++ b/packages/dev/codemods/src/index.ts
@@ -1,3 +1,4 @@
+#!/usr/bin/env node
const {parseArgs} = require('node:util');
import {s1_to_s2} from './s1-to-s2/src';
import {use_monopackages} from './use-monopackages/src';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap
index 580806b80eb..27125e3b4e9 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap
@@ -223,3 +223,14 @@ let props = {validationState: 'invalid'};
"
`;
+
+exports[`handles sections 1`] = `
+"import { ComboBoxSection, ComboBoxItem, ComboBox } from "@react-spectrum/s2";
+import { Section, Item } from '@adobe/react-spectrum';
+
+
+ Item one
+ Item two
+
+"
+`;
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap
index 1d59090a85a..bf01f164749 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap
@@ -63,7 +63,7 @@ import { Section, Item, ListBox } from '@adobe/react-spectrum';
-
-
+
@@ -218,10 +215,7 @@ import { Item, Section } from '@adobe/react-spectrum';
-
-
+
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap
index a0bd01c085d..9c0a3335955 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap
@@ -144,3 +144,14 @@ let props = {validationState: 'invalid'};
"
`;
+
+exports[`handles sections 1`] = `
+"import { PickerSection, PickerItem, Picker } from "@react-spectrum/s2";
+import { Section, Item } from '@adobe/react-spectrum';
+
+
+ Item one
+ Item two
+
+"
+`;
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts
index ad7d82423fb..ffbe0936a72 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts
@@ -213,3 +213,13 @@ let props = {validationState: 'invalid'};
`);
+
+test('handles sections', `
+import {ComboBox, Section, Item} from '@adobe/react-spectrum';
+
+
+
+`);
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/menu.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/menu.test.ts
index adadbc8f10d..4c34fb025ba 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/menu.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/menu.test.ts
@@ -22,10 +22,7 @@ import {Menu, MenuTrigger, Item, SubmenuTrigger, Button, Section, Header, Headin
- Email
-
-
+
@@ -49,10 +46,7 @@ import {Menu, MenuTrigger, Item, SubmenuTrigger, Button, Section, Header, Headin
- Email
-
-
+
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts
index d1849321a1a..9e844dd5aa2 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts
@@ -138,3 +138,13 @@ let props = {validationState: 'invalid'};
`);
+
+test('handles sections', `
+import {Picker, Section, Item} from '@adobe/react-spectrum';
+
+
+
+`);
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts
index 8c92726c5b8..f7786e9bba4 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts
@@ -860,6 +860,28 @@ export const changes: ChangesJSON = {
}
}
},
+ {
+ description: 'If within Picker, update Section to be a PickerSection',
+ reason: 'Updated component structure',
+ function: {
+ name: 'updateComponentWithinCollection',
+ args: {
+ parentComponent: 'Picker',
+ newComponent: 'PickerSection'
+ }
+ }
+ },
+ {
+ description: 'If within ComboBox, update Section to be a ComboBoxSection',
+ reason: 'Updated component structure',
+ function: {
+ name: 'updateComponentWithinCollection',
+ args: {
+ parentComponent: 'ComboBox',
+ newComponent: 'ComboBoxSection'
+ }
+ }
+ },
{
description:
'Move title prop string to be a child of new Heading within a Header',
@@ -868,7 +890,35 @@ export const changes: ChangesJSON = {
name: 'movePropToNewChildComponent',
args: {
parentComponent: 'Menu',
- childComponent: 'Section',
+ childComponent: 'MenuSection',
+ propToMove: 'title',
+ newChildComponent: 'Header'
+ }
+ }
+ },
+ {
+ description:
+ 'Move title prop string to be a child of new Heading within a Header',
+ reason: 'Updated API',
+ function: {
+ name: 'movePropToNewChildComponent',
+ args: {
+ parentComponent: 'Picker',
+ childComponent: 'PickerSection',
+ propToMove: 'title',
+ newChildComponent: 'Header'
+ }
+ }
+ },
+ {
+ description:
+ 'Move title prop string to be a child of new Heading within a Header',
+ reason: 'Updated API',
+ function: {
+ name: 'movePropToNewChildComponent',
+ args: {
+ parentComponent: 'ComboBox',
+ childComponent: 'ComboBoxSection',
propToMove: 'title',
newChildComponent: 'Header'
}
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts
index 6cf55f0fdc4..b53877eff39 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts
@@ -204,6 +204,7 @@ export default function transformer(file: FileInfo, api: API, options: Options)
(b.path.node.imported.name === 'Item' || b.path.node.imported.name === 'Section')
) {
// Keep Item and Section imports
+ // TODO: remove if they are unused
return;
}
b.path.remove();
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts
index 65776883fb8..9822bfaff89 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts
@@ -645,7 +645,7 @@ function movePropToNewChildComponent(
getName(path, path.node.openingElement.name) === childComponent &&
getName(path, path.parentPath.node.openingElement.name) === parentComponent
) {
- let propValue;
+ let propValue: t.JSXAttribute['value'] | void;
path.node.openingElement.attributes =
path.node.openingElement.attributes.filter((attr) => {
if (t.isJSXAttribute(attr) && attr.name.name === propToMove) {
@@ -660,9 +660,10 @@ function movePropToNewChildComponent(
t.jsxElement(
t.jsxOpeningElement(t.jsxIdentifier(newChildComponent), []),
t.jsxClosingElement(t.jsxIdentifier(newChildComponent)),
- [t.jsxText(propValue)]
+ [t.isStringLiteral(propValue) ? t.jsxText(propValue.value) : propValue]
)
);
+ // TODO: handle dynamic collections. Need to wrap function child in and move `items` prop down.
}
}
}
diff --git a/packages/dev/codemods/src/s1-to-s2/src/getComponents.ts b/packages/dev/codemods/src/s1-to-s2/src/getComponents.ts
index 6b677b58881..0f98c956c21 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/getComponents.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/getComponents.ts
@@ -7,7 +7,7 @@ export function getComponents(): Set {
// Determine list of available components in S2 from index.ts
let availableComponents = new Set();
const packagePath = require.resolve('@react-spectrum/s2');
- const indexPath = path.join(path.dirname(packagePath), process.env.NODE_ENV === 'test' ? 'src/index.ts' : '../src/index.js');
+ const indexPath = path.join(path.dirname(packagePath), process.env.NODE_ENV === 'test' ? 'src/index.ts' : '../src/index.ts');
let index = parse(readFileSync(indexPath, 'utf8'), {sourceType: 'module', plugins: ['typescript']});
traverse(index, {
ExportNamedDeclaration(path) {