@aws-amplify/ui-react-storage 3.3.1 → 3.3.3

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.3.1';
+const VERSION = '3.3.3';
 
 export { VERSION };

package/dist/index.js

@@ -579,7 +579,7 @@ function FilePicker$1({ children, className = ui.ComponentClassName.FileUploader
     return (React__default["default"].createElement(uiReact.Button, { ...props, className: className, size: size }, children));
 }
 
-const VERSION = '3.3.1';
+const VERSION = '3.3.3';
 
 const logger$1 = ui.getLogger('Storage');
 const MISSING_REQUIRED_PROPS_MESSAGE$1 = '`FileUploader` requires a `maxFileCount` prop to be provided.';

package/dist/styles.css

@@ -701,6 +701,67 @@
   --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
   --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
   --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
+  --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
+  --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-fileuploader-dropzone-border-style: dashed;
+  --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
+  --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
+  --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
+  --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
+  --amplify-components-fileuploader-dropzone-text-align: center;
+  --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
+  --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+  --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+  --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+  --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
+  --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
+  --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+  --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
+  --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-fileuploader-file-border-style: solid;
+  --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
+  --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
+  --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
+  --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
+  --amplify-components-fileuploader-file-align-items: baseline;
+  --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
+  --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
+  --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
+  --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
+  --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
+  --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
+  --amplify-components-fileuploader-filelist-flex-direction: column;
+  --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
+  --amplify-components-fileuploader-loader-stroke-linecap: round;
+  --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
+  --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+  --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
+  --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-fileuploader-previewer-border-style: solid;
+  --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
+  --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
+  --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
+  --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
+  --amplify-components-fileuploader-previewer-max-height: 40rem;
+  --amplify-components-fileuploader-previewer-max-width: auto;
+  --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
+  --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
+  --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
+  --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
+  --amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
   --amplify-components-flex-gap: var(--amplify-space-medium);
   --amplify-components-flex-justify-content: normal;
   --amplify-components-flex-align-items: stretch;
@@ -3458,6 +3519,7 @@ strong.amplify-text {
   --avatar-border-color: var(--amplify-components-avatar-border-color);
   --avatar-size: var(--amplify-components-avatar-width);
   --amplify-components-icon-height: 100%;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3508,6 +3570,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-warning-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-warning-color
+  );
 }
 .amplify-avatar--error {
   --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3521,6 +3586,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-error-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-error-color
+  );
 }
 .amplify-avatar--info {
   --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3534,6 +3602,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-info-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-info-color
+  );
 }
 .amplify-avatar--success {
   --avatar-border-color: var(
@@ -3549,6 +3620,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-success-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-success-color
+  );
 }
 .amplify-avatar__icon {
   display: flex;
@@ -3561,6 +3635,13 @@ strong.amplify-text {
      object-fit: cover;
   display: block;
 }
+.amplify-avatar__loader {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  stroke: transparent;
+}
 
 .amplify-breadcrumbs__list {
   display: flex;
@@ -6006,6 +6087,145 @@ html[dir=rtl] .amplify-field-group__inner-start {
   }
 }
 
+.amplify-fileuploader__dropzone {
+  background-color: var(--amplify-components-fileuploader-dropzone-background-color);
+  border-color: var(--amplify-components-fileuploader-dropzone-border-color);
+  border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+  border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+  border-width: var(--amplify-components-fileuploader-dropzone-border-width);
+  text-align: var(--amplify-components-fileuploader-dropzone-text-align);
+  padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
+  padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--amplify-components-fileuploader-dropzone-gap);
+}
+.amplify-fileuploader__dropzone--small {
+  flex-direction: row;
+  justify-content: center;
+}
+.amplify-fileuploader__dropzone--active {
+  border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
+  border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
+  background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
+}
+.amplify-fileuploader__dropzone__icon {
+  font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
+  color: var(--amplify-components-fileuploader-dropzone-icon-color);
+}
+.amplify-fileuploader__dropzone__text {
+  color: var(--amplify-components-fileuploader-dropzone-text-color);
+  font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
+  font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
+}
+.amplify-fileuploader__file__list {
+  display: flex;
+  flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
+  gap: var(--amplify-components-fileuploader-filelist-gap);
+}
+.amplify-fileuploader__file {
+  position: relative;
+  border-width: var(--amplify-components-fileuploader-file-border-width);
+  border-style: var(--amplify-components-fileuploader-file-border-style);
+  border-color: var(--amplify-components-fileuploader-file-border-color);
+  border-radius: var(--amplify-components-fileuploader-file-border-radius);
+  display: flex;
+  flex-direction: column;
+  padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-file-padding-block);
+  align-items: var(--amplify-components-fileuploader-file-align-items);
+}
+.amplify-fileuploader__file__wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--amplify-components-fileuploader-file-gap);
+}
+.amplify-fileuploader__file__name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
+  font-size: var(--amplify-components-fileuploader-file-name-font-size);
+  color: var(--amplify-components-fileuploader-file-name-color);
+}
+.amplify-fileuploader__file__size {
+  font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
+  font-size: var(--amplify-components-fileuploader-file-size-font-size);
+  color: var(--amplify-components-fileuploader-file-size-color);
+}
+.amplify-fileuploader__file__main {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.amplify-fileuploader__file__image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--amplify-components-fileuploader-file-image-width);
+  height: var(--amplify-components-fileuploader-file-image-height);
+  background-color: var(--amplify-components-fileuploader-file-image-background-color);
+  border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
+  color: var(--amplify-components-fileuploader-file-image-color);
+}
+.amplify-fileuploader__file__image img {
+  max-height: 100%;
+}
+.amplify-fileuploader__file__status--error {
+  color: var(--amplify-colors-font-error);
+  font-size: var(--amplify-components-fileuploader-file-size-font-size);
+}
+.amplify-fileuploader__file__status--success {
+  color: var(--amplify-colors-font-success);
+}
+.amplify-fileuploader__loader {
+  stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
+  stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
+  stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
+  height: var(--amplify-components-fileuploader-loader-stroke-width);
+  --amplify-components-loader-linear-stroke-filled: var(
+    --amplify-components-fileuploader-loader-stroke-filled
+  );
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.amplify-fileuploader__previewer {
+  display: flex;
+  flex-direction: column;
+  max-width: var(--amplify-components-fileuploader-previewer-max-width);
+  max-height: var(--amplify-components-fileuploader-previewer-max-height);
+  overflow: auto;
+  gap: var(--amplify-components-fileuploader-previewer-body-gap);
+  padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
+  background-color: var(--amplify-components-fileuploader-previewer-background-color);
+  border-width: var(--amplify-components-fileuploader-previewer-border-width);
+  border-style: var(--amplify-components-fileuploader-previewer-border-style);
+  border-color: var(--amplify-components-fileuploader-previewer-border-color);
+  border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
+}
+.amplify-fileuploader__previewer__text {
+  font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
+  font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
+  color: var(--amplify-components-fileuploader-previewer-text-color);
+}
+.amplify-fileuploader__previewer__footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
+}
+.amplify-fileuploader__previewer__actions {
+  display: flex;
+  flex-direction: row;
+  gap: var(--amplify-space-small);
+}
+
 .amplify-inappmessaging-backdrop {
   background-color: var(--amplify-colors-overlay-50);
   inset: 0;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.1";
+export declare const VERSION = "3.3.3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-storage",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -39,9 +39,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.4.0",
-    "@aws-amplify/ui-react": "6.3.0",
-    "@aws-amplify/ui-react-core": "3.0.21",
+    "@aws-amplify/ui": "6.5.0",
+    "@aws-amplify/ui-react": "6.4.0",
+    "@aws-amplify/ui-react-core": "3.0.23",
     "lodash": "4.17.21",
     "tslib": "^2.5.2"
   },
@@ -58,19 +58,19 @@
       "name": "FileUploader",
       "path": "dist/esm/index.mjs",
       "import": "{ FileUploader }",
-      "limit": "25 kB"
+      "limit": "21.5 kB"
     },
     {
       "name": "StorageImage",
       "path": "dist/esm/index.mjs",
       "import": "{ StorageImage }",
-      "limit": "17 kB"
+      "limit": "14.5 kB"
     },
     {
       "name": "StorageManager",
       "path": "dist/esm/index.mjs",
       "import": "{ StorageManager }",
-      "limit": "25 kB"
+      "limit": "21.5 kB"
     }
   ]
 }