Vue reenable skipped unit tests

docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx

@@ -124,3 +124,7 @@ with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, an
 <Fragment useCommonWebContent platforms={['web', 'react-native', 'swift']}>
   {({ platform }) => import(`./hidesignup.${platform}.mdx`)}
 </Fragment>
+
+<Fragment useCommonWebContent platforms={['swift']}>
+  {({ platform }) => import(`./totpIssuer.${platform}.mdx`)}
+</Fragment>

docs/src/pages/[platform]/connected-components/authenticator/configuration/totpIssuer.swift.mdx

@@ -0,0 +1,11 @@
+## TOTP Issuer
+
+The TOTP issuer is the name that will be shown in TOTP applications preceding the account name. In most cases, this should be the name of your app. For example, if your app is called "My App", your user will see "My App" - "username" in their TOTP app. This can be customized by adding the `totpOptions` argument to the Authenticator component with a value for `issuer`. 
+
+Note: Unless changed, the default issuer is the application name retrieved from the project configuration. The key for this value is `CFBundleDisplayName` on iOS found in `info.plist`.
+
+```swift
+Authenticator(totpOptions: .init(issuer: "My App")) { _ in
+    Text("Signed In Content")
+}
+```

docs/src/pages/[platform]/connected-components/authenticator/customization/customization.full-ui-customization.swift.mdx

@@ -56,3 +56,30 @@ struct CustomSignInView: View {
 }
 
 ```
+
+### TOTP Setup
+
+You can also customize the TOTP setup experience. We make available arguments in the `ContinueSignInWithTOTPSetupView` i.e. `qrCodeContent` and `copyKeyContent` that can help you provide custom content for the TOTP Setup Experience. In the example below, examine how you could customize the setup screen.
+
+```swift
+Authenticator(
+    continueSignInWithTOTPSetupContent: { state in
+        ContinueSignInWithTOTPSetupView(
+            state: state,
+
+            // Example of how a customer can pass a custom QR code
+            qrCodeContent: { state in
+                // Your custom QR Code implementation goes here
+
+            },
+            copyKeyContent: { state in
+                // YOUR custom implementation goes here
+            }
+        )
+    },
+    content: { state in
+        Text("Signed In Content")
+    }
+)
+
+```

examples/next/pages/ui/components/storage/storage-manager/accept-file-extension/aws-exports.js

@@ -0,0 +1,2 @@
+import awsExports from '@environments/storage/file-uploader/src/aws-exports';
+export default awsExports;

examples/next/pages/ui/components/storage/storage-manager/accept-file-extension/index.page.tsx

@@ -0,0 +1,19 @@
+import { Amplify } from 'aws-amplify';
+import { StorageManager } from '@aws-amplify/ui-react-storage';
+import '@aws-amplify/ui-react/styles.css';
+import awsExports from './aws-exports';
+Amplify.configure(awsExports);
+
+export function StorageManagerExample() {
+  return (
+    <>
+      <StorageManager
+        acceptedFileTypes={['.png']}
+        accessLevel="public"
+        maxFileCount={1}
+        showThumbnails
+      />
+    </>
+  );
+}
+export default StorageManagerExample;

packages/react-core/src/components/FormCore/types.ts

@@ -63,7 +63,7 @@ export interface RegisterFieldParams<Values extends FormValues = FormValues> {
 
 export interface UseFormParams<
   Values extends FormValues = FormValues,
-  OnSubmit extends SubmitHandler<Values> = SubmitHandler<Values>
+  OnSubmit extends SubmitHandler<Values> = SubmitHandler<Values>,
 > {
   /**
    * Custom error message provided to `Error` on call to `useForm` outside `FormProvider`
@@ -193,7 +193,7 @@ export interface UseField<Name extends string = string>
 export interface UseFieldParams<
   OnBlur extends FocusHandler | undefined,
   OnChange extends ChangeHandler | undefined,
-  Values extends FormValues = FormValues
+  Values extends FormValues = FormValues,
 > {
   /**
    * Controlled `disabled` state
@@ -252,7 +252,7 @@ export interface UseFieldParams<
  */
 export interface UseControlledFieldParams<
   OnBlur extends FocusHandler | undefined,
-  Values extends FormValues = FormValues
+  Values extends FormValues = FormValues,
 > extends Omit<UseFieldParams<OnBlur, undefined, Values>, 'onChange'> {
   /**
    * Controlled text change event handler

packages/react-core/src/components/FormCore/useField.ts

@@ -12,7 +12,7 @@ export const DEFAULT_ERROR_MESSAGE =
  */
 export default function useField<
   OnBlur extends FocusHandler,
-  OnChange extends ChangeHandler
+  OnChange extends ChangeHandler,
 >(params: UseFieldParams<OnBlur, OnChange>): UseField {
   const { getFieldState, registerField } = useForm({
     errorMessage: DEFAULT_ERROR_MESSAGE,

packages/react-core/src/components/FormCore/useForm.ts

@@ -25,7 +25,7 @@ export const DEFAULT_ERROR_MESSAGE =
  */
 export default function useForm<
   Values extends FormValues = FormValues,
-  OnSubmit extends SubmitHandler = SubmitHandler
+  OnSubmit extends SubmitHandler = SubmitHandler,
 >(options: UseFormParams<Values, OnSubmit> = {}): UseForm<Values> {
   const formContext = useFormContext();
   const { errorMessage, onSubmit: _onSubmit } = options;

packages/react-core/src/components/FormCore/withFormProvider.tsx

@@ -12,7 +12,7 @@ import { FormHandle, FormProviderProps } from './types';
 export default function withFormProvider<
   ChildComp extends AnyComponent,
   ChildProps extends React.ComponentPropsWithRef<ChildComp>,
-  Props extends MergeProps<FormProviderProps, ChildProps>
+  Props extends MergeProps<FormProviderProps, ChildProps>,
 >(
   Child: ChildComp
 ): React.ForwardRefExoticComponent<

packages/react-core/src/utils/createContextUtilities.tsx

@@ -89,7 +89,7 @@ type CreateContextUtilitiesReturn<ContextType, ContextName extends string> = {
 export default function createContextUtilities<
   ContextType,
   ContextName extends string = string,
-  Message extends string | undefined = string | undefined
+  Message extends string | undefined = string | undefined,
 >(
   options: ContextOptions<ContextType, ContextName, Message>
 ): CreateContextUtilitiesReturn<ContextType, ContextName> {

packages/react-liveness/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @aws-amplify/ui-react-liveness
 
+## 2.0.11
+
+### Patch Changes
+
+- Updated dependencies [[`1dbe3f46c`](https://github.com/aws-amplify/amplify-ui/commit/1dbe3f46c2423c407aa2e499f383745b45b2e640)]:
+  - @aws-amplify/[email protected]
+
 ## 2.0.10
 
 ### Patch Changes

packages/react-liveness/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@aws-amplify/ui-react-liveness",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@aws-amplify/ui": "5.8.1",
-    "@aws-amplify/ui-react": "5.3.1",
+    "@aws-amplify/ui-react": "5.3.2",
     "@aws-sdk/client-rekognitionstreaming": "3.398.0",
     "@aws-sdk/util-format-url": "^3.410.0",
     "@smithy/eventstream-serde-browser": "^2.0.4",

packages/react-liveness/src/version.ts

@@ -1 +1 @@
-export const VERSION = '2.0.10';
+export const VERSION = '2.0.11';

packages/react-notifications/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @aws-amplify/ui-react-notifications
 
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies [[`1dbe3f46c`](https://github.com/aws-amplify/amplify-ui/commit/1dbe3f46c2423c407aa2e499f383745b45b2e640)]:
+  - @aws-amplify/[email protected]
+
 ## 1.0.13
 
 ### Patch Changes

packages/react-notifications/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-notifications",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@aws-amplify/ui": "5.8.1",
-    "@aws-amplify/ui-react": "5.3.1",
+    "@aws-amplify/ui-react": "5.3.2",
     "@aws-amplify/ui-react-core-notifications": "1.0.10",
     "classnames": "2.3.1",
     "tinycolor2": "1.4.2"

packages/react-storage/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @aws-amplify/ui-react-storage
 
+## 2.3.2
+
+### Patch Changes
+
+- [#4649](https://github.com/aws-amplify/amplify-ui/pull/4649) [`1dbe3f46c`](https://github.com/aws-amplify/amplify-ui/commit/1dbe3f46c2423c407aa2e499f383745b45b2e640) Thanks [@dbanksdesign](https://github.com/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.
+
+- Updated dependencies [[`1dbe3f46c`](https://github.com/aws-amplify/amplify-ui/commit/1dbe3f46c2423c407aa2e499f383745b45b2e640)]:
+  - @aws-amplify/[email protected]
+
 ## 2.3.1
 
 ### Patch Changes

packages/react-storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-storage",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@aws-amplify/ui": "5.8.1",
-    "@aws-amplify/ui-react": "5.3.1",
+    "@aws-amplify/ui-react": "5.3.2",
     "@aws-amplify/ui-react-core": "2.1.33",
     "classnames": "2.3.1",
     "lodash": "4.17.21",

packages/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @aws-amplify/ui-react
 
+## 5.3.2
+
+### Patch Changes
+
+- [#4649](https://github.com/aws-amplify/amplify-ui/pull/4649) [`1dbe3f46c`](https://github.com/aws-amplify/amplify-ui/commit/1dbe3f46c2423c407aa2e499f383745b45b2e640) Thanks [@dbanksdesign](https://github.com/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

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {

packages/react/src/primitives/DropZone/__tests__/filterAllowedFiles.test.ts

@@ -0,0 +1,32 @@
+import { filterAllowedFiles } from '../filterAllowedFiles';
+
+describe('filterAllowFiles', () => {
+  const droppedFiles = [
+    new File([], 'test.jpg', { type: 'image/jpg' }),
+    new File([], 'test.png', { type: 'image/png' }),
+  ];
+
+  it('should work with * MIME types', () => {
+    const { acceptedFiles, rejectedFiles } = filterAllowedFiles(droppedFiles, [
+      'image/*',
+    ]);
+    expect(rejectedFiles).toHaveLength(0);
+    expect(acceptedFiles).toHaveLength(2);
+  });
+
+  it('should work with extension types', () => {
+    const { acceptedFiles, rejectedFiles } = filterAllowedFiles(droppedFiles, [
+      '.png',
+    ]);
+    expect(rejectedFiles).toHaveLength(1);
+    expect(acceptedFiles).toHaveLength(1);
+  });
+
+  it('should work with *', () => {
+    const { acceptedFiles, rejectedFiles } = filterAllowedFiles(droppedFiles, [
+      '*',
+    ]);
+    expect(rejectedFiles).toHaveLength(0);
+    expect(acceptedFiles).toHaveLength(2);
+  });
+});

packages/react/src/primitives/DropZone/filterAllowedFiles.ts

@@ -0,0 +1,50 @@
+// Drag event file shape is different than the drop event fileshape
+type DragFile =
+  | {
+      kind: string;
+      type: string;
+      name?: string;
+    }
+  | File;
+
+export function filterAllowedFiles<FileType extends DragFile = DragFile>(
+  files: FileType[],
+  acceptedFileTypes: string[]
+): { acceptedFiles: FileType[]; rejectedFiles: FileType[] } {
+  // Allow any files if acceptedFileTypes is undefined, empty array, or contains '*'
+  if (
+    !acceptedFileTypes ||
+    acceptedFileTypes.length === 0 ||
+    acceptedFileTypes.includes('*')
+  ) {
+    return { acceptedFiles: files, rejectedFiles: [] };
+  }
+  const acceptedFiles: FileType[] = [];
+  const rejectedFiles: FileType[] = [];
+
+  function filterFile(file: DragFile) {
+    const { type = '', name = '' } = file;
+    const mimeType = type.toLowerCase();
+    const baseMimeType = mimeType.split('/')[0];
+
+    return acceptedFileTypes.some((type) => {
+      const validType = type.trim().toLowerCase();
+      // if the accepted file type is a file extension
+      // it will start with '.', check against the file name
+      if (validType.charAt(0) === '.') {
+        return name.toLowerCase().endsWith(validType);
+      }
+      // This is something like a image/* mime type
+      if (validType.endsWith('/*')) {
+        return baseMimeType === validType.split('/')[0];
+      }
+      return mimeType === validType;
+    });
+  }
+
+  files.forEach((file) => {
+    (filterFile(file) ? acceptedFiles : rejectedFiles).push(file);
+  });
+
+  return { acceptedFiles, rejectedFiles };
+}

packages/react/src/primitives/DropZone/useDropZone.ts

@@ -1,49 +1,7 @@
 import { useState } from 'react';
 import { UseDropZoneProps, UseDropZoneReturn, DragState } from './types';
 import { isFunction } from '@aws-amplify/ui';
-
-type DragFile =
-  | {
-      kind: string;
-      type: string;
-    }
-  | File;
-
-function filterAllowedFiles<FileType extends DragFile = DragFile>(
-  files: FileType[],
-  acceptedFileTypes: string[]
-): { acceptedFiles: FileType[]; rejectedFiles: FileType[] } {
-  // Allow any files if acceptedFileTypes is undefined, empty array, or contains '*'
-  if (
-    !acceptedFileTypes ||
-    acceptedFileTypes.length === 0 ||
-    acceptedFileTypes.includes('*')
-  ) {
-    return { acceptedFiles: files, rejectedFiles: [] };
-  }
-  const acceptedFiles: FileType[] = [];
-  const rejectedFiles: FileType[] = [];
-
-  function filterFile({ type = '' }) {
-    const mimeType = type.toLowerCase();
-    const baseMimeType = mimeType.split('/')[0];
-
-    return acceptedFileTypes.some((type) => {
-      const validType = type.trim().toLowerCase();
-      if (validType.endsWith('/*')) {
-        // This is something like a image/* mime type
-        return baseMimeType === validType.split('/')[0];
-      }
-      return mimeType === validType;
-    });
-  }
-
-  files.forEach((file) => {
-    (filterFile(file) ? acceptedFiles : rejectedFiles).push(file);
-  });
-
-  return { acceptedFiles, rejectedFiles };
-}
+import { filterAllowedFiles } from './filterAllowedFiles';
 
 export function useDropZone({
   onDropComplete,