@aehrc/smart-forms-renderer 0.8.0 → 0.9.0

package/src/components/FormComponents/GroupItem/GroupItemSwitcher.tsx

@@ -17,14 +17,14 @@
 
 import React from 'react';
 import type {
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { isSpecificItemControl } from '../../../utils';
+import { isRepeatItemAndNotCheckbox, isSpecificItemControl } from '../../../utils';
 import GroupTable from '../Tables/GroupTable';
 import RepeatGroup from '../RepeatGroup/RepeatGroup';
-import { isRepeatItemAndNotCheckbox } from '../../../utils/qItem';
 import RepeatItem from '../RepeatItem/RepeatItem';
 import SingleItem from '../SingleItem/SingleItem';
 import useHidden from '../../../hooks/useHidden';
@@ -32,15 +32,23 @@ import GroupItem from './GroupItem';
 import GridGroup from '../GridGroup/GridGroup';
 
 interface GroupItemSwitcherProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithQrRepeatGroupChangeHandler {
+  extends PropsWithQrItemChangeHandler,
+    PropsWithQrRepeatGroupChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[];
+  qrItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[] | undefined;
   groupCardElevation: number;
 }
 
 function GroupItemSwitcher(props: GroupItemSwitcherProps) {
-  const { qItem, qrItemOrItems, groupCardElevation, onQrItemChange, onQrRepeatGroupChange } = props;
+  const {
+    qItem,
+    qrItemOrItems,
+    groupCardElevation,
+    parentIsReadOnly,
+    onQrItemChange,
+    onQrRepeatGroupChange
+  } = props;
 
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
@@ -64,6 +72,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
           qItem={qItem}
           qrItems={qrItems}
           groupCardElevation={groupCardElevation + 1}
+          parentIsReadOnly={parentIsReadOnly}
           onQrRepeatGroupChange={onQrRepeatGroupChange}
         />
       );
@@ -74,6 +83,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
         qItem={qItem}
         qrItems={qrItems}
         groupCardElevation={groupCardElevation + 1}
+        parentIsReadOnly={parentIsReadOnly}
         onQrRepeatGroupChange={onQrRepeatGroupChange}
       />
     );
@@ -86,8 +96,9 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
     return (
       <GridGroup
         qItem={qItem}
-        qrItem={qrItem}
+        qrItem={qrItem ?? null}
         groupCardElevation={groupCardElevation}
+        parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
       />
     );
@@ -104,6 +115,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
             qItem={qItem}
             qrItems={[]}
             groupCardElevation={groupCardElevation + 1}
+            parentIsReadOnly={parentIsReadOnly}
             onQrRepeatGroupChange={onQrRepeatGroupChange}
           />
         );
@@ -114,12 +126,20 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
           qItem={qItem}
           qrItems={[]}
           groupCardElevation={groupCardElevation + 1}
+          parentIsReadOnly={parentIsReadOnly}
           onQrRepeatGroupChange={onQrRepeatGroupChange}
         />
       );
     }
 
-    return <RepeatItem qItem={qItem} qrItem={qrItem} onQrItemChange={onQrItemChange} />;
+    return (
+      <RepeatItem
+        qItem={qItem}
+        qrItem={qrItem ?? null}
+        parentIsReadOnly={parentIsReadOnly}
+        onQrItemChange={onQrItemChange}
+      />
+    );
   }
 
   // if qItem is not a repeating question or is a checkbox
@@ -127,21 +147,23 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
     return (
       <GroupItem
         qItem={qItem}
-        qrItem={qrItem}
+        qrItem={qrItem ?? null}
         isRepeated={false}
         groupCardElevation={groupCardElevation + 1}
+        parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
       />
     );
   }
 
-  // Defaults to a normal QItemSwitcher
+  // Defaults to a single, non-group item
   return (
     <SingleItem
       qItem={qItem}
-      qrItem={qrItem}
+      qrItem={qrItem ?? null}
       isRepeated={false}
       isTabled={false}
+      parentIsReadOnly={parentIsReadOnly}
       onQrItemChange={onQrItemChange}
     />
   );

package/src/components/FormComponents/IntegerItem/IntegerItem.tsx

@@ -19,13 +19,14 @@ import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import useValidationError from '../../../hooks/useValidationError';
 import debounce from 'lodash.debounce';
-import { createEmptyQrItemWithUnit } from '../../../utils/qrItem';
+import { createEmptyQrItem } from '../../../utils/qrItem';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import IntegerField from './IntegerField';
@@ -33,24 +34,25 @@ import useIntegerCalculatedExpression from '../../../hooks/useIntegerCalculatedE
 import { parseValidInteger } from '../../../utils/parseInputs';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useNumberInput from '../../../hooks/useNumberInput';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface IntegerItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function IntegerItem(props: IntegerItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -75,7 +77,6 @@ function IntegerItem(props: IntegerItemProps) {
   const { calcExpUpdated } = useIntegerCalculatedExpression({
     qItem: qItem,
     inputValue: value,
-    displayUnit: displayUnit,
     setInputValue: (newValue) => {
       setValue(newValue);
     },
@@ -94,7 +95,7 @@ function IntegerItem(props: IntegerItemProps) {
   const updateQrItemWithDebounce = useCallback(
     debounce((newValue: number) => {
       onQrItemChange({
-        ...createEmptyQrItemWithUnit(qItem, displayUnit),
+        ...createEmptyQrItem(qItem),
         answer: [{ valueInteger: newValue }]
       });
     }, DEBOUNCE_DURATION),
@@ -120,7 +121,7 @@ function IntegerItem(props: IntegerItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-integer-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <IntegerField
           linkId={qItem.linkId}
           value={value}

package/src/components/FormComponents/Item.styles.ts

@@ -17,7 +17,6 @@
 
 import FormGroup from '@mui/material/FormGroup';
 import RadioGroup from '@mui/material/RadioGroup';
-import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 
 export const StyledFormGroup = styled(FormGroup)(() => ({
@@ -27,7 +26,3 @@ export const StyledFormGroup = styled(FormGroup)(() => ({
 export const StyledRadioGroup = styled(RadioGroup)(() => ({
   marginBottom: 4
 }));
-
-export const QItemTypography = styled(Typography)(() => ({
-  marginTop: 4
-}));

package/src/components/FormComponents/ItemParts/FadingCheckIcon.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import Fade from '@mui/material/Fade';
-import CheckIcon from '@mui/icons-material/Check';
+import SyncIcon from '@mui/icons-material/Sync';
 
 interface FadingCheckIconProps {
   fadeIn: boolean;
@@ -28,7 +28,7 @@ function FadingCheckIcon(props: FadingCheckIconProps) {
 
   return (
     <Fade in={fadeIn} timeout={{ enter: 100, exit: 300 }}>
-      <CheckIcon color="success" fontSize="small" />
+      <SyncIcon color="success" fontSize="small" />
     </Fade>
   );
 }

package/src/components/FormComponents/ItemParts/ItemFieldGrid.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 import Grid from '@mui/material/Grid';
 import type { QuestionnaireItem } from 'fhir/r4';
@@ -25,20 +25,21 @@ import LabelWrapper from './ItemLabelWrapper';
 interface ItemFieldGridProps {
   children: ReactNode;
   qItem: QuestionnaireItem;
-  displayInstructions: string;
+  displayInstructions: string | ReactElement;
+  readOnly: boolean;
 }
 
 function ItemFieldGrid(props: ItemFieldGridProps) {
-  const { children, qItem, displayInstructions } = props;
+  const { children, qItem, displayInstructions, readOnly } = props;
 
   return (
     <Grid container columnSpacing={6}>
       <Grid item xs={5}>
-        <LabelWrapper qItem={qItem} />
+        <LabelWrapper qItem={qItem} readOnly={readOnly} />
       </Grid>
       <Grid item xs={7}>
         {children}
-        <DisplayInstructions displayInstructions={displayInstructions} />
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
       </Grid>
     </Grid>
   );

package/src/components/FormComponents/ItemParts/ItemLabelText.tsx

@@ -18,17 +18,18 @@
 import React, { memo } from 'react';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getMarkdownString, getXHtmlString } from '../../../utils/itemControl';
-import { QItemTypography } from '../Item.styles';
 import parse from 'html-react-parser';
 import Box from '@mui/material/Box';
 import ReactMarkdown from 'react-markdown';
+import Typography from '@mui/material/Typography';
 
 interface ItemLabelTextProps {
   qItem: QuestionnaireItem;
+  readOnly?: boolean;
 }
 
 const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
-  const { qItem } = props;
+  const { qItem, readOnly } = props;
 
   // parse xHTML if found
   const xHtmlString = getXHtmlString(qItem);
@@ -47,12 +48,16 @@ const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
     );
   }
 
-  // parse regular text
   if (qItem.type === 'group') {
     return <>{qItem.text}</>;
-  } else {
-    return <QItemTypography>{qItem.text}</QItemTypography>;
   }
+
+  // parse regular text
+  return (
+    <Typography color={readOnly ? 'text.secondary' : 'text.primary'} sx={{ mt: 0.5 }}>
+      {qItem.text}
+    </Typography>
+  );
 });
 
 export default ItemLabelText;

package/src/components/FormComponents/ItemParts/ItemLabelWrapper.tsx

@@ -24,16 +24,17 @@ import ItemLabelText from './ItemLabelText';
 
 interface LabelWrapperProps {
   qItem: QuestionnaireItem;
+  readOnly: boolean;
 }
 
 function ItemLabelWrapper(props: LabelWrapperProps) {
-  const { qItem } = props;
+  const { qItem, readOnly } = props;
 
   const contextDisplayItems = getContextDisplays(qItem);
 
   return (
     <Box display="flex" alignItems="center" justifyContent="space-between">
-      <ItemLabelText qItem={qItem} />
+      <ItemLabelText qItem={qItem} readOnly={readOnly} />
 
       <Box display="flex" columnGap={0.5}>
         {contextDisplayItems.map((item) => {

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

@@ -28,17 +28,23 @@ import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import DoneIcon from '@mui/icons-material/Done';
 import ErrorIcon from '@mui/icons-material/Error';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
-import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute
+} from '../../../interfaces/renderProps.interface';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type { AlertColor } from '@mui/material/Alert';
 
-interface OpenChoiceAutocompleteFieldProps extends PropsWithIsTabledAttribute {
+interface OpenChoiceAutocompleteFieldProps
+  extends PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   options: Coding[];
   valueAutocomplete: string | Coding;
   input: string;
   loading: boolean;
   feedback: { message: string; color: AlertColor } | null;
+  readOnly: boolean;
   onInputChange: (newInput: string) => void;
   onValueChange: (newValue: Coding | string | null) => void;
   onUnfocus: () => void;
@@ -52,14 +58,14 @@ function OpenChoiceAutocompleteField(props: OpenChoiceAutocompleteFieldProps) {
     input,
     loading,
     feedback,
+    readOnly,
     isTabled,
     onInputChange,
     onValueChange,
     onUnfocus
   } = props;
 
-  // Get additional rendering extensions
-  const { displayUnit, displayPrompt, readOnly, entryFormat } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
   return (
     <Box display="flex">

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

@@ -28,23 +28,30 @@ import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import OpenChoiceAutocompleteField from './OpenChoiceAutocompleteField';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceAutocompleteItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
+
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
 
   // Init input value
@@ -58,9 +65,6 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
     valueAutocomplete = '';
   }
 
-  // Get additional rendering extensions
-  const { displayInstructions } = useRenderingExtensions(qItem);
-
   const maxList = 10;
 
   const [input, setInput] = useState('');
@@ -120,6 +124,7 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
         input={input}
         loading={loading}
         feedback={feedback ?? null}
+        readOnly={readOnly}
         isTabled={isTabled}
         onInputChange={(newValue) => setInput(newValue)}
         onValueChange={handleValueChange}
@@ -132,7 +137,7 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
     <FullWidthFormComponentBox>
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
         </Grid>
         <Grid item xs={7}>
           <OpenChoiceAutocompleteField
@@ -142,12 +147,13 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
             input={input}
             loading={loading}
             feedback={feedback ?? null}
+            readOnly={readOnly}
             isTabled={isTabled}
             onInputChange={(newValue) => setInput(newValue)}
             onValueChange={handleValueChange}
             onUnfocus={handleUnfocus}
           />
-          <DisplayInstructions displayInstructions={displayInstructions} />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
         </Grid>
       </Grid>
     </FullWidthFormComponentBox>

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

@@ -31,25 +31,40 @@ import debounce from 'lodash.debounce';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import OpenChoiceCheckboxAnswerOptionFields from './OpenChoiceCheckboxAnswerOptionFields';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceCheckboxAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithTextShownAttribute {
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 
 function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptionItemProps) {
-  const { qItem, qrItem, orientation, isRepeated, textShown = true, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    orientation,
+    isRepeated,
+    showMinimalView = false,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const openLabelText = getOpenLabelText(qItem);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init answers
   const qrOpenChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
@@ -69,10 +84,6 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
   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) => {
@@ -126,49 +137,49 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
     updateOpenLabelValueWithDebounce(newValue);
   }
 
-  if (textShown) {
+  if (showMinimalView) {
     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}>
-            <OpenChoiceCheckboxAnswerOptionFields
-              qItem={qItem}
-              answers={answers}
-              openLabelText={openLabelText}
-              openLabelValue={openLabelValue}
-              openLabelChecked={openLabelChecked}
-              readOnly={readOnly}
-              orientation={orientation}
-              onValueChange={handleValueChange}
-              onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
-              onOpenLabelInputChange={handleOpenLabelInputChange}
-            />
-            <DisplayInstructions displayInstructions={displayInstructions} />
-          </Grid>
-        </Grid>
-      </FullWidthFormComponentBox>
+      <>
+        <OpenChoiceCheckboxAnswerOptionFields
+          qItem={qItem}
+          answers={answers}
+          openLabelText={openLabelText}
+          openLabelValue={openLabelValue}
+          openLabelChecked={openLabelChecked}
+          readOnly={readOnly}
+          orientation={orientation}
+          onValueChange={handleValueChange}
+          onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
+          onOpenLabelInputChange={handleOpenLabelInputChange}
+        />
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+      </>
     );
   }
 
   return (
-    <>
-      <OpenChoiceCheckboxAnswerOptionFields
-        qItem={qItem}
-        answers={answers}
-        openLabelText={openLabelText}
-        openLabelValue={openLabelValue}
-        openLabelChecked={openLabelChecked}
-        readOnly={readOnly}
-        orientation={orientation}
-        onValueChange={handleValueChange}
-        onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
-        onOpenLabelInputChange={handleOpenLabelInputChange}
-      />
-      <DisplayInstructions displayInstructions={displayInstructions} />
-    </>
+    <FullWidthFormComponentBox data-test="q-item-open-choice-checkbox-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
+        </Grid>
+        <Grid item xs={7}>
+          <OpenChoiceCheckboxAnswerOptionFields
+            qItem={qItem}
+            answers={answers}
+            openLabelText={openLabelText}
+            openLabelValue={openLabelValue}
+            openLabelChecked={openLabelChecked}
+            readOnly={readOnly}
+            orientation={orientation}
+            onValueChange={handleValueChange}
+            onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
+            onOpenLabelInputChange={handleOpenLabelInputChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
   );
 }
 

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

@@ -28,21 +28,25 @@ import OpenChoiceRadioAnswerOptionItem from './OpenChoiceRadioAnswerOptionItem';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 
 interface OpenChoiceItemSwitcherProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute {
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
+    props;
+
   const orientation = getChoiceOrientation(qItem);
 
   switch (getOpenChoiceControlType(qItem)) {
@@ -53,7 +57,8 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           qrItem={qrItem}
           orientation={orientation}
           isRepeated={qItem['repeats'] ?? false}
-          textShown={textShown}
+          showMinimalView={showMinimalView}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -64,6 +69,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           qrItem={qrItem}
           orientation={orientation}
           isRepeated={qItem['repeats'] ?? false}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -74,6 +80,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -85,6 +92,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
             qrItem={qrItem}
             isRepeated={isRepeated}
             isTabled={isTabled}
+            parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -95,6 +103,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
             qrItem={qrItem}
             isRepeated={isRepeated}
             isTabled={isTabled}
+            parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
         );