@orangelogic/orange-dam-content-browser-sdk 2.3.7 → 2.3.8-Beta-2

package/build/components/content-browser/content-browser.d.ts

@@ -96,8 +96,17 @@ export default class CxContentBrowser extends CortexElement {
     isMobile: boolean;
     private defaultPageSize;
     private fetchAndMergeAssetsController;
+    /**
+     * Without a default folder, the folder browser auto-selects Library (or the first allowed folder)
+     * once its list loads. The first grid fetch waits for that pick so the grid doesn't show an
+     * unscoped search and then replace it. The timeout covers an empty or failed folder list.
+     */
+    private initialFolderPending;
+    private initialFolderTimeout;
     willUpdate(changedProperties: PropertyValues): void;
     runFirstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     fetchAssets(request: GetAssetsRequest): Promise<import("../../api/asset/asset.types").GetAssetsResponse>;
     fetchFolders(request: GetFolderRequest): Promise<import("../../types/folder").GetFolderResponse>;
     selectAsset(id: string): Promise<void>;
@@ -117,6 +126,8 @@ export default class CxContentBrowser extends CortexElement {
     private handleFolderSelectionChange;
     private handleSearchChange;
     private handleGridResize;
+    private clearInitialFolderPending;
+    private releaseInitialFolder;
     private handleGridClick;
     private handleVersionHistoryOpen;
     private handleFavoriteChange;

package/build/content-browser.mjs

@@ -5964,7 +5964,9 @@ let CxContentBrowserBrowser = class extends CortexElement {
   handleFirstFetchCallback(data) {
     var _a2, _b2;
     let first = null;
-    if (this.allowedFolders.length) {
+    if (this.folderId) {
+      first = data.find((item) => item.id === this.folderId);
+    } else if (this.allowedFolders.length) {
       first = (_a2 = data.find((item) => this.allowedFolders.includes(item.id))) != null ? _a2 : data[0];
     } else {
       first = (_b2 = data.find((item) => item.title === LIBRARY_FOLDER_TITLE)) != null ? _b2 : data[0];
@@ -13989,7 +13991,7 @@ class FetchAndMergeAssetsController {
         this._debounceResolve = resolve;
       });
       this._debounceTimeout = setTimeout(() => __async(this, null, function* () {
-        var _a3, _b2, _c2, _d2, _e2;
+        var _a3, _b2, _c2, _d2, _e2, _f2, _g, _h, _i;
         if (Object.keys(this.sortOrders).length === 0) {
           const sortOrders = yield apiGetSortOrders();
           this.sortOrders = sortOrders;
@@ -13997,23 +13999,25 @@ class FetchAndMergeAssetsController {
         const forceRefetch = request.start === ((_a3 = this.lastRequest) == null ? void 0 : _a3.start) && !!request.pageSize && !!((_b2 = this.lastRequest) == null ? void 0 : _b2.pageSize) && request.pageSize > ((_c2 = this.lastRequest) == null ? void 0 : _c2.pageSize);
         if (!__privateGet(this, _hasFetchedOnce)) {
           request = __spreadProps(__spreadValues({}, request), {
-            folderId: this.defaultFolderId,
-            isSeeThrough: this.defaultIsSeeThrough,
-            searchText: this.defaultSearchText,
-            selectedFacets: this.defaultSelectedFacets,
-            sortDirection: this.defaultSortDirection,
-            sortOrderName: this.defaultSortOrderName
+            // Keep a folder the host already resolved (e.g. the auto-selected initial folder).
+            folderId: request.folderId || this.defaultFolderId,
+            isSeeThrough: (_d2 = request.isSeeThrough) != null ? _d2 : this.defaultIsSeeThrough,
+            searchText: (_e2 = request.searchText) != null ? _e2 : this.defaultSearchText,
+            selectedFacets: (_f2 = request.selectedFacets) != null ? _f2 : this.defaultSelectedFacets,
+            sortDirection: (_g = request.sortDirection) != null ? _g : this.defaultSortDirection,
+            sortOrderName: (_h = request.sortOrderName) != null ? _h : this.defaultSortOrderName
           });
         }
         let sortOrder;
         if (request.sortOrderName && request.sortDirection) {
-          sortOrder = (_e2 = (_d2 = this.sortOrders[request.sortOrderName]) == null ? void 0 : _d2.find((item) => {
+          const sortOrders = this.sortOrders[request.sortOrderName];
+          sortOrder = (_i = sortOrders == null ? void 0 : sortOrders.find((item) => {
             var _a4;
             return item.sortDirection.toLowerCase() === ((_a4 = request.sortDirection) == null ? void 0 : _a4.toLowerCase());
-          })) == null ? void 0 : _e2.id;
-          if (!sortOrder && this.sortOrders[request.sortOrderName][0]) {
-            sortOrder = this.sortOrders[request.sortOrderName][0].id;
-            request.sortDirection = this.sortOrders[request.sortOrderName][0].sortDirection;
+          })) == null ? void 0 : _i.id;
+          if (!sortOrder && (sortOrders == null ? void 0 : sortOrders[0])) {
+            sortOrder = sortOrders[0].id;
+            request.sortDirection = sortOrders[0].sortDirection;
           }
         }
         request = __spreadProps(__spreadValues({}, request), {
@@ -14296,6 +14300,7 @@ const COMPUTED_FIELDS = ["ScrubUrl", "AllowATSLink"];
 const MOBILE_WIDTH_THRESHOLD = 480;
 const FORCE_OVERLAY_THRESHOLD = 650;
 const PERSISTENT_DRAWER_WIDTH = 400;
+const INITIAL_FOLDER_TIMEOUT_MS = 3e3;
 let CxContentBrowser = class extends CortexElement {
   constructor() {
     super(...arguments);
@@ -14366,6 +14371,7 @@ let CxContentBrowser = class extends CortexElement {
     this.selectedAssetId = void 0;
     this.isMobile = false;
     this.defaultPageSize = 10;
+    this.initialFolderPending = false;
   }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
@@ -14396,6 +14402,10 @@ let CxContentBrowser = class extends CortexElement {
       sortDirection: this.defaultSortDirection,
       sortOrderName: this.defaultSortOrderName
     });
+    if (!this.defaultFolderId) {
+      this.initialFolderPending = true;
+      this.initialFolderTimeout = setTimeout(() => this.releaseInitialFolder(), INITIAL_FOLDER_TIMEOUT_MS);
+    }
     this.updateComplete.then(() => {
       this.fetchAndMergeAssetsController = new FetchAndMergeAssetsController(this, {
         availableDocTypes: this.availableDocTypes,
@@ -14413,6 +14423,17 @@ let CxContentBrowser = class extends CortexElement {
       this.requestUpdate();
     });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.initialFolderPending && this.initialFolderTimeout === void 0) {
+      this.initialFolderTimeout = setTimeout(() => this.releaseInitialFolder(), INITIAL_FOLDER_TIMEOUT_MS);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.initialFolderTimeout);
+    this.initialFolderTimeout = void 0;
+  }
   fetchAssets(request) {
     return __async(this, null, function* () {
       return yield this.fetchAndMergeAssetsController.fetchAssets(request);
@@ -14506,7 +14527,9 @@ let CxContentBrowser = class extends CortexElement {
         sortOrderName,
         start: 0
       });
-      yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      if (!this.initialFolderPending) {
+        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      }
     });
   }
   handleFilterChange(event) {
@@ -14515,7 +14538,9 @@ let CxContentBrowser = class extends CortexElement {
         selectedFacets: event.detail.selection,
         start: 0
       });
-      yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      if (!this.initialFolderPending) {
+        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      }
     });
   }
   handleViewChange(event) {
@@ -14525,7 +14550,9 @@ let CxContentBrowser = class extends CortexElement {
           isSeeThrough: event.detail.isSeeThrough,
           start: 0
         });
-        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+        if (!this.initialFolderPending) {
+          yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+        }
       }
       switch (event.detail.view) {
         case GridView.Large:
@@ -14562,6 +14589,7 @@ let CxContentBrowser = class extends CortexElement {
       if (!folderId || folderId === this.lastRequest.folderId) {
         return;
       }
+      this.clearInitialFolderPending();
       this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), {
         folderId,
         start: 0
@@ -14575,13 +14603,23 @@ let CxContentBrowser = class extends CortexElement {
         searchText: event.detail.searchText,
         start: 0
       });
-      yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      if (!this.initialFolderPending) {
+        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      }
     });
   }
   handleGridResize(event) {
     return __async(this, null, function* () {
       const { columnCount, rowCount } = event.detail;
       const newPageSize = Math.ceil(rowCount * columnCount / this.defaultPageSize + 1) * this.defaultPageSize;
+      if (this.initialFolderPending) {
+        if (!this.lastRequest.start && newPageSize > safeInteger(this.lastRequest.pageSize)) {
+          this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), {
+            pageSize: newPageSize
+          });
+        }
+        return;
+      }
       const totalCount = this.fetchAndMergeAssetsController.getData().totalCount;
       const newStart = safeInteger(this.lastRequest.start) + safeInteger(this.lastRequest.pageSize);
       if (newPageSize <= safeInteger(this.lastRequest.pageSize) || newPageSize === 0 || newStart > totalCount) {
@@ -14594,6 +14632,22 @@ let CxContentBrowser = class extends CortexElement {
       yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
     });
   }
+  clearInitialFolderPending() {
+    this.initialFolderPending = false;
+    clearTimeout(this.initialFolderTimeout);
+    this.initialFolderTimeout = void 0;
+  }
+  releaseInitialFolder() {
+    return __async(this, null, function* () {
+      if (!this.initialFolderPending) {
+        return;
+      }
+      this.clearInitialFolderPending();
+      if (this.lastRequest.pageSize) {
+        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      }
+    });
+  }
   handleGridClick(event) {
     return __async(this, null, function* () {
       const { id } = event.detail;
@@ -14862,7 +14916,7 @@ let CxContentBrowser = class extends CortexElement {
           <cx-content-browser-grid
             .assets=${items}
             ?has-more=${items.length < totalCount}
-            ?loading=${loading}
+            ?loading=${loading || this.initialFolderPending}
             ?show-title=${this.showTitle}
             ?show-size=${this.showSize}
             ?show-dimensions=${this.showDimensions}
@@ -15098,6 +15152,9 @@ __decorateClass([
 __decorateClass([
   r$6()
 ], CxContentBrowser.prototype, "isMobile", 2);
+__decorateClass([
+  r$6()
+], CxContentBrowser.prototype, "initialFolderPending", 2);
 __decorateClass([
   watch("lastRequest", { waitUntilFirstUpdate: true })
 ], CxContentBrowser.prototype, "handleLastRequestChange", 1);

package/build/index.mjs

@@ -6030,7 +6030,9 @@ let CxContentBrowserBrowser = class extends CortexElement {
   handleFirstFetchCallback(data) {
     var _a2, _b2;
     let first = null;
-    if (this.allowedFolders.length) {
+    if (this.folderId) {
+      first = data.find((item) => item.id === this.folderId);
+    } else if (this.allowedFolders.length) {
       first = (_a2 = data.find((item) => this.allowedFolders.includes(item.id))) != null ? _a2 : data[0];
     } else {
       first = (_b2 = data.find((item) => item.title === LIBRARY_FOLDER_TITLE)) != null ? _b2 : data[0];
@@ -14055,7 +14057,7 @@ class FetchAndMergeAssetsController {
         this._debounceResolve = resolve;
       });
       this._debounceTimeout = setTimeout(() => __async(this, null, function* () {
-        var _a3, _b2, _c2, _d2, _e3;
+        var _a3, _b2, _c2, _d2, _e3, _f2, _g, _h, _i;
         if (Object.keys(this.sortOrders).length === 0) {
           const sortOrders = yield apiGetSortOrders();
           this.sortOrders = sortOrders;
@@ -14063,23 +14065,25 @@ class FetchAndMergeAssetsController {
         const forceRefetch = request.start === ((_a3 = this.lastRequest) == null ? void 0 : _a3.start) && !!request.pageSize && !!((_b2 = this.lastRequest) == null ? void 0 : _b2.pageSize) && request.pageSize > ((_c2 = this.lastRequest) == null ? void 0 : _c2.pageSize);
         if (!__privateGet(this, _hasFetchedOnce)) {
           request = __spreadProps(__spreadValues({}, request), {
-            folderId: this.defaultFolderId,
-            isSeeThrough: this.defaultIsSeeThrough,
-            searchText: this.defaultSearchText,
-            selectedFacets: this.defaultSelectedFacets,
-            sortDirection: this.defaultSortDirection,
-            sortOrderName: this.defaultSortOrderName
+            // Keep a folder the host already resolved (e.g. the auto-selected initial folder).
+            folderId: request.folderId || this.defaultFolderId,
+            isSeeThrough: (_d2 = request.isSeeThrough) != null ? _d2 : this.defaultIsSeeThrough,
+            searchText: (_e3 = request.searchText) != null ? _e3 : this.defaultSearchText,
+            selectedFacets: (_f2 = request.selectedFacets) != null ? _f2 : this.defaultSelectedFacets,
+            sortDirection: (_g = request.sortDirection) != null ? _g : this.defaultSortDirection,
+            sortOrderName: (_h = request.sortOrderName) != null ? _h : this.defaultSortOrderName
           });
         }
         let sortOrder;
         if (request.sortOrderName && request.sortDirection) {
-          sortOrder = (_e3 = (_d2 = this.sortOrders[request.sortOrderName]) == null ? void 0 : _d2.find((item) => {
+          const sortOrders = this.sortOrders[request.sortOrderName];
+          sortOrder = (_i = sortOrders == null ? void 0 : sortOrders.find((item) => {
             var _a4;
             return item.sortDirection.toLowerCase() === ((_a4 = request.sortDirection) == null ? void 0 : _a4.toLowerCase());
-          })) == null ? void 0 : _e3.id;
-          if (!sortOrder && this.sortOrders[request.sortOrderName][0]) {
-            sortOrder = this.sortOrders[request.sortOrderName][0].id;
-            request.sortDirection = this.sortOrders[request.sortOrderName][0].sortDirection;
+          })) == null ? void 0 : _i.id;
+          if (!sortOrder && (sortOrders == null ? void 0 : sortOrders[0])) {
+            sortOrder = sortOrders[0].id;
+            request.sortDirection = sortOrders[0].sortDirection;
           }
         }
         request = __spreadProps(__spreadValues({}, request), {
@@ -14362,6 +14366,7 @@ const COMPUTED_FIELDS = ["ScrubUrl", "AllowATSLink"];
 const MOBILE_WIDTH_THRESHOLD = 480;
 const FORCE_OVERLAY_THRESHOLD = 650;
 const PERSISTENT_DRAWER_WIDTH = 400;
+const INITIAL_FOLDER_TIMEOUT_MS = 3e3;
 let CxContentBrowser = class extends CortexElement {
   constructor() {
     super(...arguments);
@@ -14432,6 +14437,7 @@ let CxContentBrowser = class extends CortexElement {
     this.selectedAssetId = void 0;
     this.isMobile = false;
     this.defaultPageSize = 10;
+    this.initialFolderPending = false;
   }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
@@ -14462,6 +14468,10 @@ let CxContentBrowser = class extends CortexElement {
       sortDirection: this.defaultSortDirection,
       sortOrderName: this.defaultSortOrderName
     });
+    if (!this.defaultFolderId) {
+      this.initialFolderPending = true;
+      this.initialFolderTimeout = setTimeout(() => this.releaseInitialFolder(), INITIAL_FOLDER_TIMEOUT_MS);
+    }
     this.updateComplete.then(() => {
       this.fetchAndMergeAssetsController = new FetchAndMergeAssetsController(this, {
         availableDocTypes: this.availableDocTypes,
@@ -14479,6 +14489,17 @@ let CxContentBrowser = class extends CortexElement {
       this.requestUpdate();
     });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.initialFolderPending && this.initialFolderTimeout === void 0) {
+      this.initialFolderTimeout = setTimeout(() => this.releaseInitialFolder(), INITIAL_FOLDER_TIMEOUT_MS);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.initialFolderTimeout);
+    this.initialFolderTimeout = void 0;
+  }
   fetchAssets(request) {
     return __async(this, null, function* () {
       return yield this.fetchAndMergeAssetsController.fetchAssets(request);
@@ -14572,7 +14593,9 @@ let CxContentBrowser = class extends CortexElement {
         sortOrderName,
         start: 0
       });
-      yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      if (!this.initialFolderPending) {
+        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      }
     });
   }
   handleFilterChange(event) {
@@ -14581,7 +14604,9 @@ let CxContentBrowser = class extends CortexElement {
         selectedFacets: event.detail.selection,
         start: 0
       });
-      yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      if (!this.initialFolderPending) {
+        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      }
     });
   }
   handleViewChange(event) {
@@ -14591,7 +14616,9 @@ let CxContentBrowser = class extends CortexElement {
           isSeeThrough: event.detail.isSeeThrough,
           start: 0
         });
-        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+        if (!this.initialFolderPending) {
+          yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+        }
       }
       switch (event.detail.view) {
         case GridView$1.Large:
@@ -14628,6 +14655,7 @@ let CxContentBrowser = class extends CortexElement {
       if (!folderId || folderId === this.lastRequest.folderId) {
         return;
       }
+      this.clearInitialFolderPending();
       this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), {
         folderId,
         start: 0
@@ -14641,13 +14669,23 @@ let CxContentBrowser = class extends CortexElement {
         searchText: event.detail.searchText,
         start: 0
       });
-      yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      if (!this.initialFolderPending) {
+        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      }
     });
   }
   handleGridResize(event) {
     return __async(this, null, function* () {
       const { columnCount, rowCount } = event.detail;
       const newPageSize = Math.ceil(rowCount * columnCount / this.defaultPageSize + 1) * this.defaultPageSize;
+      if (this.initialFolderPending) {
+        if (!this.lastRequest.start && newPageSize > safeInteger(this.lastRequest.pageSize)) {
+          this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), {
+            pageSize: newPageSize
+          });
+        }
+        return;
+      }
       const totalCount = this.fetchAndMergeAssetsController.getData().totalCount;
       const newStart = safeInteger(this.lastRequest.start) + safeInteger(this.lastRequest.pageSize);
       if (newPageSize <= safeInteger(this.lastRequest.pageSize) || newPageSize === 0 || newStart > totalCount) {
@@ -14660,6 +14698,22 @@ let CxContentBrowser = class extends CortexElement {
       yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
     });
   }
+  clearInitialFolderPending() {
+    this.initialFolderPending = false;
+    clearTimeout(this.initialFolderTimeout);
+    this.initialFolderTimeout = void 0;
+  }
+  releaseInitialFolder() {
+    return __async(this, null, function* () {
+      if (!this.initialFolderPending) {
+        return;
+      }
+      this.clearInitialFolderPending();
+      if (this.lastRequest.pageSize) {
+        yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+      }
+    });
+  }
   handleGridClick(event) {
     return __async(this, null, function* () {
       const { id } = event.detail;
@@ -14928,7 +14982,7 @@ let CxContentBrowser = class extends CortexElement {
           <cx-content-browser-grid
             .assets=${items}
             ?has-more=${items.length < totalCount}
-            ?loading=${loading}
+            ?loading=${loading || this.initialFolderPending}
             ?show-title=${this.showTitle}
             ?show-size=${this.showSize}
             ?show-dimensions=${this.showDimensions}
@@ -15164,6 +15218,9 @@ __decorateClass([
 __decorateClass([
   r$6()
 ], CxContentBrowser.prototype, "isMobile", 2);
+__decorateClass([
+  r$6()
+], CxContentBrowser.prototype, "initialFolderPending", 2);
 __decorateClass([
   watch("lastRequest", { waitUntilFirstUpdate: true })
 ], CxContentBrowser.prototype, "handleLastRequestChange", 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangelogic/orange-dam-content-browser-sdk",
-  "version": "2.3.7",
+  "version": "2.3.8-Beta-2",
   "description": "OrangeDAM Content Browser SDK source code",
   "main": "./build/OrangeDAMContentBrowserSDK.min.js",
   "module": "./build/index.mjs",