Skip to content

Latest commit

 

History

History
3708 lines (2474 loc) · 220 KB

CHANGELOG.md

File metadata and controls

3708 lines (2474 loc) · 220 KB

@aws-amplify/ui-react

6.9.1

Patch Changes

6.9.0

Minor Changes

Patch Changes

6.8.1

Patch Changes

6.8.0

Minor Changes

Patch Changes

6.7.2

Patch Changes

6.7.1

Patch Changes

6.7.0

Minor Changes

  • #6175 70971f310 Thanks @calebpollman! - feat(storage-browser): add StorageBrowser and createStorageBrowser

    import { Amplify } from 'aws-amplify';

import { StorageBrowser } from '@aws-amplify/ui-react-storage';
import '@aws-amplify/ui-react-storage/styles.css';

import config from './aws-exports';

Amplify.configure(config);

function App() {
  return <StorageBrowser />;
}
    import { Amplify } from 'aws-amplify';

import {
  createAmplifyAuthAdapter,
  createStorageBrowser,
} from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/styles.css';

import config from './aws-exports';

Amplify.configure(config);

const { StorageBrowser } = createStorageBrowser({
  config: createAmplifyAuthAdapter(),
});

function App() {
  return <StorageBrowser />;
}

Patch Changes

  • Updated dependencies [70971f310]:
    • @aws-amplify/ui-react-core@3.1.0
    • @aws-amplify/ui@6.7.0

6.6.0

Minor Changes

Patch Changes

  • #6031 2e3a051d9 Thanks @dbanksdesign! - fix(textarea): autoresize textarea resets when value is empty

    There was a bug with the autoresize text area where it would not reset the size when a value was cleared. This fixes that bug

  • #6149 0d4d2b91c Thanks @dbanksdesign! - chore: get ai package ready for release

  • Updated dependencies [90ea18ba0, 0d4d2b91c, 24635cfd5]:

    • @aws-amplify/ui-react-core@3.0.30
    • @aws-amplify/ui@6.6.6

6.5.5

Patch Changes

  • #5912 6fea94b89 Thanks @hbuchel! - fix(React/Authenticator): clicking on currently active tab no longer switches to the wrong tab

  • #5917 3655af2be Thanks @dbanksdesign! - chore(ai): adding UA string for AIConversation

  • Updated dependencies [3655af2be]:

    • @aws-amplify/ui-react-core@3.0.29
    • @aws-amplify/ui@6.6.5

6.5.4

Patch Changes

  • Updated dependencies [ac7cb271a]:
    • @aws-amplify/ui@6.6.4
    • @aws-amplify/ui-react-core@3.0.28

6.5.3

Patch Changes

  • Updated dependencies [0d86485fc]:
    • @aws-amplify/ui@6.6.3
    • @aws-amplify/ui-react-core@3.0.27

6.5.2

Patch Changes

6.5.1

Patch Changes

  • #5796 bf9dbc334 Thanks @esauerbo! - chore(deps): Fix transitive dependencies.

  • #5825 3a677a1af Thanks @dbanksdesign! - feat(theming): add global style ability (experimental)

    Adding the ability to create global styles with the experimental theming APIs

    <GlobalStyle styles={{
  'body': {
    backgroundColor: 'purple'
    // supports design tokens!
    color: theme.tokens.colors.font.primary
  }
}} />

  • Updated dependencies [bf9dbc334, 3a677a1af]:

    • @aws-amplify/ui-react-core@3.0.25
    • @aws-amplify/ui@6.6.1

6.5.0

Minor Changes

  • #5812 0ddeea9d4 Thanks @dbanksdesign! - feat(theming) add custom component style rendering

    const customComponentTheme = defineComponentTheme({
  name: 'custom-component',
  theme(tokens) {
    return {
      color: tokens.colors.red[10]
    }
  }
});

export function CustomComponent() {
  return (
    <>
      <View className={customComponentTheme.className()}>
      </View>
      // This will create a style tag with only the styles in the component theme
      // the styles are scoped to the global theme
      <ComponentStyle theme={theme} componentThemes=[customComponentTheme] />
    </>
  )
}

Patch Changes

  • Updated dependencies [0ddeea9d4, 7a12237d2]:
    • @aws-amplify/ui@6.6.0
    • @aws-amplify/ui-react-core@3.0.24

6.4.0

Minor Changes

Patch Changes

  • Updated dependencies [0ebf8b346]:
    • @aws-amplify/ui@6.5.0
    • @aws-amplify/ui-react-core@3.0.23

6.3.1

Patch Changes

  • Updated dependencies [9d96dd1fe]:
    • @aws-amplify/ui@6.4.1
    • @aws-amplify/ui-react-core@3.0.22

6.3.0

Minor Changes

  • #5767 afffa89cb Thanks @thaddmt! - feat(textarea): add autoresizing to textarea

    export const AutoresizeTextareaExample = () => {
  const [value, setValue] = React.useState('');

  return (
    <TextAreaField
      autoResize
      label="Comments"
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
      }}
    />
  );
};

  • #5767 afffa89cb Thanks @thaddmt! - feat(scrollview): add autoScroll prop

    <ScrollView autoScroll="smooth">{/* ... */}</ScrollView>

  • #5767 afffa89cb Thanks @thaddmt! - feat(primitives): add Avatar primitive

    {
  /* Avatar with image */
}
<Avatar src="/cats/5.jpg" />;
{
  /* Avatar with default placeholder icon */
}
<Avatar />;
{
  /* Avatar with initials */
}
<Avatar>DB</Avatar>;
{
  /* Avatar with custom icon */
}
<Avatar>
  <FiSmile style={{ width: '60%', height: '60%' }} />
</Avatar>;

Patch Changes

  • Updated dependencies [afffa89cb]:
    • @aws-amplify/ui@6.4.0
    • @aws-amplify/ui-react-core@3.0.21

6.2.2

Patch Changes

  • Updated dependencies [c3dfbe044]:
    • @aws-amplify/ui@6.3.0
    • @aws-amplify/ui-react-core@3.0.20

6.2.1

Patch Changes

  • Updated dependencies [6e67ab6be, 634815ff0]:
    • @aws-amplify/ui@6.2.0
    • @aws-amplify/ui-react-core@3.0.19

6.2.0

Minor Changes

  • #5170 d73bd9cc8 Thanks @dbanksdesign! - feat(ui): experimental component theming

    This feature lets you fully style and theme built-in components even if there is no design token available. For example, previously you could not add a box shadow or gradient background to the built-in Button component unless you wrote plain CSS. Now you can style every CSS property for all the built-in components with type-safety!

    This also lets you define your own components and style them in the same type-safe way with zero runtime computation.

    defineComponentTheme()

    import { defineComponentTheme } from '@aws-amplify/ui-react/server';

export const buttonTheme = defineComponentTheme({
  // because 'button' is a built-in component, we get type-safety and hints
  // based on the theme shape of our button
  name: 'button',
  theme: (tokens) => {
    return {
      textAlign: 'center',
      padding: tokens.space.xl,
      _modifiers: {
        primary: {
          backgroundColor: tokens.colors.primary[20],
        },
      },
    };
  },
});

    createTheme()

    The theme object passed to createTheme now has an optional components array which is an array of component themes.

    export const theme = createTheme({
  name: 'my-theme',
  components: [buttonTheme, customComponentTheme],
});

    React Server Component support for theming

    You no longer need to use the <ThemeProvider> and rely on React context to theme Amplify UI (you still can though!). There is a new import path for RSC-compliant code: '@aws-amplify/ui-react/server' which you can use to import createTheme and defineComponentTheme as well as a new React Server Component: <ThemeStyle /> which will inject the styles of your theme into the page.

    import { ThemeStyle, createTheme } from '@aws-amplify/ui-react/server';

const theme = createTheme({
  //...
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div {...theme.containerProps({ colorMode: 'system' })}>
      {children}
      <ThemeStyle theme={theme} />
    </div>
  );
}

Patch Changes

6.1.14

Patch Changes

  • #5389 a0248855b Thanks @dbanksdesign! - fix(authenticator): fixing visual inconsistencies

    • Removing any style props from buttons on authenticator to fix font weight inconsistencies
    • Moved the in the Authenticator to be in the same location in the DOM in each view
    • Made the link buttons consistent across Authenticator views

    Fixes #5156

  • #5399 98135dfac Thanks @timngyn! - fix(authenticator): Check first radio button from unverified user attributes so that default value is selected

6.1.13

Patch Changes

  • #5376 31b9f299e Thanks @awinberg-aws! - fix:(SearchField) accessibility - do not exclude clear button from tab order

  • #5321 0483dd833 Thanks @AhmetAhunbayAWS! - This change removes an inconsistency in the heights of ratings between 0-1 (non-inclusive). This change was made per customer request via a raised issue. A customer would only need to update their code if they display ratings between 0-1 (non-inclusive).

  • Updated dependencies [0483dd833]:

    • @aws-amplify/ui@6.0.17
    • @aws-amplify/ui-react-core@3.0.17

6.1.12

Patch Changes

6.1.11

Patch Changes

  • #5258 dc1b3be5b Thanks @calebpollman! - chore(deps): update amplify scoped and RN dep versions

  • Updated dependencies [dc1b3be5b]:

    • @aws-amplify/ui-react-core@3.0.16
    • @aws-amplify/ui@6.0.16

6.1.10

Patch Changes

6.1.9

Patch Changes

  • #5193 de2402842 Thanks @calebpollman! - chore(aws-amplify): point amplify to 6.2.0

  • #5186 9ce5f9d88 Thanks @calebpollman! - feat(@aws-amplify/ui-react-storage): Add handling for aws-amplify/storage improvements:

    Update StorageManager to support differing usages of path prop - existing: accessLevel prop provided with or without optional path prop - additive: no accessLevel prop provided with required path as either a string or a callback provided the current identityId

    Migrate from accessLevel to path as a string:

      <StorageManager
-   accessLevel="guest"
+   path="public/"
    maxFileCount={1}
  />

    Migrate from accessLevel to path as a callback:

      <StorageManager
-   accessLevel="private"
-   path="images/"
+   path={({ identityId }) => `private/${identityId}/images/`}
    maxFileCount={1}
  />

    Update StorageImage to support path prop

    Migrate from imagKey and accessLevel to path:

      <StorageImage
-   imgKey="cat.jpeg"
-   accessLevel="public"
+   path="public/cat.jpeg"
  />

  • Updated dependencies [de2402842, 9ce5f9d88]:

    • @aws-amplify/ui-react-core@3.0.14
    • @aws-amplify/ui@6.0.14

6.1.8

Patch Changes

  • #5167 18da6aede Thanks @esauerbo! - fix(Menu): Fix ability to disable menu component

    This fixes a bug where the Menu component was not respecting the isDisabled prop.

6.1.7

Patch Changes

  • #5120 842c00ad4 Thanks @calebpollman! - chore(deps): update peerDep versions in public packages, point to 6.0.26 for examples and docs

  • Updated dependencies [a26e9eb86, 842c00ad4]:

    • @aws-amplify/ui@6.0.13
    • @aws-amplify/ui-react-core@3.0.13

6.1.6

Patch Changes

  • Updated dependencies [3cc2f8fc1, f64ea459e]:
    • @aws-amplify/ui@6.0.12
    • @aws-amplify/ui-react-core@3.0.12

6.1.5

Patch Changes

  • #5034 1d9c5c862 Thanks @hbuchel! - fix(web/react-native/ui): use translated strings for VerifyUser screen and use censorContactMethod util

    ui/Angular/React/Vue/ReactNative: adds a censorContactMethod() utility to the ui package and refactors the VerifyUser screen in Angular, React, Vue, and ReactNative packages to use this utility.

    Vue: Fixes an issue where translated strings were not being properly used for the VerifyUser screen. Additionally, removes duplicate "verify" id that was on multiple elements.

  • #5003 32702d9c9 Thanks @hbuchel! - fix(ui/react): add missing color token for CheckboxField label

    The CheckboxField label color (and disabled color) can now be themed correctly via:

    label: {
  color: { value: '{colors.purple.80}' },
  _disabled: {
    color: { value: '{colors.purple.60}' },
  },
},

  • Updated dependencies [1d9c5c862, 4eae32e91, 32702d9c9]:

    • @aws-amplify/ui@6.0.11
    • @aws-amplify/ui-react-core@3.0.11

6.1.4

Patch Changes

  • Updated dependencies [80ad8cda6]:
    • @aws-amplify/ui@6.0.10
    • @aws-amplify/ui-react-core@3.0.10

6.1.3

Patch Changes

  • #4971 d66aa68df Thanks @calebpollman! - fix(AccountSettings): pass displayText to WarningView

  • Updated dependencies [7eeb0ae7c]:

    • @aws-amplify/ui-react-core@3.0.9
    • @aws-amplify/ui@6.0.9

6.1.2

Patch Changes

  • #4789 0f767c7fa Thanks @esauerbo! - fix(ui): add tokens for ShowPassword button error state.

    Added 'error' color theme for ShowPassword button (part of PasswordField)

  • #4916 6721c15f8 Thanks @hbuchel! - chore: Removes the brand namespace from the BrandColorKeys type, splits it into PrimaryColorKey and SecondaryColorKey, and updates usage across docs/examples.

  • Updated dependencies [0f767c7fa, 9dc52eb1b, d61690d01]:

    • @aws-amplify/ui@6.0.8
    • @aws-amplify/ui-react-core@3.0.8

6.1.1

Patch Changes

6.1.0

Minor Changes

  • #4869 8d41213bc Thanks @calebpollman! - chore(docs): remove dynamic imports from React primitive pages, add FilterChildren internal component

6.0.7

Patch Changes

  • Updated dependencies [4f643b05b, 190bf28d1]:
    • @aws-amplify/ui-react-core@3.0.6
    • @aws-amplify/ui@6.0.6

6.0.6

Patch Changes

  • #4811 38bae5ee5 Thanks @esauerbo! - fix(liveness): adding aria attributes for photosensitivity warning

    Use a button for photosensitivity warning toggle instead of div to it make keyboard navigable. Add aria roles to make the warning accessible for screen readers.

  • Updated dependencies [38bae5ee5]:

    • @aws-amplify/ui@6.0.5
    • @aws-amplify/ui-react-core@3.0.5

6.0.5

Patch Changes

6.0.4

Patch Changes

  • Updated dependencies [ed55a6a36, 272a05edc]:
    • @aws-amplify/ui@6.0.3
    • @aws-amplify/ui-react-core@3.0.3

6.0.3

Patch Changes

6.0.2

Patch Changes

  • Updated dependencies [9dd0e58e5]:
    • @aws-amplify/ui@6.0.1
    • @aws-amplify/ui-react-core@3.0.1

6.0.1

Patch Changes

6.0.0

Major Changes

  • Authenticator Breaking Changes

The initialState property now accepts forgotPassword in place of resetPassword:

- <Authenticator initialState="resetPassword" />
+ <Authenticator initialState="forgotPassword" />

The user object provided after an end user has been authenticated has been updated to reflect the AuthUser interface available from aws-amplify/auth:

- interface AmplifyUser {
-   challengeName?: ChallengeName;
-   attributes?: CognitpAttributes;
-   username: string;
- }
+ interface AuthUser  {
+   username: string;
+   userId: string;
+   signInDetails?: CognitoAuthSignInDetails;
+ }

AuthUser can be imported from aws-amplify/auth:

import { AuthUser } from 'aws-amplify/auth';

User attributes are now available by directly calling fetchUserAttribues:

import { fetchUserAttributes } from 'aws-amplify/auth';

The function signatures of the services interface have been updated to align with the shape of the underlying aws-amplify/auth APIs used by the Authenticator and provide improved typescript support:

interface AuthenticatorProps {
  services?: {
-    getCurrentUser: () => Promise<any>,
+    getCurrentUser: () => Promise<AuthUser>,

-    handleSignIn: ({ username, password, }: { username: string;password: string; }) => Promise<any>,
+    handleSignIn: (input: SignInInput) => Promise<SignInOutput>,

-    handleSignUp: (formData: any) => Promise<ISignUpResult>,
+    handleSignUp: (input: SignUpInput) => Promise<SignUpOutput>,

-    handleConfirmSignIn: ({ user, code, mfaType, }: { user: any; code: string; mfaType: ChallengeName; }) =>Promise<any>),
+    handleConfirmSignIn: (input: ConfirmSignInInput) => Promise<ConfirmSignInOutput>,

-    handleConfirmSignUp: ({ username, code, }: { username: string; code: string; }) => Promise<any>,
+    handleConfirmSignUp: (input: ConfirmSignUpInput) => Promise<ConfirmSignUpOutput>,

-    handleForgotPasswordSubmit: ({ username, code, password, }: { username: string; code: string; password:string; }) => Promise<string>),
+    handleForgotPasswordSubmit: (input: ConfirmResetPasswordInput) => Promise<void>,

-    handleForgotPassword: (formData: any) => Promise<any>,
+    handleForgotPassword: (input: ResetPasswordInput) => Promise<ResetPasswordOutput>,
  }
}

The input and return type interfaces are available as imports from aws-amplify/auth:

import { ConfirmSignInInput } from 'aws-amplify';

  • #4452 de87be6d3 Thanks @dbanksdesign! - BREAKING:

    • Removing stylistic data-attributes from React primitives
    • Update SwitchField classnames to be BEM
    • Removing remnants of "countryCode"

  • #4509 55d1f4940 Thanks @dbanksdesign! - breaking: refactoring Tabs component to remove Radix dependency and allow more composability and customization.

    - 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:

    <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.

  • #4474 27783d65a Thanks @dbanksdesign! - 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

  • #4476 59c042c17 Thanks @dbanksdesign! - 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.

    <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)

  • Major version bump for all Amplify UI packages due to uprade of peerDependency aws-amplify to v6

  • #4635 91372387c Thanks @dbanksdesign! - breaking(theme): removing brand namespace from the theme tokens

    - tokens.colors.brand.primary[10]
+ tokens.colors.primary[10]
    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

    const theme = createTheme({
  primaryColor: 'red',
  secondaryColor: 'green',
});

Minor Changes

  • #4445 7b55f4f78 Thanks @dbanksdesign! - feat: allow themes to have arbitrary tokens

  • #4578 27be6ccf5 Thanks @dbanksdesign! - 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:

    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.

    - import '@aws-amplify/ui-react/styles.css'
+ import '@aws-amplify/ui-react/styles.layer.css'

Patch Changes

5.3.2

Patch Changes

  • #4649 1dbe3f46c Thanks @dbanksdesign! - fix(storage): fixing drop handler for file extensions

    Previously, adding a file extension for an acceptedFileTypes when a customer would drop a file it would show as rejected even if it was a valid file type. This fixes that issue.

5.3.1

Patch Changes

  • #4414 d570694c7 Thanks @lavr001! - added new isMultiple and selectSize props for the SelectField component

    Example:

      <SelectField
    label="Fruit"
    descriptiveText="What's your favorite fruit?"
    selectSize={3}
    isMultiple={true}
  >
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="pineapple">Pineapple</option>
    <option value="kiwi">Kiwi</option>
    <option value="tangerine">Tangerine</option>
  </SelectField>

  • #4432 c393b74af Thanks @calebpollman! - fix(ui-react): update ButtonGroup to respect child props and allow optional children

  • #4442 7e11a3b7e Thanks @calebpollman! - fix(ui-react): use guaranteed value for BreadCrumbs key

  • Updated dependencies [d570694c7, 6a5a4d79c]:

    • @aws-amplify/ui@5.8.1
    • @aws-amplify/ui-react-core@2.1.33

5.3.0

Minor Changes

  • #4348 276968530 Thanks @hbuchel! - feat(react/ui): add new Fieldset Primitive

    Usage:

    <Fieldset legend="Legend test">
   // Fieldset content/form controls
</Fieldset>

  • #4359 ec495a6f6 Thanks @dbanksdesign! - feat(react): DropZone component

    export default function DefaultDropZoneExample() {
  const [files, setFiles] = React.useState([]);
  return (
    <>
      <DropZone
        onDropComplete={({ files }) => {
          setFiles(files);
        }}
      >
        Drag images here
      </DropZone>
      {files.map((file) => (
        <Text key={file.name}>{file.name}</Text>
      ))}
    </>
  );
}

Patch Changes

  • #4372 265f0b482 Thanks @hbuchel! - fix(react): ShowPasswordButton should have aria-hidden="true" on icon

  • #4367 e1fc61119 Thanks @ioanabrooks! - feat(ui-react-storage): Added upload actions and option to upload files on click. Usage:

     <StorageManager
      acceptedFileTypes={['image/*']}
      accessLevel="public"
      autoUpload={false}
    />

  • #4361 5b6c9bfe4 Thanks @hbuchel! - feat(react): Add new Message primitive.

    Usage:

    <Message colorTheme="error" heading="A message heading">Content of the message.<Message>

  • #4368 14e402b6e Thanks @hbuchel! - chore(ui): adds info, warning, and success border tokens. updates background color tokens for info, warning, success and error.

  • #4389 9471ea53a Thanks @hbuchel! - chore(react): update tests for disabled Fieldset

  • #4384 2407ac294 Thanks @reesscot! - feat: Input and Label primitives

    export const InputLabelExample = () => (
  <>
    <Label htmlFor="first_name">First Name:</Label>
    <Input id="first_name" name="first_name" />
  </>
);

  • Updated dependencies [276968530, ec495a6f6, e1fc61119, 14e402b6e, 2407ac294, 5bc0c8a32, 64fba0fd2]:

    • @aws-amplify/ui@5.8.0
    • @aws-amplify/ui-react-core@2.1.32

5.2.0

Minor Changes

  • #4268 f8c5b77e4 Thanks @dbanksdesign! - feat(react): Add IconsProvider to customize icons globally for all Amplify UI components

    Components that use icons:

    • Alert
    • Checkbox
    • Expander
    • Field
    • Menu
    • Pagination
    • PasswordField
    • Rating
    • SearchField
    • Select
    • StepperField
    • StorageManager

    Wrap your application with the <IconsProvider> (or whatever part of your app you want to customize the icons).

    <IconsProvider icons={{
  alert: {
    info: <MdInfo />
  }
}}>
  {/* ... */}
</IconProvider>

    Works well with the react-icons package!

Patch Changes

  • #4355 00f2344e5 Thanks @calebpollman! - fix(ui-react): merge internal and passed focus event handler props in Checkbox, remove extraneous useCheckbox hook

  • Updated dependencies [5cc76794a]:

    • @aws-amplify/ui@5.7.2
    • @aws-amplify/ui-react-core@2.1.31

5.1.1

Patch Changes

  • #4305 00c7abc25 Thanks @hbuchel! - feat(react): Add colorTheme prop to Button

    The Button React primitive now accepts the colorTheme prop which allows for more color variants. Usage:

    <Button colorTheme="error">Button text</Button>

  • #4331 54d884dd0 Thanks @calebpollman! - feat(ui-react-core): add createContextUtilities

  • Updated dependencies [00c7abc25, 54d884dd0, 5040faf51]:

    • @aws-amplify/ui@5.7.1
    • @aws-amplify/ui-react-core@2.1.30

5.1.0

Minor Changes

  • #4288 30624bd4f Thanks @dbanksdesign! - New component: Breadcrumbs!

    A composable component for displaying breadcrumb navigation

    <Breadcrumbs
  items={[
    {
      href: '/',
      label: 'Home',
    },
    {
      href: '/category',
      label: 'Category',
    },
    {
      href: '/category/type',
      label: 'Type',
    },
  ]}
/>
    <Breadcrumbs.Container>
  {breadcrumbs.map(({ href, label }, idx) => {
    const isCurrent = breadcrumbs.length - 1 === idx;
    return (
      <Breadcrumbs.Item>
        <Breadcrumbs.Link isCurrent={isCurrent} href={href}>
          {label}
        </Breadcrumbs.Link>
        {isCurrent ? null : <Breadcrumbs.Separator>/</Breadcrumbs.Separator>}
      </Breadcrumbs.Item>
    );
  })}
</Breadcrumbs.Container>

Patch Changes

5.0.7

Patch Changes

  • #4301 e7e75874d Thanks @hbuchel! - fix(react/ui): update paddingInlineEnd and icon placement on small and large Select primitives with related tokens for theming.

  • Updated dependencies [e7e75874d, 0417bd41c]:

    • @aws-amplify/ui@5.6.9
    • @aws-amplify/ui-react-core@2.1.28

5.0.6

Patch Changes

  • #4271 6b71ec46c Thanks @dbanksdesign! - fix(primitives): fix border color token for SwitchField thumb

  • Updated dependencies [6b71ec46c]:

    • @aws-amplify/ui@5.6.8
    • @aws-amplify/ui-react-core@2.1.27

5.0.5

Patch Changes

  • #4227 d3ee05415 Thanks @dbanksdesign! - fix(react-native): border widths, spacing, font sizes, opacities in the theme don't throw runtime errors.

    These are all valid in a theme now:

    const theme: Theme = {
  tokens: {
    borderWidths: {
      small: '4',
      medium: '1rem',
      large: 6,
    },
    opacities: {
      '10': '0.2',
    },
    space: {
      small: 4,
      medium: '6',
      large: '{space.small.value}',
    },
    fontSizes: {
      small: '1rem',
    },
  },
};

  • #3646 165a8abbd Thanks @Rogue-striker! - Allow PasswordField visibility toggle icon border color to indicate error

  • #4216 f0b32d275 Thanks @zchenwei! - chore: mark internal used props as deprecated.

  • #4235 c3a418d8d Thanks @dbanksdesign! - fix(authenticator-react): force new password header and footer

    Adding Header and Footer components to ForceNewPassword screen

  • #4262 aea82ff1b Thanks @zchenwei! - feat(ui-react-storage): Add a new connected component StorageImage. It allows you load the images managed by Amplify Storage.

    Example:

    import { StorageImage } from '@aws-amplify/ui-react-storage';

<StorageImage alt="StorageImage" imgKey="image.jpg" accessLevel="public" />;

  • Updated dependencies [78fdfd6c8, d3ee05415, 165a8abbd, 13098b36a, 37e490d39, 6d14bf3f3, aea82ff1b]:

    • @aws-amplify/ui@5.6.7
    • @aws-amplify/ui-react-core@2.1.26

5.0.4

Patch Changes

5.0.3

Patch Changes

5.0.2

Patch Changes

  • Updated dependencies [23180b470, 3cecd0765]:
    • @aws-amplify/ui-react-core@2.1.24
    • @aws-amplify/ui@5.6.5

5.0.1

Patch Changes

5.0.0

Major Changes

  • #4048 c19278b0b Thanks @calebpollman! - Breaking Changes:

    • @aws-amplify/ui-react@5.x removes the to prop on Link component and instead have it extended from the underlying rendered third-party Link if it contains a to prop (PR).

    • @aws-amplify/ui-react@5.x strictly types the View component and updates all component types to include the underlying rendered HTML element's attributes (PR).

4.6.4

Patch Changes

  • #3901 7f59b3c4d Thanks @sreeramsama! - - Adds new ui-react-core-notifications package for utilities related to the Notifications category, and new ui-react-notifications package for components like InAppMessaging. Also sets deprecation messages for InAppMessagingDisplay, InAppMessagingProvider and useInAppMessaging in ui-react package as they will be moved out in a future breaking change release.
    • Adds new ui-react-geo package for Geo related components like MapView and LocationSearch. They will be moved out from ui-react in a future breaking change release.
  • Updated dependencies [7f59b3c4d, ca591a2fc]:
    • @aws-amplify/ui-react-core-notifications@1.0.0
    • @aws-amplify/ui-react-core@2.1.23
    • @aws-amplify/ui@5.6.4

4.6.3

Patch Changes

  • Updated dependencies [62425139f]:
    • @aws-amplify/ui@5.6.3
    • @aws-amplify/ui-react-core@2.1.22

4.6.2

Patch Changes

4.6.1

Patch Changes

  • #3750 1412aa4eb Thanks @tannerbyers! - Removed optional undefined type workaround for MapView props (fog & terrain) due to fix in react-map-gl library.

  • #3788 37d63424e Thanks @dbanksdesign! - feat(storage-manager): add metadata and the rest of the Storage.put params

    const processFile = ({ file, key }) => {
  return {
    file,
    key,
    metadata: {
      id: key,
    },
  };
};

export function StorageManagerMetadataExample() {
  return (
    <StorageManager
      acceptedFileTypes={['image/*']}
      accessLevel="private"
      maxFileCount={3}
      showThumbnails={true}
      processFile={processFile}
    />
  );
}

  • #3708 9551c521b Thanks @helmax-y! - Clear button is removed for disabled SearchField

  • Updated dependencies [4ca838978, d6a3676f2, 37d63424e]:

    • @aws-amplify/ui@5.6.1
    • @aws-amplify/ui-react-core@2.1.20

4.6.0

Minor Changes

Patch Changes

4.5.1

Patch Changes

  • #3657 fefc4cb3d Thanks @dbanksdesign! - Adding in missing changeset from previous release.

  • Updated dependencies [fefc4cb3d]:

    • @aws-amplify/ui@5.5.10
    • @aws-amplify/ui-react-core@2.1.18

4.5.0

Minor Changes

  • #3589 3c3fbf4d7 Thanks @dbanksdesign! - FileUploader becomes StorageManager!

    Creating a new package @aws-amplify/ui-react-storage to keep all future Storage related connected components, the first of which is the StorageManager. The StorageManager is a partial re-write of the FileUploader to address some customer issues and make the component more scalable for the future.

    Some notable changes from FileUploader -> StorageManager

    • Component slots: You can override each part of the StorageManager with your custom UI
    • Pre-upload process files: You can use this to programatically change file names before upload or perform optimizations and validations.
    • Easy text updates: The StorageManager component has a displayText prop where you can pass in all the text the component uses.
    import { StorageManager } from '@aws-amplify/ui-react-storage';

export const DefaultStorageManagerExample = () => {
  return (
    <StorageManager
      acceptedFileTypes={['image/*']}
      accessLevel="public"
      maxFileCount={1}
    />
  );
};

Patch Changes

4.4.3

Patch Changes

4.4.2

Patch Changes

  • #3317 7f1392bcf Thanks @ioanabrooks! - chore(types): better typing of studio code for TS strict mode

    • getOverridesFromVariants
    • useNavigateAction
    • useTypeCastFields

  • Updated dependencies [5ee48f997]:

    • @aws-amplify/ui@5.5.9
    • @aws-amplify/ui-react-core@2.1.17

4.4.1

Patch Changes

  • Updated dependencies [ee2c6981e, 9cc835828]:
    • @aws-amplify/ui@5.5.8
    • @aws-amplify/ui-react-core@2.1.16

4.4.0

Minor Changes

  • #2227 df064a275 Thanks @crnkyunicorn! - Updated the standalone LocationSearch component to pass through events from the underlying maplibre library and included example code in the Geo example

Patch Changes

4.3.10

Patch Changes

4.3.9

Patch Changes

4.3.8

Patch Changes

4.3.7

Patch Changes

  • #3379 cca6afecb Thanks @dbanksdesign! - chore(primitives): ts strict fixes for primitives and primitive hooks

    • usePagination
    • useSwitch
    • useToggleButtonGroup
    • ToggleButtonGroup

  • #3378 56947bcb7 Thanks @hbuchel! - fix(react): add missing size field classes to RadioGroupField, SelectField, TextAreaField and SliderField

  • #3380 bebe7b1cb Thanks @dbanksdesign! - chore(theme): better typing for breakpoints for TS strict mode

  • #3377 6daf2e625 Thanks @ErikCH! - Renamed the maxFiles prop to maxFilesCount

  • #3335 7435b53fd Thanks @dbanksdesign! - chore(react): ts strict for style prop utils

    Refactored internal functions that handle style props and useBreakpointValue hook to be TS strict. Should have no customer impact.

  • Updated dependencies [bebe7b1cb, 7435b53fd]:

    • @aws-amplify/ui@5.5.4
    • @aws-amplify/ui-react-core@2.1.12

4.3.6

Patch Changes

  • #3349 8ae8e0b8c Thanks @ErikCH! - fix: Swapped save and cancel buttons.

  • #3333 4ba0fb5c1 Thanks @calebpollman! - fix(authenticator): migrate totpSecretCode generation to state machine

  • #3344 b85547545 Thanks @ErikCH! - fix: Updated error text for max file count to be more explicit.

  • #3287 412538be9 Thanks @zchenwei! - build: updates to support Node ESM

    Confirmed that both #3155 and #3206 are fixed without having to apply any workaround

    Also, test out the changes with the following frameworks/tools:

    Name Tested? Notes
    Next.js@11, 12, 13 ✅
    Gatsby ✅ Works with ESM. Not support loading CJS build
    Remix ✅
    Astro ✅ Works with ESM. Not support loading CJS build
    webpack ✅
    Vite ✅ Works with ESM. Not support loading CJS build
    Rollup ✅ Works with ESM. Not support loading CJS build
    esbuild ✅
    Parcel ✅
    Snowpack ✅ Need --polyfill-node to fix JS incompatibility in dev mode, but is a known issue

  • #3350 db4ea4f1d Thanks @ErikCH! - fix: Swap the upload button with the clear all button.

  • #3327 13d0882a8 Thanks @wlee221! - fix(rwa): improve default behavior handling for custom formFields.

    Previously, adding custom formFields for fields that are not in signUpAttributes configuration wouldn't get any default values, which could lead to broken UI.

    This commit improves default handling by applying defaults to all known auth field (birthdate, first_name, etc) to custom formField options.

  • Updated dependencies [4ba0fb5c1, 412538be9, 9ce2d01b0, 13d0882a8]:

    • @aws-amplify/ui-react-core@2.1.11
    • @aws-amplify/ui@5.5.3

4.3.5

Patch Changes

4.3.4

Patch Changes

4.3.3

Patch Changes

  • #3260 c335b347e Thanks @ErikCH! - Added fix so zero byte size files will upload and not freeze the File Uploader component.

  • #3223 7587566dd Thanks @dbanksdesign! - chore: fixing TS strict errors in these components:

    • Pagination
    • Rating
    • SearchField
    • SliderField
    • StepperField
    • SwitchField

  • #3277 5b83174aa Thanks @dbanksdesign! - feat(primitives): adds support inert prop on all React primitives

    <View inert>

  • #3264 ae66ab51b Thanks @dbanksdesign! - chore: more TS strict fixes:

    • styleUtils
    • ExpanderItem
    • Tabs
    • View
    • IconClose
    • MenuButton

  • #3269 09b4832fb Thanks @joebuono! - fix(react): Conditionally render deprecation warning if Link component's to prop is used without using as prop

  • #3270 44d92b87f Thanks @dbanksdesign! - fix(tabs): null and undefined children of Tabs will no longer show a Typescript error. Also null children will no longer mess up the index of the tab array which affects the defaultIndex uncontrolled behavior.

  • #3282 9b09654a7 Thanks @calebpollman! - fix(authenticator): remove order keys from formFields after sorting

  • #3266 9efd2f4fa Thanks @ErikCH! - Updated file uploader component text to show singular and plural forms of upload and selected files

  • Updated dependencies [59321c9cc, 9b09654a7]:

    • @aws-amplify/ui@5.5.0
    • @aws-amplify/ui-react-core@2.1.8

4.3.2

Patch Changes

  • Updated dependencies [2912fe3af, ea1b10a2c]:
    • @aws-amplify/ui@5.4.2
    • @aws-amplify/ui-react-core@2.1.7

4.3.1

Patch Changes

  • #3183 cbbf51f53 Thanks @ErikCH! - Fixed MFA totpIssuer and totpUsername so it displays correctly in QR code when scanned.

  • Updated dependencies [db8f019a7, cbbf51f53]:

    • @aws-amplify/ui@5.4.1
    • @aws-amplify/ui-react-core@2.1.6

4.3.0

Minor Changes

  • #3158 0bbb9980c Thanks @nandanbhat! - feat(Authenticator): Enable password validation on resetPassword and forceNewPassword screen

Patch Changes

4.2.1

Patch Changes

  • Updated dependencies [c31a9bf69, 1847840c0]:
    • @aws-amplify/ui@5.3.1
    • @aws-amplify/ui-react-core@2.1.4

4.2.0

Minor Changes

Patch Changes

4.1.0

Minor Changes

Patch Changes

4.0.3

Patch Changes

  • #3071 d062010f4 Thanks @dbanksdesign! - fix(theme): update types for ThemeProvider to accept output of createTheme

  • Updated dependencies [d062010f4]:

    • @aws-amplify/ui@5.1.1
    • @aws-amplify/ui-react-core@2.1.1

4.0.2

Patch Changes

4.0.1

Patch Changes

  • #3000 72c2c5d83 Thanks @ioanabrooks! - Updates the useDataStore hook to generate the predicates according to the new syntax.

  • #2964 ee4b37b6d Thanks @ioanabrooks! - Fixes an issue where the Button loading spinner is not rendered unless the loadingText prop is supplied.

4.0.0

Major Changes

  • #2556 54794d44c Thanks @reesscot! - BREAKING CHANGE: isMultiline prop removed from TextField. Replace any TextField components using the isMultiline prop with the TextAreaField component.

    - <TextField
-  isMultiline
+ <TextAreaField

  • #2636 d71836994 Thanks @dbanksdesign! - BREAKING CHANGE: No longer splitting out Flex and Base style props on Field primitives. Instead, removing all style props to be applied to the wrapper element, the rest will be applied to the input element. Adding inputStyles prop where developers can send style props to the input element (or textarea, select) For TextAreaField, destructuring the resize style prop because it makes sense to apply that to the textarea element.

    - <TextField
-   backgroundColor="red"
+ <TextField
+   inputStyles={{backgroundColor: "red"}}

  • #2786 20a3c6103 Thanks @reesscot! - BREAKING CHANGE: remove legacy exports @aws-amplify/ui-react/legacy and @aws-amplify/ui-angular/legacy.

  • #2703 5ec150f4e Thanks @calebpollman! - Remove useAuthenticator internal variables _state and _send (See #2685)

  • #2772 4a22217e0 Thanks @zchenwei! - BREAKING CHANGE(react): bump up React minimum support version to 16.14.0 and update JSX transform

  • #2828 82903f7bb Thanks @calebpollman! - feat(next-release): render Authenticator field labels

  • #2558 d90b148c0 Thanks @reesscot! - chore: upgrade radix to 1.0

    Fixes error messages during npm install related to React 18. See Migration guide for more information: https://ui.docs.amplify.aws/react/getting-started/migration

  • #2735 fa3135add Thanks @wlee221! - Breaking: We replaced following legacy Authenticator texts:

    • Forgot your password? with the trailing space is replaced by Forgot your password.

    If you were using I18n to translate those keys, please update your translations accordingly to match the new strings.

Minor Changes

Patch Changes

  • #2877 ab8942c54 Thanks @ErikCH! - BREAKING: When overriding Auth.signUp, update the override function call to include the autoSignIn option set to enabled. This is now required.

     async handleSignUp(formData) {
  let { username, password, attributes } = formData;
  // custom username
  username = username.toLowerCase();
  attributes.email = attributes.email.toLowerCase();
  return Auth.signUp({
    username,
    password,
    attributes,
+   autoSignIn: {
+     enabled: true
+   }
  });
}

  • #2827 74e01fc7a Thanks @wlee221! - deps(react): pin radix dependencies

  • Updated dependencies [ab8942c54, 5ec150f4e, 4a22217e0, 82903f7bb, d90b148c0]:

    • @aws-amplify/ui@5.0.0
    • @aws-amplify/ui-react-core@2.0.0

3.6.0

Minor Changes

  • #2708 702a35738 Thanks @zchenwei! - feat: add Autocomplete primitive

    Example

    // Uncontrolled component
import { Autocomplete } from '@aws-amplify/ui-react';
import * as React from 'react';

const options = [
  { id: 'apple', label: 'apple' },
  { id: 'banana', label: 'banana' },
  { id: 'cherry', label: 'cherry' },
  { id: 'grape', label: 'grape' },
  { id: 'kiwis', label: 'kiwis' },
  { id: 'lemon', label: 'lemon' },
  { id: 'mango', label: 'mango' },
  { id: 'orange', label: 'orange' },
  { id: 'strawberry', label: 'strawberry' },
];

export const AutocompleteUncontrolledExample = () => {
  return <Autocomplete label="Uncontrolled autocomplete" options={options} />;
};
    // Controlled component
import { Autocomplete } from '@aws-amplify/ui-react';
import * as React from 'react';

const options = [
  { id: 'apple', label: 'apple' },
  { id: 'banana', label: 'banana' },
  { id: 'cherry', label: 'cherry' },
  { id: 'grape', label: 'grape' },
  { id: 'kiwis', label: 'kiwis' },
  { id: 'lemon', label: 'lemon' },
  { id: 'mango', label: 'mango' },
  { id: 'orange', label: 'orange' },
  { id: 'strawberry', label: 'strawberry' },
];

export const AutocompleteControlledExample = () => {
  const [value, setValue] = React.useState('');

  const onChange = (event) => {
    setValue(event.target.value);
  };

  // Set up onSelect
  const onSelect = (option) => {
    const { label } = option;
    setValue(label);
  };

  // Set up onClear
  const onClear = () => {
    setValue('');
  };

  return (
    <Autocomplete
      label="Controlled autocomplete"
      options={options}
      value={value}
      onChange={onChange}
      onClear={onClear}
      onSelect={onSelect}
    />
  );
};

Patch Changes

  • Updated dependencies [702a35738, 0935da51a]:
    • @aws-amplify/ui@4.1.0
    • @aws-amplify/ui-react-core@1.0.5

3.5.11

Patch Changes

3.5.10

Patch Changes

  • #2751 05bb8c792 Thanks @wlee221! - (Internal patch): Move ComponentClassName to @aws-amplify/ui

  • #2637 5bd5e695a Thanks @dbanksdesign! - Add error state for SwitchField.

    <SwitchField
  label="I agree to the terms and conditions"
  labelPosition="end"
  isChecked={isChecked}
  hasError={hasError}
  errorMessage="Please agree to the terms and conditions"
  onChange={(e) => {
    setIsChecked(e.target.checked);
  }}
/>

  • #2781 6aa1132e7 Thanks @reesscot! - fix: ensure TextField, TextAreaField, StepperField show full width

  • Updated dependencies [05bb8c792, 5bd5e695a, 6aa1132e7, ea1ea36a6]:

    • @aws-amplify/ui@4.0.1
    • @aws-amplify/ui-react-core@1.0.4

3.5.9

Patch Changes

  • #2746 2893da04b Thanks @calebpollman! - chore(ui-react-core): add missing value to AuthenticatorRouteComponentKey

  • Updated dependencies [2893da04b]:

    • @aws-amplify/ui-react-core@1.0.3

3.5.8

Patch Changes

  • #2702 1b1567c0c Thanks @slaymance! - Make xstate core dependency of only framework libraries

  • Updated dependencies [1b1567c0c]:

    • @aws-amplify/ui@4.0.0
    • @aws-amplify/ui-react-core@1.0.2

3.5.7

Patch Changes

3.5.6

Patch Changes

  • Updated dependencies [42143228f]:
    • @aws-amplify/ui@3.14.0
    • @aws-amplify/ui-react-core@1.0.1

3.5.5

Patch Changes

3.5.4

Patch Changes

3.5.3

Patch Changes

3.5.2

Patch Changes

3.5.1

Patch Changes

  • #2538 4a4b5c93d Thanks @calebpollman! - chore(rwa): update user lookup in getServiceFacade, authenticator util typing and useAuthenticator updates

  • #2539 ba9818fb7 Thanks @ErikCH! - Fixed bug in Angular Authenticator that caused the Setup TOTP page to not show the correct totpIssuer and totpUsername in the QR code when overwritten by formFields. Refactored and added in Jest tests for Angular.

  • Updated dependencies [35dae2a3d, 4a4b5c93d, ba9818fb7]:

    • @aws-amplify/ui@3.13.2

3.5.0

Minor Changes

  • #2459 8350d36e2 Thanks @jacoblogan! - Angular: Add amplify-dialcodeselect class which contains the previous countrycodeselect styles Vue: Add amplify-dialcodeselect class which contains the previous countrycodeselect styles React: Added 'dialCode' versions of all 'countryCode' props so that users can begin migrating away from the deprecated countryCode.

    countryCodeLabel => dialCodeLabel
countryCodeName => dialCodeName
onCountryCodeChange => onDialCodeChange
countryCodeRef => dialCodeRef
defaultCountryCode => defaultDialCode

Patch Changes

  • #2513 0dd3e1698 Thanks @zchenwei! - fix: update to use the old JSX transform to support app running on React prior to 16.14.0 where the new JSX transform does not get backported

  • Updated dependencies [b60fec2c4]:

    • @aws-amplify/ui@3.13.1

3.4.1

Patch Changes

  • #2469 322bc2ce7 Thanks @hbuchel! - fix(react): hide svg icon images in a11y tree in Rating component so redundant text is not announced

3.4.0

Minor Changes

  • #2300 eae79ae15 Thanks @zchenwei! - feat: adding indeterminate state checkbox

    Users can create an indeterminate CheckboxField by setting isIndeterminate prop to true.

    Example

    import * as React from 'react';

import { CheckboxField, Flex, View } from '@aws-amplify/ui-react';

export const CheckboxFieldIndeterminateExample = () => {
  const [checkedItems, setCheckedItems] = React.useState([false, false]);
  const checkedItemsRef = React.useRef(null);
  const allChecked = checkedItems.every(Boolean);
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;

  if (isIndeterminate) {
    checkedItemsRef.current = [...checkedItems];
  }
  const handleAllPetsChange = () => {
    if (isIndeterminate) {
      setCheckedItems([true, true]);
    } else if (allChecked) {
      setCheckedItems([false, false]);
    } else if (checkedItemsRef.current) {
      setCheckedItems(checkedItemsRef.current);
    } else {
      setCheckedItems([true, true]);
    }
  };

  const handleCatChange = (e) => {
    const newCheckedItems = [e.target.checked, checkedItems[1]];
    if (!newCheckedItems.some(Boolean) || newCheckedItems.every(Boolean)) {
      checkedItemsRef.current = null;
    }
    setCheckedItems(newCheckedItems);
  };

  const handleDogChange = (e) => {
    const newCheckedItems = [checkedItems[0], e.target.checked];
    if (!newCheckedItems.some(Boolean) || newCheckedItems.every(Boolean)) {
      checkedItemsRef.current = null;
    }
    setCheckedItems(newCheckedItems);
  };

  return (
    <Flex direction="column" gap="0">
      <CheckboxField
        name="all-pets"
        label="All Pets"
        value="allPets"
        checked={allChecked}
        isIndeterminate={isIndeterminate}
        onChange={handleAllPetsChange}
      />
      <View paddingLeft="25px">
        <CheckboxField
          name="cat"
          label="Cat"
          value="cat"
          checked={checkedItems[0]}
          onChange={handleCatChange}
        />
        <CheckboxField
          name="dog"
          label="Dog"
          value="dog"
          checked={checkedItems[1]}
          onChange={handleDogChange}
        />
      </View>
    </Flex>
  );
};

Patch Changes

3.3.0

Minor Changes

  • #2333 48027c8ef Thanks @joebuono! - fix(ui-react): Collection searchNoResultsFound

    When no results are returned from searching a Collection, we render the text "No results found" by default

    • Customer also has the option of passing their own ReactNode to the new searchNoResultsFound prop
    <Collection
  isSearchable
  searchNoResultsFound={
    <Flex justifyContent="center">
      <Text color="purple.80" fontSize="1rem">
        Nothing found, please try again
      </Text>
    </Flex>
  }
>
  {collectionItems}
</Collection>

Patch Changes

  • #2363 07e87534b Thanks @hbuchel! - fix(ui-react): move role="alert" to parent element of Alert to allow for role overrides.

    The Alert component currently has the ARIA alert role by default. This change allows us to override the role when the alert role does not match the use case.

    <Alert role="none">This is no longer an ARIA alert</Alert>

    Learn more about using the alert role on our docs and the W3's spec for the alert role

  • #2355 19a7d31c4 Thanks @hbuchel! - fix(ui-react): ariaLabel is no longer required for Icon component

    Please see the Icon docs for various methods of creating accessible Icons.

3.2.1

Patch Changes

  • #2303 d0d01bf44 Thanks @joebuono! - ui-react(fix): Adds an accessible label for the Alert's dismiss button, which is configurable via the dismissButtonLabel prop

    Configure a custom aria label for the dismiss button

  • #2323 2a1cdba15 Thanks @joebuono! - ui-react(fix): Update ShowPasswordButton to use role=“switch” and add additional screen reader context

    • Keep consistent aria-label “Show password”
    • Add a visually hidden aria-live region (polite) that updates based on the ShowPasswordButton checked state
    • Add passwordIsHiddenLabel and passwordIsShownLabel props for screen readers

3.2.0

Minor Changes

  • #2268 556515238 Thanks @zchenwei! - feat: adding formatValue prop on SliderField to allow formatting the value

    Example

    export const SliderFieldFormatValueExample = () => {
  const formatValue = (value: number) => {
    return `${value}%`;
  };
  return (
    <SliderField
      label="SliderField with formatted value"
      defaultValue={50}
      formatValue={formatValue}
    />
  );
};

Patch Changes

3.1.0

Minor Changes

  • #2262 a72cacec2 Thanks @hein-j! - Update internal type EscapeHatchProps to accept unknown, so that customers can set overrides of any type.

Patch Changes

3.0.4

Patch Changes

3.0.3

Patch Changes

3.0.2

Patch Changes

3.0.1

Patch Changes

3.0.0

Major Changes

  • #2082 e79f41839 Thanks @reesscot! - 🚨BREAKING CHANGE🚨: Built-in icons removed

    We've removed the built-in icons (Icon360, IconSave, etc) from the @aws-amplify/ui-react package. This change was made for a few reasons:

    • There are many other React icon libraries that are compatible with Amplify UI components
    • Removing the icons reduces the overall package size by about 74%.
    • While in most cases the icons are tree-shaken out of the final app bundle, by removing the icons we ensure smaller bundle sizes for all users.

    We are not removing the <Icon> component, which allows customers to easily add SVG icons using the pathData prop. A limited set of the icons have been left for internal only use in Amplify UI primitives.

Minor Changes

  • #2054 5eedbbed4 Thanks @zchenwei! - feat: adding colors theme key support in style props

    Example code

    import { View } from '@aws-amplify/ui-react';

export const Demo = () => {
  return <View backgroundColor="pink.10" color="red.40" />;
};

  • #2112 d458f3639 Thanks @dbanksdesign! - Allow padding and margin to accept theme keys. Also adding paddingInline, paddingBlock, marginInline, and marginBlock style props.

      <View padding="large" />
  <View paddingInline="xl" />
  • #2077 736cfe7cb Thanks @zchenwei! - feat(style): adding theme key support on more style props(font-family, line-height, opacity, box-shadow and transform)
  • #2070 28bf92ddb Thanks @zchenwei! - feat: adding theme key(radii, space, fontSizes, and fontWeights) support for more style props

Patch Changes

  • #2102 a168acdc6 Thanks @dbanksdesign! - fix: nested theme providers by removing menu's portal. Menu primitive no longer renders in a React Portal which means it properly gets the theme from the nearest ThemeProvider. Removing the document element modifications in the ThemeProvider because it is no longer needed. Now the ThemeProvider is much cleaner!
  • #2061 ff34a6b9c Thanks @reesscot! - fix: build-time error message Cannot find module "mapbox-gl" by pinning mapbox-gl to v1.13.2

2.19.1

Patch Changes

  • #2021 6c267aaf8 Thanks @jacoblogan! - React: pass isDisabled flag on searchfield onto the search button UI: add design tokens for collection and searchfield

    Searchfield Tokens added

    • --amplify-components-searchfield-color
    • --amplify-components-searchfield-button-color
    • --amplify-components-searchfield-button-active-background-color
    • --amplify-components-searchfield-button-active-border-color
    • --amplify-components-searchfield-button-active-color
    • --amplify-components-searchfield-button-disabled-background-color
    • --amplify-components-searchfield-button-disabled-border-color
    • --amplify-components-searchfield-button-disabled-color
    • --amplify-components-searchfield-button-focus-background-color
    • --amplify-components-searchfield-button-focus-border-color
    • --amplify-components-searchfield-button-focus-color
    • --amplify-components-searchfield-button-hover-background-color
    • --amplify-components-searchfield-button-hover-border-color
    • --amplify-components-searchfield-button-hover-color

    Collection tokens added

    • --amplify-components-collection-pagination-current-color
    • --amplify-components-collection-pagination-current-background-color
    • --amplify-components-collection-pagination-button-color
    • --amplify-components-collection-pagination-button-hover-background-color
    • --amplify-components-collection-pagination-button-hover-color
    • --amplify-components-collection-pagination-button-disabled-color
    • --amplify-components-collection-search-input-color
    • --amplify-components-collection-search-button-color
    • --amplify-components-collection-search-button-active-background-color
    • --amplify-components-collection-search-button-active-border-color
    • --amplify-components-collection-search-button-active-color
    • --amplify-components-collection-search-button-disabled-background-color
    • --amplify-components-collection-search-button-disabled-border-color
    • --amplify-components-collection-search-button-disabled-color
    • --amplify-components-collection-search-button-focus-background-color
    • --amplify-components-collection-search-button-focus-border-color
    • --amplify-components-collection-search-button-focus-color
    • --amplify-components-collection-search-button-hover-background-color
    • --amplify-components-collection-search-button-hover-border-color
    • --amplify-components-collection-search-button-hover-color
  • #2036 8862110f1 Thanks @hbuchel! - chore(react): update unit tests for Expander, which now supports passing any ReactNode (custom component) as title prop

  • #1945 cf151f9d8 Thanks @wlee221! - Added aria-describedby attribute to link validation error messages to their respective field. This makes the errors more accessible.

  • Updated dependencies [6c267aaf8]:

    • @aws-amplify/ui@3.10.0

2.19.0

Minor Changes

  • #1986 c58c1e056 Thanks @zchenwei! - feat: update custom style props to accept StyleToken type

    For example:

    import {
  Flex,
  Loader,
  Rating,
  SliderField,
  SwitchField,
} from '@aws-amplify/ui-react';

export const StyleTokenExample = () => {
  return (
  <Flex>
    <Loader
    emptyColor={tokens.colors.black}
    filledColor={tokens.colors.orange[40]}
    />

    <Rating
      value={2.5}
      fillColor={tokens.colors.red[60]}
      emptyColor={tokens.colors.green[60]}
    />

    <SliderField
      label="Style Props Slider"
      filledTrackColor={tokens.colors.green[80].value}
      emptyTrackColor={tokens.colors.green[20].value}
      thumbColor="red"
      filledTrackColor={tokens.colors.green[80]}
      emptyTrackColor={tokens.colors.green[20]}
      thumbColor={tokens.colors.red[60]}
      trackSize="15px"
      defaultValue={50}
    />

    <SwitchField
      label="This is a switch"
      trackCheckedColor={tokens.colors.green[60]}
      thumbColor={tokens.colors.orange[10]}
    />
  <Flex>
 );
}

Patch Changes

2.18.3

Patch Changes

2.18.2

Patch Changes

  • #1910 766bf302c Thanks @wlee221! - On userpools with sms mfa required, authenticator will now automatically redirect user to sms mfa page after successful sign up.

    Previously, end users needed to sign in again to go to the sms mfa page (#1660).

2.18.1

Patch Changes

  • Updated dependencies [376c39fc0]:
    • @aws-amplify/ui@3.9.1

2.18.0

Minor Changes

  • #1879 937498b3f Thanks @dbanksdesign! - Add default dark mode theme override for React

      const theme: Theme = {
    name: 'my-theme',
    overrides: [defaultDarkModeOverride],
  };

  // ...
  <AmplifyProvider theme={theme} colorMode="system">

  // or
  <AmplifyProvider theme={theme} colorMode={colorMode}>

Patch Changes

  • #1868 1c3e35a8d Thanks @wlee221! - This PR adds additional safeguards to hub event listeners we use. Now, we will only pass hub events to the auth machine if it is in the correct state.

2.17.1

Patch Changes

2.17.0

Minor Changes

Patch Changes

2.16.2

Patch Changes

2.16.1

Patch Changes

2.16.0

Minor Changes

Patch Changes

  • Updated dependencies [3e5b93e25]:
    • @aws-amplify/ui@3.7.0

2.15.8

Patch Changes

  • #1798 331df831f Thanks @wlee221! - fix(react): Add compatibility with React 18 useSyncExternalStore hook

  • Updated dependencies [331df831f]:

    • @aws-amplify/ui@3.6.8

2.15.7

Patch Changes

  • #1786 4341b3862 Thanks @calebpollman! - fix(ui-react): add graceful handling of falsy form field values in SetupTOTP component

  • Updated dependencies [cd710a07c]:

    • @aws-amplify/ui@3.6.7

2.15.6

Patch Changes

2.15.5

Patch Changes

2.15.4

Patch Changes

  • #1685 c984491dc Thanks @wlee221! - Adjusts Authenticator to accept ReactNode as well as render prop children

2.15.3

Patch Changes

  • #1666 ef5a70817 Thanks @calebpollman! - chore(ui-react): updates to allow eslint react-hooks/rules-of-hooks set to error
    • update eslint 'rules-of-hooks/exhaustive-deps' from 'warning' to 'error'
    • turn linting on for entire ui-react package
    • add missing or update dep arrays as needed to satisfy 'rules-of-hooks/exhaustive-deps'
    • add DefaultFooter component in SignIn
    • add DefaultHeader component in ConfirmSignUp
    • add DefaultComponents interface and remove PartialDeep and related files
    • add useAuthenticatorService and error throw in useAuthenticator to prevent conditional hook calls
  • Updated dependencies [34a19a541, 16dced7de]:
    • @aws-amplify/ui@3.6.3

2.15.2

Patch Changes

  • #1657 65ad18e49 Thanks @wlee221! - chore: Add error message when useAuthenticator can't find a parent Authenticator.Provider.

2.15.1

Patch Changes

  • #1622 14e66c476 Thanks @joebuono! - Addresses our use of dangerouslySetInnerHTML within the AmplifyProvider, and prevents server-side XSS by filtering out closing </style> tags.
  • #1625 e799d32a4 Thanks @dbanksdesign! - Fix broken references in default theme and changing defaultTheme to be exported as BaseTheme type rather than WebTheme because we don't need to be using a WebTheme as it has extra stuff only the provider needs. If you want to get a defaultTheme of WebTheme type you can run createTheme()

  • #1625 e799d32a4 Thanks @dbanksdesign! - Fix broken references in default theme and changing defaultTheme to be exported as BaseTheme type rather than WebTheme because we don't need to be using a WebTheme as it has extra stuff only the provider needs. If you want to get a defaultTheme of WebTheme type you can run createTheme()

  • Updated dependencies [68cf0494f, e799d32a4, e799d32a4]:

    • @aws-amplify/ui@3.6.1

2.15.0

Minor Changes

  • #1598 992c5f6fb Thanks @zchenwei! - feat: adding determinate loader support

    Example:

    To use determinate loader, set isDeterminate to true and pass percentage

    import * as React from 'react';
import { Loader } from '@aws-amplify/ui-react';

export const DeterminateLoaderExample = () => {
  const [percentage, setPercentage] = React.useState(0);
  React.useEffect(() => {
    const clearID = setInterval(() => {
      setPercentage((percentage) => {
        if (percentage < 100) {
          return percentage + 1;
        }
        return 0;
      });
    }, 1000);
    return () => clearInterval(clearID);
  }, []);
  return (
    <>
      <Loader percentage={percentage} isDeterminate />
      <Loader variation="linear" percentage={percentage} isDeterminate />
    </>
  );
};

    To hide the percentage text, set isPercentageTextHidden to true

    import { Loader } from '@aws-amplify/ui-react';

export const LoaderIsPercentageTextHiddenExample = () => {
  return <Loader percentage={60} isDeterminate isPercentageTextHidden />;
};

Patch Changes

2.14.1

Patch Changes

2.14.0

Minor Changes

Patch Changes

  • #1619 a224bb914 Thanks @wlee221! - Optimize useAuthenticators used internally with selector option. This will significantly reduce the number of re-renders in Authenticator.

  • Updated dependencies [4d0a8424e, e20720a89, 4dee728f2]:

    • @aws-amplify/ui@3.5.0

2.13.0

Minor Changes

  • #1566 7ce9dd531 Thanks @jacoblogan! - added useBreakpointValue hook. Used with either a breakpoint object or array

    export const UseBreakpointValueObjectExample = () => {
  const variation = useBreakpointValue({
    base: 'info',
    small: 'warning',
    medium: 'error',
    large: 'success',
  });

  return <Alert variation={variation}>Responsive Alert</Alert>;
};

    OR

    export const UseBreakpointValueArrayExample = () => {
  const variation = useBreakpointValue(['info', 'warning', 'error', 'success']);

  return <Alert variation={variation}>Responsive Alert</Alert>;
};

Patch Changes

2.12.0

Minor Changes

  • #1569 6d3981c4a Thanks @zchenwei! - build: setting up Rollup for bundling

    Both @aws-amplify/ui-react and @aws-amplify/ui cannot be tree shaken before because we bundle it in a wrong way. With preserveModule in Rollup, we make them tree-shakeble friendly.

    With webpack, we can see tree shaking is taking effect now

    // index.tsx
import * as React from 'react';
import ReactDOM from 'react-dom';
import '@aws-amplify/ui-react/styles.css';

import { App } from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// App.tsx
import * as React from 'react';
import { Loader } from '@aws-amplify/ui-react';

export const App = () => {
  return <Loader />;
};

    main.js size

    Before After
    1.7M 161.1k

Patch Changes

  • #1580 1ac9cda71 Thanks @wlee221! - fix(authenticator): look for current user on routed apps whenever app refreshes

2.11.0

Minor Changes

  • #1538 eedae2362 Thanks @joebuono! - Adds the optional hasMorePages prop to the Pagination component

    The reason this is necessary is because sometimes the totalPages count is unknown when pagination occurs at the API level.

    Resulting conditions:

    • Current behavior of totalPages prop stays the same, which determines the page numbers to show
    • A new hasMorePages prop is added to Pagination component
    • When hasMorePages is true, and the customer is at the end of the pages (e.g. 10 of 10), then the next button will NOT be disabled
    • When hasMorePages is false, and the customer is at the end of the pages (e.g. 10 of 10), then the next button WILL be disabled

2.10.4

Patch Changes

  • #1548 0e61396c8 Thanks @calebpollman! - chore(react-authenticator): consolidate Authenticator form event handlers in useFormHandlers hook

  • #1537 c1eed8265 Thanks @reesscot! - fix: suppress erroneous isMultiline deprecation warnings on TextField component

    Deprecation warning messages are showing for users of TextField for the isMultiline prop even though they are not using the prop. This issue is fixed by making the shouldWarn prop required on the internal useDeprecationWarning hook.

  • Updated dependencies [7910c04b5, 30e3155ac]:

    • @aws-amplify/ui@3.3.2

2.10.3

Patch Changes

  • #1535 f1d4020be Thanks @reesscot! - fix: typo in mapping of TextField left style prop (left was mapped to right, when should be mapped to left)

2.10.2

Patch Changes

  • #1530 3a8925b76 Thanks @reesscot! - fix: update complex field components (TextField, TextAreaField, etc) to apply absolute positioning from Figma

    Figma to Studio integration will absolutely position components when autolayout is not enabled in Figma. This causes an issue for field components that were passing position, top, and left, and padding down to the input element, causing the layout not to match Figma. This is fixed by moving the absolute position props and padding up to the container Flex element.

2.10.1

Patch Changes

  • #1484 8b72277ab Thanks @wlee221! - Default labelHidden to false. This can be adjusted in a later PR for better UX.

2.10.0

Minor Changes

  • #1492 0bfe79caa Thanks @ErikCH! - Added new password complexity errors that will show during sign up. Based on the zero-config

Patch Changes

2.9.0

Minor Changes

  • #1474 05a1fa3c3 Thanks @dbanksdesign! - Adding labelPosition to Radio and RadioGroupField

    <RadioGroupField label="Language" name="language" labelPosition="start">
  <Radio value="html">html</Radio>
  <Radio value="css">css</Radio>
  <Radio value="javascript">javascript</Radio>
</RadioGroupField>

Patch Changes

  • #1489 8ead973d2 Thanks @reesscot! - fix: Authenticator issue where InitMachine useEffect runs every render, causing children of Authenticator to be unmounted and remounted on every render.
  • #1429 5202eba2c Thanks @jacoblogan! - Add exported class names object which is a JS object containing the classname, primitive name, and description of class
  • #1483 b97cb9126 Thanks @0618! - - fix a11y erros on docs homepage
    • fix type errors
    • rename css class
  • #1486 9ecb14e35 Thanks @reesscot! - TextField and TextAreaField - Apply width and height style props to Flex container element rather than input field to match SelectField behavior. This will also apply to PasswordField, PhoneNumberField and SearchField which use the TextField.
  • Updated dependencies [05a1fa3c3, b97cb9126, ef5dff599, 3c0b705e3, 9e8d6b212]:
    • @aws-amplify/ui@3.2.1

2.8.0

Minor Changes

  • #1394 3d5acaa4c Thanks @dbanksdesign! - Adding label prop to Divider component.

    import { Flex, Text, Divider } from '@aws-amplify/ui-react';

export const LabelExample = () => (
  <Flex direction="column">
    <Text>Before</Text>
    <Divider label="OR" />
    <Text>After</Text>
  </Flex>
);

Patch Changes

  • #1443 851288030 Thanks @joebuono! - Improve efficiency of View styles by combining hooks into single useStyles hook
  • #1434 45546b0d6 Thanks @joebuono! - Convert padding and margin properties to logical equivalents (e.g., paddingTop converts to padding-block-start)

  • #1447 3343e187b Thanks @dbanksdesign! - Fixing nested AmplifyProviders and theming. This fixes issues seen on the docs site if you have nested AmplifyProviders causing weird issues. The provider now cleans itself up properly and only injects CSS if necessary.

  • Updated dependencies [5f1753785, 4c1a5cfbe, 3d5acaa4c, 731587a58, 3343e187b]:

    • @aws-amplify/ui@3.2.0

2.7.0

Minor Changes

Patch Changes

  • #1415 74e066622 Thanks @dbanksdesign! - Fixing checkbox labelPosition to position the label correctly. Now labelPosition="start" actually means start.

2.6.2

Patch Changes

2.6.1

Patch Changes

2.6.0

Minor Changes

  • #1355 19d5a6bfa Thanks @zchenwei! - feat: adding isSelectionRequired prop to ToggleButtonGroup primitive

    Example:

    import * as React from 'react';
import {
  MdFormatBold,
  MdFormatColorFill,
  MdFormatItalic,
  MdFormatUnderlined,
} from 'react-icons/md';
import { ToggleButton, ToggleButtonGroup } from '@aws-amplify/ui-react';

export const SelectionRequiredToggleButtonGroupExample = () => {
  const [value, setValue] = React.useState('bold');
  return (
    <ToggleButtonGroup
      value={value}
      onChange={(value) => setValue(value as string)}
      isExclusive
      isSelectionRequired
    >
      <ToggleButton value="bold">
        <MdFormatBold />
      </ToggleButton>
      <ToggleButton value="italic">
        <MdFormatItalic />
      </ToggleButton>
      <ToggleButton value="underlined">
        <MdFormatUnderlined />
      </ToggleButton>
      <ToggleButton value="color-fill">
        <MdFormatColorFill />
      </ToggleButton>
    </ToggleButtonGroup>
  );
};

Patch Changes

  • #1366 e73e0276f Thanks @wlee221! - Pass formData to submitForm event on submit. This will ensure any default form values are submitted to Cognito, without relying on CHANGE events.

  • #1371 1a2f8a732 Thanks @reesscot! - feat: add new TextAreaField primitive (replaces TextField isMultiline feature)

    Example

    <TextAreaField
  descriptiveText="Enter a valid last name"
  label="Last name"
  name="last_name"
  placeholder="Baggins"
  rows="3"
  onChange={(e) => console.info(e.currentTarget.value)}
/>

  • Updated dependencies [fbfcd04d3, c57a02349, e73e0276f, 929cb8f76]:

    • @aws-amplify/ui@3.0.15

2.5.0

Minor Changes

  • #1342 7a675ac73 Thanks @joebuono! - Add options prop to

    Example: <SelectField options=['lions', 'tigers', 'bears']

Patch Changes

  • #1320 94d09948a Thanks @wlee221! - Re-export translations from ui-[framework] packages. This lets you use translations directly:

    - import { translations } from '@aws-amplify/ui';
+ import { translations } from '@aws-amplify/ui-[framework]';

2.4.0

Minor Changes

  • #1267 3600d9b6f Thanks @dbanksdesign! - Adding paths prop to Icon which is an array of path-like objects that will be mapped to <path> elements.

    Example:

    <Icon
  ariaLabel="tag"
  viewBox={{ width: 23, height: 15 }}
  paths={[
    {
      d: 'M1 0.5C0.723858 0.5 0.5 0.723858 0.5 1V14C0.5 14.2761 0.723858 14.5 1 14.5H14C14.1148 14.5 14.2262 14.4605 14.3153 14.3881L22.3153 7.88806C22.4322 7.79311 22.5 7.65056 22.5 7.5C22.5 7.34944 22.4322 7.20689 22.3153 7.11194L14.3153 0.611943C14.2262 0.539529 14.1148 0.5 14 0.5H1Z',
      strokeLinejoin: 'bevel',
      strokeLinecap: 'round',
      strokeDasharray: '4 4',
      fill: 'transparent',
      stroke: 'currentColor',
    },
  ]}
/>

Patch Changes

  • #1259 a6af87143 Thanks @jacoblogan! - move data-theme attributes to document root to capture elements that fall outside of the amplify provider component

2.3.0

Minor Changes

  • #1229 dc4bb31d5 Thanks @dbanksdesign! - Adding more flexibility in the Icon component. Added as and children to the Icon props to allow for more complex icons.

    Using as prop with icon libraries:

    import { Icon } from '@aws-amplify/ui-react';
import { DiJsBadge } from 'react-icons/di';

<Icon ariaLabel="Javascript" as={DiJsBadge} />;

    Using multiple paths:

    import { Icon } from '@aws-amplify/ui-react';

<Icon ariaLabel="Align bottom" color="rebeccapurple">
  <path d="M13 10H17V16H13V10Z" fill="currentColor" opacity="0.5" />
  <path d="M11 4H7V16H11V4Z" fill="currentColor" />
  <path d="M18 18H6V20H18V18Z" fill="currentColor" />
</Icon>;

Patch Changes

2.2.2

Patch Changes

2.2.1

Patch Changes

2.2.0

Minor Changes

  • #1168 b32dd86bf Thanks @wlee221! - This enables useAuthenticator usage outside to access commonly requested authenticator context like user and route.

    First wrap your App with Authenticator.Provider:

    const App = (
  <Authenticator.Provider>
    <MyApp />
  </Authenticator.Provider>
);

    To avoid repeated re-renders, you can pass a function that takes in Authenticator context and returns an array of desired context values. This hook will only trigger re-render if any of the array value changes.

    const Home = () => {
  const { user, signOut } = useAuthenticator((context) => [context.user]);

  return (
    <>
      <h2>Welcome, {user.username}!</h2>
      <button onClick={signOut}>Sign Out</button>
    </>
  );
};

const Login = () => <Authenticator />;

function MyApp() {
  const { route } = useAuthenticator((context) => [context.route]);

  return route === 'authenticated' ? <Home /> : <Login />;
}

Patch Changes

  • #1176 f7f77237e Thanks @ErikCH! - Added new force new password fields component. Also auto detect required attributes on force new password page.

  • Updated dependencies [3afdc1fc9]:

    • @aws-amplify/ui@3.0.10

2.1.10

Patch Changes

2.1.9

Patch Changes

2.1.8

Patch Changes

  • f137f8a1d Thanks @wlee221! - Revert "Remove IdProvider and port useId from radix (#1010)"

2.1.7

Patch Changes

  • #1083 2e7dbaeab Thanks @ErikCH! - Updated QR code page so users on mobile don't have to take a picture of the QR code
  • #1125 c12184702 Thanks @ErikCH! - Disable input on form submit for React on Sign up, Confirm Sign In, Confirm Sign Up, Force New Password, Confirm Reset Password, Reset Password, Setup TOTP, Confirm Verify User, and Verify User.

2.1.6

Patch Changes

2.1.5

Patch Changes

2.1.4

Patch Changes

2.1.3

Patch Changes

  • #910 96830f6a3 Thanks @ErikCH! - Added text to confirm sign up page, so user knows where code was delivered.

2.1.2

Patch Changes

2.1.1

Patch Changes

  • #877 3774e9aac Thanks @dbanksdesign! - Add back in dangerouslySetInnerHTML for theme. Not using this was causing hydration issues in NextJS
  • #832 f81aa5917 Thanks @reesscot! - ForwardRef support for PasswordField, FieldGroup, & FieldGroupIconButton primitives.

2.1.0

Minor Changes

Patch Changes

2.0.0

Major Changes

  • #747 81169c66e Thanks @wlee221! - New primitive components and theming API

    Amplify UI is building primitive components like badges, cards, alerts, etc. These primitive components will first be available on React with the goal of adding support for more frameworks in the future. We hope these primitives will empower developers to build applications faster. We plan on building out more connected components like the Authenticator and we need primitive components like buttons and inputs to be shared across them. Exposing these primitive components allows developers to create and theme applications end-to-end using the same components everywhere.

    See: RFC: Amplify UI Primitive Components

    Goals

    Flexible – Primitives can be integrated into as many applications as possible. Customizable – Primitives can be composed and styled using a theme, CSS, a CSS-in-JS framework, or un-styled. Accessible – Primitives follow WCAG and WAI-ARIA guidelines to make building accessible applications easy. Basic

    Implementation

    • Added 37 new React primitive components such as Button, TextField, Alert that are the building blocks to create consistency across connected components.
    • Added Theming API to allow global and component-override theming. Theme structure uses design tokens including borderWidth, colors, fonts, fontSizes, fontWeights, LineHeights, opacities and breakpoints.
    • Documentation: https://ui.docs.amplify.aws/components

  • #745 3ead9c629 Thanks @wlee221! - Zero-Configuration Authenticator for Angular, React, & Vue

    The Authenticator has been updated based on customer feedback & real-world use-cases to deliver an improved out-of-the-box experience & greater customization.

    See: RFC: Authenticator@next

    Goals

    • Zero-config – The Authenticator automatically infers Amplify CLI & Admin UI settings to work out-of-the-box.

      Run amplify pull with the latest CLI whenever your backend changes, and the Authenticator automatically reflects the correct login mechanism, social providers, & more.

    • Native – The Authenticator is implemented in its respective framework (e.g. Angular, React, Vue) for consistency & familiarity.

    • Stable – Existing & upcoming Authenticator behavior is captured & tested to reduce & prevent regressions.

      Authenticator behavior is tested as E2E tests on every PR.

    • Interoperable – Work with password managers, autofill, existing styles, & other common features.

    • Customizable – More ways to customize the UI & behavior without losing the benefits of the Authenticator.

      Customers have access to the same functionality that the Authenticator uses internally to even build a 100% custom Authenticator, without sacrificing any of the logic.

    • Reproducible – Authentication is complex. The Authenticator is is developed & tested against a myriad of Amplify backends, example apps, and specifications.

      Check out our environments and examples for more.

    Learn more by visiting the Authenticator Documentation.

Minor Changes

  • #626 f84e9949b Thanks @ericclemmons! - ## Zero Configuration

    As of @aws-amplify/cli@6.5.0, aws-exports.js includes your backend configuration for the Authenticator to automatically infer loginMechanisms and socialProviders.

    Before (React)

    export default withAuthenticator(App, {
  loginMechanisms: ['email'],
  socialProviders: ['amazon', 'apple', 'facebook', 'google'],
});

    After (React)

    export default withAuthenticator(App);

    Sign in with Apple

    The Authenticator supports apple as one of many socialProviders. See: https://docs.amplify.aws/lib/auth/social/q/platform/js/

  • #650 e76c5ac17 Thanks @ericclemmons! - ## signUpAttributes

    The Sign Up form will include most of https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html by default with zero-config.

    Any verification mechanisms (e.g. email, phone_number) will always be required.

  • #698 5482edcbb Thanks @reesscot! - Add forwardRef support to Button & View

  • #716 e155ef0be Thanks @reesscot! - Remove AmplifyProvider custom components feature

  • #717 edea9ffaa Thanks @dbanksdesign! - Adding card variations

    <Card>
  Default card
</Card>

<Card variation="outlined">
  Outlined card
</Card>

<Card variation="elevated">
  Elevated card
</Card>

  • #653 70552a4cc Thanks @reesscot! - Icon size now matches parent font-size. Allows customers to more easily use icons alongsize Headings, Buttons, etc.

    Example:

    <Button gap="0.1rem" size="small">
    <IconSave /> Save
</Button>

  • #582 3143deff1 Thanks @ericclemmons! - AmplifyProvider accepts a partial list of primitives as components:

    const App = () => {
  const {
    components: { Heading },
  } = useAmplify();

  return <Heading>Howdy</Heading>;
};

<AmplifyProvider
  components={{
    Heading({ children }) {
      return <h1>{children}</h1>;
    },
  }}
>
  <App />
</AmplifyProvider>;

Patch Changes

  • #737 8f0301f0b Thanks @reesscot! - ForwardRef support - CountryCode, SelectField, and SliderField

  • #552 bba3242af Thanks @ericclemmons! - @aws-amplify/ui-react supports validation & re-use & customization of Authenticator.SignUp.FormFields via components & services:

    <Authenticator
  components={{
    SignUp: {
      FormFields() {
        const { validationErrors } = useAuthenticator();
        return (
          <>
            <TextField
              label="Preferred Username"
              labelHidden={true}
              name="preferred_username"
              placeholder="Preferred Username"
            />
            <Authenticator.SignUp.FormFields />
            <CheckboxField
              errorMessage={validationErrors.acknowledgement}
              hasError={!!validationErrors.acknowledgement}
              label="I agree with the Terms & Conditions"
              name="acknowledgement"
              value="yes"
            />
          </>
        );
      },
    },
  }}
  services={{
    async validateCustomSignUp(formData) {
      if (!formData.acknowledgement) {
        return {
          acknowledgement: 'You must agree to the Terms & Conditions',
        };
      }
    },
  }}
/>

  • #617 77fa42da5 Thanks @hvergara! - Fix primitives catalog generator

  • #720 84a86b4ef Thanks @reesscot! - ForwardRef support - Flex and Grid

  • #761 a82e422f3 Thanks @reesscot! - ForwardRef support for TextField

  • #709 3cc1c15d7 Thanks @dbanksdesign! - Building icons from Figma source now.

  • #618 943d4b661 Thanks @hvergara! - Make style prop types more flexible

  • #636 5e31719f1 Thanks @hvergara! - useStorageURL React hook

  • #725 8f4d8129c Thanks @reesscot! - ForwardRef support - misc view-based primitives

  • #601 f6d144dc3 Thanks @hvergara! - Add useAuth React hook

  • #731 c5ae2f44a Thanks @reesscot! - ForwardRef support - textarea, checkbox, radio

  • #568 36d256b02 Thanks @slaymance! - Adds React Table primitive

  • #727 2b2ae8469 Thanks @dbanksdesign! - * Divider component has more theming options for the border style, color, and width.

    • Fixing vertical divider
    • Improving Divider docs

  • #721 e90085e1d Thanks @reesscot! - Forward ref inputs

  • #695 d5009572c Thanks @ericclemmons! - ## Header & Footer Slots

    • Add Header slot above the Authenticator
    • Add Footer slot below the Authenticator
    • Add Sign In Header slot above the Sign In form
    • Add Sign In Footer slot below the Sign In form
    • Add Sign Up Header slot above the Sign Up form
    • Add Sign Up Footer slot below the Sign Up form

  • #719 df2bcb749 Thanks @reesscot! - ForwardRef support - base primitives

  • #612 beb9b49b5 Thanks @reesscot! - Menu primitive

    New primitive which enables customers to create aaccessible, interactive menu for selecting actions within an application. Dropdown menu is collision-aware and will automatically change location based on available space.

    import { Divider, Menu, MenuItem } from '@aws-amplify/ui-react';

export const BasicExample = () => {
  return (
    <Menu>
      <MenuItem onClick={() => alert('Download')}>Download</MenuItem>
      <MenuItem onClick={() => alert('Create a Copy')}>
        Create a Copy
      </MenuItem>
      <MenuItem onClick={() => alert('Mark as Draft')}>
        Mark as Draft
      </MenuItem>
      <Divider />
      <MenuItem isDisabled onClick={() => alert('Delete')}>
        Delete
      </MenuItem>
      <MenuItem onClick={() => alert('Attend a workshop')}>
        Attend a workshop
      </MenuItem>
    </Menu>
  );
};

  • #638 d71e65609 Thanks @ericclemmons! - Fix getOverrideProps to return all, not just 2

  • #634 5257a3109 Thanks @dbanksdesign! - Adding support for token style props in React components and moving createTheme inside the AmplifyProvider so users don't have to call it directly in React.

    const theme: Theme = {
  name: 'my-theme',
  tokens: {
    //...
  },
};

const App = () => {
  return <AmplifyProvider theme={theme}></AmplifyProvider>;
};

    Then using theme tokens in a style prop:

    import { useTheme, Text } from '@aws-amplify/ui-react';

const MyComponent = () => {
  const { tokens } = useTheme();
  return <Text color={tokens.colors.font.error}>Error!</Text>;
};

    The ui-react package is now exporting the Theme type to make it easier to define a theme object outside of the createTheme method.

  • #748 ca04c8dbc Thanks @reesscot! - Remove internal fieldgroup export

  • Updated dependencies [bba3242af, f84e9949b, e76c5ac17, 81169c66e, 3cc1c15d7, 2b2ae8469, b46597cef, edea9ffaa, bd3e09a09, 70552a4cc, beb9b49b5, 5257a3109, 3ead9c629]:

    • @aws-amplify/ui@3.0.0