@aehrc/smart-forms-renderer 0.7.1 → 0.8.0

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

@@ -15,19 +15,15 @@
  * limitations under the License.
  */
 
-import type { ChangeEvent } from 'react';
 import React, { useState } from 'react';
 import Grid from '@mui/material/Grid';
-import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { ChoiceItemOrientation } 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 ChoiceRadioSingle from '../ChoiceItems/ChoiceRadioSingle';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
-import RadioButtonWithOpenLabel from '../ItemParts/RadioButtonWithOpenLabel';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
@@ -35,6 +31,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import OpenChoiceRadioAnswerOptionFields from './OpenChoiceRadioAnswerOptionFields';
 
 interface OpenChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -119,59 +116,6 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
     }
   }
 
-  const openChoiceRadio = (
-    <QRadioGroup
-      row={orientation === ChoiceItemOrientation.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 (
-            <ChoiceRadioSingle
-              key={option.valueCoding.code ?? ''}
-              value={option.valueCoding.code ?? ''}
-              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
-              readOnly={readOnly}
-            />
-          );
-        } else if (option['valueString']) {
-          return (
-            <ChoiceRadioSingle
-              key={option.valueString}
-              value={option.valueString}
-              label={option.valueString}
-              readOnly={readOnly}
-            />
-          );
-        } else if (option['valueInteger']) {
-          return (
-            <ChoiceRadioSingle
-              key={option.valueInteger}
-              value={option.valueInteger.toString()}
-              label={option.valueInteger.toString()}
-              readOnly={readOnly}
-            />
-          );
-        } else {
-          return null;
-        }
-      })}
-
-      {openLabelText ? (
-        <RadioButtonWithOpenLabel
-          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}>
@@ -179,7 +123,16 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
           <LabelWrapper qItem={qItem} />
         </Grid>
         <Grid item xs={7}>
-          {openChoiceRadio}
+          <OpenChoiceRadioAnswerOptionFields
+            qItem={qItem}
+            valueRadio={valueRadio}
+            openLabelText={openLabelText}
+            openLabelValue={openLabelValue}
+            openLabelSelected={openLabelSelected}
+            orientation={orientation}
+            readOnly={readOnly}
+            onValueChange={handleValueChange}
+          />
           <DisplayInstructions displayInstructions={displayInstructions} />
         </Grid>
       </Grid>

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { getAnswerOptionLabel } from '../../../utils/openChoice';
+import { StandardTextField } from '../Textfield.styles';
+import Autocomplete from '@mui/material/Autocomplete';
+import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+
+interface OpenChoiceSelectAnswerOptionFieldProps extends PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  options: QuestionnaireItemAnswerOption[];
+  valueSelect: QuestionnaireItemAnswerOption | null;
+  onChange: (newValue: QuestionnaireItemAnswerOption | string | null) => void;
+}
+
+function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFieldProps) {
+  const { qItem, options, valueSelect, isTabled, onChange } = props;
+
+  const { displayUnit, displayPrompt, readOnly, entryFormat } = useRenderingExtensions(qItem);
+
+  return (
+    <Autocomplete
+      id={qItem.id}
+      value={valueSelect ?? null}
+      options={options}
+      getOptionLabel={(option) => getAnswerOptionLabel(option)}
+      onChange={(_, newValue) => onChange(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}
+              </>
+            )
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default OpenChoiceSelectAnswerOptionField;

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

@@ -15,18 +15,14 @@
  * limitations under the License.
  */
 
-import type { SyntheticEvent } from 'react';
 import React from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
 import Grid from '@mui/material/Grid';
 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 {
@@ -36,6 +32,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import OpenChoiceSelectAnswerOptionField from './OpenChoiceSelectAnswerOptionField';
 
 interface OpenChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -49,88 +46,61 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
 
   // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init input value
   const answerOptions = qItem.answerOption;
   if (!answerOptions) return null;
 
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
-  let valueSelect: QuestionnaireItemAnswerOption | undefined = undefined;
+  let valueSelect: QuestionnaireItemAnswerOption | null = null;
   if (qrOpenChoice.answer) {
-    valueSelect = qrOpenChoice.answer[0];
+    valueSelect = qrOpenChoice.answer[0] ?? null;
   }
 
   // Event handlers
-  function handleChange(
-    _: SyntheticEvent<Element, Event>,
-    newValue: QuestionnaireItemAnswerOption | string | null
-  ) {
+  function handleChange(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;
+      }
+
+      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}
-              </>
-            )
-          }}
-        />
-      )}
-    />
-  );
-
   if (isRepeated) {
-    return <>{openOpenChoiceSelectAnswerOption}</>;
+    return (
+      <OpenChoiceSelectAnswerOptionField
+        qItem={qItem}
+        options={answerOptions}
+        valueSelect={valueSelect}
+        isTabled={isTabled}
+        onChange={handleChange}
+      />
+    );
   }
 
   return (
@@ -140,7 +110,13 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
           <LabelWrapper qItem={qItem} />
         </Grid>
         <Grid item xs={7}>
-          {openOpenChoiceSelectAnswerOption}
+          <OpenChoiceSelectAnswerOptionField
+            qItem={qItem}
+            options={answerOptions}
+            valueSelect={valueSelect}
+            isTabled={isTabled}
+            onChange={handleChange}
+          />
           <DisplayInstructions displayInstructions={displayInstructions} />
         </Grid>
       </Grid>

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import { StandardTextField } from '../Textfield.styles';
+import Typography from '@mui/material/Typography';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type { Coding, QuestionnaireItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+
+interface OpenChoiceSelectAnswerValueSetFieldProps extends PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  options: Coding[];
+  valueSelect: Coding | null;
+  serverError: Error | null;
+  onValueChange: (newValue: Coding | string | null) => void;
+}
+
+function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueSetFieldProps) {
+  const { qItem, options, valueSelect, serverError, isTabled, onValueChange } = props;
+
+  const { displayUnit, displayPrompt, readOnly, entryFormat } = useRenderingExtensions(qItem);
+
+  return (
+    <>
+      <Autocomplete
+        id={qItem.id}
+        value={valueSelect ?? null}
+        options={options}
+        getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
+        onChange={(_, newValue) => onValueChange(newValue)}
+        onInputChange={(_, newValue) => onValueChange(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}
+    </>
+  );
+}
+
+export default OpenChoiceSelectAnswerValueSetField;

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

@@ -15,14 +15,10 @@
  * limitations under the License.
  */
 
-import type { SyntheticEvent } from 'react';
 import React from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
 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';
@@ -33,6 +29,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import OpenChoiceSelectAnswerValueSetField from './OpenChoiceSelectAnswerValueSetField';
 
 interface OpenChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -47,20 +44,19 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
 
   // Init input value
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
-  let valueSelect: Coding | undefined = undefined;
+  let valueSelect: Coding | null = null;
   if (qrOpenChoice['answer']) {
-    valueSelect = qrOpenChoice['answer'][0].valueCoding;
+    valueSelect = qrOpenChoice['answer'][0].valueCoding ?? null;
   }
 
   // Get codings/options from valueSet
   const { codings, serverError } = useValueSetCodings(qItem);
 
   // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Event handlers
-  function handleValueChange(_: SyntheticEvent<Element, Event>, newValue: Coding | string | null) {
+  function handleValueChange(newValue: Coding | string | null) {
     if (newValue) {
       if (typeof newValue === 'string') {
         onQrItemChange({
@@ -78,48 +74,17 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
     onQrItemChange(createEmptyQrItem(qItem));
   }
 
-  const openChoiceSelectAnswerValueSet = (
-    <>
-      <Autocomplete
-        id={qItem.id}
-        value={valueSelect ?? null}
+  if (isRepeated) {
+    return (
+      <OpenChoiceSelectAnswerValueSetField
+        qItem={qItem}
         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}
-                </>
-              )
-            }}
-          />
-        )}
+        valueSelect={valueSelect}
+        serverError={serverError}
+        isTabled={isTabled}
+        onValueChange={handleValueChange}
       />
-      {serverError ? (
-        <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server.
-        </Typography>
-      ) : null}
-    </>
-  );
-
-  if (isRepeated) {
-    return <>{openChoiceSelectAnswerValueSet}</>;
+    );
   }
 
   return (
@@ -129,7 +94,14 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
           <LabelWrapper qItem={qItem} />
         </Grid>
         <Grid item xs={7}>
-          {openChoiceSelectAnswerValueSet}
+          <OpenChoiceSelectAnswerValueSetField
+            qItem={qItem}
+            options={codings}
+            valueSelect={valueSelect}
+            serverError={serverError}
+            isTabled={isTabled}
+            onValueChange={handleValueChange}
+          />
           <DisplayInstructions displayInstructions={displayInstructions} />
         </Grid>
       </Grid>

package/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx

@@ -31,6 +31,7 @@ import { nanoid } from 'nanoid';
 import RepeatGroupItem from './RepeatGroupItem';
 import AddItemButton from './AddItemButton';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import cloneDeep from 'lodash.clonedeep';
 
 interface RepeatGroupProps extends PropsWithQrRepeatGroupChangeHandler {
   qItem: QuestionnaireItem;
@@ -41,7 +42,7 @@ interface RepeatGroupProps extends PropsWithQrRepeatGroupChangeHandler {
 function RepeatGroup(props: RepeatGroupProps) {
   const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
 
-  const initialRepeatGroups = useInitialiseRepeatGroups(qrItems);
+  const initialRepeatGroups = useInitialiseRepeatGroups(qItem, qrItems);
 
   const [repeatGroups, setRepeatGroups] = useState(initialRepeatGroups);
 
@@ -60,7 +61,7 @@ function RepeatGroup(props: RepeatGroupProps) {
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
       qrItems: updatedRepeatGroups.flatMap((singleGroup) =>
-        singleGroup.qrItem ? [singleGroup.qrItem] : []
+        singleGroup.qrItem ? [cloneDeep(singleGroup.qrItem)] : []
       )
     });
   }
@@ -74,7 +75,7 @@ function RepeatGroup(props: RepeatGroupProps) {
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
       qrItems: updatedRepeatGroups.flatMap((singleGroup) =>
-        singleGroup.qrItem ? [singleGroup.qrItem] : []
+        singleGroup.qrItem ? [cloneDeep(singleGroup.qrItem)] : []
       )
     });
   }

package/src/{theme/overrides/Backdrop.ts → components/FormComponents/RepeatGroup/index.ts}

@@ -15,20 +15,4 @@
  * limitations under the License.
  */
 
-import type { Theme } from '@mui/material/styles';
-import { alpha } from '@mui/material/styles';
-
-export default function Backdrop(theme: Theme) {
-  return {
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: alpha(theme.palette.grey[800], 0.8)
-        },
-        invisible: {
-          background: 'transparent'
-        }
-      }
-    }
-  };
-}
+export { default as RepeatGroup } from './RepeatGroup';

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -40,7 +40,7 @@ function RepeatItem(props: RepeatItemProps) {
   // Get additional rendering extensions
   const { displayInstructions } = useRenderingExtensions(qItem);
 
-  const initialRepeatAnswers = useInitialiseRepeatAnswers(qrItem);
+  const initialRepeatAnswers = useInitialiseRepeatAnswers(qItem, qrItem);
 
   const [repeatAnswers, setRepeatAnswers] = useState(initialRepeatAnswers);
 

package/src/components/FormComponents/SingleItem/SingleItem.tsx

@@ -20,7 +20,8 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
 import SingleItemSwitcher from './SingleItemSwitcher';
@@ -29,13 +30,14 @@ import useHidden from '../../../hooks/useHidden';
 interface SingleItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithTextShownAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function SingleItem(props: SingleItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
 
   const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
 
@@ -60,6 +62,7 @@ function SingleItem(props: SingleItemProps) {
       qrItem={qrItem}
       isRepeated={isRepeated}
       isTabled={isTabled}
+      textShown={textShown}
       onQrItemChange={handleQrItemChange}
     />
   );

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -23,7 +23,8 @@ import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 import StringItem from '../StringItem/StringItem';
 import BooleanItem from '../BooleanItem/BooleanItem';
@@ -39,13 +40,14 @@ import UrlItem from '../UrlItem/UrlItem';
 interface SingleItemSwitcherProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithTextShownAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function SingleItemSwitcher(props: SingleItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
 
   switch (qItem.type) {
     case 'string':
@@ -136,6 +138,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          textShown={textShown}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -146,6 +149,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          textShown={textShown}
           onQrItemChange={onQrItemChange}
         />
       );

package/src/components/FormComponents/SingleItem/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { default as SingleItem } from './SingleItem';