@tellescope/react-components 1.250.2 → 1.252.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.250.2",
+  "version": "1.252.0",
   "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.250.2",
-    "@tellescope/sdk": "1.250.2",
-    "@tellescope/types-client": "1.250.2",
-    "@tellescope/types-models": "1.250.2",
-    "@tellescope/types-utilities": "1.250.2",
-    "@tellescope/utilities": "1.250.2",
-    "@tellescope/validation": "1.250.2",
+    "@tellescope/constants": "1.252.0",
+    "@tellescope/sdk": "1.252.0",
+    "@tellescope/types-client": "1.252.0",
+    "@tellescope/types-models": "1.252.0",
+    "@tellescope/types-utilities": "1.252.0",
+    "@tellescope/utilities": "1.252.0",
+    "@tellescope/validation": "1.252.0",
     "@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": "595c21b2b46ee87643c2a5cb4183e7ecf2185293",
+  "gitHead": "00b42c82462699491547e2bded4aad41a5d57daa",
   "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, '')
                 )
               }}
@@ -306,7 +306,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>`

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

@@ -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, 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>
@@ -1068,6 +1068,8 @@ const HistoricalDataSection = ({ sources, enduserId, onDataLoaded } : { sources:
               session.api.enduser_observations.getSome({
                 filter: { enduserId, ...source.filter },
                 limit: source.limit,
+                sortBy: 'timestamp',
+                sort: 'newFirst',
               })
               .then((obs: any[]) => { loadedObservations = obs; setObservations(obs) })
             )
@@ -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) }} />
 }