@aws-amplify/[email protected]

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

• Updated dependencies [b3e6a97e8, 1cfa1a054, eae79ae15, e25bc4269, 1f358d8fa]:
  • @aws-amplify/[email protected]

@aws-amplify/[email protected]

Patch Changes

• #2419 8def8dc6a Thanks @ioanabrooks! - Hide decorative alert icons from screen readers.

• Updated dependencies [b3e6a97e8, 1cfa1a054, eae79ae15, e25bc4269, 1f358d8fa]:

  • @aws-amplify/[email protected]

@aws-amplify/[email protected]

Patch Changes

• #2343 de1c874f2 Thanks @ErikCH! - Added 'Dismiss alert' to the set of dictionary keys for the authenticator

• #2367 3c468a0f3 Thanks @joebuono! - fix(ui): Add missing Authenticator translations for all available languages

• #2347 1fcfa3c02 Thanks @ioanabrooks! - fix(ui-react): Fixes an issue where TextAreaField does not show line breaks properly in Firefox.

• #2371 adc9ff6e3 Thanks @cshfang! - fix(ui-react): Fixes an issue where the isTruncated prop of the Heading component was not properly applying a truncation.

@aws-amplify/[email protected]

Patch Changes

• Updated dependencies [de1c874f2, 3c468a0f3, 1fcfa3c02, adc9ff6e3]:
  • @aws-amplify/[email protected]

@aws-amplify/[email protected]

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

• #2368 64fa669e2 Thanks @ioanabrooks! - fix(ui-react): Hide decorative alert icons from screen readers.

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

• #2371 adc9ff6e3 Thanks @cshfang! - fix(ui-react): Fixes an issue where the isTruncated prop of the Heading component was not properly applying a truncation.

• Updated dependencies [de1c874f2, 3c468a0f3, 1fcfa3c02, adc9ff6e3]:

  • @aws-amplify/[email protected]

@aws-amplify/[email protected]

Patch Changes

• Updated dependencies [de1c874f2, 3c468a0f3, 1fcfa3c02, adc9ff6e3]:
  • @aws-amplify/[email protected]

@aws-amplify/[email protected]

Patch Changes

• #2287 8418028a3 Thanks @ErikCH! - When first setting up TOTP with MFA the Authenticator is not returning the correct user object. This object did not contain the correct methods, and causes an error if you try to access those methods. This fix will now retrieve the correct user object when a user first sets up MFA TOTP.

• #2330 f067420b9 Thanks @ioanabrooks! - ui-react(fix): Update StepperField disabled buttons styles, making them easier to see.

• #2304 d9dd9220c Thanks @tmokmss! - chore: add translation texts for Japanese

@aws-amplify/[email protected]

Patch Changes

• #2339 12de8fa5b Thanks @ErikCH! - Adds an accessible label for the Alert dismiss button, which is configurable via translation.

• Updated dependencies [8418028a3, f067420b9, d9dd9220c]:

  • @aws-amplify/[email protected]

@aws-amplify/[email protected]

Patch Changes

• #2336 5ffdc40a0 Thanks @joebuono! - fix(ui-react): Improve accessibility of Pagination current item button

• #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

• #2330 f067420b9 Thanks @ioanabrooks! - ui-react(fix): Update StepperField disabled buttons styles, making them easier to see.

• #2277 bc63b7c0c Thanks @calebpollman! - chore(ui-react): lint src/primitives/shared

• Updated dependencies [8418028a3, f067420b9, d9dd9220c]:

  • @aws-amplify/[email protected]

@aws-amplify/[email protected]

Patch Changes

• #2339 12de8fa5b Thanks @ErikCH! - Adds an accessible label for the Alert dismiss button, which is configurable via translation.

• Updated dependencies [8418028a3, f067420b9, d9dd9220c]:

  • @aws-amplify/[email protected]