@thoughtspot/visual-embed-sdk 1.19.0-alpha.2 → 1.19.0-alpha.3

package/src/react/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import { deepMerge } from '../utils';
 import {
     SearchBarEmbed as _SearchBarEmbed,
     SearchBarViewConfig,
@@ -31,9 +32,18 @@ const componentFactory = <
                 V
             >(embedProps);
             useDeepCompareEffect(() => {
-                const tsEmbed = new EmbedConstructor(ref!.current, {
-                    ...viewConfig,
-                });
+                const tsEmbed = new EmbedConstructor(
+                    ref!.current,
+                    deepMerge(
+                        {
+                            insertAsSibling: true,
+                            frameParams: {
+                                class: className || '',
+                            },
+                        },
+                        viewConfig,
+                    ),
+                );
                 Object.keys(listeners).forEach((eventName) => {
                     tsEmbed.on(
                         eventName as EmbedEvent,
@@ -48,11 +58,11 @@ const componentFactory = <
             }, [viewConfig, listeners]);
 
             return (
-                <div
+                <span
                     data-testid="tsEmbed"
                     ref={ref}
-                    className={className}
-                ></div>
+                    style={{ position: 'absolute' }}
+                ></span>
             );
         },
     );

package/src/types.ts

@@ -368,6 +368,10 @@ export interface ViewConfig {
      * @default ''
      */
     customizations?: CustomisationsInterface;
+    /**
+     * Insert as a sibling of the target container, instead of appending to a child inside it.
+     */
+    insertAsSibling?: boolean;
 }
 
 /**
@@ -1143,6 +1147,13 @@ export enum HostEvent {
      * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
      */
     ManagePipelines = 'manage-pipeline',
+    /**
+     * Triggers the Reset search in answer
+     * @example
+     * searchEmbed.trigger(HostEvent.SearchReset
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.2.0.cl, 9.0.1-sw
+     */
+    ResetSearch = 'resetSearch',
 }
 
 /**

package/src/utils.ts

@@ -219,3 +219,16 @@ export function getDOMNode(domSelector: DOMSelector): HTMLElement {
         ? document.querySelector(domSelector)
         : domSelector;
 }
+
+export const deepMerge = (target: any, source: any) => {
+    // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
+    // eslint-disable-next-line no-restricted-syntax
+    for (const key of Object.keys(source)) {
+        if (source[key] instanceof Object)
+            Object.assign(source[key], deepMerge(target[key], source[key]));
+    }
+
+    // Join `target` and modified `source`
+    Object.assign(target || {}, source);
+    return target;
+};