@tellescope/react-components 1.187.0 → 1.189.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.187.0",
+  "version": "1.189.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.187.0",
-    "@tellescope/sdk": "^1.187.0",
-    "@tellescope/types-client": "^1.187.0",
-    "@tellescope/types-models": "^1.187.0",
-    "@tellescope/types-utilities": "^1.187.0",
-    "@tellescope/utilities": "^1.187.0",
-    "@tellescope/validation": "^1.187.0",
+    "@tellescope/constants": "^1.189.0",
+    "@tellescope/sdk": "^1.189.0",
+    "@tellescope/types-client": "^1.189.0",
+    "@tellescope/types-models": "^1.189.0",
+    "@tellescope/types-utilities": "^1.189.0",
+    "@tellescope/utilities": "^1.189.0",
+    "@tellescope/validation": "^1.189.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": "fbb905922b74dd70b690751a272ede269ef9fcb1",
+  "gitHead": "f7e7f3107237f5c850d62a6ec78b0d557ba2e71f",
   "publishConfig": {
     "access": "public"
   }

package/src/CMS/ContentViewer.tsx

@@ -6,6 +6,90 @@ import { PDFBlockUI } from "./components"
 import { css } from "@emotion/css"
 import { useManagedContentRecords } from "../state"
 
+interface UseContentHeightOptions {
+  /**
+   * Debounce time in milliseconds for resize observation
+   * @default 100
+   */
+  debounceTime?: number;
+  
+  /**
+   * CSS selector for the element to observe
+   * @default 'body'
+   */
+  targetSelector?: string;
+}
+
+/**
+ * A hook that tracks the height of page content and updates when content changes.
+ * @param options - Configuration options
+ * @returns Current content height in pixels
+ */
+export const usePageContentHeight = (options: UseContentHeightOptions = {}): number => {
+  const { 
+    debounceTime = 100,
+    targetSelector = 'body'
+  } = options;
+  
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const observerRef = useRef<MutationObserver | null>(null);
+  
+  useEffect(() => {
+    // Function to measure content height
+    const updateContentHeight = (): void => {
+      const targetElement = document.querySelector(targetSelector);
+      
+      if (targetElement) {
+        // Use scrollHeight to get the total height including overflow content
+        const height = targetElement.scrollHeight;
+        setContentHeight(height);
+      }
+    };
+    
+    // Debounced update function
+    const debouncedUpdate = (): void => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      
+      debounceTimerRef.current = setTimeout(() => {
+        updateContentHeight();
+      }, debounceTime);
+    };
+    
+    // Initial measurement
+    updateContentHeight();
+    
+    // Set up mutation observer to detect content changes
+    observerRef.current = new MutationObserver(debouncedUpdate);
+    
+    const targetElement = document.querySelector(targetSelector);
+    if (targetElement) {
+      observerRef.current.observe(targetElement, {
+        childList: true,     // Watch for changes in direct children
+        subtree: true,       // Watch for changes in the entire subtree
+        characterData: true, // Watch for changes in text content
+        attributes: true     // Watch for changes in attributes (may affect layout)
+      });
+    }
+    
+    // Cleanup
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [debounceTime, targetSelector]);
+  
+  return contentHeight;
+}
+
+
 export const usePageHeight = () => {
   const [height, setHeight] = useState(window.innerHeight)
 

package/src/Forms/forms.tsx

@@ -322,7 +322,7 @@ export const QuestionForField = ({
           <Dropdown field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Dropdown'>} form={form}/>
         )
         : field.type === 'Database Select' ? (
-          <DatabaseSelect field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Database Select'>} 
+          <DatabaseSelect field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Database Select'>} 
             onDatabaseSelect={handleDatabaseSelect}
             responses={responses} form={form}
           />

package/src/Forms/inputs.tsx

@@ -1899,7 +1899,7 @@ const get_other_answers = (_value?: DatabaseSelectResponse[], typing?: string) =
   return []
 }
 
-export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabaseSelect, responses, size }: FormInputProps<'Database Select'> & {
+export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabaseSelect, responses, size, disabled }: FormInputProps<'Database Select'> & {
   responses: FormResponseValue[],
 }) => {
   const [typing, setTyping] = useState('')
@@ -2003,6 +2003,7 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
           : label_for_database_record(field, o)
       )}
       value={value}
+      disabled={disabled}
       onChange={(_, v) => {
         if (v.length && onDatabaseSelect) {
           onDatabaseSelect(v)

package/src/inputs_shared.tsx

@@ -6,7 +6,7 @@ import { ALL_ACCESS, HEALTHIE_TITLE, UNSEARCHABLE_FIELDS } from "@tellescope/con
 import { SearchAPIProps, useSearchAPI } from "./hooks"
 import { TextFieldProps } from "./mui"
 import { AgentRecord, AllergyCode, AppointmentBookingPage, AppointmentLocation, AutomationTrigger, CalendarEventTemplate, CallHoldQueue, ChatRoom, Database, DatabaseRecord, DiagnosisCode, Enduser, EnduserOrder, FaxLog, File, Form, FormGroup, Forum, Journey, ManagedContentRecord, MessageTemplateSnippet, Organization, PrescriptionRoute, SuggestedContact, Template, Ticket, TicketQueue, User, UserNotification, Waitlist } from "@tellescope/types-client"
-import { Button, Checkbox, Flex, HoverPaper, LoadingButton, LoadingData, ScrollingList, SearchTextInput, Typography, useAgentRecords, useAllergyCodes, useAppointmentBookingPages, useAppointmentLocations, useAutomationTriggers, useCalendarEventTemplates, useCallHoldQueues, useChatRooms, useDatabaseRecords, useDatabases, useDiagnosisCodes, useEnduserOrders, useEndusers, useFaxLogs, useFiles, useFormGroups, useForms, useForums, useJourneys, useManagedContentRecords, useMessageTemplateSnippets, useNotifications, useOrganization, useOrganizations, usePrescriptionRoutes, useResolvedSession, useSession, useSuggestedContacts, useTemplates, useTicketQueues, useTickets, useUsers, useWaitlists, value_is_loaded } from "."
+import { Button, Checkbox, Flex, HoverPaper, LoadingButton, LoadingData, ScrollingList, SearchTextInput, Typography, useAgentRecords, useAllergyCodes, useAppointmentBookingPages, useAppointmentLocations, useAutomationTriggers, useCalendarEventTemplates, useCallHoldQueues, useChatRooms, useDatabaseRecords, useDatabases, useDiagnosisCodes, useEnduserCustomTypes, useEnduserOrders, useEndusers, useFaxLogs, useFiles, useFormGroups, useForms, useForums, useJourneys, useManagedContentRecords, useMessageTemplateSnippets, useNotifications, useOrganization, useOrganizations, usePrescriptionRoutes, useResolvedSession, useSession, useSuggestedContacts, useTemplates, useTicketQueues, useTickets, useUsers, useWaitlists, value_is_loaded } from "."
 import { SxProps } from "@mui/material"
 import { AccessPermissions, ListOfStringsWithQualifier } from "@tellescope/types-models"
 
@@ -1374,6 +1374,7 @@ export interface UserAndEnduserSelectorProps {
   limitToUsers?: User[],
   dontIncludeSelf: boolean,
   virtualizationHeight?: number,
+  showEntityType?: boolean,
 }
 export const UserAndEnduserSelector: React.JSXElementConstructor<UserAndEnduserSelectorProps> = ({
   titleInput,
@@ -1394,12 +1395,17 @@ export const UserAndEnduserSelector: React.JSXElementConstructor<UserAndEnduserS
   limitToUsers,
   dontIncludeSelf,
   virtualizationHeight,
+  showEntityType,
 }) => {
   const session = useResolvedSession()
   const [endusersLoading, { loadMore: loadMoreEndusers, doneLoading: doneLoadingEndusers }] = useEndusers()
   const [usersLoading, { loadMore: loadMoreUsers, doneLoading: doneLoadingUsers }] = useUsers({
     dontFetch: !!limitToUsers
   })
+  const [typesLoading] = useEnduserCustomTypes({ dontFetch: !showEntityType })
+  const entityTypes = useMemo(() => (
+    value_is_loaded(typesLoading) ? typesLoading.value : [] 
+  ),[typesLoading])
 
   const doneLoading = useCallback(() => 
     (excludeUsers || doneLoadingUsers()) && (excludeEndusers || doneLoadingEndusers()), 
@@ -1534,11 +1540,22 @@ export const UserAndEnduserSelector: React.JSXElementConstructor<UserAndEnduserS
             >
               <Checkbox checked={selected.includes(user.id)} />
 
-              <Typography style={{ 
-                fontWeight: selected.includes(user.id) ? 'bold' : undefined,
-              }}>
-                {user_display_name(user)}
-              </Typography>
+              <Flex flex={1} column alignItems="flex-end" justifyContent="center">
+                <Typography style={{ 
+                  fontWeight: selected.includes(user.id) ? 'bold' : undefined,
+                }}>
+                  {user_display_name(user)}
+                </Typography>
+
+                {showEntityType && (user as Enduser).customTypeId &&
+                  <Typography style={{ 
+                    fontWeight: selected.includes(user.id) ? 'bold' : undefined,
+                    fontSize: 12.5,
+                  }}>
+                    {entityTypes.find(t => t.id === (user as Enduser).customTypeId)?.title}
+                  </Typography> 
+                }
+              </Flex>
             </Flex>
             </HoverPaper>
           )} 

package/src/state.tsx

@@ -597,7 +597,7 @@ export const useDataSync____internal = () => {
       }
 
       // ensure we don't miss updates due to latency
-      const from = new Date(lastFetch.current.getTime() - 1000) // large leeway could result in same data being fetched twice, but helps ensure nothing is dropped
+      const from = new Date(lastFetch.current.getTime() - 3000) // large leeway could result in same data being fetched twice, but helps ensure nothing is dropped
       lastFetch.current = new Date() // update before syncing, not after it returns
 
       session