Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or setup this action to publish automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@aws-amplify/ui-react@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

@aws-amplify/ui@4.1.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

• #2881 0935da51a Thanks @francisGolden! - Fix italian grammar in translation and improve accuracy

@aws-amplify/ui-angular@2.4.26

Patch Changes

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

@aws-amplify/ui-react-core@1.0.5

Patch Changes

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

@aws-amplify/ui-vue@2.4.26

Patch Changes

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