@thoughtspot/visual-embed-sdk 1.52.2-beta.1 → 1.53.0

package/cjs/src/embed/ts-embed.js

@@ -7,7 +7,7 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.V1Embed = exports.TsEmbed = exports.THOUGHTSPOT_PARAM_PREFIX = void 0;
+exports.V1Embed = exports.TsEmbed = exports.BOOTSTRAP_URL_PARAMS = exports.THOUGHTSPOT_PARAM_PREFIX = void 0;
 const tslib_1 = require("tslib");
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
 const isObject_1 = tslib_1.__importDefault(require("lodash/isObject"));
@@ -43,9 +43,6 @@ const TS_EMBED_ID = '_thoughtspot-embed';
  */
 const PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY = 'tsEmbedOriginalPosition';
 const PRERENDER_WRAPPER_ID_PREFIX = 'tsEmbed-pre-render-wrapper-';
-const PRERENDER_PARKED_TRANSFORM = 'translateY(-100%)';
-/** The height createPreRenderWrapper() seeds before anything is measured. */
-const UNMEASURED_WRAPPER_HEIGHT = '100vh';
 // The container applies UpdateEmbedParams through React state, so a delivered
 // post is not the same as the params being in effect.
 const UPDATE_EMBED_PARAMS_SETTLE_MS = 200;
@@ -53,6 +50,97 @@ const UPDATE_EMBED_PARAMS_SETTLE_MS = 200;
 // truthy, so null or '' leaves the previous embed's values in place. '&' is
 // truthy and parses to {}.
 const NO_RUNTIME_PARAMS = '&';
+/**
+ * Params kept on the iframe `src` when `excludeConfigFromURL` is set. The rest
+ * are sent in the APP_INIT payload.
+ * @internal
+ */
+exports.BOOTSTRAP_URL_PARAMS = new Set([
+    // Marks the app as embedded.
+    types_1.Param.EmbedApp,
+    // The host page URL, used to validate the postMessage origin.
+    types_1.Param.HostAppUrl,
+    // The SDK version.
+    types_1.Param.Version,
+    // The authentication type set in init.
+    types_1.Param.AuthType,
+    // Whether the app signs the user in automatically.
+    types_1.Param.AutoLogin,
+    // Stops the app from redirecting to its login page.
+    types_1.Param.DisableLoginRedirect,
+    // Forces the SAML redirect for EmbeddedSSO.
+    types_1.Param.ForceSAMLAutoRedirect,
+    // Set for cookieless trusted authentication.
+    types_1.Param.cookieless,
+    // Lets the app use the pre-fetched auth info.
+    types_1.Param.preAuthCache,
+    // Blocks access to the full app outside the embed.
+    types_1.Param.blockNonEmbedFullAppAccess,
+    // The org to load, which the auth info depends on.
+    types_1.Param.OverrideOrgId,
+    // The host window height when the iframe loads.
+    types_1.Param.ViewPortHeight,
+    // The host window width when the iframe loads.
+    types_1.Param.ViewPortWidth,
+    // The app's client log level.
+    types_1.Param.ClientLogLevel,
+    // Lets the app override the native console.
+    types_1.Param.OverrideNativeConsole,
+    // An extra Pendo tracking key.
+    types_1.Param.PendoTrackingKey,
+    // The locale for number formatting.
+    types_1.Param.NumberFormatLocale,
+    // The locale for date formatting.
+    types_1.Param.DateFormatLocale,
+    // The currency format.
+    types_1.Param.CurrencyFormat,
+    // The UI language.
+    types_1.Param.Locale,
+    // Turns on dark mode.
+    types_1.Param.IsDarkMode,
+    // Turns on the radiant theme that dark mode needs.
+    types_1.Param.RadiantThemeEnabled,
+    // Marks a SearchEmbed or SearchBarEmbed.
+    types_1.Param.searchEmbed,
+    // Marks a LiveboardEmbed.
+    types_1.Param.livedBoardEmbed,
+    // Marks a SpotterAgentEmbed.
+    types_1.Param.isSpotterAgentEmbed,
+    // Marks a SpotterEmbed.
+    types_1.Param.SpotterEnabled,
+    // Marks an AppEmbed.
+    types_1.Param.IsFullAppEmbed,
+    // Legacy flag for the onBeforeGetVizData API intercept.
+    types_1.Param.IsOnBeforeGetVizDataInterceptEnabled,
+    // Lets the host override links in the app.
+    types_1.Param.LinkOverride,
+    // Turns on version 2 of the link overrides.
+    types_1.Param.EnableLinkOverridesV2,
+    // Stops links from opening in a new tab.
+    types_1.Param.DisableRedirectionLinksInNewTab,
+    // Uses replaceState instead of pushState for app navigation.
+    types_1.Param.OverrideHistoryState,
+    // Shows search results as a table.
+    types_1.Param.ForceTable,
+    // The URL of the custom string IDs file.
+    types_1.Param.StringIDsUrl,
+    // The data sources that search opens with.
+    types_1.Param.DataSources,
+    // Exposes translation IDs in the app.
+    types_1.Param.ExposeTranslationIDs,
+    // The URL of the custom icon sprite.
+    types_1.Param.IconSpriteUrl,
+    // The tag that filters the metadata lists in an AppEmbed.
+    types_1.Param.Tag,
+    // Set when a Liveboard embed shows a single visualization (vizId).
+    types_1.Param.vizEmbed,
+    // Whether search opens with the last-selected data sources.
+    types_1.Param.UseLastSelectedDataSource,
+    // The query mode Spotter opens in.
+    types_1.Param.DefaultQueryMode,
+    // The initial search query. Omitted with excludeSearchTokenStringFromURL.
+    types_1.Param.searchTokenString,
+]);
 /**
  * The event id map from v2 event names to v1 event id
  * v1 events are the classic embed events implemented in Blink v1
@@ -81,6 +169,7 @@ class TsEmbed {
         this.embedNodeKey = '__tsEmbed';
         this.embedContainerLoadedKey = '__tsEmbedContainerLoaded';
         this.isAppInitialized = false;
+        this.initDataParams = {};
         /**
          * Should we encode URL Query Params using base64 encoding which ThoughtSpot
          * will generate for embedding. This provides additional security to
@@ -90,6 +179,7 @@ class TsEmbed {
         this.shouldEncodeUrlQueryParams = false;
         this.defaultHiddenActions = [types_1.Action.ReportError];
         this.preRenderContainerEl = document.body;
+        this.containerScrollListener = null;
         /**
          * Handler for fullscreen change events
          */
@@ -115,7 +205,7 @@ class TsEmbed {
          */
         this.appInitCb = async (_, responder) => {
             try {
-                const appInitData = await this.getAppInitData();
+                const appInitData = this.withInitDataParams(await this.getAppInitData());
                 this.isAppInitialized = true;
                 responder({
                     type: types_1.EmbedEvent.APP_INIT,
@@ -543,6 +633,18 @@ class TsEmbed {
     async getAppInitData() {
         return this.getDefaultAppInitData();
     }
+    withInitDataParams(appInitData) {
+        if ((0, isEmpty_1.default)(this.initDataParams)) {
+            return appInitData;
+        }
+        return {
+            ...appInitData,
+            embedParams: {
+                ...this.initDataParams,
+                ...(appInitData.embedParams || {}),
+            },
+        };
+    }
     /**
      * Helper method to refresh/update auth token for TrustedAuthTokenCookieless auth type
      * @param responder - Function to send response back
@@ -602,7 +704,7 @@ class TsEmbed {
      * @returns queryParams
      */
     getBaseQueryParams(queryParams = {}) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         let hostAppUrl = ((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.host) || '';
         // The below check is needed because TS Cloud firewall, blocks
         // localhost/127.0.0.1 in any url param.
@@ -639,6 +741,15 @@ class TsEmbed {
         if (this.embedConfig.currencyFormat) {
             queryParams[types_1.Param.CurrencyFormat] = this.embedConfig.currencyFormat;
         }
+        // The view config wins over init, so an embed can opt out of a dark
+        // mode set in `init`. `??` and not `||`, so that an explicit `false`
+        // overrides an init-level `true`.
+        const isDarkMode = (_c = this.viewConfig.isDarkMode) !== null && _c !== void 0 ? _c : this.embedConfig.isDarkMode;
+        (0, utils_1.setParamIfDefined)(queryParams, types_1.Param.IsDarkMode, isDarkMode, true);
+        // The app's dark mode lives in its radiant theme, so turn that on too.
+        if (isDarkMode) {
+            queryParams[types_1.Param.RadiantThemeEnabled] = true;
+        }
         const { disabledActions, disabledActionReason, hiddenActions, visibleActions, hiddenTabs, visibleTabs, showAlerts, additionalFlags: additionalFlagsFromView, locale, customizations, contextMenuTrigger, linkOverride, enableLinkOverridesV2, insertInToSlide, disableRedirectionLinksInNewTab, overrideOrgId, overrideHistoryState, exposeTranslationIDs, primaryAction, } = this.viewConfig;
         const { additionalFlags: additionalFlagsFromInit } = this.embedConfig;
         const additionalFlags = {
@@ -704,7 +815,7 @@ class TsEmbed {
         if (spriteUrl) {
             queryParams[types_1.Param.IconSpriteUrl] = spriteUrl.replace('https://', '');
         }
-        const stringIDsUrl = ((_c = customizations === null || customizations === void 0 ? void 0 : customizations.content) === null || _c === void 0 ? void 0 : _c.stringIDsUrl) || ((_d = embedCustomizations === null || embedCustomizations === void 0 ? void 0 : embedCustomizations.content) === null || _d === void 0 ? void 0 : _d.stringIDsUrl);
+        const stringIDsUrl = ((_d = customizations === null || customizations === void 0 ? void 0 : customizations.content) === null || _d === void 0 ? void 0 : _d.stringIDsUrl) || ((_e = embedCustomizations === null || embedCustomizations === void 0 ? void 0 : embedCustomizations.content) === null || _e === void 0 ? void 0 : _e.stringIDsUrl);
         if (stringIDsUrl) {
             queryParams[types_1.Param.StringIDsUrl] = stringIDsUrl;
         }
@@ -758,13 +869,32 @@ class TsEmbed {
         return path;
     }
     getEmbedParams() {
-        const queryParams = this.getEmbedParamsObject();
+        const queryParams = this.getUrlQueryParamsObject();
         return (0, utils_1.getQueryParamString)(queryParams);
     }
     getEmbedParamsObject() {
         const params = this.getBaseQueryParams();
         return params;
     }
+    getUrlQueryParamsObject() {
+        const queryParams = this.getEmbedParamsObject();
+        if (!this.isConfigExcludedFromUrl()) {
+            this.initDataParams = {};
+            return queryParams;
+        }
+        const urlParams = {};
+        const excludedParams = {};
+        Object.entries(queryParams).forEach(([key, value]) => {
+            if (exports.BOOTSTRAP_URL_PARAMS.has(key)) {
+                urlParams[key] = value;
+            }
+            else {
+                excludedParams[key] = (0, utils_1.deserializeParam)(value);
+            }
+        });
+        this.initDataParams = excludedParams;
+        return urlParams;
+    }
     getRootIframeSrc() {
         const query = this.getEmbedParams();
         return this.getEmbedBasePath(query);
@@ -937,7 +1067,7 @@ class TsEmbed {
             top: '0',
             left: '0',
             width: '100vw',
-            height: UNMEASURED_WRAPPER_HEIGHT,
+            height: '100vh',
         };
         (0, utils_1.setStyleProperties)(preRenderWrapper, initialPreRenderWrapperStyle);
         return preRenderWrapper;
@@ -1005,26 +1135,10 @@ class TsEmbed {
         return placeholder;
     }
     /**
-     * Resolves the configured preRenderContainer to a live element. A string
-     * selector is re-queried on every call so a remounted container (E.g.: React
-     * replacing the node) resolves to the fresh element; an element passed
-     * directly cannot be re-resolved.
-     *
-     * With nothing configured the frame goes into the host element's nearest
-     * scrolling ancestor, falling back to `document.body`.
-     *
-     * The wrapper is absolutely positioned, so it follows the page for free —
-     * but only while it sits inside whatever scrolls. `document.body` is right
-     * only when the document itself is the scroller; an app that scrolls an
-     * inner element instead left the frame pinned to the viewport while the page
-     * moved under it (SCAL-338563). Being inside the scroller also lets wheel
-     * events chain out of the frame into it, which they cannot do from
-     * `document.body`.
-     *
-     * A scrolling ancestor is layout chrome rather than route content, so it
-     * outlives the embed in practice; and if it does go, the host element goes
-     * with it and this instance is remounting anyway.
-     * `reconcilePreRenderContainer` re-runs this on a detached container.
+     * Resolves the configured preRenderContainer to a live element, falling
+     * back to `document.body`. A string selector is re-queried on every call so
+     * a remounted container (E.g.: React replacing the node) resolves to the
+     * fresh element; an element passed directly cannot be re-resolved.
      */
     resolvePreRenderContainerTarget() {
         var _a;
@@ -1044,13 +1158,7 @@ class TsEmbed {
         else if (containerConfig) {
             container = containerConfig;
         }
-        if (container) {
-            return container;
-        }
-        if (!this.hostElement) {
-            return document.body;
-        }
-        return (_a = (0, utils_1.getScrollableAncestors)(this.hostElement)[0]) !== null && _a !== void 0 ? _a : document.body;
+        return (_a = container) !== null && _a !== void 0 ? _a : document.body;
     }
     inheritPreRenderContainer() {
         var _a;
@@ -1095,9 +1203,8 @@ class TsEmbed {
      * Re-attaches the wrapper to a live container when the previously resolved
      * one has been detached or no longer holds the wrapper — e.g. the host app
      * remounted a custom preRenderContainer, which would otherwise leave a stale
-     * reference and collapse the wrapper. Selectors and the auto-resolved
-     * scrolling ancestor are both re-resolved; a container passed as an element
-     * is left untouched, as there is nothing to re-query.
+     * reference and collapse the wrapper. Only string selectors can be
+     * re-resolved; a container passed as an element is left untouched.
      */
     reconcilePreRenderContainer() {
         const wrapper = this.preRenderWrapper;
@@ -1116,6 +1223,14 @@ class TsEmbed {
         if (resolved === stored && stored.contains(wrapper)) {
             return;
         }
+        if (this.containerScrollListener && stored !== resolved) {
+            if (stored !== document.body) {
+                stored.removeEventListener('scroll', this.containerScrollListener);
+            }
+            if (resolved !== document.body) {
+                resolved.addEventListener('scroll', this.containerScrollListener);
+            }
+        }
         this.preRenderContainerEl = resolved;
         this.applyPreRenderContainerPositioning();
         if (wrapper.parentNode !== resolved) {
@@ -1177,12 +1292,11 @@ class TsEmbed {
      */
     setIFrameHeight(height) {
         if (this.isPreRendered) {
-            const next = (0, utils_1.getCssDimension)(height);
             if (this.insertedDomEl) {
-                this.insertedDomEl.style.height = next;
+                this.insertedDomEl.style.height = (0, utils_1.getCssDimension)(height);
             }
             else if (this.preRenderWrapper) {
-                this.preRenderWrapper.style.height = next;
+                this.preRenderWrapper.style.height = (0, utils_1.getCssDimension)(height);
             }
         }
         else {
@@ -1466,9 +1580,16 @@ class TsEmbed {
      * @param args
      */
     async render() {
+        var _a, _b, _c;
         (0, mixpanel_service_1.uploadMixpanelEvent)(mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_RENDER_CALLED, {
             embedComponentType: this.viewConfig.embedComponentType,
         });
+        (0, mixpanel_service_1.uploadMixpanelEvent)(mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_INIT_ACTIONS, {
+            embedComponentType: this.viewConfig.embedComponentType,
+            hiddenActions: (_a = this.viewConfig.hiddenActions) !== null && _a !== void 0 ? _a : [],
+            visibleActions: (_b = this.viewConfig.visibleActions) !== null && _b !== void 0 ? _b : [],
+            disabledActions: (_c = this.viewConfig.disabledActions) !== null && _c !== void 0 ? _c : [],
+        });
         if (!(0, base_1.getIsInitCalled)()) {
             logger_1.logger.error(errors_1.ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
         }
@@ -1617,47 +1738,34 @@ class TsEmbed {
         delete container.dataset[PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY];
     }
     /**
-     * Re-sizes the wrapper when its placeholder changes size.
-     *
-     * Position deliberately has no equivalent. An absolutely positioned wrapper
-     * follows its containing block for free, so a correctly placed frame is the
-     * browser's job and costs nothing; repositioning it on scroll would mean a
-     * layout read and a style write per frame to compensate for placing it in
-     * the wrong box. Size is the one thing the browser will not do for us: the
-     * placeholder grows when the embedded app reports a new height, and the
-     * wrapper has to be told.
+     * Detaches and clears the container scroll listener, if one is attached.
      */
-    observePreRenderSize() {
-        var _a;
-        if (this.getPreRenderConfig().doNotTrackSize || typeof ResizeObserver === 'undefined') {
+    removeContainerScrollListener() {
+        if (!this.containerScrollListener) {
             return;
         }
-        const placeholder = this.getPreRenderPlaceHolderElement();
-        if (!placeholder) {
-            return;
-        }
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.resizeObserver = new ResizeObserver(() => this.syncPreRenderStyle());
-        this.resizeObserver.observe(placeholder);
+        const customContainer = this.getCustomPreRenderContainer();
+        customContainer === null || customContainer === void 0 ? void 0 : customContainer.removeEventListener('scroll', this.containerScrollListener);
+        this.containerScrollListener = null;
     }
     /**
      * Destroys the ThoughtSpot embed, and remove any nodes from the DOM.
      * @version SDK: 1.19.1 | ThoughtSpot: *
      */
     destroy() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         try {
             this.removeFullscreenChangeHandler();
-            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.removeContainerScrollListener();
             this.unsubscribeToEvents();
-            (_b = this.preRenderWrapper) === null || _b === void 0 ? void 0 : _b.remove();
+            (_a = this.preRenderWrapper) === null || _a === void 0 ? void 0 : _a.remove();
             this.restorePreRenderContainerPosition();
             if (!this.isRendered) {
                 return;
             }
             if (!(0, embedConfig_1.getEmbedConfig)().waitForCleanupOnDestroy) {
                 this.trigger(types_1.HostEvent.DestroyEmbed);
-                (_d = (_c = this.insertedDomEl) === null || _c === void 0 ? void 0 : _c.parentNode) === null || _d === void 0 ? void 0 : _d.removeChild(this.insertedDomEl);
+                (_c = (_b = this.insertedDomEl) === null || _b === void 0 ? void 0 : _b.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(this.insertedDomEl);
             }
             else {
                 const cleanupTimeout = (0, embedConfig_1.getEmbedConfig)().cleanupTimeout;
@@ -1703,6 +1811,26 @@ class TsEmbed {
         this.isRendered = true;
         return this.renderIFrame(prerenderFrameSrc);
     }
+    isConfigExcludedFromUrl() {
+        var _a, _b, _c;
+        const flag = (_b = (_a = this.viewConfig.additionalFlags) === null || _a === void 0 ? void 0 : _a.excludeConfigFromURL) !== null && _b !== void 0 ? _b : (_c = this.embedConfig.additionalFlags) === null || _c === void 0 ? void 0 : _c.excludeConfigFromURL;
+        return flag === true || flag === 'true';
+    }
+    async triggerUpdateEmbedParams() {
+        try {
+            const params = await this.getUpdateEmbedParamsObject();
+            this.trigger(types_1.HostEvent.UpdateEmbedParams, params);
+        }
+        catch (error) {
+            logger_1.logger.error(errors_1.ERROR_MESSAGE.UPDATE_PARAMS_FAILED, error);
+            this.handleError({
+                errorType: types_1.ErrorDetailsTypes.API,
+                message: (error === null || error === void 0 ? void 0 : error.message) || errors_1.ERROR_MESSAGE.UPDATE_PARAMS_FAILED,
+                code: types_1.EmbedErrorCodes.UPDATE_PARAMS_FAILED,
+                error: (error === null || error === void 0 ? void 0 : error.message) || error,
+            });
+        }
+    }
     beforePrerenderVisible() {
         // We can ignore this as its a bit expensive and the newer customers
         // have moved on to UpdateEmbedParams supported clusters
@@ -1713,17 +1841,7 @@ class TsEmbed {
         this.preRenderParamsApplied = new Promise((resolve) => {
             this.executeAfterEmbedContainerLoaded(async () => {
                 try {
-                    const params = await this.getUpdateEmbedParamsObject();
-                    this.trigger(types_1.HostEvent.UpdateEmbedParams, params);
-                }
-                catch (error) {
-                    logger_1.logger.error(errors_1.ERROR_MESSAGE.UPDATE_PARAMS_FAILED, error);
-                    this.handleError({
-                        errorType: types_1.ErrorDetailsTypes.API,
-                        message: (error === null || error === void 0 ? void 0 : error.message) || errors_1.ERROR_MESSAGE.UPDATE_PARAMS_FAILED,
-                        code: types_1.EmbedErrorCodes.UPDATE_PARAMS_FAILED,
-                        error: (error === null || error === void 0 ? void 0 : error.message) || error,
-                    });
+                    await this.triggerUpdateEmbedParams();
                 }
                 finally {
                     setTimeout(resolve, UPDATE_EMBED_PARAMS_SETTLE_MS);
@@ -1738,7 +1856,7 @@ class TsEmbed {
      * wrapper to overlay it.
      */
     async showPreRender() {
-        var _a;
+        var _a, _b;
         (0, mixpanel_service_1.uploadMixpanelEvent)(mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_SHOW_PRE_RENDER, {
             preRenderId: this.getPreRenderConfig().id,
             embedComponentType: this.viewConfig.embedComponentType,
@@ -1757,16 +1875,14 @@ class TsEmbed {
         this.beforePrerenderVisible();
         if (this.hostElement) {
             this.insertedDomEl = this.createPreRenderPlaceholder();
-            // Carry a height fullHeight has already measured onto the fresh
-            // placeholder, so a re-show does not flash at frameParams height.
-            // UNMEASURED_WRAPPER_HEIGHT is what createPreRenderWrapper() seeds
-            // before anything has been measured; treating that as a measurement
-            // is what made a first reveal overshoot to a full viewport.
-            const wrapperHeight = this.preRenderWrapper.style.height;
-            if (this.viewConfig.fullHeight
-                && wrapperHeight
-                && wrapperHeight !== UNMEASURED_WRAPPER_HEIGHT) {
-                this.insertedDomEl.style.height = wrapperHeight;
+            if (this.viewConfig.fullHeight) {
+                // If fullHeight has already sized the wrapper, seed the
+                // placeholder with the same height so syncPreRenderStyle gets
+                // an accurate rect.
+                const existingHeight = this.preRenderWrapper.style.height;
+                if (existingHeight) {
+                    this.insertedDomEl.style.height = existingHeight;
+                }
             }
             const placeHolderId = this.getPreRenderIds().placeHolder;
             // Remove any stale placeholder from a previous cycle. It is located
@@ -1780,19 +1896,29 @@ class TsEmbed {
             (_a = this.hostElement.querySelector(`#${placeHolderId}`)) === null || _a === void 0 ? void 0 : _a.remove();
             this.hostElement.appendChild(this.insertedDomEl);
             this.syncPreRenderStyle();
-            this.observePreRenderSize();
+            const customContainer = this.getCustomPreRenderContainer();
+            if (customContainer && !this.containerScrollListener) {
+                this.containerScrollListener = () => this.syncPreRenderStyle();
+                customContainer.addEventListener('scroll', this.containerScrollListener);
+            }
+            if (!this.getPreRenderConfig().doNotTrackSize) {
+                const observeTarget = (_b = this.insertedDomEl) !== null && _b !== void 0 ? _b : this.hostElement;
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    entries.forEach((entry) => {
+                        if (entry.target === observeTarget) {
+                            this.syncPreRenderStyle();
+                        }
+                    });
+                });
+                this.resizeObserver.observe(observeTarget);
+            }
         }
         (0, utils_1.removeStyleProperties)(this.preRenderWrapper, [
             'z-index',
             'opacity',
+            'pointer-events',
             'overflow',
-            'transform',
         ]);
-        // Set rather than removed: a container that carries `pointer-events:
-        // none` — the usual styling for a parking root that must not swallow
-        // clicks — passes it down, and dropping the property here would leave
-        // the inherited `none` in force and the frame dead to input.
-        (0, utils_1.setStyleProperties)(this.preRenderWrapper, { pointerEvents: 'auto' });
         this.subscribeToEvents();
         // Setup fullscreen change handler for prerendered components
         if (this.iFrame) {
@@ -1845,7 +1971,6 @@ class TsEmbed {
      * If the component is not preRendered, it issues a warning.
      */
     hidePreRender() {
-        var _a;
         (0, mixpanel_service_1.uploadMixpanelEvent)(mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_HIDE_PRE_RENDER, {
             preRenderId: this.getPreRenderConfig().id,
             embedComponentType: this.viewConfig.embedComponentType,
@@ -1865,15 +1990,12 @@ class TsEmbed {
             top: '0',
             left: '0',
             overflow: 'hidden',
-            // Keeps the measured size — so the next show needs no resize, which
-            // is the point of pre-rendering — while lifting the box out of
-            // the container's scrollable area. Overflow only extends
-            // downwards, so a hidden frame parked above the top edge adds
-            // none, where one left at full height shows as blank scroll space.
-            transform: PRERENDER_PARKED_TRANSFORM,
         };
         (0, utils_1.setStyleProperties)(this.preRenderWrapper, preRenderHideStyles);
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeContainerScrollListener();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
         const placeHolderEle = this.getPreRenderPlaceHolderElement();
         if (placeHolderEle) {
             placeHolderEle.parentElement.removeChild(placeHolderEle);