Merge main into next-release/main

docs/package.json

@@ -23,8 +23,8 @@
     "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "5.3.1",
-    "@aws-amplify/ui-react-storage": "2.3.1",
+    "@aws-amplify/ui-react": "5.3.2",
+    "@aws-amplify/ui-react-storage": "2.3.2",
     "@cucumber/gherkin": "^19.0.3",
     "@cucumber/messages": "^16.0.1",
     "@docsearch/react": "3",

docs/src/components/ExpoSnack.tsx

@@ -31,7 +31,8 @@ const defaultOptions: SnackOptions = {
   loading: 'lazy',
   sdkVersion: '45.0.0',
   dependencies: [
-    '@aws-amplify/ui-react-native,aws-amplify',
+    '@aws-amplify/ui-react-native',
+    '[email protected]',
     'react-native-safe-area-context',
     'amazon-cognito-identity-js',
     '@react-native-community/netinfo',

examples/next/package.json

@@ -10,10 +10,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "^5.3.1",
-    "@aws-amplify/ui-react-liveness": "^2.0.10",
-    "@aws-amplify/ui-react-storage": "^2.3.1",
-    "@aws-amplify/ui-react-notifications": "^1.0.13",
+    "@aws-amplify/ui-react": "^5.3.2",
+    "@aws-amplify/ui-react-liveness": "^2.0.11",
+    "@aws-amplify/ui-react-storage": "^2.3.2",
+    "@aws-amplify/ui-react-notifications": "^1.0.14",
     "@aws-amplify/ui-react-geo": "^1.0.2",
     "@aws-sdk/credential-providers": "^3.370.0",
     "aws-amplify": "latest",

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-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,6 +1,6 @@
 {
   "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": {
@@ -41,7 +41,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": {
@@ -41,7 +41,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,

packages/react/src/version.ts

@@ -1 +1 @@
-export const VERSION = '5.3.1';
+export const VERSION = '5.3.2';