@aws-amplify/ui-react-storage 3.7.1 → 3.8.0

package/dist/types/components/StorageManager/types.d.ts

@@ -1,7 +1,10 @@
-import * as React from 'react';
-import { FileStatus, StorageAccessLevel } from '../FileUploader/types';
-import { FileUploaderDisplayText as StorageManagerDisplayText, PathCallback, UploadTask } from '../FileUploader/utils';
-import { ContainerProps, DropZoneProps, FileListHeaderProps, FileListFooterProps, FileListProps, FilePickerProps } from './ui';
+import { FileStatus, FileUploaderProps } from '../FileUploader/types';
+import { PathCallback, UploadTask } from '../FileUploader/utils';
+interface BucketInfo {
+    bucketName: string;
+    region: string;
+}
+export type StorageBucket = string | BucketInfo;
 export interface StorageFile {
     id: string;
     file?: File;
@@ -24,91 +27,14 @@ export type ProcessFile = (params: ProcessFileParams) => Promise<ProcessFilePara
 export interface StorageManagerHandle {
     clearFiles: () => void;
 }
-export interface StorageManagerProps {
-    /**
-     * List of accepted File types, values of `['*']` or undefined allow any files
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
-     */
-    acceptedFileTypes?: string[];
-    /**
-     * Access level for file uploads
-     * @see https://docs.amplify.aws/lib/storage/configureaccess/q/platform/js/
-     */
-    accessLevel: StorageAccessLevel;
-    /**
-     * Determines if the upload will automatically start after a file is selected, default value: true
-     */
-    autoUpload?: boolean;
-    /**
-     * Component overrides
-     */
-    components?: {
-        Container?: React.ComponentType<ContainerProps>;
-        DropZone?: React.ComponentType<DropZoneProps>;
-        FileList?: React.ComponentType<FileListProps>;
-        FilePicker?: React.ComponentType<FilePickerProps>;
-        FileListHeader?: React.ComponentType<FileListHeaderProps>;
-        FileListFooter?: React.ComponentType<FileListFooterProps>;
-    };
-    /**
-     * List of default files already uploaded
-     */
-    defaultFiles?: DefaultFile[];
-    /**
-     * Overrides default display text
-     */
-    displayText?: StorageManagerDisplayText;
-    /**
-     * Determines if upload can be paused / resumed
-     */
-    isResumable?: boolean;
-    /**
-     * Maximum total files to upload in each batch
-     */
-    maxFileCount: number;
-    /**
-     * Maximum file size in bytes
-     */
-    maxFileSize?: number;
-    /**
-     * When a file is removed
-     */
-    onFileRemove?: (file: {
-        key: string;
-    }) => void;
-    /**
-     * Monitor upload errors
-     */
-    onUploadError?: (error: string, file: {
-        key: string;
-    }) => void;
-    /**
-     * Monitor upload success
-     */
-    onUploadSuccess?: (event: {
-        key?: string;
-    }) => void;
-    /**
-     * When a file begins uploading
-     */
-    onUploadStart?: (event: {
-        key?: string;
-    }) => void;
-    /**
-     * Process file before upload
-     */
-    processFile?: ProcessFile;
-    /**
-     * Determines if thumbnails show for image files
-     */
-    showThumbnails?: boolean;
-    /**
-     * Provided value is prefixed to the file `key` for each file
-     */
-    path?: string;
-    useAccelerateEndpoint?: boolean;
+export interface StorageManagerProps extends FileUploaderProps {
 }
-export interface StorageManagerPathProps extends Omit<StorageManagerProps, 'accessLevel' | 'path'> {
+export interface StorageManagerPathProps extends Omit<StorageManagerProps, 'accessLevel' | 'bucket' | 'path'> {
+    /** S3 bucket, allows either a string or `BucketInfo`:
+     * - `string`: the "friendly name" assigned to the bucket
+     * - `BucketInfo`: object containing the actual S3 bucket name and its region
+     */
+    bucket?: StorageBucket;
     /**
      * S3 bucket key, allows either a `string` or a `PathCallback`:
      * - `string`: `path` is prefixed to the file `key` for each file
@@ -119,3 +45,4 @@ export interface StorageManagerPathProps extends Omit<StorageManagerProps, 'acce
     accessLevel?: never;
     useAccelerateEndpoint?: boolean;
 }
+export {};

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.7.1";
+export declare const VERSION = "3.8.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-storage",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -14,12 +14,10 @@
       "types": "./dist/types/components/StorageBrowser/index.d.ts",
       "import": "./dist/esm/browser.mjs"
     },
-    "./styles.css": "./dist/styles.css",
-    "./storage-browser-styles.css": "./dist/storage-browser-styles.css"
+    "./styles.css": "./dist/styles.css"
   },
   "browser": {
-    "./styles.css": "./dist/styles.css",
-    "./storage-browser-styles.css": "./dist/storage-browser-styles.css"
+    "./styles.css": "./dist/styles.css"
   },
   "types": "dist/types/index.d.ts",
   "license": "Apache-2.0",

package/dist/storage-browser-styles.css

@@ -1,482 +0,0 @@
-.amplify-storage-browser {
-  --storage-browser-dropzone-active-color: hsl(190, 95%, 30%);
-  --storage-browser-gap-small: 0.375rem;
-  --storage-browser-gap: 0.6rem;
-  --storage-browser-gap-large: 1.2rem;
-  --storage-browser-status-error: hsl(0, 95%, 30%);
-  --storage-browser-status-success: hsl(130, 33%, 37%);
-  --storage-browser-status-progress: hsl(220, 95%, 30%);
-  --storage-browser-status-initial: hsl(210, 10%, 58%);
-  --storage-browser-loading-animation: spin 1s ease-out infinite;
-  --storage-browser-error-background: hsl(0, 75%, 95%);
-  --storage-browser-error-text: hsl(0, 100%, 20%);
-}
-
-.storage-browser__pagination {
-  justify-self: flex-end;
-}
-
-.storage-browser__pagination-list {
-  gap: var(--storage-browser-gap-small);
-}
-
-.storage-browser__pagination-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.storage-browser__pagination-list-item {
-  display: flex;
-  align-items: center;
-}
-
-.storage-browser__pagination-button-icon,
-.storage-browser__data-refresh-icon,
-.storage-browser__message-dismiss-icon,
-.storage-browser__menu-toggle-icon {
-  display: block;
-}
-
-.storage-browser__field {
-  display: flex;
-  flex-direction: column;
-  margin-inline-start: var(--storage-browser-gap);
-  gap: var(--storage-browser-gap);
-}
-
-.storage-browser__message {
-  align-items: flex-start;
-  display: flex;
-  gap: var(--storage-browser-gap);
-}
-
-.storage-browser__message-dismiss {
-  flex: 0 0 auto;
-}
-.storage-browser__message-content {
-  flex: 1 1 auto;
-}
-
-.storage-browser__upload-destination,
-.storage-browser__copy-destination {
-  flex: 1;
-}
-
-.storage-browser__locations-view-data-refresh,
-.storage-browser__locations-detail-view-data-refresh {
-  justify-self: flex-end;
-}
-
-.storage-browser__action-status {
-  vertical-align: middle;
-  margin-inline-end: var(--storage-browser-gap-small);
-}
-
-.storage-browser__menu {
-  position: relative;
-  display: inline-block;
-  justify-self: flex-end;
-}
-
-.storage-browser__menu-list {
-  display: none;
-  gap: var(--storage-browser-gap-small);
-  flex-direction: column;
-  position: absolute;
-  inset-inline-end: 0;
-  inset-block-start: 100%;
-  width: max-content;
-  max-width: var(--storage-browser-menu-max-width);
-  z-index: 2;
-}
-
-.storage-browser__menu-list--open {
-  display: flex;
-}
-
-.storage-browser__menu-item {
-  display: flex;
-  gap: var(--storage-browser-gap-small);
-  align-items: center;
-}
-
-.storage-browser__add-folder {
-  justify-self: flex-end;
-}
-
-.storage-browser__action-status--action-initial {
-  color: var(--storage-browser-status-initial);
-}
-.storage-browser__action-status--action-success {
-  color: var(--storage-browser-status-success);
-}
-.storage-browser__action-status--action-progress {
-  color: var(--storage-browser-status-progress);
-}
-.storage-browser__action-status--action-error,
-.storage-browser__action-status--action-canceled {
-  color: var(--storage-browser-status-error);
-}
-
-.storage-browser__empty-message {
-  text-align: center;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Action Views */
-
-.storage-browser__action-header {
-  /* grid-column: 1 / -1; */
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: var(--storage-browser-gap);
-  align-items: center;
-}
-
-.storage-browser__action-footer {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--storage-browser-gap-medium);
-  align-items: center;
-}
-
-/* Error boundary */
-.storage-browser__error-boundary {
-  background-color: var(--storage-browser-error-background);
-  color: var(--storage-browser-error-text);
-  padding: var(--storage-browser-gap-large);
-}
-/** Util class to visually hide content only needed for accessibility */
-.storage-browser-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  fill: transparent;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.storage-browser__action-destination,
-.storage-browser__action-destination .storage-browser__description-list {
-  display: flex;
-  gap: var(--storage-browser-gap-small);
-  align-items: center;
-}
-
-.storage-browser__action-destination > span {
-  font-weight: var(--amplify-font-weights-bold);
-}
-
-/* Base component styles */
-/** DescriptionList **/
-.storage-browser__description-list {
-  margin: 0;
-  display: flex;
-  gap: var(--storage-browser-gap-large);
-  align-items: center;
-}
-
-.storage-browser__description {
-  display: flex;
-  align-items: center;
-  gap: var(--storage-browser-gap-small);
-}
-
-.storage-browser__description-details {
-  margin: 0;
-  display: flex;
-}
-
-/** DropZone **/
-.storage-browser__drop-zone--active {
-  outline: 2px solid var(--storage-browser-dropzone-active-color);
-}
-
-/** LoadingIndicator **/
-.storage-browser__loading-indicator {
-  display: flex;
-  gap: var(--storage-browser-gap-small);
-  padding: var(--storage-browser-gap-large);
-  justify-content: center;
-}
-
-.storage-browser__loading-indicator-icon {
-  animation: var(--storage-browser-loading-animation);
-}
-
-/** Breadcrumb Navigation **/
-.storage-browser__breadcrumb-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--storage-browser-gap-small);
-}
-
-.storage-browser__breadcrumb-list-item {
-  display: flex;
-  align-items: center;
-  gap: var(--storage-browser-gap-small);
-}
-
-/** Table **/
-.storage-browser__table {
-  width: 100%;
-  position: relative;
-}
-
-.storage-browser__table-wrapper {
-  flex: 1;
-  overflow: auto;
-  position: relative;
-  border-width: var(--amplify-border-widths-small);
-  border-style: solid;
-  border-color: var(--amplify-colors-border-tertiary);
-  width: 100%;
-}
-
-.storage-browser__table-head {
-  position: sticky;
-  top: 0;
-  background: var(--amplify-colors-background-primary);
-  box-shadow: var(--amplify-shadows-small);
-}
-
-.storage-browser__table-header {
-  text-align: start;
-}
-
-.storage-browser__table-sort-header {
-  padding: var(--storage-browser-gap-small);
-  display: inline-flex;
-  align-items: center;
-}
-
-.storage-browser__table-button-data-cell,
-.storage-browser__table-date-data-cell,
-.storage-browser__table-number-data-cell,
-.storage-browser__table-text-data-cell {
-  display: flex;
-  width: 100%;
-  gap: var(--storage-browser-gap-small);
-  padding: var(--storage-browser-gap-small);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  align-items: center;
-  justify-content: flex-start;
-}
-.storage-browser__table-button-data-cell span,
-.storage-browser__table-date-data-cell span,
-.storage-browser__table-number-data-cell span,
-.storage-browser__table-text-data-cell span {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.storage-browser__table-button-data-cell--icon-only {
-  width: initial;
-}
-
-.storage-browser__table-text-data-cell-icon {
-  flex-shrink: 0;
-}
-.storage-browser__table-text-data-cell-icon--action-queued {
-  color: var(--storage-browser-status-initial);
-}
-
-.storage-browser__table-text-data-cell-icon--action-success {
-  color: var(--storage-browser-status-success);
-}
-
-.storage-browser__table-text-data-cell-icon--action-progress {
-  color: var(--storage-browser-status-progress);
-}
-
-.storage-browser__table-text-data-cell-icon--action-canceled,
-.storage-browser__table-text-data-cell-icon--action-error {
-  color: var(--storage-browser-status-error);
-}
-
-/* Locations view control wrapper styles */
-.storage-browser__locations-view-data-table th:nth-of-type(3) {
-  width: 8rem;
-}
-
-/* Locations view control wrapper styles */
-
-.storage-browser__location-detail-view-data-table th:nth-of-type(1) {
-  width: 2rem;
-}
-
-.storage-browser__location-detail-view-data-table th:nth-of-type(3),
-.storage-browser__location-detail-view-data-table th:nth-of-type(5) {
-  width: 8rem;
-}
-
-.storage-browser__location-detail-view-data-table th:nth-of-type(4) {
-  width: 12rem;
-}
-
-.storage-browser__location-detail-view-data-table th:nth-of-type(5) {
-  text-align: end;
-}
-
-.storage-browser__location-detail-view-data-table th:nth-of-type(6) {
-  width: 4rem;
-}
-
-.storage-browser__location-detail-view-data-table td:nth-of-type(5) div {
-  justify-content: end;
-}
-
-.storage-browser__location-detail-view-data-table td:nth-of-type(6) button {
-  justify-content: center;
-}
-
-/* Upload action view control wrapper styles */
-.storage-browser__upload-view-data-table th:nth-of-type(3),
-.storage-browser__upload-view-data-table th:nth-of-type(4),
-.storage-browser__upload-view-data-table th:nth-of-type(5),
-.storage-browser__upload-view-data-table th:nth-of-type(6) {
-  width: 8rem;
-}
-
-.storage-browser__upload-view-data-table th:nth-of-type(4) {
-  text-align: end;
-}
-
-.storage-browser__upload-view-data-table th:nth-of-type(7) {
-  width: 4rem;
-}
-
-.storage-browser__upload-view-data-table td:nth-of-type(4) div {
-  justify-content: end;
-}
-
-/* Upload view control wrapper styles */
-.storage-browser__upload-status-display,
-.storage-browser__action-status-display {
-  justify-content: flex-start;
-  margin: 0;
-  display: flex;
-  gap: var(--storage-browser-gap-large);
-  flex: 1;
-}
-
-.storage-browser__copy-destination-picker {
-  width: 100%;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.storage-browser__table-data-cell:first-child,
-.storage-browser__table-data-cell:last-child,
-.storage-browser__table__data:first-child,
-.storage-browser__table__data:last-child,
-.storage-browser__table-header:first-child,
-.storage-browser__table-header:last-child {
-  border-left: none;
-  border-right: none;
-}
-
-.storage-browser__table-header {
-  border: none;
-}
-
-.storage-browser__location-detail-view-controls {
-  display: flex;
-  direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  width: 100%;
-}
-
-/* Copy view styles */
-.storage-browser__copy-destination-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-/* Search view styles */
-.storage-browser__search {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  min-width: 35rem;
-  flex: 1;
-}
-
-.storage-browser__search-field-clear {
-  position: absolute;
-  display: flex;
-  right: 0.25rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.storage-browser__search .storage-browser__search-field {
-  position: relative;
-  display: flex;
-  height: 3rem;
-}
-
-.storage-browser__search .storage-browser__search-field-icon {
-  position: absolute;
-  left: var(--storage-browser-gap-small);
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.storage-browser__search .storage-browser__search-field-input {
-  border-radius: 0.25rem 0 0 0.25rem;
-  padding-inline-start: 2rem;
-  padding-inline-end: 3.25rem;
-  flex: 1;
-}
-
-.storage-browser__search-submit {
-  border-radius: 0 0.25rem 0.25rem 0;
-  min-height: 3rem;
-}
-
-.storage-browser__search-submit:not(:focus) {
-  border-inline-start-color: transparent;
-}
-
-.storage-browser__search-subfolder-toggle__label {
-  margin-left: var(--storage-browser-gap);
-}
-
-/* Shared view styles */
-.storage-browser__locations-view-data-table,
-.storage-browser__location-detail-view-drop-zone,
-.storage-browser__location-detail-view-data-table,
-.storage-browser__copy-view-data-table,
-.storage-browser__delete-view-data-table,
-.storage-browser__upload-view-data-table,
-.storage-browser__destination-picker-data-table {
-  display: grid;
-  grid-column: 1 / -1;
-  width: 100%;
-}

package/dist/storage-browser-styles.js

@@ -1,2 +0,0 @@
-'use strict';
-

package/dist/types/styles/storage-browser-styles.d.ts

@@ -1 +0,0 @@
-import './storage-browser.css';