@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceCheckboxAnswerOption.tsx

@@ -0,0 +1,194 @@
+/*
+ * 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, useMemo, useState } from 'react';
+import { Grid } from '@mui/material';
+import { CheckBoxOptionType, QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import QItemCheckboxSingle from '../ItemParts/QItemCheckboxSingle';
+import { getOpenLabelText } from '../../../utils/itemControl';
+import QItemCheckboxSingleWithOpenLabel from '../ItemParts/QItemCheckboxSingleWithOpenLabel';
+import { QFormGroup } from '../Item.styles';
+import {
+  getOldOpenLabelAnswer,
+  updateQrOpenChoiceCheckboxAnswers
+} from '../../../utils/openChoice';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import debounce from 'lodash.debounce';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface QItemOpenChoiceCheckboxProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  orientation: QItemChoiceOrientation;
+}
+
+function QItemOpenChoiceCheckboxAnswerOption(props: QItemOpenChoiceCheckboxProps) {
+  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+
+  // Init answers
+  const qrOpenChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
+  const answers = useMemo(() => qrOpenChoiceCheckbox.answer ?? [], [qrOpenChoiceCheckbox.answer]);
+
+  // Init options and open label value
+  const answerOptions = qItem.answerOption;
+  let initialOpenLabelValue = '';
+  let initialOpenLabelChecked = false;
+  if (answerOptions) {
+    const oldLabelAnswer = getOldOpenLabelAnswer(answers, answerOptions);
+    if (oldLabelAnswer && oldLabelAnswer.valueString) {
+      initialOpenLabelValue = oldLabelAnswer.valueString;
+      initialOpenLabelChecked = true;
+    }
+  }
+  const [openLabelValue, setOpenLabelValue] = useState(initialOpenLabelValue);
+  const [openLabelChecked, setOpenLabelChecked] = useState(initialOpenLabelChecked);
+
+  // Get additional rendering extensions
+  const openLabelText = getOpenLabelText(qItem);
+  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+
+  // Event handlers
+  const handleValueChange = useCallback(
+    (changedOptionValue: string | null, changedOpenLabelValue: string | null) => {
+      if (!answerOptions) return null;
+
+      let updatedQrChoiceCheckbox: QuestionnaireResponseItem | null = null;
+      if (changedOptionValue) {
+        updatedQrChoiceCheckbox = updateQrOpenChoiceCheckboxAnswers(
+          changedOptionValue,
+          null,
+          answers,
+          answerOptions,
+          qrOpenChoiceCheckbox,
+          CheckBoxOptionType.AnswerOption,
+          isRepeated
+        );
+      } else if (changedOpenLabelValue !== null) {
+        updatedQrChoiceCheckbox = updateQrOpenChoiceCheckboxAnswers(
+          null,
+          changedOpenLabelValue,
+          answers,
+          answerOptions,
+          qrOpenChoiceCheckbox,
+          CheckBoxOptionType.AnswerOption,
+          isRepeated
+        );
+      }
+
+      if (updatedQrChoiceCheckbox) {
+        onQrItemChange(updatedQrChoiceCheckbox);
+      }
+    },
+    [answerOptions, answers, isRepeated, onQrItemChange, qrOpenChoiceCheckbox]
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateOpenLabelValueWithDebounce = useCallback(
+    debounce((input: string) => {
+      handleValueChange(null, input);
+    }, DEBOUNCE_DURATION),
+    [handleValueChange]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
+  const openChoiceCheckbox = (
+    <QFormGroup row={orientation === QItemChoiceOrientation.Horizontal}>
+      {qItem.answerOption?.map((option) => {
+        if (option['valueCoding']) {
+          return (
+            <QItemCheckboxSingle
+              key={option.valueCoding.code ?? ''}
+              value={option.valueCoding.code ?? ''}
+              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+              readOnly={readOnly}
+              isChecked={answers.some(
+                (answer) => JSON.stringify(answer) === JSON.stringify(option)
+              )}
+              onCheckedChange={(changedValue) => handleValueChange(changedValue, null)}
+            />
+          );
+        } else if (option['valueString']) {
+          return (
+            <QItemCheckboxSingle
+              key={option.valueString}
+              value={option.valueString}
+              label={option.valueString}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueString === option.valueString)}
+              onCheckedChange={(changedValue) => handleValueChange(changedValue, null)}
+            />
+          );
+        } else if (option['valueInteger']) {
+          return (
+            <QItemCheckboxSingle
+              key={option.valueInteger}
+              value={option.valueInteger.toString()}
+              label={option.valueInteger.toString()}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueInteger === option.valueInteger)}
+              onCheckedChange={(changedValue) => handleValueChange(changedValue, null)}
+            />
+          );
+        } else {
+          return null;
+        }
+      })}
+
+      {openLabelText ? (
+        <QItemCheckboxSingleWithOpenLabel
+          value={openLabelValue}
+          label={openLabelText}
+          isChecked={openLabelChecked}
+          onCheckedChange={(checked) => {
+            handleValueChange(null, openLabelValue);
+            setOpenLabelChecked(checked);
+          }}
+          onInputChange={(input) => {
+            setOpenLabelValue(input);
+            updateOpenLabelValueWithDebounce(input);
+          }}
+        />
+      ) : null}
+    </QFormGroup>
+  );
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-open-choice-checkbox-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {openChoiceCheckbox}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default QItemOpenChoiceCheckboxAnswerOption;

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceRadioAnswerOption.tsx

@@ -0,0 +1,190 @@
+/*
+ * 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 type { ChangeEvent } from 'react';
+import React, { useState } from 'react';
+import { Grid } from '@mui/material';
+import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { getOpenLabelText } from '../../../utils/itemControl';
+import { QRadioGroup } from '../Item.styles';
+import { getOldOpenLabelAnswer } from '../../../utils/openChoice';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import QItemChoiceRadioSingle from '../QItemChoice/QItemChoiceRadioSingle';
+import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
+import QItemRadioButtonWithOpenLabel from '../ItemParts/QItemRadioButtonWithOpenLabel';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface QItemOpenChoiceRadioProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  orientation: QItemChoiceOrientation;
+}
+
+function QItemOpenChoiceRadioAnswerOption(props: QItemOpenChoiceRadioProps) {
+  const { qItem, qrItem, onQrItemChange, orientation } = props;
+
+  // Init answers
+  const qrOpenChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
+  let valueRadio: string | null = getQrChoiceValue(qrOpenChoiceRadio, true);
+  const answers = qrOpenChoiceRadio.answer ?? [];
+
+  // Init empty open label
+  const answerOptions = qItem.answerOption;
+  let initialOpenLabelValue = '';
+  let initialOpenLabelSelected = false;
+  if (answerOptions) {
+    const oldLabelAnswer = getOldOpenLabelAnswer(answers, answerOptions);
+    if (oldLabelAnswer && oldLabelAnswer.valueString) {
+      initialOpenLabelValue = oldLabelAnswer.valueString;
+      initialOpenLabelSelected = true;
+      valueRadio = initialOpenLabelValue;
+    }
+  }
+
+  const [openLabelValue, setOpenLabelValue] = useState<string | null>(initialOpenLabelValue);
+  const [openLabelSelected, setOpenLabelSelected] = useState(initialOpenLabelSelected);
+
+  // Allow open label to remain selected even if its input was cleared
+  if (openLabelSelected && valueRadio === null) {
+    valueRadio = '';
+  }
+
+  // Get additional rendering extensions
+  const openLabelText = getOpenLabelText(qItem);
+  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+
+  // Event handlers
+  function handleValueChange(
+    changedOptionValue: string | null,
+    changedOpenLabelValue: string | null
+  ) {
+    if (!answerOptions) return null;
+
+    if (changedOptionValue !== null) {
+      if (qItem.answerOption) {
+        const qrAnswer = findInAnswerOptions(qItem.answerOption, changedOptionValue);
+
+        // If selected answer can be found in options, it is a non-open label selection
+        if (qrAnswer) {
+          onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
+          setOpenLabelSelected(false);
+        } else {
+          // Otherwise, it is an open-label selection
+          onQrItemChange({
+            ...createEmptyQrItem(qItem),
+            answer: [{ valueString: changedOptionValue }]
+          });
+          setOpenLabelValue(changedOptionValue);
+          setOpenLabelSelected(true);
+        }
+      }
+    }
+
+    if (changedOpenLabelValue !== null) {
+      setOpenLabelValue(changedOpenLabelValue);
+
+      if (changedOpenLabelValue === '') {
+        onQrItemChange(createEmptyQrItem(qItem));
+      } else {
+        setOpenLabelValue(changedOpenLabelValue);
+        onQrItemChange({
+          ...createEmptyQrItem(qItem),
+          answer: [{ valueString: changedOpenLabelValue }]
+        });
+      }
+    }
+  }
+
+  const openChoiceRadio = (
+    <QRadioGroup
+      row={orientation === QItemChoiceOrientation.Horizontal}
+      name={qItem.text}
+      id={qItem.id}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => handleValueChange(e.target.value, null)}
+      value={valueRadio}
+      data-test="q-item-radio-group">
+      {qItem.answerOption?.map((option) => {
+        if (option['valueCoding']) {
+          return (
+            <QItemChoiceRadioSingle
+              key={option.valueCoding.code ?? ''}
+              value={option.valueCoding.code ?? ''}
+              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+              readOnly={readOnly}
+            />
+          );
+        } else if (option['valueString']) {
+          return (
+            <QItemChoiceRadioSingle
+              key={option.valueString}
+              value={option.valueString}
+              label={option.valueString}
+              readOnly={readOnly}
+            />
+          );
+        } else if (option['valueInteger']) {
+          return (
+            <QItemChoiceRadioSingle
+              key={option.valueInteger}
+              value={option.valueInteger.toString()}
+              label={option.valueInteger.toString()}
+              readOnly={readOnly}
+            />
+          );
+        } else {
+          return null;
+        }
+      })}
+
+      {openLabelText ? (
+        <QItemRadioButtonWithOpenLabel
+          value={openLabelValue}
+          label={openLabelText}
+          readOnly={readOnly}
+          isSelected={openLabelSelected}
+          onInputChange={(input) => handleValueChange(null, input)}
+        />
+      ) : null}
+    </QRadioGroup>
+  );
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-open-choice-radio-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {openChoiceRadio}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default QItemOpenChoiceRadioAnswerOption;

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceSelectAnswerOption.tsx

@@ -0,0 +1,149 @@
+/*
+ * 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 type { SyntheticEvent } from 'react';
+import React from 'react';
+import { Autocomplete, Grid } from '@mui/material';
+
+import type {
+  QuestionnaireItem,
+  QuestionnaireItemAnswerOption,
+  QuestionnaireResponseItem
+} from 'fhir/r4';
+import { getAnswerOptionLabel } from '../../../utils/openChoice';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { StandardTextField } from '../Textfield.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemOpenChoiceSelectAnswerOption(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Init input value
+  const answerOptions = qItem.answerOption;
+  if (!answerOptions) return null;
+
+  const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
+  let valueSelect: QuestionnaireItemAnswerOption | undefined = undefined;
+  if (qrOpenChoice.answer) {
+    valueSelect = qrOpenChoice.answer[0];
+  }
+
+  // Event handlers
+  function handleChange(
+    _: SyntheticEvent<Element, Event>,
+    newValue: QuestionnaireItemAnswerOption | string | null
+  ) {
+    if (newValue) {
+      if (typeof newValue === 'string') {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueString: newValue }]
+        });
+      } else {
+        const option = newValue;
+        if (option['valueCoding']) {
+          onQrItemChange({
+            ...qrOpenChoice,
+            answer: [{ valueCoding: option.valueCoding }]
+          });
+        } else if (option['valueString']) {
+          onQrItemChange({
+            ...qrOpenChoice,
+            answer: [{ valueString: option.valueString }]
+          });
+        } else if (option['valueInteger']) {
+          onQrItemChange({
+            ...qrOpenChoice,
+            answer: [{ valueInteger: option.valueInteger }]
+          });
+        }
+      }
+      return;
+    }
+    onQrItemChange(createEmptyQrItem(qItem));
+  }
+
+  const openOpenChoiceSelectAnswerOption = (
+    <Autocomplete
+      id={qItem.id}
+      value={valueSelect ?? null}
+      options={answerOptions}
+      getOptionLabel={(option) => getAnswerOptionLabel(option)}
+      onChange={handleChange}
+      freeSolo
+      autoHighlight
+      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+      disabled={readOnly}
+      size="small"
+      placeholder={entryFormat}
+      renderInput={(params) => (
+        <StandardTextField
+          isTabled={isTabled}
+          label={displayPrompt}
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {params.InputProps.endAdornment}
+                {displayUnit}
+              </>
+            )
+          }}
+        />
+      )}
+    />
+  );
+  const renderQItemOpenChoiceAutocomplete = isRepeated ? (
+    <>{openOpenChoiceSelectAnswerOption}</>
+  ) : (
+    <FullWidthFormComponentBox data-test="q-item-open-choice-select-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {openOpenChoiceSelectAnswerOption}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemOpenChoiceAutocomplete}</>;
+}
+
+export default QItemOpenChoiceSelectAnswerOption;

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceSelectAnswerValueSet.tsx

@@ -0,0 +1,138 @@
+/*
+ * 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 type { SyntheticEvent } from 'react';
+import React from 'react';
+import { Autocomplete, Grid, Typography } from '@mui/material';
+
+import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { StandardTextField } from '../Textfield.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useValueSetCodings from '../../../hooks/useValueSetCodings';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemOpenChoiceSelectAnswerValueSet(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Init input value
+  const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
+  let valueSelect: Coding | undefined = undefined;
+  if (qrOpenChoice['answer']) {
+    valueSelect = qrOpenChoice['answer'][0].valueCoding;
+  }
+
+  // Get codings/options from valueSet
+  const { codings, serverError } = useValueSetCodings(qItem);
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Event handlers
+  function handleValueChange(_: SyntheticEvent<Element, Event>, newValue: Coding | string | null) {
+    if (newValue) {
+      if (typeof newValue === 'string') {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueString: newValue }]
+        });
+      } else {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueCoding: newValue }]
+        });
+      }
+      return;
+    }
+    onQrItemChange(createEmptyQrItem(qItem));
+  }
+
+  const openChoiceSelectAnswerValueSet = (
+    <>
+      <Autocomplete
+        id={qItem.id}
+        value={valueSelect ?? null}
+        options={codings}
+        getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
+        onChange={handleValueChange}
+        onInputChange={(event, newValue) => handleValueChange(event, newValue)}
+        freeSolo
+        autoHighlight
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        disabled={readOnly}
+        size="small"
+        placeholder={entryFormat}
+        renderInput={(params) => (
+          <StandardTextField
+            isTabled={isTabled}
+            label={displayPrompt}
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {params.InputProps.endAdornment}
+                  {displayUnit}
+                </>
+              )
+            }}
+          />
+        )}
+      />
+      {serverError ? (
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server.
+        </Typography>
+      ) : null}
+    </>
+  );
+
+  const renderQItemOpenChoiceSelectAnswerValueSet = isRepeated ? (
+    <>{openChoiceSelectAnswerValueSet}</>
+  ) : (
+    <FullWidthFormComponentBox>
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {openChoiceSelectAnswerValueSet}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemOpenChoiceSelectAnswerValueSet}</>;
+}
+
+export default QItemOpenChoiceSelectAnswerValueSet;