@aws-amplify/ui-react-storage 3.3.10 → 3.4.0

package/dist/esm/components/StorageBrowser/views/hooks/useSearch.mjs

@@ -0,0 +1,27 @@
+import React__default from 'react';
+
+function useSearch(props) {
+    const { onSearch } = props;
+    const [searchQuery, setQuery] = React__default.useState('');
+    const [isSearchingSubfolders, setIsSearchingSubfolders] = React__default.useState(false);
+    const resetSearch = () => {
+        setQuery('');
+        setIsSearchingSubfolders(false);
+    };
+    return {
+        searchQuery,
+        isSearchingSubfolders,
+        onSearchQueryChange: (value) => {
+            setQuery(value);
+        },
+        onToggleSearchSubfolders: () => {
+            setIsSearchingSubfolders((prev) => !prev);
+        },
+        onSearchSubmit: () => {
+            onSearch?.(searchQuery, isSearchingSubfolders);
+        },
+        resetSearch,
+    };
+}
+
+export { useSearch };

package/dist/esm/index.mjs

@@ -1,3 +1,4 @@
 export { FileUploader } from './components/FileUploader/FileUploader.mjs';
 export { StorageImage } from './components/StorageImage/StorageImage.mjs';
 export { StorageManager } from './components/StorageManager/StorageManager.mjs';
+export { StorageBrowser } from './components/StorageBrowser/StorageBrowserAmplify.mjs';

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.3.10';
+const VERSION = '3.4.0';
 
 export { VERSION };

package/dist/index.js

@@ -9,6 +9,11 @@ var uiReactCore = require('@aws-amplify/ui-react-core');
 var auth = require('aws-amplify/auth');
 var storage = require('aws-amplify/storage');
 var internal = require('@aws-amplify/ui-react/internal');
+var createAmplifyAuthAdapter = require('./createAmplifyAuthAdapter-BRctUWdR.js');
+require('@aws-amplify/storage/internals');
+require('@aws-amplify/ui-react-core/elements');
+require('aws-amplify');
+require('aws-amplify/utils');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -546,7 +551,7 @@ function FilePicker$1({ children, className = ui.ComponentClassName.FileUploader
     return (React__namespace["default"].createElement(uiReact.Button, { ...props, className: className, size: size }, children));
 }
 
-const VERSION = '3.3.10';
+const VERSION = '3.4.0';
 
 const logger$1 = ui.getLogger('Storage');
 const MISSING_REQUIRED_PROPS_MESSAGE$1 = '`FileUploader` requires a `maxFileCount` prop to be provided.';
@@ -1049,6 +1054,15 @@ const StorageManager = Object.assign({}, StorageManagerBase, {
     FilePicker,
 });
 
+const StorageBrowser = ({ views, displayText, }) => {
+    const { StorageBrowser } = React__namespace["default"].useRef(createAmplifyAuthAdapter.createStorageBrowser({
+        components: createAmplifyAuthAdapter.componentsDefault,
+        config: createAmplifyAuthAdapter.createAmplifyAuthAdapter(),
+    })).current;
+    return React__namespace["default"].createElement(StorageBrowser, { views: views, displayText: displayText });
+};
+
 exports.FileUploader = FileUploader;
+exports.StorageBrowser = StorageBrowser;
 exports.StorageImage = StorageImage;
 exports.StorageManager = StorageManager;

package/dist/storage-browser-styles.css

@@ -0,0 +1,482 @@
+.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

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

package/dist/styles.css

@@ -6600,6 +6600,157 @@ html[dir=rtl] .amplify-field-group__inner-start {
   gap: var(--amplify-space-small);
 }
 
+.amplify-storage-browser {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+  position: relative;
+  padding: var(--amplify-space-small);
+  gap: var(--amplify-space-small);
+  /* Error boundary */
+}
+.amplify-storage-browser__error {
+  background-color: var(--amplify-colors-background-error);
+  color: var(--amplify-colors-font-error);
+  padding: var(--amplify-space-medium);
+}
+.amplify-storage-browser__navigation, .amplify-storage-browser__exit {
+  align-self: flex-start;
+}
+.amplify-storage-browser__title {
+  font-weight: var(--amplify-font-weights-bold);
+  font-size: var(--amplify-font-sizes-large);
+}
+.amplify-storage-browser__controls, .amplify-storage-browser__summary, .amplify-storage-browser__footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--amplify-space-medium);
+}
+.amplify-storage-browser__footer {
+  justify-content: flex-end;
+}
+.amplify-storage-browser__search {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  gap: var(--amplify-space-small);
+}
+.amplify-storage-browser__drop-zone {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  display: block;
+}
+.amplify-storage-browser__data-table {
+  overflow: auto;
+  position: relative;
+  border-width: var(--amplify-border-widths-small);
+  border-style: solid;
+  border-color: var(--amplify-colors-border-primary);
+  border-radius: var(--amplify-radii-small);
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.amplify-storage-browser__table {
+  width: 100%;
+  position: relative;
+}
+.amplify-storage-browser__table-head {
+  position: sticky;
+  top: 0;
+  background: var(--amplify-colors-background-primary);
+  box-shadow: var(--amplify-shadows-small);
+  z-index: 2;
+}
+.amplify-storage-browser__table-header {
+  border: none;
+  padding: var(--amplify-space-xxxs);
+}
+.amplify-storage-browser__table-data-cell {
+  padding: var(--amplify-space-xxxs);
+}
+.amplify-storage-browser__table-data-cell:first-child, .amplify-storage-browser__table-data-cell:last-child {
+  border-inline-start-width: 0;
+  border-inline-end-width: 0;
+}
+.amplify-storage-browser__table-data-cell-icon {
+  vertical-align: middle;
+  margin-inline-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__table-header--select, .amplify-storage-browser__table-data--select, .amplify-storage-browser__table-header--download, .amplify-storage-browser__table-data--download, .amplify-storage-browser__table-data--cancel {
+  text-align: center;
+}
+.amplify-storage-browser__table-data--size, .amplify-storage-browser__table-header--size {
+  text-align: end;
+}
+.amplify-storage-browser__table-button-data-cell, .amplify-storage-browser__table-date-data-cell, .amplify-storage-browser__table-number-data-cell, .amplify-storage-browser__table-text-data-cell, .amplify-storage-browser__table-sort-header {
+  display: flex;
+  width: 100%;
+  gap: var(--amplify-space-xxs);
+  padding: var(--amplify-space-xxs);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+.amplify-storage-browser__table-button-data-cell-icon--action-progress, .amplify-storage-browser__table-date-data-cell-icon--action-progress, .amplify-storage-browser__table-number-data-cell-icon--action-progress, .amplify-storage-browser__table-text-data-cell-icon--action-progress, .amplify-storage-browser__table-sort-header-icon--action-progress {
+  animation-name: amplify-loader-circular;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: var(--amplify-components-loader-animation-duration);
+}
+.amplify-storage-browser__status {
+  display: flex;
+  flex-direction: row;
+  gap: var(--amplify-space-xs);
+  align-items: center;
+}
+.amplify-storage-browser__status-display {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--amplify-space-small);
+  flex: 1;
+}
+.amplify-storage-browser__status-label {
+  font-weight: var(--amplify-font-weights-bold);
+}
+.amplify-storage-browser__status-value {
+  color: var(--amplify-colors-font-secondary);
+}
+.amplify-storage-browser__destination {
+  display: flex;
+  flex-direction: row;
+  gap: var(--amplify-space-xs);
+  align-items: center;
+}
+.amplify-storage-browser__destination-label {
+  font-weight: var(--amplify-font-weights-bold);
+}
+.amplify-storage-browser__message {
+  flex: 1;
+}
+.amplify-storage-browser__buttons {
+  justify-content: flex-end;
+  display: flex;
+  gap: var(--amplify-space-small);
+}
+.amplify-storage-browser__loader {
+  position: absolute;
+  stroke-width: var(--amplify-border-widths-large);
+  height: var(--amplify-border-widths-large);
+  top: 0;
+  z-index: 3;
+}
+
 .amplify-ai-conversation {
   display: flex;
   flex-direction: column;