release: Next release/main (#4048)

Co-authored-by: Sreeram Sama <12038441+sreeramsama@users.noreply.github.com>
Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com>
Co-authored-by: kwwendt <78572512+kwwendt@users.noreply.github.com>
Co-authored-by: Chenwei Zhang <40295569+zchenwei@users.noreply.github.com>
Co-authored-by: William Lee <43682783+wlee221@users.noreply.github.com>

Author: 6 people

Diff for: .changeset/cyan-teachers-obey.md

@@ -0,0 +1,18 @@
+---
+'@aws-amplify/ui-react-storage': major
+---
+
+What changed:
+
+- Wrapped StorageManager with ForwardRef to allow for exposed imperative handles and potential future DOM manipulation.
+- This allows for clearing of the files list from a separate component where the Storage Manager component is being used.
+
+Why was the change made:
+
+- There was no easy way to clear the list of files without unmounting the component.
+- This capability is important when using Storage Manager inside a form. After submit, clear all entries including uploaded files.
+
+How should a customer update their code:
+
+- No changes are required by the customer since the added prop is optional in the Storage Manager component.
+- If customers want to take advantage of this change, they can create a files ref and include it in the Storage Manager component, then made calls to clearFiles from the ref.

Diff for: .changeset/dependabot-doggo.md

@@ -0,0 +1,11 @@
+---
+"@aws-amplify/ui-react": major
+"@aws-amplify/ui-react-liveness": patch
+"@aws-amplify/ui-react-notifications": patch
+---
+
+**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](https://github.com/aws-amplify/amplify-ui/pull/4011)).
+
+- `@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](https://github.com/aws-amplify/amplify-ui/pull/4011)).

Diff for: .github/workflows/reusable-unit.yml

@@ -91,10 +91,7 @@ jobs:
 
       - name: Build react-core-notifications package
         if: |
-          matrix.package == 'react' ||
           matrix.package == 'react-native' ||
-          matrix.package == 'react-storage' ||
-          matrix.package == 'react-liveness' ||
           matrix.package == 'react-notifications'
         run: yarn react-core-notifications build
 

Diff for: docs/scripts/generate-props-tables-data.ts

@@ -198,6 +198,18 @@ function getPropertiesFromAllTypeData(sourceTypes: TypeFileName[]) {
   let targetProps: Properties;
 
   sourceTypes.forEach((type) => {
+    // as prop
+    targetProps = {
+      ...targetProps,
+      as: {
+        name: 'as',
+        type: 'React.ElementType',
+        description: 'Changes the underlying rendered HTML element',
+        category: 'BaseComponentProps',
+        isOptional: true,
+      },
+    };
+
     if (!allTypeFilesInterfaceData.get(type)) return;
     for (const [propName, property] of allTypeFilesInterfaceData
       .get(type)

Diff for: docs/scripts/util/getCatalog.ts

@@ -85,7 +85,7 @@ function isPrimitive(node: Node): node is VariableDeclaration {
   return (
     Node.isVariableDeclaration(node) &&
     (typeName.startsWith('Primitive') ||
-      typeName.startsWith('React.ForwardRef'))
+      typeName.startsWith('ForwardRefPrimitive'))
   );
 }
 

Diff for: docs/src/components/Layout/Footer.tsx

@@ -17,22 +17,20 @@ export const Footer = () => {
         gap="xs"
       >
         <Button
-          as={Link}
+          as="a"
           variation="link"
-          // @ts-ignore // IGNORE
           href={GITHUB_REPO}
-          isExternal
+          rel="noopener noreferrer"
           gap="xs"
         >
           <GithubIcon ariaLabel="" />
           Contribute on GitHub
         </Button>
         <Button
-          as={Link}
+          as="a"
           variation="link"
-          // @ts-ignore // IGNORE
           href={DISCORD}
-          isExternal
+          rel="noopener noreferrer"
           gap="xs"
         >
           <DiscordIcon ariaLabel="" />

Diff for: docs/src/components/Layout/Header.tsx

@@ -68,10 +68,9 @@ export const Header = ({
             <Button
               variation="link"
               size="small"
-              as={Link}
-              // @ts-ignore // IGNORE
+              as="a"
               href={GITHUB_REPO}
-              isExternal
+              rel="noopener noreferrer"
               color="font.tertiary"
               fontSize="large"
               title="GitHub"

Diff for: docs/src/components/Theming/TokenBlocks.tsx

@@ -63,7 +63,7 @@ type FontSizeBlockProps = {
 export function FontSizeBlock({ value }: FontSizeBlockProps) {
   return (
     <FontBlock>
-      <View width="4rem" align="right" fontSize={value}>
+      <View width="4rem" textAlign="right" fontSize={value}>
         Aa
       </View>
     </FontBlock>

Diff for: docs/src/pages/[platform]/components/table/examples/HighlightExample.tsx

@@ -10,11 +10,7 @@ export const HighlightExample = () => (
   <Table highlightOnHover={true}>
     <TableHead>
       <TableRow>
-        <TableCell
-          as="th"
-          // @ts-ignore // IGNORE
-          colspan="2"
-        >
+        <TableCell as="th" colSpan={2}>
           Not highlighted
         </TableCell>
       </TableRow>

Diff for: docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx

@@ -4,50 +4,60 @@ import {
   TextField,
   SelectField,
   SwitchField,
-  TextAreaFieldProps,
+  BaseTextAreaFieldProps,
 } from '@aws-amplify/ui-react';
 
-export interface TextAreaFieldControlsProps extends TextAreaFieldProps {
+export interface TextAreaFieldControlsProps extends BaseTextAreaFieldProps {
   setAutoComplete: (
-    value: React.SetStateAction<TextAreaFieldProps['autoComplete']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['autoComplete']>
   ) => void;
   setDefaultValue: (
-    value: React.SetStateAction<TextAreaFieldProps['defaultValue']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['defaultValue']>
   ) => void;
   setDescriptiveText: (
-    value: React.SetStateAction<TextAreaFieldProps['descriptiveText']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['descriptiveText']>
   ) => void;
   setErrorMessage: (
-    value: React.SetStateAction<TextAreaFieldProps['errorMessage']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['errorMessage']>
   ) => void;
   setHasError: (
-    value: React.SetStateAction<TextAreaFieldProps['hasError']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['hasError']>
   ) => void;
   setIsDisabled: (
-    value: React.SetStateAction<TextAreaFieldProps['isDisabled']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['isDisabled']>
   ) => void;
   setIsReadOnly: (
-    value: React.SetStateAction<TextAreaFieldProps['isReadOnly']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['isReadOnly']>
   ) => void;
   setIsRequired: (
-    value: React.SetStateAction<TextAreaFieldProps['isRequired']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['isRequired']>
+  ) => void;
+  setLabel: (
+    value: React.SetStateAction<BaseTextAreaFieldProps['label']>
   ) => void;
-  setLabel: (value: React.SetStateAction<TextAreaFieldProps['label']>) => void;
   setLabelHidden: (
-    value: React.SetStateAction<TextAreaFieldProps['labelHidden']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['labelHidden']>
   ) => void;
   setMaxLength: (
-    value: React.SetStateAction<TextAreaFieldProps['maxLength']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['maxLength']>
+  ) => void;
+  setName: (
+    value: React.SetStateAction<BaseTextAreaFieldProps['name']>
   ) => void;
-  setName: (value: React.SetStateAction<TextAreaFieldProps['name']>) => void;
   setPlaceholder: (
-    value: React.SetStateAction<TextAreaFieldProps['placeholder']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['placeholder']>
+  ) => void;
+  setSize: (
+    value: React.SetStateAction<BaseTextAreaFieldProps['size']>
+  ) => void;
+  setRows: (
+    value: React.SetStateAction<BaseTextAreaFieldProps['rows']>
+  ) => void;
+  setValue: (
+    value: React.SetStateAction<BaseTextAreaFieldProps['value']>
   ) => void;
-  setSize: (value: React.SetStateAction<TextAreaFieldProps['size']>) => void;
-  setRows: (value: React.SetStateAction<TextAreaFieldProps['rows']>) => void;
-  setValue: (value: React.SetStateAction<TextAreaFieldProps['value']>) => void;
   setVariation: (
-    value: React.SetStateAction<TextAreaFieldProps['variation']>
+    value: React.SetStateAction<BaseTextAreaFieldProps['variation']>
   ) => void;
 }
 
@@ -233,7 +243,7 @@ export const TextAreaFieldPropControls: TextAreaFieldControlsInterface = ({
         value={size}
         placeholder="default"
         onChange={(event) =>
-          setSize(event.target.value as TextAreaFieldProps['size'])
+          setSize(event.target.value as BaseTextAreaFieldProps['size'])
         }
         label="size"
       >
@@ -246,7 +256,9 @@ export const TextAreaFieldPropControls: TextAreaFieldControlsInterface = ({
         value={variation}
         placeholder="default"
         onChange={(event) =>
-          setVariation(event.target.value as TextAreaFieldProps['variation'])
+          setVariation(
+            event.target.value as BaseTextAreaFieldProps['variation']
+          )
         }
         label="variation"
       >

Diff for: docs/src/pages/[platform]/components/textareafield/demo.tsx

@@ -4,7 +4,7 @@ import {
   TextAreaField,
   Flex,
   FlexContainerStyleProps,
-  TextAreaFieldProps,
+  BaseTextAreaFieldProps,
 } from '@aws-amplify/ui-react';
 
 import { Demo } from '@/components/Demo';
@@ -168,13 +168,13 @@ export const TextAreaFieldDemo = () => {
       <TextAreaField
         alignContent={alignContent as FlexContainerStyleProps['alignContent']}
         alignItems={alignItems as FlexContainerStyleProps['alignItems']}
-        autoComplete={autoComplete as TextAreaFieldProps['autoComplete']}
+        autoComplete={autoComplete as BaseTextAreaFieldProps['autoComplete']}
         descriptiveText={
-          descriptiveText as TextAreaFieldProps['descriptiveText']
+          descriptiveText as BaseTextAreaFieldProps['descriptiveText']
         }
-        defaultValue={defaultValue as TextAreaFieldProps['defaultValue']}
+        defaultValue={defaultValue as BaseTextAreaFieldProps['defaultValue']}
         direction={direction as FlexContainerStyleProps['direction']}
-        errorMessage={errorMessage as TextAreaFieldProps['errorMessage']}
+        errorMessage={errorMessage as BaseTextAreaFieldProps['errorMessage']}
         gap={gap as FlexContainerStyleProps['gap']}
         hasError={hasError as unknown as boolean}
         isDisabled={isDisabled as unknown as boolean}
@@ -183,15 +183,15 @@ export const TextAreaFieldDemo = () => {
         justifyContent={
           justifyContent as FlexContainerStyleProps['justifyContent']
         }
-        label={label as TextAreaFieldProps['label']}
+        label={label as BaseTextAreaFieldProps['label']}
         labelHidden={labelHidden as unknown as boolean}
-        maxLength={maxLength as TextAreaFieldProps['maxLength']}
-        name={name as TextAreaFieldProps['name']}
-        placeholder={placeholder as TextAreaFieldProps['placeholder']}
-        rows={rows as TextAreaFieldProps['rows']}
-        size={size as TextAreaFieldProps['size']}
-        value={value as TextAreaFieldProps['value']}
-        variation={variation as TextAreaFieldProps['variation']}
+        maxLength={maxLength as BaseTextAreaFieldProps['maxLength']}
+        name={name as BaseTextAreaFieldProps['name']}
+        placeholder={placeholder as BaseTextAreaFieldProps['placeholder']}
+        rows={rows as BaseTextAreaFieldProps['rows']}
+        size={size as BaseTextAreaFieldProps['size']}
+        value={value as BaseTextAreaFieldProps['value']}
+        variation={variation as BaseTextAreaFieldProps['variation']}
         wrap={wrap as FlexContainerStyleProps['wrap']}
         onChange={(e) => console.info(e.currentTarget.value)}
         onInput={(e) => console.info('input fired:', e.currentTarget.value)}

Diff for: docs/src/pages/[platform]/components/textareafield/useTextAreaFieldProps.tsx

@@ -1,74 +1,76 @@
 import * as React from 'react';
 
-import { TextAreaFieldProps } from '@aws-amplify/ui-react';
+import { BaseTextAreaFieldProps } from '@aws-amplify/ui-react';
 
-export const useTextAreaFieldProps = (initialValues: TextAreaFieldProps) => {
+export const useTextAreaFieldProps = (
+  initialValues: BaseTextAreaFieldProps
+) => {
   const [autoComplete, setAutoComplete] = React.useState<
-    TextAreaFieldProps['autoComplete']
+    BaseTextAreaFieldProps['autoComplete']
   >(initialValues.autoComplete);
 
   const [defaultValue, setDefaultValue] = React.useState<
-    TextAreaFieldProps['defaultValue']
+    BaseTextAreaFieldProps['defaultValue']
   >(initialValues.defaultValue);
 
   const [hasError, setHasError] = React.useState<
-    TextAreaFieldProps['hasError']
+    BaseTextAreaFieldProps['hasError']
   >(initialValues.hasError);
 
-  const [label, setLabel] = React.useState<TextAreaFieldProps['label']>(
+  const [label, setLabel] = React.useState<BaseTextAreaFieldProps['label']>(
     initialValues.label
   );
 
   const [descriptiveText, setDescriptiveText] = React.useState<
-    TextAreaFieldProps['descriptiveText']
+    BaseTextAreaFieldProps['descriptiveText']
   >(initialValues.descriptiveText);
 
   const [errorMessage, setErrorMessage] = React.useState<
-    TextAreaFieldProps['errorMessage']
+    BaseTextAreaFieldProps['errorMessage']
   >(initialValues.errorMessage);
 
   const [isDisabled, setIsDisabled] = React.useState<
-    TextAreaFieldProps['isDisabled']
+    BaseTextAreaFieldProps['isDisabled']
   >(initialValues.isDisabled);
 
   const [isReadOnly, setIsReadOnly] = React.useState<
-    TextAreaFieldProps['isReadOnly']
+    BaseTextAreaFieldProps['isReadOnly']
   >(initialValues.isReadOnly);
 
   const [isRequired, setIsRequired] = React.useState<
-    TextAreaFieldProps['isRequired']
+    BaseTextAreaFieldProps['isRequired']
   >(initialValues.isRequired);
 
   const [labelHidden, setLabelHidden] = React.useState<
-    TextAreaFieldProps['labelHidden']
+    BaseTextAreaFieldProps['labelHidden']
   >(initialValues.labelHidden);
 
   const [placeholder, setPlaceholder] = React.useState<
-    TextAreaFieldProps['placeholder']
+    BaseTextAreaFieldProps['placeholder']
   >(initialValues.placeholder);
 
   const [maxLength, setMaxLength] = React.useState<
-    TextAreaFieldProps['maxLength']
+    BaseTextAreaFieldProps['maxLength']
   >(initialValues.maxLength);
 
-  const [name, setName] = React.useState<TextAreaFieldProps['name']>(
+  const [name, setName] = React.useState<BaseTextAreaFieldProps['name']>(
     initialValues.name
   );
 
-  const [rows, setRows] = React.useState<TextAreaFieldProps['rows']>(
+  const [rows, setRows] = React.useState<BaseTextAreaFieldProps['rows']>(
     initialValues.rows
   );
 
-  const [size, setSize] = React.useState<TextAreaFieldProps['size']>(
+  const [size, setSize] = React.useState<BaseTextAreaFieldProps['size']>(
     initialValues.size
   );
 
-  const [value, setValue] = React.useState<TextAreaFieldProps['value']>(
+  const [value, setValue] = React.useState<BaseTextAreaFieldProps['value']>(
     initialValues.value
   );
 
   const [variation, setVariation] = React.useState<
-    TextAreaFieldProps['variation']
+    BaseTextAreaFieldProps['variation']
   >(initialValues.variation);
 
   return {

Diff for: docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/StorageManagerHandleExample.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Button } from '@aws-amplify/ui-react';
+import { StorageManager } from '@aws-amplify/ui-react-storage';
+
+export const StorageManagerHandleExample = () => {
+  const ref = React.useRef(null);
+
+  return (
+    <>
+      <StorageManager
+        acceptedFileTypes={['image/*']}
+        accessLevel="public"
+        maxFileCount={3}
+        ref={ref}
+      />
+      <Button onClick={() => ref.current.clearFiles()}>Clear Files</Button>
+    </>
+  );
+};