@tellescope/react-components 1.251.0 → 1.252.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.251.0",
+  "version": "1.252.1",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -51,13 +51,13 @@
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.251.0",
-    "@tellescope/sdk": "1.251.0",
-    "@tellescope/types-client": "1.251.0",
-    "@tellescope/types-models": "1.251.0",
-    "@tellescope/types-utilities": "1.251.0",
-    "@tellescope/utilities": "1.251.0",
-    "@tellescope/validation": "1.251.0",
+    "@tellescope/constants": "1.252.1",
+    "@tellescope/sdk": "1.252.1",
+    "@tellescope/types-client": "1.252.1",
+    "@tellescope/types-models": "1.252.1",
+    "@tellescope/types-utilities": "1.252.1",
+    "@tellescope/utilities": "1.252.1",
+    "@tellescope/validation": "1.252.1",
     "@twilio/video-processors": "3.2.0",
     "css-to-react-native": "3.0.0",
     "draft-js": "0.11.7",
@@ -85,7 +85,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "06ba26dd98e648d9f8cb4925d1bfbea0da3b1c44",
+  "gitHead": "f5dc3564f0f61a9dc910ada9a55a68fad2217bec",
   "publishConfig": {
     "access": "public"
   }

package/src/CMS/ContentViewer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
 import { ManagedContentRecord } from "@tellescope/types-client"
-import { remove_script_tags, sanitize_html_for_cms } from "@tellescope/utilities"
+import { sanitize_user_html, sanitize_html_for_cms } from "@tellescope/utilities"
 import { Button, Grid, Typography } from "@mui/material"
 import { PDFBlockUI } from "./components"
 import { css } from "@emotion/css"
@@ -190,7 +190,7 @@ export const ArticleViewer = ({
     else if (article.htmlContent) {
       return (
         <div style={style} dangerouslySetInnerHTML={{
-          __html: remove_script_tags(article.htmlContent)
+          __html: sanitize_user_html(article.htmlContent)
         }} />
       )
     } else {
@@ -224,7 +224,7 @@ export const ArticleViewer = ({
                 margin-bottom: 0;
               }`}
               dangerouslySetInnerHTML={{
-                __html: remove_script_tags(
+                __html: sanitize_user_html(
                   block.info.html.replaceAll(/style="*"/g, '')
                 )
               }}
@@ -253,9 +253,10 @@ export const ArticleViewer = ({
           : block.type === 'youtube' ? (
               <iframe width={rootWidth} height={rootWidth * 315 / 560}
                 title={`YouTube video player ${i}`} allowFullScreen
+                referrerPolicy="strict-origin-when-cross-origin"
                 src={correct_youtube_link_for_embed(block.info.link)}
               >
-              </iframe> 
+              </iframe>
             )
           : block.type === 'iframe' ? (
               <iframe width={rootWidth} 
@@ -306,7 +307,7 @@ export const html_for_article = (article: ManagedContentRecord, options?: { root
           `<h2>${block.info.text}</h2>`
         )
       : block.type === 'html' ? (
-        `<div>${remove_script_tags(remove_script_tags(block.info.html))}</div>`
+        `<div>${sanitize_user_html(sanitize_user_html(block.info.html))}</div>`
         )
       : block.type === 'raw-html' ? (
         `<div>${sanitize_html_for_cms(block.info.html)}</div>`
@@ -318,10 +319,11 @@ export const html_for_article = (article: ManagedContentRecord, options?: { root
           </div>`
         )
       : block.type === 'youtube' ? (
-          `<iframe width="${rootWidth}" 
+          `<iframe width="${rootWidth}"
             height="${rootWidth * 315 / 560}"
             title="${`YouTube video player ${i}`}"
             allowFullScreen
+            referrerpolicy="strict-origin-when-cross-origin"
             src="${correct_youtube_link_for_embed(block.info.link)}"
             style="margin-top: 12; margin-bottom: 12"
           >

package/src/Community/community.tsx

@@ -28,7 +28,7 @@ import { Divider, Grid, LinearProgress, Paper, TextField, Typography } from "@mu
 import {
   usePostLiking,
 } from "./hooks"
-import { remove_script_tags, truncate_string, user_is_admin } from "@tellescope/utilities"
+import { sanitize_user_html, truncate_string, user_is_admin } from "@tellescope/utilities"
 
 import LikeIcon from "@mui/icons-material/ThumbUp"
 
@@ -50,7 +50,7 @@ export const ResolvedContent = ({ textContent, htmlContent, style } : { textCont
   if (htmlContent) {
     return (
       <div style={style} dangerouslySetInnerHTML={{
-        __html: remove_script_tags(htmlContent),
+        __html: sanitize_user_html(htmlContent),
       }} />
     )
   }

package/src/Forms/form_responses.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react"
 import { Divider, Grid, Typography } from "@mui/material"
 import { Enduser, FormResponse } from "@tellescope/types-client"
-import { form_response_value_to_string, formatted_date, getOrgnizationLogoURL, remove_script_tags, user_display_name } from "@tellescope/utilities"
+import { form_response_value_to_string, formatted_date, getOrgnizationLogoURL, sanitize_user_html, user_display_name } from "@tellescope/utilities"
 import { DownloadFileIconButton, ImageProps, LabeledIconButton, SecureImage, useEndusers, useEnduserMedications, useEnduserObservations, useOrganization, useResolvedSession, useSession, useUsers, value_is_loaded } from "../index"
 import CloseIcon from '@mui/icons-material/Close';
 import { DatabaseSelectResponse, FormResponseAnswerAddress, FormResponseValueAnswer } from "@tellescope/types-models"
@@ -161,7 +161,7 @@ export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, print
   isHTML?: boolean,
 }) => (
 ((isHTML || a.type === 'Rich Text') && typeof a.value === 'string') 
-  ? <div dangerouslySetInnerHTML={{ __html: remove_script_tags(a.value) }} />
+  ? <div dangerouslySetInnerHTML={{ __html: sanitize_user_html(a.value) }} />
   : a.value 
     ? (
     <Typography component="div">
@@ -461,7 +461,7 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
                 && !(typeof r.answer.value === 'string' && r.answer.value.includes('{TELLESCOPE')) // hidden field for matching, not to display
                 && (
                   (r.answerIsHTML && typeof r.answer.value === 'string')
-                    ? <div dangerouslySetInnerHTML={{ __html: remove_script_tags(r.answer.value) }} />
+                    ? <div dangerouslySetInnerHTML={{ __html: sanitize_user_html(r.answer.value) }} />
                     : <ResponseAnswer fieldId={r.fieldId} formResponse={response} answer={r.answer} printing={printing} />
                 )
                 }
@@ -476,7 +476,7 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
               ): r.fieldHtmlDescription
                 ? (
                   <div dangerouslySetInnerHTML={{
-                    __html: r.fieldHtmlDescription
+                    __html: sanitize_user_html(r.fieldHtmlDescription)
                   }} />
                 )
                 : null

package/src/Forms/forms.tsx

@@ -3,10 +3,10 @@ import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProg
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
 import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, CandidEligibilityInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PharmacySearchInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs"
-import { PRIMARY_HEX } from "@tellescope/constants"
+import { PRIMARY_HEX, DEFAULT_HISTORICAL_DATA_SOURCE_LIMIT } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme, HistoricalDataSource } from "@tellescope/types-models"
-import { calculate_form_scoring, field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, remove_script_tags, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
+import { calculate_form_scoring, field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, sanitize_user_html, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
 import { Divider } from "@mui/material"
 
 export const TellescopeFormContainer = ({ businessId, organizationIds, ...props } : {
@@ -798,7 +798,7 @@ export const ThanksMessage = ({
     {htmlThanksMessage
       ? (
         <div style={{ textAlign: 'center' }} dangerouslySetInnerHTML={{
-          __html: remove_script_tags(htmlThanksMessage)
+          __html: sanitize_user_html(htmlThanksMessage)
         }} />
       ) : (
         <Typography style={{ marginTop: 25, alignSelf: 'center' }}>{thanksMessage || DEFAULT_THANKS_MESSAGE}</Typography>
@@ -1037,7 +1037,7 @@ export const UpdateResponse = ({
   )
 }
 
-const HistoricalDataSection = ({ sources, enduserId, onDataLoaded } : { sources: HistoricalDataSource[], enduserId: string, onDataLoaded?: (json: string) => void }) => {
+export const HistoricalDataSection = ({ sources, enduserId, onDataLoaded, hideHeaders } : { sources: HistoricalDataSource[], enduserId: string, onDataLoaded?: (json: string) => void, hideHeaders?: boolean }) => {
   const session = useSession({ throwIfMissingContext: false })
   const [observations, setObservations] = useState<any[]>([])
   const [medications, setMedications] = useState<any[]>([])
@@ -1067,7 +1067,9 @@ const HistoricalDataSection = ({ sources, enduserId, onDataLoaded } : { sources:
             promises.push(
               session.api.enduser_observations.getSome({
                 filter: { enduserId, ...source.filter },
-                limit: source.limit,
+                limit: source.limit ?? DEFAULT_HISTORICAL_DATA_SOURCE_LIMIT,
+                sortBy: 'timestamp',
+                sort: 'newFirst',
               })
               .then((obs: any[]) => { loadedObservations = obs; setObservations(obs) })
             )
@@ -1075,7 +1077,7 @@ const HistoricalDataSection = ({ sources, enduserId, onDataLoaded } : { sources:
             promises.push(
               session.api.enduser_medications.getSome({
                 filter: { enduserId, status: { _ne: 'draft' }, ...source.filter },
-                limit: source.limit,
+                limit: source.limit ?? DEFAULT_HISTORICAL_DATA_SOURCE_LIMIT,
               })
               .then((meds: any[]) => { loadedMedications = meds; setMedications(meds) })
             )
@@ -1141,7 +1143,7 @@ const HistoricalDataSection = ({ sources, enduserId, onDataLoaded } : { sources:
     <div style={{ marginTop: 10 }}>
       {hasObservations && (
         <div style={{ marginBottom: 15 }}>
-          <Typography style={{ fontWeight: 'bold', marginBottom: 5 }}>Observations</Typography>
+          {!hideHeaders && <Typography style={{ fontWeight: 'bold', marginBottom: 5 }}>Observations</Typography>}
           {observations.length === 0 ? (
             <Typography style={{ fontStyle: 'italic', color: '#888' }}>No observations found</Typography>
           ) : (
@@ -1175,7 +1177,7 @@ const HistoricalDataSection = ({ sources, enduserId, onDataLoaded } : { sources:
 
       {hasMedications && (
         <div style={{ marginBottom: 15 }}>
-          <Typography style={{ fontWeight: 'bold', marginBottom: 5 }}>Medications</Typography>
+          {!hideHeaders && <Typography style={{ fontWeight: 'bold', marginBottom: 5 }}>Medications</Typography>}
           {medications.length === 0 ? (
             <Typography style={{ fontStyle: 'italic', color: '#888' }}>No medications found</Typography>
           ) : (
@@ -1236,7 +1238,7 @@ export const Description = ({ field, color="primary", style, enduserId, onFieldC
       </Typography>
     ) : field.htmlDescription ? (
       <span dangerouslySetInnerHTML={{
-        __html: remove_script_tags(field.htmlDescription)
+        __html: sanitize_user_html(field.htmlDescription)
       }} />
     ) : null
   )

package/src/Forms/forms.v2.tsx

@@ -6,7 +6,7 @@ import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInp
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
-import { calculate_form_scoring, field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, remove_script_tags, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
+import { calculate_form_scoring, field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, sanitize_user_html, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
 import { Divider } from "@mui/material"
 
 export const TellescopeFormContainerV2 = ({ businessId, organizationIds, ...props } : {
@@ -836,7 +836,7 @@ export const ThanksMessage = ({
     {htmlThanksMessage
       ? (
         <div style={{ textAlign: 'center' }} dangerouslySetInnerHTML={{
-          __html: remove_script_tags(htmlThanksMessage)
+          __html: sanitize_user_html(htmlThanksMessage)
         }} />
       ) : (
         <Typography style={{ marginTop: 25, alignSelf: 'center' }}>{thanksMessage || DEFAULT_THANKS_MESSAGE}</Typography>
@@ -1092,7 +1092,7 @@ export const Description = ({ field, color="primary", style } : { field: FormFie
 
   return (
     <span style={style} dangerouslySetInnerHTML={{
-      __html: remove_script_tags(field.htmlDescription)
+      __html: sanitize_user_html(field.htmlDescription)
     }} />
   )
 }

package/src/Forms/hooks.tsx

@@ -1219,7 +1219,9 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       if (field.type === 'files' && value.answer.type === 'files' && Array.isArray(value.answer.value)) {
         existingCount = value.answer.value.filter(av => !file.blobs?.some(b => b.name === av.name)).length
       } else if (field.type === 'file' && value.answer.type === 'file' && value.answer.value?.secureName) {
-        existingCount = 1
+        const existingFileName = value.answer.value.name
+        const hasMatchingBlob = file.blobs?.some(b => b.name === existingFileName)
+        existingCount = hasMatchingBlob ? 0 : 1
       }
 
       const totalCount = blobCount + existingCount

package/src/Forms/inputs.tsx

@@ -5060,8 +5060,13 @@ export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, valu
       if (dontNavigate) return
       goToPreviousField?.()
     } else {
-      onChange(valueToSet, field.id)
+      // Avoid redundant setResponses when value is already correct — prevents the effect
+      // from cascading into every keystroke on sibling text fields in single-page forms.
+      if (value !== valueToSet) {
+        onChange(valueToSet, field.id)
+      }
 
+      if (isSinglePage) return
       if (dontNavigate) return
 
       // pass value that is set after above onChange

package/src/displays.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react"
 
-import { user_display_name } from "@tellescope/utilities"
+import { sanitize_user_html, user_display_name } from "@tellescope/utilities"
 
 import {
   useEndusers,
@@ -304,5 +304,5 @@ export const replace_links = (html: string) => {
     html = html.replace(linkTemplate, replacementHTML)
   }
 
-  return <span dangerouslySetInnerHTML={{ __html: html }} />
+  return <span dangerouslySetInnerHTML={{ __html: sanitize_user_html(html) }} />
 }

package/src/hooks.ts

@@ -31,8 +31,9 @@ export const useLoadedState = <T, D={}>(fetch?: (d: Partial<D>) => Promise<T | v
 export interface SearchAPIProps <T> {
   searchAPI?: (args: { search: { query: string } }) => Promise<T[]>,
   onLoad?: (results: T[]) => void,
+  debounceMS?: number,
 }
-export const useSearchAPI = <T,>({ query, onLoad, searchAPI } : { query: string } & SearchAPIProps<T>) => {
+export const useSearchAPI = <T,>({ query, onLoad, searchAPI, debounceMS = 300 } : { query: string } & SearchAPIProps<T>) => {
   const searchedRef = useRef('')
 
   useEffect(() => {
@@ -56,10 +57,10 @@ export const useSearchAPI = <T,>({ query, onLoad, searchAPI } : { query: string
         onLoad?.(results)
       })
       .catch(console.error)
-    }, 150)
+    }, debounceMS)
 
     return () => { clearTimeout(t) }
-  }, [query, searchAPI, onLoad, searchedRef])
+  }, [query, searchAPI, onLoad, searchedRef, debounceMS])
 }
 
 export const useAddGTMTag = (gtmTag?: string) => {