@gravity-ui/page-constructor 1.15.4 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.16.0](https://github.com/gravity-ui/page-constructor/compare/v1.15.4...v1.16.0) (2023-02-14)
+
+
+### Features
+
+* **HubspotForm:** add render outside virtual dom ([#138](https://github.com/gravity-ui/page-constructor/issues/138)) ([1b8694c](https://github.com/gravity-ui/page-constructor/commit/1b8694c6893df63ffabab84779febad57362804c))
+
 ## [1.15.4](https://github.com/gravity-ui/page-constructor/compare/v1.15.3...v1.15.4) (2023-02-13)
 
 

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -65,6 +65,7 @@ export interface HubspotFormProps extends HubspotEventHandlers {
     onLoad?: (arg: HubspotEventData) => void;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
+    createDOMElement?: boolean;
 }
 export interface PartnerProps extends CardBaseProps {
     text: string;

package/build/cjs/sub-blocks/HubspotForm/HubspotFormContainer.d.ts

@@ -1,5 +1,5 @@
 import { HubspotFormProps } from '../../models';
-type HubspotFormContainerPropsKeys = 'className' | 'formId' | 'formInstanceId' | 'portalId' | 'region' | 'formClassName';
+type HubspotFormContainerPropsKeys = 'className' | 'formId' | 'formInstanceId' | 'portalId' | 'region' | 'formClassName' | 'createDOMElement';
 type HubspotFormContainerProps = Pick<HubspotFormProps, HubspotFormContainerPropsKeys>;
 declare const HubspotFormContainer: (props: HubspotFormContainerProps) => JSX.Element;
 export default HubspotFormContainer;

package/build/cjs/sub-blocks/HubspotForm/HubspotFormContainer.js

@@ -1,19 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const loadHubspotScript_1 = tslib_1.__importDefault(require("./loadHubspotScript"));
 const hooks_1 = require("../../hooks");
 const HubspotFormContainer = (props) => {
-    const { className, formId, formInstanceId, portalId, region, formClassName, } = props;
+    const { className, formId, formInstanceId, portalId, region, formClassName, createDOMElement, } = props;
+    const containerRef = (0, react_1.useRef)(null);
+    const hsContainerRef = (0, react_1.useRef)();
     const containerId = formInstanceId
         ? `hubspot-form-${formId}-${formInstanceId}`
         : `hubspot-form-${formId}`;
-    (0, hooks_1.useMount)(() => {
-        (async () => {
-            if (!window.hbspt) {
-                await (0, loadHubspotScript_1.default)();
-            }
+    const createForm = () => {
+        if (containerRef.current && !hsContainerRef.current && createDOMElement) {
+            hsContainerRef.current = document.createElement('div');
+            containerRef.current.id = '';
+            hsContainerRef.current.id = containerId;
+            containerRef.current.appendChild(hsContainerRef.current);
+        }
+        if (!createDOMElement || hsContainerRef.current) {
             if (window.hbspt) {
                 window.hbspt.forms.create({
                     region,
@@ -24,8 +29,21 @@ const HubspotFormContainer = (props) => {
                     formInstanceId,
                 });
             }
+        }
+    };
+    (0, hooks_1.useMount)(() => {
+        (async () => {
+            if (!window.hbspt) {
+                await (0, loadHubspotScript_1.default)();
+            }
+            createForm();
         })();
+        return () => {
+            if (createDOMElement && containerRef.current && containerRef.current.lastChild) {
+                containerRef.current.removeChild(containerRef.current.lastChild);
+            }
+        };
     });
-    return react_1.default.createElement("div", { className: className, id: containerId });
+    return react_1.default.createElement("div", { className: className, id: containerId, ref: containerRef });
 };
 exports.default = HubspotFormContainer;

package/build/cjs/sub-blocks/HubspotForm/index.js

@@ -12,7 +12,7 @@ const b = (0, utils_1.block)('hubspot-form');
 const HubspotForm = (props) => {
     const { className, theme: themeProp, isMobile: isMobileProp, formId, formInstanceId, portalId, region, formClassName, pixelEvents, 
     // hubspotEvents, // TODO: decide how to handle them
-    onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, onSubmitError, } = props;
+    onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, createDOMElement, onSubmitError, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const { themeValue } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const isMobileValue = (0, react_1.useContext)(mobileContext_1.MobileContext);
@@ -29,6 +29,6 @@ const HubspotForm = (props) => {
         },
     }), [onBeforeLoad, onBeforeSubmit, onLoad, handleMetrika, pixelEvents, onSubmit, onSubmitError]);
     (0, hooks_1.useHandleHubspotEvents)(handlers, formId);
-    return (react_1.default.createElement(HubspotFormContainer_1.default, { key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region }));
+    return (react_1.default.createElement(HubspotFormContainer_1.default, { createDOMElement: createDOMElement, key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region }));
 };
 exports.default = HubspotForm;

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -65,6 +65,7 @@ export interface HubspotFormProps extends HubspotEventHandlers {
     onLoad?: (arg: HubspotEventData) => void;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
+    createDOMElement?: boolean;
 }
 export interface PartnerProps extends CardBaseProps {
     text: string;

package/build/esm/sub-blocks/HubspotForm/HubspotFormContainer.d.ts

@@ -1,5 +1,5 @@
 import { HubspotFormProps } from '../../models';
-type HubspotFormContainerPropsKeys = 'className' | 'formId' | 'formInstanceId' | 'portalId' | 'region' | 'formClassName';
+type HubspotFormContainerPropsKeys = 'className' | 'formId' | 'formInstanceId' | 'portalId' | 'region' | 'formClassName' | 'createDOMElement';
 type HubspotFormContainerProps = Pick<HubspotFormProps, HubspotFormContainerPropsKeys>;
 declare const HubspotFormContainer: (props: HubspotFormContainerProps) => JSX.Element;
 export default HubspotFormContainer;

package/build/esm/sub-blocks/HubspotForm/HubspotFormContainer.js

@@ -1,16 +1,21 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import loadHubspotScript from './loadHubspotScript';
 import { useMount } from '../../hooks';
 const HubspotFormContainer = (props) => {
-    const { className, formId, formInstanceId, portalId, region, formClassName, } = props;
+    const { className, formId, formInstanceId, portalId, region, formClassName, createDOMElement, } = props;
+    const containerRef = useRef(null);
+    const hsContainerRef = useRef();
     const containerId = formInstanceId
         ? `hubspot-form-${formId}-${formInstanceId}`
         : `hubspot-form-${formId}`;
-    useMount(() => {
-        (async () => {
-            if (!window.hbspt) {
-                await loadHubspotScript();
-            }
+    const createForm = () => {
+        if (containerRef.current && !hsContainerRef.current && createDOMElement) {
+            hsContainerRef.current = document.createElement('div');
+            containerRef.current.id = '';
+            hsContainerRef.current.id = containerId;
+            containerRef.current.appendChild(hsContainerRef.current);
+        }
+        if (!createDOMElement || hsContainerRef.current) {
             if (window.hbspt) {
                 window.hbspt.forms.create({
                     region,
@@ -21,8 +26,21 @@ const HubspotFormContainer = (props) => {
                     formInstanceId,
                 });
             }
+        }
+    };
+    useMount(() => {
+        (async () => {
+            if (!window.hbspt) {
+                await loadHubspotScript();
+            }
+            createForm();
         })();
+        return () => {
+            if (createDOMElement && containerRef.current && containerRef.current.lastChild) {
+                containerRef.current.removeChild(containerRef.current.lastChild);
+            }
+        };
     });
-    return React.createElement("div", { className: className, id: containerId });
+    return React.createElement("div", { className: className, id: containerId, ref: containerRef });
 };
 export default HubspotFormContainer;

package/build/esm/sub-blocks/HubspotForm/index.js

@@ -10,7 +10,7 @@ const b = block('hubspot-form');
 const HubspotForm = (props) => {
     const { className, theme: themeProp, isMobile: isMobileProp, formId, formInstanceId, portalId, region, formClassName, pixelEvents, 
     // hubspotEvents, // TODO: decide how to handle them
-    onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, onSubmitError, } = props;
+    onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, createDOMElement, onSubmitError, } = props;
     const handleMetrika = useMetrika();
     const { themeValue } = useContext(ThemeValueContext);
     const isMobileValue = useContext(MobileContext);
@@ -27,6 +27,6 @@ const HubspotForm = (props) => {
         },
     }), [onBeforeLoad, onBeforeSubmit, onLoad, handleMetrika, pixelEvents, onSubmit, onSubmitError]);
     useHandleHubspotEvents(handlers, formId);
-    return (React.createElement(HubspotFormContainer, { key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region }));
+    return (React.createElement(HubspotFormContainer, { createDOMElement: createDOMElement, key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region }));
 };
 export default HubspotForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.15.4",
+  "version": "1.16.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/sub-blocks.d.ts

@@ -65,6 +65,7 @@ export interface HubspotFormProps extends HubspotEventHandlers {
     onLoad?: (arg: HubspotEventData) => void;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
+    createDOMElement?: boolean;
 }
 export interface PartnerProps extends CardBaseProps {
     text: string;