@aehrc/smart-forms-renderer 0.13.2 → 0.14.0

package/src/components/FormComponents/AttachmentItem/AttachmentFileDropBox.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Box, Typography } from '@mui/material';
+import useFileDrop from '../../../hooks/UseFileDrop';
+import { AttachmentFileDropBoxWrapper } from './AttachmentFileDropBox.styles';
+import React from 'react';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import { getFileSize } from '../../../utils/fileUtils';
+
+export interface AttachmentFileDropBoxProps extends PropsWithIsTabledAttribute {
+  file: File | null;
+  onDrop: (item: { files: any[] }) => void;
+  errorMessage: string;
+}
+
+function AttachmentFileDropBox(props: AttachmentFileDropBoxProps) {
+  const { file, onDrop, errorMessage, isTabled } = props;
+
+  const { canDrop, isOver, dropTarget } = useFileDrop(onDrop);
+
+  const isActive = canDrop && isOver;
+
+  let boxMessage = 'No file selected';
+  if (isActive) {
+    boxMessage = 'Release to drop file';
+  } else if (errorMessage) {
+    boxMessage = errorMessage;
+  } else if (file) {
+    boxMessage = file.name;
+  }
+
+  return (
+    <AttachmentFileDropBoxWrapper
+      ref={dropTarget}
+      display="flex"
+      isActive={isActive}
+      isTabled={isTabled}>
+      <Box p={1.5}>
+        <Typography>{boxMessage}</Typography>
+        {file ? (
+          <Box pt={1}>
+            <Typography fontSize={10}>Size: {getFileSize(file.size.toString() ?? '0')}</Typography>
+            <Typography fontSize={10}>Type: {file.type}</Typography>
+          </Box>
+        ) : null}
+      </Box>
+    </AttachmentFileDropBoxWrapper>
+  );
+}
+
+export default AttachmentFileDropBox;

package/src/components/FormComponents/AttachmentItem/AttachmentItem.tsx

@@ -0,0 +1,123 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useCallback, useState } from 'react';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import debounce from 'lodash.debounce';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import useStringInput from '../../../hooks/useStringInput';
+import useReadOnly from '../../../hooks/useReadOnly';
+import AttachmentFieldWrapper from './AttachmentFieldWrapper';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { DndProvider } from 'react-dnd';
+import { createAttachmentAnswer } from '../../../utils/fileUtils';
+
+export interface AttachmentValues {
+  uploadedFile: File | null;
+  url: string;
+  fileName: string;
+}
+
+interface AttachmentItemProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+}
+
+function AttachmentItem(props: AttachmentItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+
+  // Init input value
+  let valueString = '';
+  if (qrItem?.answer && qrItem?.answer[0].valueString) {
+    valueString = qrItem.answer[0].valueString;
+  }
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const [url, setUrl] = useStringInput(valueString);
+  const [fileName, setFileName] = useStringInput(valueString);
+
+  // Event handlers
+  async function handleUploadFile(newUploadedFile: File | null) {
+    setUploadedFile(newUploadedFile);
+
+    const attachment = await createAttachmentAnswer(newUploadedFile, url, fileName);
+    if (attachment) {
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [{ valueAttachment: attachment }]
+      });
+    } else {
+      onQrItemChange(createEmptyQrItem(qItem));
+    }
+  }
+
+  async function handleUrlChange(newUrl: string) {
+    setUrl(newUrl);
+    await updateQrItemWithDebounce(uploadedFile, newUrl, fileName);
+  }
+
+  async function handleFileNameChange(newFileName: string) {
+    setFileName(newFileName);
+    await updateQrItemWithDebounce(uploadedFile, url, newFileName);
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateQrItemWithDebounce = useCallback(
+    debounce(async (file: File | null, url: string, fileName: string) => {
+      const attachment = await createAttachmentAnswer(file, url, fileName);
+
+      if (attachment) {
+        onQrItemChange({
+          ...createEmptyQrItem(qItem),
+          answer: [{ valueAttachment: attachment }]
+        });
+      } else {
+        onQrItemChange(createEmptyQrItem(qItem));
+      }
+    }, DEBOUNCE_DURATION),
+    [onQrItemChange, qItem]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
+  return (
+    <DndProvider backend={HTML5Backend} context={window}>
+      <AttachmentFieldWrapper
+        qItem={qItem}
+        attachmentValues={{ uploadedFile: uploadedFile, url: url, fileName: fileName }}
+        readOnly={readOnly}
+        isRepeated={isRepeated}
+        isTabled={isTabled}
+        onUploadFile={handleUploadFile}
+        onUrlChange={handleUrlChange}
+        onFileNameChange={handleFileNameChange}
+      />
+    </DndProvider>
+  );
+}
+
+export default AttachmentItem;

package/src/components/FormComponents/AttachmentItem/AttachmentUrlField.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import { StandardTextField } from '../Textfield.styles';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import useAttachmentUrlValidation from '../../../hooks/useAttachmentUrlValidation';
+import InputAdornment from '@mui/material/InputAdornment';
+import Tooltip from '@mui/material/Tooltip';
+import CheckIcon from '@mui/icons-material/Check';
+import DangerousIcon from '@mui/icons-material/Dangerous';
+
+interface AttachmentUrlFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  url: string;
+  readOnly: boolean;
+  onUrlChange: (url: string) => void;
+}
+
+function AttachmentUrlField(props: AttachmentUrlFieldProps) {
+  const { linkId, url, readOnly, isTabled, onUrlChange } = props;
+
+  const urlIsValid = useAttachmentUrlValidation(url);
+
+  return (
+    <Box>
+      <Typography variant="body2">URL</Typography>
+      <Stack direction="row" alignItems="center">
+        <StandardTextField
+          fullWidth
+          isTabled={isTabled}
+          id={linkId}
+          value={url}
+          onChange={(event) => onUrlChange(event.target.value)}
+          disabled={readOnly}
+          size="small"
+          data-test="q-item-attachment-field"
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                {url != '' ? (
+                  <Tooltip title={urlIsValid ? 'URL is valid!' : 'Invalid URL'} placement="right">
+                    <Box mt={0.5}>
+                      {urlIsValid ? (
+                        <CheckIcon color="success" fontSize="small" />
+                      ) : (
+                        <DangerousIcon color="error" fontSize="small" />
+                      )}
+                    </Box>
+                  </Tooltip>
+                ) : null}
+              </InputAdornment>
+            )
+          }}
+        />
+      </Stack>
+    </Box>
+  );
+}
+
+export default AttachmentUrlField;

package/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteField.tsx

@@ -21,7 +21,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Fade from '@mui/material/Fade';
 import Tooltip from '@mui/material/Tooltip';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import SearchIcon from '@mui/icons-material/Search';
 import InfoIcon from '@mui/icons-material/Info';
 import WarningAmberIcon from '@mui/icons-material/WarningAmber';
@@ -32,7 +32,7 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute
 } from '../../../interfaces/renderProps.interface';
-import { AlertColor } from '@mui/material/Alert';
+import type { AlertColor } from '@mui/material/Alert';
 
 interface ChoiceAutocompleteFieldsProps
   extends PropsWithIsTabledAttribute,
@@ -75,7 +75,7 @@ function ChoiceAutocompleteField(props: ChoiceAutocompleteFieldsProps) {
       clearOnEscape
       autoHighlight
       onChange={(_, newValue) => onValueChange(newValue)}
-      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+      sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
       filterOptions={(x) => x}
       renderInput={(params) => (
         <StandardTextField

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetFields.tsx

@@ -23,18 +23,19 @@ import { StyledFormGroup } from '../Item.styles';
 import { StyledAlert } from '../../Alert.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Typography from '@mui/material/Typography';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 
 interface ChoiceCheckboxAnswerValueSetFieldsProps {
   codings: Coding[];
   answers: QuestionnaireResponseItemAnswer[];
   orientation: ChoiceItemOrientation;
   readOnly: boolean;
-  serverError: Error | null;
+  terminologyError: TerminologyError;
   onCheckedChange: (newValue: string) => void;
 }
 
 function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetFieldsProps) {
-  const { codings, answers, orientation, readOnly, serverError, onCheckedChange } = props;
+  const { codings, answers, orientation, readOnly, terminologyError, onCheckedChange } = props;
 
   if (codings.length > 0) {
     return (
@@ -55,12 +56,13 @@ function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetF
     );
   }
 
-  if (serverError) {
+  if (terminologyError.error) {
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
         <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
         </Typography>
       </StyledAlert>
     );

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx

@@ -64,7 +64,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
   const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Get codings/options from valueSet
-  const { codings, serverError } = useValueSetCodings(qItem);
+  const { codings, terminologyError } = useValueSetCodings(qItem);
 
   // Event handlers
   function handleCheckedChange(changedValue: string) {
@@ -91,7 +91,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
           answers={answers}
           orientation={orientation}
           readOnly={readOnly}
-          serverError={serverError}
+          terminologyError={terminologyError}
           onCheckedChange={handleCheckedChange}
         />
         <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
@@ -107,7 +107,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
           answers={answers}
           orientation={orientation}
           readOnly={readOnly}
-          serverError={serverError}
+          terminologyError={terminologyError}
           onCheckedChange={handleCheckedChange}
         />
       </ItemFieldGrid>

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx

@@ -23,6 +23,7 @@ import ChoiceRadioSingle from './ChoiceRadioSingle';
 import { StyledRadioGroup } from '../Item.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { StyledAlert } from '../../Alert.styles';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 
 interface ChoiceRadioAnswerValueSetFieldsProps {
   qItem: QuestionnaireItem;
@@ -30,12 +31,13 @@ interface ChoiceRadioAnswerValueSetFieldsProps {
   valueRadio: string | null;
   orientation: ChoiceItemOrientation;
   readOnly: boolean;
-  serverError: Error | null;
+  terminologyError: TerminologyError;
   onCheckedChange: (newValue: string) => void;
 }
 
 function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsProps) {
-  const { qItem, codings, valueRadio, orientation, readOnly, serverError, onCheckedChange } = props;
+  const { qItem, codings, valueRadio, orientation, readOnly, terminologyError, onCheckedChange } =
+    props;
 
   if (codings.length > 0) {
     return (
@@ -59,12 +61,13 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
     );
   }
 
-  if (serverError) {
+  if (terminologyError.error) {
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
         <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
         </Typography>
       </StyledAlert>
     );

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx

@@ -54,7 +54,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
   }
 
   // Get codings/options from valueSet
-  const { codings, serverError } = useValueSetCodings(qItem);
+  const { codings, terminologyError } = useValueSetCodings(qItem);
 
   function handleChange(newValue: string) {
     if (codings.length > 0) {
@@ -76,7 +76,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
         valueRadio={valueRadio}
         orientation={orientation}
         readOnly={readOnly}
-        serverError={serverError}
+        terminologyError={terminologyError}
         onCheckedChange={handleChange}
       />
     );
@@ -91,7 +91,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
           valueRadio={valueRadio}
           orientation={orientation}
           readOnly={readOnly}
-          serverError={serverError}
+          terminologyError={terminologyError}
           onCheckedChange={handleChange}
         />
       </ItemFieldGrid>

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionFields.tsx

@@ -22,6 +22,7 @@ import Select from '@mui/material/Select';
 import type { QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface ChoiceSelectAnswerOptionFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
@@ -45,7 +46,7 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
       placeholder={entryFormat}
       label={displayPrompt}
       endAdornment={<InputAdornment position={'end'}>{displayUnit}</InputAdornment>}
-      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+      sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
       size="small"
       onChange={(e) => onSelectChange(e.target.value)}>
       {qItem.answerOption?.map((option, index) => {

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx

@@ -17,25 +17,27 @@
 
 import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import { StyledAlert } from '../../Alert.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Typography from '@mui/material/Typography';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 
 interface ChoiceSelectAnswerValueSetFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
   codings: Coding[];
   valueCoding: Coding | null;
-  serverError: Error | null;
+  terminologyError: TerminologyError;
   readOnly: boolean;
   onSelectChange: (newValue: Coding | null) => void;
 }
 
 function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetFieldsProps) {
-  const { qItem, codings, valueCoding, serverError, readOnly, isTabled, onSelectChange } = props;
+  const { qItem, codings, valueCoding, terminologyError, readOnly, isTabled, onSelectChange } =
+    props;
 
   const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
@@ -49,7 +51,7 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
         onChange={(_, newValue) => onSelectChange(newValue)}
         openOnFocus
         autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
         size="small"
         disabled={readOnly}
         renderInput={(params) => (
@@ -74,12 +76,13 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
     );
   }
 
-  if (serverError) {
+  if (terminologyError.error) {
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
         <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
         </Typography>
       </StyledAlert>
     );

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx

@@ -53,7 +53,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
   }
 
   // Get codings/options from valueSet
-  const { codings, serverError } = useValueSetCodings(qItem);
+  const { codings, terminologyError } = useValueSetCodings(qItem);
 
   valueCoding = useMemo(() => {
     const updatedValueCoding = codings.find(
@@ -94,7 +94,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
         qItem={qItem}
         codings={codings}
         valueCoding={valueCoding}
-        serverError={serverError}
+        terminologyError={terminologyError}
         readOnly={readOnly}
         isTabled={isTabled}
         onSelectChange={handleChange}
@@ -109,7 +109,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
           qItem={qItem}
           codings={codings}
           valueCoding={valueCoding}
-          serverError={serverError}
+          terminologyError={terminologyError}
           readOnly={readOnly}
           isTabled={isTabled}
           onSelectChange={handleChange}

package/src/components/FormComponents/DateItem/DateField.tsx

@@ -20,6 +20,7 @@ import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps
 import type { Dayjs } from 'dayjs';
 import { DatePicker as MuiDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface DateFieldProps extends PropsWithIsTabledAttribute {
   value: Dayjs | null;
@@ -39,7 +40,7 @@ function DateField(props: DateFieldProps) {
         value={value}
         disabled={readOnly}
         label={displayPrompt}
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
         onChange={onDateChange}
         slotProps={{
           textField: {

package/src/components/FormComponents/DateTimeItem/DateTimeField.tsx

@@ -21,6 +21,7 @@ import type { Dayjs } from 'dayjs';
 import { DateTimePicker as MuiDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import Box from '@mui/material/Box';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface DateTimeFieldProps extends PropsWithIsTabledAttribute {
   value: Dayjs | null;
@@ -41,7 +42,7 @@ function DateTimeField(props: DateTimeFieldProps) {
           value={value}
           disabled={readOnly}
           label={displayPrompt}
-          sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+          sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
           onChange={onDateTimeChange}
           slotProps={{
             textField: {

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceAutocompleteField.tsx

@@ -18,7 +18,7 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Autocomplete from '@mui/material/Autocomplete';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import SearchIcon from '@mui/icons-material/Search';
 import CircularProgress from '@mui/material/CircularProgress';
 import Fade from '@mui/material/Fade';
@@ -80,7 +80,7 @@ function OpenChoiceAutocompleteField(props: OpenChoiceAutocompleteFieldProps) {
         clearOnEscape
         freeSolo
         autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 220, flexGrow: 1 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 220, flexGrow: 1 }}
         onChange={(_, newValue) => onValueChange(newValue)}
         filterOptions={(x) => x}
         renderInput={(params) => (

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerOptionField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getAnswerOptionLabel } from '../../../utils/openChoice';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import Autocomplete from '@mui/material/Autocomplete';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import type {
@@ -33,7 +33,7 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
       onChange={(_, newValue) => onChange(newValue)}
       freeSolo
       autoHighlight
-      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+      sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
       disabled={readOnly}
       size="small"
       renderInput={(params) => (

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerValueSetField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsTabledAttribute,
@@ -8,6 +8,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 
 interface OpenChoiceSelectAnswerValueSetFieldProps
   extends PropsWithIsTabledAttribute,
@@ -15,13 +16,14 @@ interface OpenChoiceSelectAnswerValueSetFieldProps
   qItem: QuestionnaireItem;
   options: Coding[];
   valueSelect: Coding | null;
-  serverError: Error | null;
+  terminologyError: TerminologyError;
   readOnly: boolean;
   onValueChange: (newValue: Coding | string | null) => void;
 }
 
 function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueSetFieldProps) {
-  const { qItem, options, valueSelect, serverError, readOnly, isTabled, onValueChange } = props;
+  const { qItem, options, valueSelect, terminologyError, readOnly, isTabled, onValueChange } =
+    props;
 
   const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
@@ -36,7 +38,7 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
         onInputChange={(_, newValue) => onValueChange(newValue)}
         freeSolo
         autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
         disabled={readOnly}
         size="small"
         renderInput={(params) => (
@@ -57,9 +59,10 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
           />
         )}
       />
-      {serverError ? (
+      {terminologyError.error ? (
         <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server.
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
         </Typography>
       ) : null}
     </>