@tellescope/react-components 1.200.2 → 1.201.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.200.2",
+  "version": "1.201.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.200.2",
-    "@tellescope/sdk": "^1.200.2",
-    "@tellescope/types-client": "^1.200.2",
-    "@tellescope/types-models": "^1.200.2",
-    "@tellescope/types-utilities": "^1.200.2",
-    "@tellescope/utilities": "^1.200.2",
-    "@tellescope/validation": "^1.200.2",
+    "@tellescope/constants": "^1.201.0",
+    "@tellescope/sdk": "^1.201.0",
+    "@tellescope/types-client": "^1.201.0",
+    "@tellescope/types-models": "^1.201.0",
+    "@tellescope/types-utilities": "^1.201.0",
+    "@tellescope/utilities": "^1.201.0",
+    "@tellescope/validation": "^1.201.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "a8f11c9d50ca94315c111d7767408dde8d7bbc98",
+  "gitHead": "f47e1bb6ac39838d698df1c4d0d40170920526b6",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/hooks.tsx

@@ -5,7 +5,7 @@ import { DatabaseRecord, Enduser, Form, FormField, FormResponse } from "@tellesc
 import { phoneValidator } from "@tellescope/validation"
 import { FileBlob, Indexable } from "@tellescope/types-utilities"
 import { CompoundFilter, EnduserRelationship, FormCustomization, FormResponseAnswerAddress, FormResponseAnswerFileValue, FormResponseValue, FormResponseValueAnswer, OrganizationTheme, PreviousFormCompoundLogic, PreviousFormFieldType } from "@tellescope/types-models"
-import { WithTheme, contact_is_valid, useFileUpload, useFormFields, useFormResponses, useResolvedSession, value_is_loaded } from "../index"
+import { WithTheme, contact_is_valid, useAddGTMTag, useFileUpload, useFormFields, useFormResponses, useResolvedSession, value_is_loaded } from "../index"
 import ReactGA from "react-ga4";
 
 import isEmail from "validator/lib/isEmail"
@@ -544,6 +544,8 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     goBackURL = new URL(window.location.href).searchParams.get('back') || ''
   } catch(err) {}
 
+  useAddGTMTag(form?.gtmTag)
+
   useEffect(() => {
     try {
       window.location.hash = activeField.value.id

package/src/hooks.ts

@@ -60,4 +60,28 @@ export const useSearchAPI = <T,>({ query, onLoad, searchAPI } : { query: string
 
     return () => { clearTimeout(t) }
   }, [query, searchAPI, onLoad, searchedRef])
+}
+
+export const useAddGTMTag = (gtmTag?: string) => {
+  useEffect(() => {
+    if (!gtmTag) return
+
+    try {
+      const existingScript = document.querySelector(
+        `script[src*="https://www.googletagmanager.com/gtm.js?id=${gtmTag}"]`
+      )
+      if (existingScript) return
+
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.text = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','${gtmTag}');`
+      document.head.appendChild(script);
+    } catch(err) {
+      console.warn(err)
+    }
+  }, [gtmTag])
 }

package/src/inputs_shared.tsx

@@ -817,6 +817,7 @@ export interface GenericSearchProps <T> extends FilterComponent<T> {
   value?: string,
   onChange?: (s: string) => void,
   hideIcon?: boolean,
+  variant?: TextFieldProps['variant'],
 }
 interface ModelSearchProps<T> extends GenericSearchProps<T>, SearchAPIProps<T> {}
 export const ModelSearchInput = <T,>({ 

package/src/layout.tsx

@@ -303,6 +303,7 @@ export interface ScrollingListProps <T extends { id: string | number }> extends
     hideHorizontalScroll?: boolean,
   }
   loadMoreOptions?: LoadMoreOptions<T>,
+  scrollRef?: React.RefObject<FixedSizeList<T[]>>,
 }
 export const ScrollingList = <T extends { id: string | number }>({
   title,
@@ -322,7 +323,9 @@ export const ScrollingList = <T extends { id: string | number }>({
   itemContainerStyle,
   virtualization,
   loadMoreOptions,
-} : ScrollingListProps<T> & { noParentScroll?: boolean, }) => {
+  initialScrollOffset,
+  scrollRef,
+} : ScrollingListProps<T> & { noParentScroll?: boolean, initialScrollOffset?: number }) => {
   const width = usePageWidth()
   const fetchRef = useRef(0)
   const titleStyleWithDefaults = { fontSize: 20, fontWeight: 'bold', marginBottom: 3, ...titleStyle }
@@ -380,7 +383,7 @@ export const ScrollingList = <T extends { id: string | number }>({
           : emptyText
         : virtualization?.virtualize ? (
           // keep consistent with DraggableList
-            <FixedSizeList
+            <FixedSizeList initialScrollOffset={initialScrollOffset} ref={scrollRef}
               style={{ overflowX: virtualization?.hideHorizontalScroll ? 'hidden' : undefined }}
               height={virtualization?.height || window.innerHeight - 225}
               width={