@tellescope/react-components 1.156.0 → 1.158.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.156.0",
+  "version": "1.158.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.156.0",
-    "@tellescope/sdk": "^1.156.0",
-    "@tellescope/types-client": "^1.156.0",
-    "@tellescope/types-models": "^1.156.0",
-    "@tellescope/types-utilities": "^1.156.0",
-    "@tellescope/utilities": "^1.156.0",
-    "@tellescope/validation": "^1.156.0",
+    "@tellescope/constants": "^1.158.0",
+    "@tellescope/sdk": "^1.158.0",
+    "@tellescope/types-client": "^1.158.0",
+    "@tellescope/types-models": "^1.158.0",
+    "@tellescope/types-utilities": "^1.158.0",
+    "@tellescope/utilities": "^1.158.0",
+    "@tellescope/validation": "^1.158.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -80,7 +80,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": "b3935c9a52ebc569391bbb1cda5027670473cc5d",
+  "gitHead": "0ed357b60dd15c474a84c6eb595eead1b4c33847",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/hooks.tsx

@@ -198,6 +198,7 @@ export const getNextField = (activeField: FormFieldNode, currentValue: Response,
   urlLogicValue?: string,
   dateOfBirth?: string,
   gender?: string,
+  state?: string,
   form?: Form,
   activeResponses?: FormResponseValue[], // current and previous answers (not future answers)
 }) => {
@@ -600,6 +601,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
       disabled: !!(existingResponses?.find(r => r.fieldId === f.id)?.answer?.value && f.disabledWhenPrepopulated),
       // keep consistent with onFieldChange
       computedValueKey: (
+        // the height typeof is unnecessary (no actual type comparison), but don't change without testing both number and height question types
         f?.intakeField === 'height' && typeof existingResponses?.find(r => r.fieldId === f.id)?.answer?.value
           ? 'Height'
       : f?.intakeField === 'weight' && typeof existingResponses?.find(r => r.fieldId === f.id)?.answer?.value === 'number'
@@ -608,6 +610,8 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
           ? 'Date of Birth'
       : f?.intakeField === 'gender' && ['multiple_choice', 'Dropdown'].includes(existingResponses?.find(r => r.fieldId === f.id)?.answer?.type || '')
           ? 'Gender'
+      : f?.intakeField === 'Address' && existingResponses?.find(r => r.fieldId === f.id && r.answer.type === 'Address')
+          ? 'State'
           : undefined
       ) as any,  
       answer: { 
@@ -1060,6 +1064,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
         activeResponses: responses.filter(r => r.includeInSubmit),
         dateOfBirth: enduser?.dateOfBirth,
         gender: enduser?.gender,
+        state: enduser?.state,
       })
     )
   )
@@ -1275,6 +1280,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
         activeResponses: responses.filter(r => r.includeInSubmit),
         dateOfBirth: enduser?.dateOfBirth,
         gender: enduser?.gender,
+        state: enduser?.state,
       })
 
       // when autoadvancing, prevent adding duplicates by checking whether already on stack
@@ -1341,6 +1347,8 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
           ? 'Date of Birth'
       : field?.intakeField === 'gender' && (r.answer.type === 'Dropdown' || r.answer.type === 'multiple_choice')
           ? 'Gender'
+      : field?.intakeField === 'Address' && r.answer.type === 'Address'
+          ? 'State'
           : undefined
       )
     })))

package/src/Forms/inputs.tsx

@@ -13,7 +13,7 @@ import LinearProgress from '@mui/material/LinearProgress';
 import DatePicker from "react-datepicker";
 import { datepickerCSS } from "./css/react-datepicker" // avoids build issue with RN
 import { CancelIcon, FileBlob, IconButton, LabeledIconButton, LoadingButton, Styled, form_display_text_for_language, isDateString, useProducts, useResolvedSession } from ".."
-import { CalendarEvent, DatabaseRecord, FormField } from "@tellescope/types-client"
+import { AllergyCode, CalendarEvent, DatabaseRecord, FormField } from "@tellescope/types-client"
 import { css } from '@emotion/css'
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
@@ -1758,7 +1758,6 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
     otherAnswers: get_other_answers(_value, field?.options?.other ? typing : undefined),
   })
 
-  console.log(choices, _value)
   const value = React.useMemo(() => {
     try {
       // if the value is a string (some single answer that was save), make sure we coerce to array
@@ -1794,13 +1793,15 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
         const v = c.values.find(_v => _v.label === field.options?.databaseFilter?.databaseLabel)?.value
         if (!v) return true
 
+        // use .text on r values to handle Database Select types as filter source (in addition to basic text and list of text)
+
         if (typeof v === 'object') {
           return !!(
             Object.values(v).find(oVal => (
               typeof oVal === 'string' || typeof oVal === 'number'
                 ? (
                   Array.isArray(filterResponse)
-                    ? (filterResponse as any[]).find(r => r === oVal.toString())
+                    ? (filterResponse as any[]).find(r => r === oVal.toString() || (typeof r === 'object' && r.text === oVal))
                 : (typeof filterResponse === 'string' || typeof filterResponse === 'number')
                     ? filterResponse.toString() === oVal.toString()
                     : false
@@ -1813,7 +1814,7 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
         if (typeof v === 'string' || typeof v === 'number') {
           return !!(
             Array.isArray(filterResponse)
-              ? (filterResponse as any[]).find(r => r === v.toString())
+              ? (filterResponse as any[]).find(r => r === v.toString() || (typeof r === 'object' && r.text === v))
           : (typeof filterResponse === 'string' || typeof filterResponse === 'number')
               ? filterResponse.toString() === v.toString()
               : false
@@ -2991,6 +2992,7 @@ export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value,
     /> 
   )
 }
+const display_with_code = (v: { code: string, display: string }) => `${v.code}: ${first_letter_capitalized(v.display)}`
 
 export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, formResponseId, ...props }: FormInputProps<'Conditions'>) => {
   const session = useResolvedSession()
@@ -3028,7 +3030,7 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
         onChange(v, field.id)
         setResults([])
       }}
-      getOptionLabel={v => first_letter_capitalized(v.display)} filterOptions={o => o}
+      getOptionLabel={display_with_code} filterOptions={o => o}
       inputValue={query} onInputChange={(e, v) => e && setQuery(v) }
       renderInput={(params) => (
         <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
@@ -3038,7 +3040,7 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
       renderTags={(value, getTagProps) =>
         value.map((value, index) => (
           <Chip
-            label={<Typography style={{whiteSpace: 'normal'}}>{value.display}</Typography>}
+            label={<Typography style={{whiteSpace: 'normal'}}>{display_with_code(value)}</Typography>}
             {...getTagProps({ index })}
             sx={{height:"100%", py: 0.5 }}
           />

package/src/errors.tsx

@@ -30,7 +30,14 @@ export class ErrorBoundary extends React.Component<{ errorMessage?: string }, {
   }
 }
 
-export const stringForError = (err: any) => (err as APIError)?.message ?? err?.toString() ?? 'An unexpected error occurred'
+export const stringForError = (err: any) => {
+  const toReturn = (err as APIError)?.message ?? err?.toString() ?? 'An unexpected error occurred'
+
+  // if ?.message isn't a string (by mistake), handle gracefully
+  if (typeof toReturn === 'object') { return JSON.stringify(toReturn, null, 2)}
+
+  return toReturn
+}
 
 export const parseUniquenessError = (err: any, uniquenessMessage: string) => {
   const message = stringForError(err)

package/src/state.tsx

@@ -1985,7 +1985,7 @@ export const useTemplates = (options={} as HookOptions<Template>) => {
   )
 }
 export const useForms = (options={} as HookOptions<Form>) => {
-  const session = useSession()
+  const session = useResolvedSession()
   return useListStateHook(
     'forms', useTypedSelector(s => s.forms), session, formsSlice, 
     { 

package/src/table.tsx

@@ -146,6 +146,7 @@ export interface TableHeaderProps<T extends Item> extends Styled, HorizontalPadd
   localFilters: LocalFilter[],
   setLocalFilters: React.Dispatch<React.SetStateAction<LocalFilter[]>>,
   filterSuggestions: Record<string, string[]>,
+  minColumnWidth?: number,
 }
 export const TableHeader = <T extends Item>({ 
   fields, 
@@ -165,6 +166,7 @@ export const TableHeader = <T extends Item>({
   localFilters,
   setLocalFilters,
   filterSuggestions,
+  minColumnWidth=75,
 } : TableHeaderProps<T>) => { 
   const [openFilter, setOpenFilter] = useState(-1)
   const [startX, setStartX] = useState(0)
@@ -249,7 +251,7 @@ export const TableHeader = <T extends Item>({
               justifyContent: textAlign === 'right' ? 'flex-end' : 'flex-start',
               width: (
                 typeof width === 'number'
-                  ? Math.max(75, width + (widthOffsets[key] || 0))
+                  ? Math.max(minColumnWidth, width + (widthOffsets[key] || 0))
                   : (width ?? defaultWidthForFields(fields.length))
               ), 
               alignItems: 'center',
@@ -384,6 +386,7 @@ export interface TableRowProps<T extends Item> extends Styled, HorizontalPadded,
   fontSize?: CSSProperties['fontSize']
   textStyle?: CSSProperties,
   widthOffsets: Record<string, number>,
+  minColumnWidth?: number,
 }
 export const TableRow = <T extends Item>({ 
   item, indices, fields, onClick, onPress, hover, 
@@ -400,6 +403,7 @@ export const TableRow = <T extends Item>({
   widthOffsets,
   allowUnselectItemsAfterSelectAll,
   setAllSelected,
+  minColumnWidth=75,
 } : TableRowProps<T>) => (
   <WithHover hoveredColor={hoveredColor ?? GRAY} notHoveredColor={notHoveredColor} disabled={!hover} flex>
     <Flex flex={1} alignItems="center"
@@ -442,7 +446,7 @@ export const TableRow = <T extends Item>({
             textAlign, fontSize,
             width: (
               typeof width === 'number'
-                ? Math.max(75, width + (widthOffsets[key] || 0))
+                ? Math.max(minColumnWidth, width + (widthOffsets[key] || 0))
                 : (width ?? defaultWidthForFields(fields.length))
             ), 
             // display: flex ? 'flex' : undefined,
@@ -453,7 +457,7 @@ export const TableRow = <T extends Item>({
             {get_display_value(item, key, indices, render, {
               adjustedWidth: (
                 typeof width === 'number'
-                  ? Math.max(75, width + (widthOffsets[key] || 0))
+                  ? Math.max(minColumnWidth, width + (widthOffsets[key] || 0))
                   : undefined
               )
             })}
@@ -720,6 +724,7 @@ export interface TableProps<T extends Item> extends WithTitle, WithHeader<T>, Wi
   sort?: SortingField[],
   loadMoreOptions?: LoadMoreOptions<T>,
   refreshFilterSuggestionsKey?: number,
+  minColumnWidth?: number,
 }
 export const Table = <T extends Item>({
   items,
@@ -773,6 +778,7 @@ export const Table = <T extends Item>({
 
   sort,
   refreshFilterSuggestionsKey,
+  minColumnWidth,
 }: TableProps<T> & Styled) => {
   const sortingStorageKey = (memoryId ?? '') + 'sorting'
   const cachedSortString = read_local_storage(sortingStorageKey)
@@ -1038,6 +1044,7 @@ export const Table = <T extends Item>({
               }
               : undefined
             }
+            minColumnWidth={minColumnWidth}
           />
         )}
 
@@ -1078,6 +1085,7 @@ export const Table = <T extends Item>({
                   : undefined,
             }}
             onClick={onClick} onPress={onPress} 
+            minColumnWidth={minColumnWidth}
           />
         )
       } />