@aws-amplify/ui-react-notifications 2.2.10 → 2.2.12

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '2.2.10';
+const VERSION = '2.2.12';
 
 export { VERSION };

package/dist/index.js

@@ -332,7 +332,7 @@ const handleMessageLinkAction = (input) => {
     window.open(input);
 };
 
-const VERSION = '2.2.10';
+const VERSION = '2.2.12';
 
 // TODO: replace below components incrementally as they become available
 function CarouselMessage(_) {

package/dist/styles.css

@@ -5668,6 +5668,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
   background-color: var(--amplify-components-table-row-striped-background-color);
 }
+.amplify-table--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) {
+  background-color: var(--amplify-colors-background-info);
+}
 .amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
@@ -6686,6 +6689,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   box-shadow: var(--amplify-shadows-small);
   z-index: 2;
 }
+.amplify-storage-browser__table-row_active {
+  background-color: var(--amplify-colors-background-info);
+}
 .amplify-storage-browser__table-header {
   border: none;
   padding: var(--amplify-space-xxxs);
@@ -6768,7 +6774,251 @@ html[dir=rtl] .amplify-field-group__inner-start {
   top: 0;
   z-index: 3;
 }
+.amplify-storage-browser__content-with-preview {
+  display: flex;
+  height: 100%;
+}
+.amplify-storage-browser__file-preview {
+  overflow: auto;
+  flex: 1;
+  width: 50%;
+  position: sticky;
+  top: 10px;
+  bottom: 10px;
+  height: -moz-fit-content;
+  height: fit-content;
+  max-height: calc(100svh - 20px);
+  padding: var(--amplify-space-medium);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
+  border-radius: var(--amplify-radii-small);
+  margin-inline-start: var(--amplify-space-large);
+  padding-block-end: var(--amplify-space-large);
+}
+.amplify-storage-browser__file-preview-header {
+  margin-block-end: var(--amplify-space-medium);
+  display: flex;
+  justify-content: flex-end;
+}
+.amplify-storage-browser__file-preview-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--amplify-space-large);
+}
+.amplify-storage-browser__file-preview-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--amplify-space-large);
+  align-items: center;
+}
+.amplify-storage-browser__file-preview-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+  flex: 1;
+}
+.amplify-storage-browser__file-preview-title {
+  margin-block-end: var(--amplify-space-medium);
+  color: var(--amplify-colors-font-primary);
+  font-size: var(--amplify-font-sizes-large);
+  font-weight: var(--amplify-font-weights-semibold);
+  flex-shrink: 0;
+}
+.amplify-storage-browser__file-metadata {
+  display: grid;
+  gap: var(--amplify-space-small);
+  background-color: var(--amplify-colors-background-secondary);
+  padding: var(--amplify-space-medium);
+  border-radius: var(--amplify-radii-small);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__file-metadata-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: var(--amplify-space-xs);
+  border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__file-metadata-item:last-child {
+  border-block-end: none;
+}
+.amplify-storage-browser__file-metadata-label {
+  font-weight: var(--amplify-font-weights-medium);
+  color: var(--amplify-colors-font-primary);
+  margin: 0;
+}
+.amplify-storage-browser__file-metadata-value {
+  color: var(--amplify-colors-font-secondary);
+  margin: 0;
+  word-break: break-all;
+  text-align: end;
+  max-width: 60%;
+}
+.amplify-storage-browser__preview-fallback {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--amplify-space-medium);
+  background-color: var(--amplify-colors-background-secondary);
+  border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  padding: var(--amplify-space-large);
+  text-align: center;
+}
+.amplify-storage-browser__preview-fallback--error {
+  color: var(--amplify-colors-font-error);
+  background-color: var(--amplify-colors-background-error);
+  border-color: var(--amplify-colors-border-error);
+}
+.amplify-storage-browser__preview-fallback--default {
+  color: var(--amplify-colors-font-secondary);
+  background-color: var(--amplify-colors-background-secondary);
+  border-color: var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__preview-fallback-icon {
+  font-size: var(--amplify-font-sizes-xxxxl);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-title {
+  font-weight: var(--amplify-font-weights-bold);
+  font-size: var(--amplify-font-sizes-large);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-description {
+  font-size: var(--amplify-font-sizes-small);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-filename {
+  font-size: var(--amplify-font-sizes-xs);
+  font-family: var(--amplify-fonts-monospace), monospace;
+}
+.amplify-storage-browser__preview-fallback-actions {
+  display: flex;
+  gap: var(--amplify-space-small);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.amplify-storage-browser__preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--amplify-space-medium);
+  height: 400px;
+  width: 100%;
+}
+.amplify-storage-browser__preview-placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--amplify-space-small);
+  width: 100%;
+}
+.amplify-storage-browser__preview-placeholder-info {
+  color: var(--amplify-colors-font-secondary);
+  font-size: var(--amplify-font-sizes-small);
+  text-align: center;
+}
+.amplify-storage-browser__text-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__text-preview {
+  height: 400px;
+  width: 100%;
+  display: block;
+  background-color: var(--amplify-colors-background-secondary);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  padding: var(--amplify-space-medium);
+  font-family: var(--amplify-fonts-monospace), monospace;
+  font-size: var(--amplify-font-sizes-small);
+  line-height: 1.5;
+  overflow-y: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.amplify-storage-browser__video-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__video-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 400px;
+  border-radius: var(--amplify-radii-small);
+  background-color: var(--amplify-colors-background-secondary);
+  flex-shrink: 0;
+}
+.amplify-storage-browser__video-preview video {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.amplify-storage-browser__image-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__image-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  width: 100%;
+  background-color: var(--amplify-colors-background-secondary);
+  border-radius: var(--amplify-radii-small);
+  flex-shrink: 0;
+  flex-flow: column nowrap;
+  gap: 8px;
+}
+.amplify-storage-browser__image-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+  border-radius: var(--amplify-radii-small);
+}
+.amplify-storage-browser__download-button {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 8px;
+}
+.amplify-storage-browser__download-button_icon {
+  animation-delay: 0s;
+  animation-direction: normal;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-name: spin;
+}
 
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .amplify-ai-conversation {
   display: flex;
   flex-direction: column;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "2.2.10";
+export declare const VERSION = "2.2.12";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-notifications",
-  "version": "2.2.10",
+  "version": "2.2.12",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -39,10 +39,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.10.3",
-    "@aws-amplify/ui-react": "6.12.0",
-    "@aws-amplify/ui-react-core": "3.4.3",
-    "@aws-amplify/ui-react-core-notifications": "2.2.9",
+    "@aws-amplify/ui": "6.12.0",
+    "@aws-amplify/ui-react": "6.13.0",
+    "@aws-amplify/ui-react-core": "3.4.5",
+    "@aws-amplify/ui-react-core-notifications": "2.2.11",
     "tinycolor2": "1.4.2"
   },
   "peerDependencies": {