@myop/sdk 0.3.19 → 0.3.20

package/dist/bundled-declarations.d.ts

@@ -1191,6 +1191,9 @@ declare module "@myop/sdk/host/components/myopIframeComponent" {
         componentConfig: IComponentDefinitionConfig;
         container: HTMLElement;
         private IframeElement;
+        private _autoSizeCleanup?;
+        private _autoSizeOptions?;
+        private _autoSizeUpdate?;
         constructor(componentConfig: IComponentDefinitionConfig, skin: ISkinConfig, container: HTMLElement, IframeElement: HTMLIFrameElement, options?: loaderOptions);
         sizeMeta?: {
             width?: string | number;
@@ -1209,6 +1212,11 @@ declare module "@myop/sdk/host/components/myopIframeComponent" {
         /**
          * Observes the iframe content size and automatically syncs it to the iframe element.
          * Uses direct contentDocument access (same-origin only) for accurate measurements.
+         *
+         * Reentrant: when called again while observers already exist, updates options and
+         * re-evaluates sizing without recreating observers. Cleanup + re-call (e.g. React
+         * re-render) creates fresh observers since cleanup clears the existing ones.
+         *
          * @param options - Configuration options including size change callback and min/max constraints
          * @returns Cleanup function to stop observing
          */

package/dist/cjs/{_IframeSDK.b158be2e.js → _IframeSDK.63faba1b.js}

@@ -1585,6 +1585,9 @@ var MyopIframeComponent = class extends BaseMyopComponent {
     this.componentConfig = componentConfig;
     this.container = container;
     this.IframeElement = IframeElement;
+    __publicField(this, "_autoSizeCleanup");
+    __publicField(this, "_autoSizeOptions");
+    __publicField(this, "_autoSizeUpdate");
     __publicField(this, "sizeMeta");
     __publicField(this, "cleanupInspect");
     __publicField(this, "setHeightBasedOnDocumentElement", () => {
@@ -1614,11 +1617,20 @@ var MyopIframeComponent = class extends BaseMyopComponent {
     /**
      * Observes the iframe content size and automatically syncs it to the iframe element.
      * Uses direct contentDocument access (same-origin only) for accurate measurements.
+     *
+     * Reentrant: when called again while observers already exist, updates options and
+     * re-evaluates sizing without recreating observers. Cleanup + re-call (e.g. React
+     * re-render) creates fresh observers since cleanup clears the existing ones.
+     *
      * @param options - Configuration options including size change callback and min/max constraints
      * @returns Cleanup function to stop observing
      */
     __publicField(this, "observeAutoSize", (options) => {
-      var _a, _b, _c, _d, _e, _f, _g;
+      this._autoSizeOptions = options;
+      if (this._autoSizeCleanup && this._autoSizeUpdate) {
+        this._autoSizeUpdate();
+        return this._autoSizeCleanup;
+      }
       const iframe = this.IframeElement;
       const doc = iframe.contentDocument;
       if (!doc) {
@@ -1637,78 +1649,88 @@ var MyopIframeComponent = class extends BaseMyopComponent {
         const parsed = parseFloat(value);
         return isNaN(parsed) ? void 0 : parsed;
       };
-      const minWidth = parseSize(options == null ? void 0 : options.minWidth);
-      const maxWidth = parseSize(options == null ? void 0 : options.maxWidth);
-      const minHeight = parseSize(options == null ? void 0 : options.minHeight);
-      const maxHeight = parseSize(options == null ? void 0 : options.maxHeight);
-      const loaderMinHeight = (_a = options == null ? void 0 : options.loaderMinHeight) != null ? _a : 50;
-      const sizeMetaFillWidth = ((_b = this.sizeMeta) == null ? void 0 : _b.width) === "100%" ? "100%" : void 0;
-      const sizeMetaFillHeight = ((_c = this.sizeMeta) == null ? void 0 : _c.height) === "100%" ? "100%" : void 0;
-      const resolvedExplicitWidth = (_e = (_d = options == null ? void 0 : options.explicitWidth) != null ? _d : sizeMetaFillWidth) != null ? _e : "100%";
-      const resolvedExplicitHeight = (_f = options == null ? void 0 : options.explicitHeight) != null ? _f : sizeMetaFillHeight;
-      const hasExplicitWidth = resolvedExplicitWidth !== void 0;
-      const hasExplicitHeight = resolvedExplicitHeight !== void 0;
-      const containerRect = this.container.getBoundingClientRect();
-      const collapsedWidth = containerRect.width === 0;
-      const collapsedHeight = containerRect.height === 0 || containerRect.height === loaderMinHeight;
-      const shouldAutoWidth = (options == null ? void 0 : options.forceAutoSize) ? !hasExplicitWidth : collapsedWidth && !hasExplicitWidth;
-      const shouldAutoHeight = (options == null ? void 0 : options.forceAutoSize) ? !hasExplicitHeight : collapsedHeight && !hasExplicitHeight;
-      if (!shouldAutoWidth && !shouldAutoHeight) {
-        const explicitWidthPx = typeof resolvedExplicitWidth === "number" ? resolvedExplicitWidth : void 0;
-        const explicitHeightPx = typeof resolvedExplicitHeight === "number" ? resolvedExplicitHeight : void 0;
-        if (explicitWidthPx !== void 0 || explicitHeightPx !== void 0) {
-          (_g = options == null ? void 0 : options.onSizeChange) == null ? void 0 : _g.call(options, {
-            width: explicitWidthPx,
-            height: explicitHeightPx,
-            autoSizingWidth: false,
-            autoSizingHeight: false
-          });
-        }
-        return () => {
-        };
-      }
       const updateSize = () => {
-        var _a2;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const contentDoc = iframe.contentDocument;
-        if (contentDoc) {
-          if (shouldAutoHeight) {
-            iframe.style.height = "0px";
-          }
-          if (shouldAutoWidth) {
-            iframe.style.width = "0px";
-          }
-          const contentWidth = Math.ceil(contentDoc.documentElement.scrollWidth);
-          const contentHeight = Math.ceil(contentDoc.documentElement.scrollHeight);
-          const width = clamp(contentWidth, minWidth, maxWidth);
-          const height = clamp(contentHeight, minHeight, maxHeight);
-          if (shouldAutoWidth) {
-            iframe.style.width = "".concat(width, "px");
-          }
-          if (shouldAutoHeight) {
-            iframe.style.height = "".concat(height, "px");
+        if (!contentDoc) return;
+        const opts = this._autoSizeOptions;
+        const minWidth = parseSize(opts == null ? void 0 : opts.minWidth);
+        const maxWidth = parseSize(opts == null ? void 0 : opts.maxWidth);
+        const minHeight = parseSize(opts == null ? void 0 : opts.minHeight);
+        const maxHeight = parseSize(opts == null ? void 0 : opts.maxHeight);
+        const loaderMinHeight = (_a = opts == null ? void 0 : opts.loaderMinHeight) != null ? _a : 50;
+        const sizeMetaFillWidth = ((_b = this.sizeMeta) == null ? void 0 : _b.width) === "100%" ? "100%" : void 0;
+        const sizeMetaFillHeight = ((_c = this.sizeMeta) == null ? void 0 : _c.height) === "100%" ? "100%" : void 0;
+        const resolvedExplicitWidth = (_e = (_d = opts == null ? void 0 : opts.explicitWidth) != null ? _d : sizeMetaFillWidth) != null ? _e : "100%";
+        const resolvedExplicitHeight = (_f = opts == null ? void 0 : opts.explicitHeight) != null ? _f : sizeMetaFillHeight;
+        const hasExplicitWidth = resolvedExplicitWidth !== void 0;
+        const hasExplicitHeight = resolvedExplicitHeight !== void 0;
+        const containerRect = this.container.getBoundingClientRect();
+        const collapsedWidth = containerRect.width === 0;
+        const collapsedHeight = containerRect.height === 0 || containerRect.height === loaderMinHeight;
+        const shouldAutoWidth = (opts == null ? void 0 : opts.forceAutoSize) ? !hasExplicitWidth : collapsedWidth && !hasExplicitWidth;
+        const shouldAutoHeight = (opts == null ? void 0 : opts.forceAutoSize) ? !hasExplicitHeight : collapsedHeight && !hasExplicitHeight;
+        if (!shouldAutoWidth && !shouldAutoHeight) {
+          iframe.style.width = typeof resolvedExplicitWidth === "number" ? "".concat(resolvedExplicitWidth, "px") : "100%";
+          iframe.style.height = typeof resolvedExplicitHeight === "number" ? "".concat(resolvedExplicitHeight, "px") : "100%";
+          const explicitWidthPx = typeof resolvedExplicitWidth === "number" ? resolvedExplicitWidth : void 0;
+          const explicitHeightPx = typeof resolvedExplicitHeight === "number" ? resolvedExplicitHeight : void 0;
+          if (explicitWidthPx !== void 0 || explicitHeightPx !== void 0) {
+            (_g = opts == null ? void 0 : opts.onSizeChange) == null ? void 0 : _g.call(opts, {
+              width: explicitWidthPx,
+              height: explicitHeightPx,
+              autoSizingWidth: false,
+              autoSizingHeight: false
+            });
           }
-          const isWidthConstrained = shouldAutoWidth && maxWidth !== void 0 && contentWidth > maxWidth;
-          const isHeightConstrained = shouldAutoHeight && maxHeight !== void 0 && contentHeight > maxHeight;
-          contentDoc.documentElement.style.overflowX = isWidthConstrained ? "auto" : "";
-          contentDoc.documentElement.style.overflowY = isHeightConstrained ? "auto" : "";
-          (_a2 = options == null ? void 0 : options.onSizeChange) == null ? void 0 : _a2.call(options, {
-            width,
-            height,
-            autoSizingWidth: shouldAutoWidth,
-            autoSizingHeight: shouldAutoHeight
-          });
+          return;
+        }
+        if (shouldAutoHeight) {
+          iframe.style.height = "0px";
+        }
+        if (shouldAutoWidth) {
+          iframe.style.width = "0px";
         }
+        const contentWidth = Math.ceil(Math.max(contentDoc.documentElement.scrollWidth, contentDoc.body.scrollWidth));
+        const contentHeight = Math.ceil(Math.max(contentDoc.documentElement.scrollHeight, contentDoc.body.scrollHeight));
+        const width = clamp(contentWidth, minWidth, maxWidth);
+        const height = clamp(contentHeight, minHeight, maxHeight);
+        if (shouldAutoWidth) {
+          iframe.style.width = "".concat(width, "px");
+        } else {
+          iframe.style.width = typeof resolvedExplicitWidth === "number" ? "".concat(resolvedExplicitWidth, "px") : "100%";
+        }
+        if (shouldAutoHeight) {
+          iframe.style.height = "".concat(height, "px");
+        } else {
+          iframe.style.height = typeof resolvedExplicitHeight === "number" ? "".concat(resolvedExplicitHeight, "px") : "100%";
+        }
+        const isWidthConstrained = shouldAutoWidth && maxWidth !== void 0 && contentWidth > maxWidth;
+        const isHeightConstrained = shouldAutoHeight && maxHeight !== void 0 && contentHeight > maxHeight;
+        contentDoc.documentElement.style.overflowX = isWidthConstrained ? "auto" : "";
+        contentDoc.documentElement.style.overflowY = isHeightConstrained ? "auto" : "";
+        (_h = opts == null ? void 0 : opts.onSizeChange) == null ? void 0 : _h.call(opts, {
+          width,
+          height,
+          autoSizingWidth: shouldAutoWidth,
+          autoSizingHeight: shouldAutoHeight
+        });
       };
       updateSize();
+      this._autoSizeUpdate = updateSize;
       const resizeObserver = new ResizeObserver(updateSize);
       resizeObserver.observe(doc.body);
       resizeObserver.observe(doc.documentElement);
       const mutationObserver = new MutationObserver(updateSize);
       mutationObserver.observe(doc.body, { childList: true, subtree: true, characterData: true, attributes: true });
-      return () => {
+      const cleanup = () => {
         resizeObserver.disconnect();
         mutationObserver.disconnect();
+        this._autoSizeUpdate = void 0;
+        this._autoSizeCleanup = void 0;
       };
+      this._autoSizeCleanup = cleanup;
+      return cleanup;
     });
     __publicField(this, "setSizeBasedOnDocumentElement", () => {
       const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
@@ -1755,16 +1777,15 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       return cleanupHandler;
     });
     __publicField(this, "dispose", () => {
+      if (this._autoSizeCleanup) {
+        this._autoSizeCleanup();
+        this._autoSizeCleanup = void 0;
+      }
       if (this.cleanupInspect)
         this.cleanupInspect();
       super.dispose();
       this.IframeElement.parentNode.removeChild(this.IframeElement);
     });
-    if (skin.loader.autoHeight) {
-      this.initiated().then(() => {
-        this.setHeightBasedOnScrollHeight();
-      });
-    }
     this.element = this.IframeElement;
   }
   inspect() {
@@ -2408,11 +2429,12 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         doc.close();
         const comp = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
         comp.sizeMeta = parsedSizeMeta;
-        if (loaderConfig.autoHeight) {
-          IframeElement.onload = () => {
-            comp.observeSizeBasedOnDocumentElement();
-          };
-        }
+        comp.initiated().then(() => {
+          comp.observeAutoSize({ forceAutoSize: true });
+          if (!(options == null ? void 0 : options.hidden)) {
+            comp.show();
+          }
+        });
         return comp;
       }
       if (loaderConfig.shadowRootMode === ShadowRootModeType.none) {