@orangelogic/orange-dam-content-browser-sdk 2.3.0 → 2.3.1

package/build/index.mjs

@@ -12823,6 +12823,24 @@ __decorateClass$1([
 CxContentBrowserHeader = __decorateClass$1([
   customElement("cx-content-browser-header")
 ], CxContentBrowserHeader);
+const appendPathAndQuery = (baseUrl, pathSuffix, extraQueryParams = []) => {
+  const questionMarkIndex = baseUrl.indexOf("?");
+  const hashIndex = baseUrl.indexOf("#");
+  const separatorIndex = [questionMarkIndex, hashIndex].filter((index) => index !== -1).reduce((lowest, index) => lowest === -1 ? index : Math.min(lowest, index), -1);
+  const path = separatorIndex === -1 ? baseUrl : baseUrl.slice(0, separatorIndex);
+  const tail = separatorIndex === -1 ? "" : baseUrl.slice(separatorIndex);
+  const tailHashIndex = tail.indexOf("#");
+  const fragment = tailHashIndex === -1 ? "" : tail.slice(tailHashIndex);
+  const existingQuery = (tailHashIndex === -1 ? tail : tail.slice(0, tailHashIndex)).replace(/^\?/, "");
+  const parameterName = (parameter) => parameter.split("=")[0].toLowerCase();
+  const overriddenNames = new Set(extraQueryParams.map(parameterName));
+  const mergedParams = [
+    ...existingQuery.split("&").filter((parameter) => parameter && !overriddenNames.has(parameterName(parameter))),
+    ...extraQueryParams
+  ];
+  const query = mergedParams.length > 0 ? `?${mergedParams.join("&")}` : "";
+  return `${path}${pathSuffix}${query}${fragment}`;
+};
 const DEFAULT_VIEW_SIZE = "CoreField.LargeSizePreview";
 const FIELD_ALLOW_ATS_LINK = "AllowATSLink";
 const FIELD_DOC_CAPTION_LONG = "Document.CaptionLong";
@@ -12868,6 +12886,8 @@ function resolveAssetExtraFilters(selectedFacets) {
 function isCortexErrorResponse(response) {
   return response && typeof response === "object" && "ErrorCode" in response;
 }
+const POST_UNSUPPORTED_STATUSES = /* @__PURE__ */ new Set([405, 501]);
+const postUnsupportedOrigins = /* @__PURE__ */ new Set();
 function createId() {
   const cryptoApi = globalThis.crypto;
   if (cryptoApi == null ? void 0 : cryptoApi.randomUUID) {
@@ -12888,6 +12908,128 @@ function createId() {
   }
   return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
+function buildAssetLinkImageUrl({
+  asset,
+  extension,
+  parameters,
+  permanentLink,
+  rawResponse,
+  transformations,
+  useSession
+}) {
+  let baseImageUrl = permanentLink || rawResponse.imageUrl;
+  let transformationPath = "";
+  if (transformations && transformations.length > 0) {
+    transformationPath += "/t/";
+  }
+  transformations == null ? void 0 : transformations.forEach(({ key, value }) => {
+    if (key === TransformationAction.Resize) {
+      const validTransformations = [
+        ...[
+          {
+            key: "re_w_",
+            value: value.width
+          },
+          {
+            key: "re_h_",
+            value: value.height
+          }
+        ].filter((item) => item.value !== void 0).map((item) => ({
+          key: item.key,
+          value: Math.round(Number(item.value))
+        })),
+        {
+          key: "re_rm_",
+          value: "stretch"
+        }
+      ];
+      validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
+        transformationPath += `${vKey}${vValue}${index < validTransformations.length - 1 ? "," : ""}`;
+      });
+      transformationPath += "/";
+    }
+    if (key === TransformationAction.Crop) {
+      const validTransformations = [
+        ...[
+          {
+            key: "c_w_",
+            value: value.width
+          },
+          {
+            key: "c_h_",
+            value: value.height
+          },
+          {
+            key: "c_x_",
+            value: value.x
+          },
+          {
+            key: "c_y_",
+            value: value.y
+          }
+        ].filter((item) => item.value !== void 0).map((item) => ({
+          key: item.key,
+          value: Math.round(Number(item.value))
+        })),
+        {
+          key: "c_whu_",
+          value: "pixel"
+        }
+      ];
+      validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
+        transformationPath += `${vKey}${vValue}${index < validTransformations.length - 1 ? "," : ""}`;
+      });
+      transformationPath += "/";
+    }
+    if (key === TransformationAction.Rotate) {
+      const validTransformations = [{
+        key: "r_a_",
+        value: value.rotation
+      }].filter((item) => item.value !== void 0).map((item) => ({ key: item.key, value: Math.round(Number(item.value)) }));
+      validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
+        transformationPath += `${vKey}${vValue}${index < validTransformations.length - 1 ? "," : ""}`;
+      });
+      transformationPath += "/";
+    }
+    if (key === TransformationAction.Quality) {
+      const validTransformations = [{
+        key: "q_level_",
+        value: value.quality
+      }].filter((item) => item.value !== void 0).map((item) => ({ key: item.key, value: Math.round(Number(item.value)) }));
+      validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
+        transformationPath += `${vKey}${vValue}${index < validTransformations.length - 1 ? "," : ""}`;
+      });
+      transformationPath += "/";
+    }
+    if (key === TransformationAction.Metadata) {
+      if (value.keepMetadata === true) {
+        transformationPath += "fl_keep_metadata/";
+      }
+    }
+  });
+  const hasTransformations = Boolean(transformations && transformations.length > 0);
+  if (hasTransformations) {
+    transformationPath += `${asset.identifier}`;
+  }
+  if (!permanentLink) {
+    const assetExtension = extension != null ? extension : asset.extension;
+    const normalizedExtension = assetExtension.startsWith(".") ? assetExtension : `.${assetExtension}`;
+    if (hasTransformations) {
+      transformationPath += normalizedExtension;
+    } else {
+      const [basePath, baseTail] = baseImageUrl.split(/([?#].*)$/, 2);
+      baseImageUrl = basePath.replace(/\.[^./]+$/, "") + normalizedExtension + (baseTail != null ? baseTail : "");
+    }
+  }
+  const queryParams = [];
+  parameters == null ? void 0 : parameters.forEach(({ key, value }) => {
+    queryParams.push(`${encodeURIComponent(key.trim())}=${encodeURIComponent(value.trim())}`);
+  });
+  if (useSession) {
+    queryParams.push(`UseSession=${encodeURIComponent(useSession)}`);
+  }
+  return appendPathAndQuery(baseImageUrl, transformationPath, queryParams);
+}
 function apiGetAssetLinks(_0) {
   return __async(this, arguments, function* ({
     assets,
@@ -12899,161 +13041,83 @@ function apiGetAssetLinks(_0) {
     transformations,
     useSession
   }) {
+    var _a2;
     const getAssetLinkErrors = {};
     const isOnlyOneAssetSelected = assets.length === 1;
     let hasError = false;
+    const origin2 = (_a2 = http.defaults.baseURL) != null ? _a2 : window.location.origin;
     try {
-      const settled = yield Promise.allSettled(assets.map((asset) => {
-        return http.request({
-          method: "GET",
-          params: {
-            ExtraFields: extraFields,
-            GenerateAssetUrl: !permanentLink,
-            Parameters: parameters,
-            Proxy: proxyPreference,
-            RecordId: asset.recordId,
-            UseSession: useSession || void 0
-          },
-          paramsSerializer: {
-            indexes: null
-          },
-          transformResponse: [
-            ...Array.isArray(http.defaults.transformResponse) ? http.defaults.transformResponse : [],
-            (rawResponse) => {
-              if (isCortexErrorResponse(rawResponse)) {
-                hasError = true;
-                if (isOnlyOneAssetSelected) {
-                  if (getAssetLinkErrors[rawResponse.ErrorCode]) {
-                    getAssetLinkErrors[rawResponse.ErrorCode].push(asset);
-                  } else {
-                    getAssetLinkErrors[rawResponse.ErrorCode] = [asset];
-                  }
-                }
-                return {
-                  imageUrl: asset.imageUrl
-                };
-              }
-              const sourceUrl = permanentLink || rawResponse.imageUrl;
-              const [sourcePath, sourceQuery] = sourceUrl.split("?", 2);
-              const mergedParams = new URLSearchParams(sourceQuery != null ? sourceQuery : "");
-              let imageUrl = sourcePath;
-              if (transformations && transformations.length > 0) {
-                imageUrl += "/t/";
-              }
-              transformations == null ? void 0 : transformations.forEach(({ key, value }) => {
-                if (key === TransformationAction.Resize) {
-                  const validTransformations = [
-                    ...[
-                      {
-                        key: "re_w_",
-                        value: value.width
-                      },
-                      {
-                        key: "re_h_",
-                        value: value.height
-                      }
-                    ].filter((item) => item.value !== void 0).map((item) => ({
-                      key: item.key,
-                      value: Math.round(Number(item.value))
-                    })),
-                    {
-                      key: "re_rm_",
-                      value: "stretch"
-                    }
-                  ];
-                  validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
-                    imageUrl += `${vKey}${vValue}${index < validTransformations.length - 1 ? "," : ""}`;
-                  });
-                  imageUrl += "/";
-                }
-                if (key === TransformationAction.Crop) {
-                  const validTransformations = [
-                    ...[
-                      {
-                        key: "c_w_",
-                        value: value.width
-                      },
-                      {
-                        key: "c_h_",
-                        value: value.height
-                      },
-                      {
-                        key: "c_x_",
-                        value: value.x
-                      },
-                      {
-                        key: "c_y_",
-                        value: value.y
-                      }
-                    ].filter((item) => item.value !== void 0).map((item) => ({
-                      key: item.key,
-                      value: Math.round(Number(item.value))
-                    })),
-                    {
-                      key: "c_whu_",
-                      value: "pixel"
-                    }
-                  ];
-                  validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
-                    imageUrl += `${vKey}${vValue}${index < validTransformations.length - 1 ? "," : ""}`;
-                  });
-                  imageUrl += "/";
-                }
-                if (key === TransformationAction.Rotate) {
-                  const validTransformations = [{
-                    key: "r_a_",
-                    value: value.rotation
-                  }].filter((item) => item.value !== void 0).map((item) => ({ key: item.key, value: Math.round(Number(item.value)) }));
-                  validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
-                    imageUrl += `${vKey}${vValue}${index < validTransformations.length - 1 ? "," : ""}`;
-                  });
-                  imageUrl += "/";
-                }
-                if (key === TransformationAction.Quality) {
-                  const validTransformations = [{
-                    key: "q_level_",
-                    value: value.quality
-                  }].filter((item) => item.value !== void 0).map((item) => ({ key: item.key, value: Math.round(Number(item.value)) }));
-                  validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
-                    imageUrl += `${vKey}${vValue}${index < validTransformations.length - 1 ? "," : ""}`;
-                  });
-                  imageUrl += "/";
-                }
-                if (key === TransformationAction.Metadata) {
-                  if (value.keepMetadata === true) {
-                    imageUrl += "fl_keep_metadata/";
-                  }
-                }
-              });
-              if (transformations && transformations.length > 0) {
-                imageUrl += `${asset.identifier}`;
-              }
-              if (!permanentLink) {
-                const assetExtension = extension != null ? extension : asset.extension;
-                const normalizedExtension = assetExtension.startsWith(".") ? assetExtension : `.${assetExtension}`;
-                imageUrl = imageUrl.replace(/\.[^./]+$/, "") + normalizedExtension;
-              }
-              parameters == null ? void 0 : parameters.forEach(({ key, value }) => {
-                mergedParams.set(key.trim(), value.trim());
-              });
-              if (useSession && !mergedParams.has("UseSession")) {
-                mergedParams.set("UseSession", useSession);
-              }
-              const finalQuery = mergedParams.toString();
-              if (finalQuery) {
-                imageUrl += `?${finalQuery}`;
-              }
-              return __spreadProps(__spreadValues({}, rawResponse), {
-                imageUrl
-              });
+      const settled = yield Promise.allSettled(assets.map((asset) => __async(null, null, function* () {
+        const requestBody = {
+          GenerateAssetUrl: !permanentLink,
+          Parameters: parameters,
+          Proxy: proxyPreference,
+          RecordId: asset.recordId
+        };
+        if (extraFields == null ? void 0 : extraFields.length) {
+          requestBody.ExtraFields = extraFields;
+        }
+        const useSessionQuery = useSession ? `?${new URLSearchParams({ UseSession: useSession }).toString()}` : "";
+        const attemptPost = !postUnsupportedOrigins.has(origin2);
+        let rawResponse;
+        if (attemptPost) {
+          try {
+            const postResult = yield http.request({
+              data: requestBody,
+              method: "POST",
+              url: `${AssetApiEndpoint.GET_ASSET_LINK}${useSessionQuery}`,
+              validateStatus: () => true
+            });
+            if (POST_UNSUPPORTED_STATUSES.has(postResult.status)) {
+              postUnsupportedOrigins.add(origin2);
+            } else {
+              rawResponse = postResult.data;
             }
-          ],
-          url: AssetApiEndpoint.GET_ASSET_LINK
+          } catch (e2) {
+          }
+        }
+        if (rawResponse === void 0) {
+          const getResult = yield http.request({
+            method: "GET",
+            params: __spreadProps(__spreadValues({}, requestBody), {
+              UseSession: useSession || void 0
+            }),
+            paramsSerializer: {
+              indexes: null
+            },
+            url: AssetApiEndpoint.GET_ASSET_LINK
+          });
+          rawResponse = getResult.data;
+        }
+        if (isCortexErrorResponse(rawResponse)) {
+          hasError = true;
+          if (isOnlyOneAssetSelected) {
+            if (getAssetLinkErrors[rawResponse.ErrorCode]) {
+              getAssetLinkErrors[rawResponse.ErrorCode].push(asset);
+            } else {
+              getAssetLinkErrors[rawResponse.ErrorCode] = [asset];
+            }
+          }
+          return {
+            imageUrl: asset.imageUrl
+          };
+        }
+        const imageUrl = buildAssetLinkImageUrl({
+          asset,
+          extension,
+          parameters,
+          permanentLink,
+          rawResponse,
+          transformations,
+          useSession
         });
-      }));
+        return __spreadProps(__spreadValues({}, rawResponse), {
+          imageUrl
+        });
+      })));
       const data = settled.flatMap((result) => {
         if (result.status === "fulfilled") {
-          return [result.value.data];
+          return [result.value];
         }
         hasError = true;
         return [];
@@ -32740,6 +32804,87 @@ const App = ({
     }
   ) });
 };
+const MODAL_SELECTORS = [
+  '[aria-modal="true"]',
+  // ARIA-compliant dialogs (most libraries)
+  "dialog[open]",
+  // native <dialog> (showModal() sets no aria-modal attribute)
+  ".ui-dialog",
+  // jQuery UI Dialog (used by Drupal core modals)
+  ".modal.show",
+  // Bootstrap 4 / 5
+  ".modal.in",
+  // Bootstrap 3
+  '[data-focus-lock-disabled="false"]'
+  // react-focus-lock / focus-trap-react
+].join(",");
+function viewOf(el) {
+  var _a2;
+  return (_a2 = el.ownerDocument.defaultView) != null ? _a2 : window;
+}
+function isVisible(el) {
+  if (!el || !el.isConnected) {
+    return false;
+  }
+  const view = viewOf(el);
+  if (!(el instanceof view.HTMLElement)) {
+    return false;
+  }
+  const style = view.getComputedStyle(el);
+  if (style.visibility === "hidden" || style.display === "none") {
+    return false;
+  }
+  const rect = el.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
+}
+function establishesFixedContainingBlock(el) {
+  var _a2;
+  const doc = el.ownerDocument;
+  const view = (_a2 = doc.defaultView) != null ? _a2 : window;
+  let node2 = el;
+  while (node2 && node2 !== doc.body && node2 !== doc.documentElement) {
+    const style = view.getComputedStyle(node2);
+    if (style.transform && style.transform !== "none" || style.perspective && style.perspective !== "none" || style.filter && style.filter !== "none" || /transform|perspective|filter/.test(style.willChange || "") || /paint|layout|strict|content/.test(style.contain || "")) {
+      return true;
+    }
+    node2 = node2.parentElement;
+  }
+  return false;
+}
+function pickTopmost(candidates) {
+  if (candidates.length === 0) {
+    return null;
+  }
+  return candidates.reduce((top, el) => {
+    const zTop = parseInt(viewOf(top).getComputedStyle(top).zIndex, 10) || 0;
+    const zEl = parseInt(viewOf(el).getComputedStyle(el).zIndex, 10) || 0;
+    if (zEl !== zTop) {
+      return zEl > zTop ? el : top;
+    }
+    return el.compareDocumentPosition(top) & Node.DOCUMENT_POSITION_PRECEDING ? el : top;
+  });
+}
+function findFocusContainmentHost(doc = document) {
+  var _a2;
+  const view = (_a2 = doc.defaultView) != null ? _a2 : window;
+  const active = doc.activeElement;
+  const fromActive = active instanceof view.HTMLElement ? active.closest(MODAL_SELECTORS) : null;
+  const candidate = fromActive && isVisible(fromActive) && fromActive || pickTopmost(
+    Array.from(doc.querySelectorAll(MODAL_SELECTORS)).filter(
+      isVisible
+    )
+  );
+  if (!candidate) {
+    return null;
+  }
+  if (establishesFixedContainingBlock(candidate)) {
+    console.warn(
+      "[ContentBrowserSDK] An active modal was detected, but it establishes a CSS containing block that would clip the picker overlay. Falling back to document.body. Pass `containerId` (an element inside the modal) to embed the picker correctly."
+    );
+    return null;
+  }
+  return candidate;
+}
 globalThis.addEventListener("cx-unauthorized", refreshAccessToken);
 const assetsPickerRef = reactExports.createRef();
 const ContentBrowser = {
@@ -32841,11 +32986,12 @@ const ContentBrowser = {
     useSession,
     defaultGridView
   }) {
+    var _a2;
     const customStorageHandlers = typeof customStorage === "object" && !!customStorage && typeof customStorage.delete === "function" && !!customStorage.delete && typeof customStorage.get === "function" && !!customStorage.get && typeof customStorage.set === "function" && !!customStorage.set ? customStorage : void 0;
     window.OrangeDAMContentBrowser._customStorage = customStorageHandlers;
     let container = containerId && document.getElementById(containerId);
     if (!containerId) {
-      container = document.body;
+      container = (_a2 = findFocusContainmentHost()) != null ? _a2 : document.body;
     } else if (!container) {
       console.error(`Container with id ${containerId} is not found`);
       return;

package/build/utils/appendPathAndQuery.d.ts

@@ -0,0 +1 @@
+export declare const appendPathAndQuery: (baseUrl: string, pathSuffix: string, extraQueryParams?: string[]) => string;

package/build/utils/focus-containment.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Focus-trap-aware popup anchoring (ticket 29KEV1).
+ *
+ * When the Content Browser SDK opens in popup mode (no `containerId`), its UI is
+ * appended to `document.body`, outside any host-page modal. If the host page has
+ * an active modal with a focus trap — Drupal's jQuery UI Dialog, Bootstrap,
+ * react-focus-lock / focus-trap, a native `<dialog>` opened with `showModal()`,
+ * etc. — that trap forces focus back into the modal (or makes the rest of the
+ * page `inert`) whenever focus lands on the CBSDK search field, making it
+ * impossible to type.
+ *
+ * Every containment-based focus trap allows focus for elements that are DOM
+ * descendants of its container (jQuery UI checks `closest('.ui-dialog')`,
+ * focus-trap checks `container.contains(target)`, native modal dialogs don't
+ * mark their own subtree `inert`, ...). So the robust, framework-agnostic fix is
+ * to mount the CBSDK popup *inside* the active modal container instead of
+ * `document.body`.
+ */
+/**
+ * Finds the active host-page modal that CBSDK should mount inside so its inputs
+ * remain focusable. Returns `null` when there is no modal to anchor to (the
+ * normal case — CBSDK then mounts to `document.body` as before), or when
+ * anchoring would clip CBSDK's fixed overlay.
+ */
+export declare function findFocusContainmentHost(doc?: Document): HTMLElement | null;

package/package.json

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