feat(HubspotForm): add ref forwarding for HS form (#332)

Author: Lunatic174

src/internal-typings/global.d.ts

@@ -10,22 +10,17 @@ declare module '*.svg' {
     export default path;
 }
 
-interface CreateFormProps {
-    portalId: string;
-    formId: string;
-    region?: string;
-    target?: string;
-    cssClass?: string;
-    formInstanceId?: string;
-}
+declare module '*.md';
 
-interface Window {
-    hbspt?: {
-        forms: {
-            create: (args: CreateFormProps) => unknown;
-        };
-    };
-    ymaps: Ymaps;
+declare namespace Hbspt {
+    interface CreateFormProps {
+        portalId: string;
+        formId: string;
+        region?: string;
+        target?: string;
+        cssClass?: string;
+        formInstanceId?: string;
+    }
 }
 
 declare namespace Ymaps {
@@ -63,4 +58,11 @@ declare namespace Ymaps {
     }
 }
 
-declare module '*.md';
+interface Window {
+    hbspt?: {
+        forms: {
+            create: (args: Hbspt.CreateFormProps) => unknown;
+        };
+    };
+    ymaps: Ymaps;
+}

src/sub-blocks/HubspotForm/HubspotFormContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {forwardRef, useImperativeHandle, useRef} from 'react';
 
 import {useMount} from '../../hooks';
 import {HubspotFormProps} from '../../models';
@@ -16,7 +16,7 @@ type HubspotFormContainerPropsKeys =
 
 type HubspotFormContainerProps = Pick<HubspotFormProps, HubspotFormContainerPropsKeys>;
 
-const HubspotFormContainer = (props: HubspotFormContainerProps) => {
+const HubspotFormContainer = forwardRef<HTMLDivElement, HubspotFormContainerProps>((props, ref) => {
     const {
         className,
 
@@ -31,6 +31,9 @@ const HubspotFormContainer = (props: HubspotFormContainerProps) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const hsContainerRef = useRef<HTMLDivElement>();
 
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    useImperativeHandle(ref, () => containerRef.current!);
+
     const containerId = formInstanceId
         ? `hubspot-form-${formId}-${formInstanceId}`
         : `hubspot-form-${formId}`;
@@ -74,6 +77,8 @@ const HubspotFormContainer = (props: HubspotFormContainerProps) => {
     });
 
     return <div className={className} id={containerId} ref={containerRef} />;
-};
+});
+
+HubspotFormContainer.displayName = 'HubspotFormContainer';
 
 export default HubspotFormContainer;

src/sub-blocks/HubspotForm/index.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useMemo} from 'react';
+import React, {forwardRef, useContext, useMemo} from 'react';
 
 import {MobileContext} from '../../context/mobileContext';
 import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
@@ -14,7 +14,7 @@ import './HubspotForm.scss';
 
 const b = block('hubspot-form');
 
-const HubspotForm: React.FunctionComponent<HubspotFormProps> = (props) => {
+const HubspotForm = forwardRef<HTMLDivElement, HubspotFormProps>((props, ref) => {
     const {
         className,
         theme: themeProp,
@@ -49,10 +49,10 @@ const HubspotForm: React.FunctionComponent<HubspotFormProps> = (props) => {
             onBeforeSubmit,
             onLoad,
             onSubmitError,
-            onSubmit: (e) => {
+            onSubmit: (event) => {
                 handleMetrika?.({pixelEvents});
                 handleAnalytics(analyticsEvents);
-                onSubmit?.(e);
+                onSubmit?.(event);
             },
         }),
         [
@@ -69,7 +69,6 @@ const HubspotForm: React.FunctionComponent<HubspotFormProps> = (props) => {
     );
 
     useHandleHubspotEvents(handlers, formId);
-
     return (
         <HubspotFormContainer
             createDOMElement={createDOMElement}
@@ -80,8 +79,11 @@ const HubspotForm: React.FunctionComponent<HubspotFormProps> = (props) => {
             portalId={portalId}
             formInstanceId={formInstanceId}
             region={region}
+            ref={ref}
         />
     );
-};
+});
+
+HubspotForm.displayName = 'HubspotForm';
 
 export default HubspotForm;