Merge next-release/main to main

.changeset/afraid-pugs-kiss.md

@@ -0,0 +1,8 @@
+---
+"@aws-amplify/ui-react": major
+---
+
+BREAKING: 
+* Removing stylistic data-attributes from React primitives
+* Update SwitchField classnames to be BEM
+* Removing remnants of "countryCode"

.changeset/bogus-cats-shred.md

@@ -0,0 +1,46 @@
+---
+"@aws-amplify/ui-react": major
+"@aws-amplify/ui": major
+---
+
+breaking: refactoring Tabs component to remove Radix dependency and allow more composability and customization. 
+
+```diff
+- import { Tabs, TabItem } from '@aws-amplify/ui-react'
++ import { Tabs } from '@aws-amplify/ui-react'
+
+- <Tabs>
+-  <TabItem title="Tab 1">
+-    Tab 1 Content
+-  </TabItem>
+
++ <Tabs.Container defaultValue="Tab 1">
++  <Tabs.List>
++    <Tabs.Item value="Tab 1">Tab 1</Tabs.Item>
++  </Tabs.List>
++  <Tabs.Panel value="Tab 1">
++    Tab 1 Content
++  </Tabs.Panel>
++ </Tabs.Container>
+```
+
+
+You can also use the Tabs in a uncomposed way too:
+
+```jsx
+  <Tabs
+    defaultValue={'Tab 1'}
+    items={[
+      { label: 'Tab 1', value: 'Tab 1', content: 'Tab content #1' },
+      { label: 'Tab 2', value: 'Tab 2', content: 'Tab content #2' },
+      { label: 'Tab 3', value: 'Tab 3', content: 'Tab content #3' },
+    ]}
+  />
+```
+
+Some notable differences:
+* Instead of providing a `defaultIndex` or `currentIndex` you provide a `defaultValue` or `value`. Each Tabs.Item and Tabs.Panel should have a `value` that matches with the corresponding element.
+* `onChange` becomes `onValueChange`
+* You should supply a `defaultValue` or `value` or else there will be no default selected tab. Previously the Tabs component would default to the first tab.
+
+There are also more design tokens and better CSS classes for easier customization. 

.changeset/clever-mirrors-boil.md

@@ -0,0 +1,7 @@
+---
+"@aws-amplify/ui-react-native": minor
+"@aws-amplify/ui-react": minor
+"@aws-amplify/ui": minor
+---
+
+feat: allow themes to have arbitrary tokens

.changeset/cool-mangos-dress.md

@@ -0,0 +1,7 @@
+---
+"@aws-amplify/ui-react-storage": patch
+---
+
+fix(react-storage): StorageImage now fires onStorageGetError when an object is not found
+
+StorageImage now has a prop called `validateObjectExistence` which is default to `true`. This checks if there is a file at the given path before adding it as the `src` on an image. 

.changeset/hip-apples-happen.md

@@ -0,0 +1,20 @@
+---
+"@aws-amplify/ui-react": major
+"@aws-amplify/ui": major
+---
+
+breaking: updating classnames for better BEM syntax
+
+* `amplify-loader__percentage-text` -> `amplify-loader__label`
+* `amplify-menu-content-wrapper` -> `amplify-menu__wrapper`
+* `amplify-menu-trigger` -> `amplify-menu__trigger`
+* `amplify-menu-content` -> `amplify-menu__content`
+* `amplify-menu-content__item` -> `amplify-menu__content__item`
+* `amplify-pagination__item-button` -> `amplify-pagination__item`
+* `amplify-pagination__item-current` -> `amplify-pagination__item--current`
+* `amplify-pagination__item-ellipsis` -> `amplify-pagination__item--ellipsis`
+* `amplify-rating-icon-container` -> `amplify-rating__item`
+* `amplify-rating-icon` -> `amplify-rating__icon`
+* `amplify-rating-icon-filled` -> `amplify-rating__icon--filled`
+* `amplify-rating-icon-empty` -> `amplify-rating__icon--empty`
+* `amplify-select__icon-wrapper` -> `amplify-select__icon`

.changeset/itchy-ads-bake.md

@@ -0,0 +1,31 @@
+---
+"@aws-amplify/ui": major
+"@aws-amplify/ui-react": major
+---
+
+breaking: renaming Expander to Accordion and removing Radix dependency. The Accordion component is now built with `<details>` and `<summary>` elements to handle showing/hiding content.
+
+```jsx
+<Accordion.Container>
+  <Accordion.Item value="item-1">
+    <Accordion.Trigger>
+      Click me first!
+      <Accordion.Icon />
+    </Accordion.Trigger>
+    <Accordion.Content>
+      Now when you click the second item, this item will automatically collapse.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-2">
+    <Accordion.Trigger>
+      Then click me!
+      <Accordion.Icon />
+    </Accordion.Trigger>
+    <Accordion.Content>
+      Notice how only one item can be open at a time for the single Accordion type.
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Container>
+```
+
+The Accordion can be controlled or uncontrolled (with a default value)

.changeset/mighty-gifts-crash.md

@@ -0,0 +1,35 @@
+---
+"@aws-amplify/ui": major
+"@aws-amplify/ui-react": major
+---
+
+breaking(theme): removing brand namespace from the theme tokens
+
+```diff
+- tokens.colors.brand.primary[10]
++ tokens.colors.primary[10]
+```
+
+
+```diff
+const theme = createTheme({
+  tokens: {
+    colors: {
+-       brand: {
+        primary: {
+          //... 
+        }
+-       }
+    }
+  }
+})
+```
+
+We also added the ability to easily set the entire range of primary and secondary colors at the theme level
+
+```ts
+const theme = createTheme({
+  primaryColor: 'red',
+  secondaryColor: 'green'
+});
+```

.changeset/plenty-apples-end.md

@@ -0,0 +1,12 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+refactor(ui): update RadioGroupField to use Fieldset
+
+Update to `RadioGroupField` component props: 
+ - `legend` replaces `label`
+ - `legendHidden` replaces `labelHidden`
+
+Example usage:
+``` <RadioGroupField legend="Language" legendHidden /> ```

.changeset/slow-ants-attend.md

@@ -0,0 +1,23 @@
+---
+"@aws-amplify/ui-react": minor
+"@aws-amplify/ui": minor
+---
+
+feat: add CSS layers support and CSS file splitting. The default style import '@aws-amplify/ui-react/styles.css' remains unchanged so these features are opt-in.
+We are now exposing each different component CSS file if you want fine-grained control over what CSS is loaded. Additionally, we will have a CSS reset and a base CSS file.
+If you only wanted the button CSS you could do this:
+
+```javascript
+import '@aws-amplify/ui-react/styles/reset.css'
+import '@aws-amplify/ui-react/styles/base.css'
+import '@aws-amplify/ui-react/styles/button.css'
+```
+
+You can also use the main 'styles.css' import with the new reset file too. 
+
+To use CSS layers, replace '.css' with '.layer.css' for any CSS import.
+
+```diff
+- import '@aws-amplify/ui-react/styles.css'
++ import '@aws-amplify/ui-react/styles.layer.css'
+```

.github/actions/changed-packages/action.yml

@@ -32,7 +32,9 @@ runs:
 
         # check if any of the modified files belongs to the specified input packages
         if echo "$changed_files" | grep -Eq "^($package_names)/"; then
-          echo "has-changed-packages=true" >> $GITHUB_OUTPUT
+          # @todo-migration re-enable
+          # echo "has-changed-packages=true" >> $GITHUB_OUTPUT
+          echo "has-changed-packages=false" >> $GITHUB_OUTPUT
         else
           echo "has-changed-packages=false" >> $GITHUB_OUTPUT
         fi

.github/dependency-review/config.yml

@@ -1,6 +1,7 @@
 allow-licenses:
   - '0BSD'
   - 'Apache-2.0'
+  - 'Apache-2.0 AND MIT'
   - 'BlueOak-1.0.0'
   - 'BSL-1.0'
   - 'BSD-1-Clause'
@@ -17,6 +18,7 @@ allow-licenses:
   - 'ISC'
   - 'JSON'
   - 'MIT'
+  - 'MIT AND Zlib'
   - 'MPL-2.0'
   - 'NTP'
   - 'OFL-1.0'

.github/workflows/build-and-runtime-test.yml

@@ -45,10 +45,10 @@ jobs:
         uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f
         with:
           persist-credentials: false
-      - name: Setup Node.js 16
+      - name: Setup Node.js 20
         uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c
         with:
-          node-version: 16
+          node-version: 20
           cache: 'yarn'
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2

.github/workflows/build-system-test-react-native.yml

@@ -67,12 +67,12 @@ jobs:
           key: ${{ runner.os }}-nodemodules-${{ inputs.commit }}
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 3
-      - name: Install Java 11
+      - name: Install Java 17
         if: ${{ matrix.platform == 'android' }}
         uses: actions/setup-java@de1bb2b0c5634f0fc4438d7aa9944e68f9bf86cc # 3.6.0
         with:
           distribution: 'corretto' # Amazon Corretto Build of OpenJDK
-          java-version: '11'
+          java-version: '17'
 
       - name: Install iOS simulator
         if: ${{ matrix.platform == 'ios' }}

.github/workflows/build-system-test.yml

@@ -31,87 +31,87 @@ jobs:
             build-tool-version: latest
             pkg-manager: npm
             language: ts
-            node-version: 16
+            node-version: 20
           - framework: react
             framework-version: 16
             build-tool: cra
             build-tool-version: latest
             pkg-manager: npm
             language: ts
-            node-version: 18
+            node-version: 20
           - framework: react
             framework-version: latest
             build-tool: cra
             build-tool-version: latest
             pkg-manager: npm
             language: js
-            node-version: 18
+            node-version: 20
           - framework: react
             framework-version: latest
             build-tool: cra
             build-tool-version: latest
             pkg-manager: yarn
             pkg-manager-version: 1
             language: ts
-            node-version: 18
+            node-version: 20
           - framework: react
-            framework-version: 17
+            framework-version: 18
             build-tool: next
-            build-tool-version: 11
+            build-tool-version: 12
             pkg-manager: npm
             language: ts
-            node-version: 16
+            node-version: 20
           - framework: react
             framework-version: latest
             build-tool: vite
             build-tool-version: 2
             pkg-manager: npm
             language: ts
-            node-version: 18
+            node-version: 20
 
           - framework: angular
             framework-version: latest
             build-tool: angular-cli
             build-tool-version: 16
             pkg-manager: npm
             language: ts
-            node-version: 18
+            node-version: 20
           - framework: angular
             framework-version: 14
             build-tool: angular-cli
             build-tool-version: 14
             pkg-manager: npm
             language: ts
-            node-version: 18
+            node-version: 20
 
           - framework: vue
             framework-version: 3 # here use "3" instead of "latest" because .vuerc(preset) doesn't accept "latest" as "vueVersion"
             build-tool: vue-cli
             build-tool-version: latest
             pkg-manager: yarn # vue-cli defualt pkg-manager is yarn. It can't be customized in the preset.json.
             language: ts
-            node-version: 18
+            node-version: 20
           - framework: vue
             framework-version: latest
             build-tool: vite
             build-tool-version: latest
             pkg-manager: npm
             language: ts
-            node-version: 18
+            node-version: 20
           - framework: vue
             framework-version: latest
             build-tool: vite
             build-tool-version: 2
             pkg-manager: npm
             language: ts
-            node-version: 18
+            node-version: 20
           - framework: vue
             framework-version: latest
             build-tool: nuxt
             build-tool-version: latest
             pkg-manager: npm
             language: ts
-            node-version: 18
+            node-version: 20
 
     env:
       MEGA_APP_NAME: ${{ matrix.framework }}-${{ matrix.framework-version }}-${{ matrix.build-tool }}-${{ matrix.build-tool-version }}-${{ matrix.language }}

.github/workflows/publish-hotfix.yml

@@ -45,10 +45,10 @@ jobs:
     steps:
       - name: Checkout repo
         uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f
-      - name: Setup Node.js 16
+      - name: Setup Node.js 20
         uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c
         with:
-          node-version: 16
+          node-version: 20
           cache: 'yarn'
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2
@@ -94,10 +94,10 @@ jobs:
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
-      - name: Setup Node.js 16
+      - name: Setup Node.js 20
         uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c
         with:
-          node-version: 16
+          node-version: 20
           cache: 'yarn'
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2