@aehrc/smart-forms-renderer 0.17.0 → 0.19.0

package/src/components/FormComponents/BooleanItem/BooleanItem.tsx

@@ -47,31 +47,58 @@ function BooleanItem(props: BooleanItemProps) {
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
-  // Init input value
-  let checked = false;
-  if (qrItem?.answer && qrItem.answer[0].valueBoolean) {
-    checked = qrItem.answer[0].valueBoolean;
-  }
+  const valueBoolean = qrItem?.answer && qrItem.answer[0].valueBoolean;
 
   // Event handlers
-  function handleCheckedChange(newChecked: boolean) {
-    onQrItemChange({
-      ...createEmptyQrItem(qItem),
-      answer: [{ valueBoolean: newChecked }]
-    });
+  function handleValueChange(newValue: string) {
+    switch (newValue) {
+      case 'true':
+        onQrItemChange({
+          ...createEmptyQrItem(qItem),
+          answer: [{ valueBoolean: true }]
+        });
+        break;
+      case 'false':
+        onQrItemChange({
+          ...createEmptyQrItem(qItem),
+          answer: [{ valueBoolean: false }]
+        });
+        break;
+      default:
+        onQrItemChange(createEmptyQrItem(qItem));
+        break;
+    }
+  }
+
+  function handleClear() {
+    onQrItemChange(createEmptyQrItem(qItem));
   }
 
   if (isTabled) {
     return (
       <Box display="flex" justifyContent="center">
-        <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
+        <BooleanField
+          qItem={qItem}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          valueBoolean={valueBoolean}
+          onCheckedChange={handleValueChange}
+          onClear={handleClear}
+        />
       </Box>
     );
   }
 
   if (isRepeated) {
     return (
-      <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
+      <BooleanField
+        qItem={qItem}
+        readOnly={readOnly}
+        isTabled={isTabled}
+        valueBoolean={valueBoolean}
+        onCheckedChange={handleValueChange}
+        onClear={handleClear}
+      />
     );
   }
   return (
@@ -80,7 +107,14 @@ function BooleanItem(props: BooleanItemProps) {
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
+        <BooleanField
+          qItem={qItem}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          valueBoolean={valueBoolean}
+          onCheckedChange={handleValueChange}
+          onClear={handleClear}
+        />
       </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );

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

@@ -20,17 +20,19 @@ import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItemAnswer } from 'fhir/r4';
 import QItemChoiceCheckboxSingle from '../ItemParts/CheckboxSingle';
 import { StyledFormGroup } from '../Item.styles';
+import { getChoiceOrientation } from '../../../utils/choice';
 
 interface ChoiceCheckboxAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;
   answers: QuestionnaireResponseItemAnswer[];
-  orientation: ChoiceItemOrientation;
   readOnly: boolean;
   onCheckedChange: (newValue: string) => void;
 }
 
 function ChoiceCheckboxAnswerOptionFields(props: ChoiceCheckboxAnswerOptionFieldsProps) {
-  const { qItem, answers, orientation, readOnly, onCheckedChange } = props;
+  const { qItem, answers, readOnly, onCheckedChange } = props;
+
+  const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
   return (
     <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>

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

@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { updateQrCheckboxAnswers } from '../../../utils/choice';
@@ -41,14 +40,12 @@ interface ChoiceCheckboxAnswerOptionItemProps
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
-  orientation: ChoiceItemOrientation;
 }
 
 function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemProps) {
   const {
     qItem,
     qrItem,
-    orientation,
     isRepeated,
     showMinimalView = false,
     parentIsReadOnly,
@@ -88,7 +85,6 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
         <ChoiceCheckboxAnswerValueSetFields
           qItem={qItem}
           answers={answers}
-          orientation={orientation}
           readOnly={readOnly}
           onCheckedChange={handleCheckedChange}
         />
@@ -106,7 +102,6 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
         <ChoiceCheckboxAnswerValueSetFields
           qItem={qItem}
           answers={answers}
-          orientation={orientation}
           readOnly={readOnly}
           onCheckedChange={handleCheckedChange}
         />

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

@@ -17,25 +17,28 @@
 
 import React from 'react';
 import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
-import type { Coding, QuestionnaireResponseItemAnswer } from 'fhir/r4';
+import type { Coding, QuestionnaireItem, QuestionnaireResponseItemAnswer } from 'fhir/r4';
 import CheckboxSingle from '../ItemParts/CheckboxSingle';
 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';
+import { getChoiceOrientation } from '../../../utils/choice';
 
 interface ChoiceCheckboxAnswerValueSetFieldsProps {
+  qItem: QuestionnaireItem;
   codings: Coding[];
   answers: QuestionnaireResponseItemAnswer[];
-  orientation: ChoiceItemOrientation;
   readOnly: boolean;
   terminologyError: TerminologyError;
   onCheckedChange: (newValue: string) => void;
 }
 
 function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetFieldsProps) {
-  const { codings, answers, orientation, readOnly, terminologyError, onCheckedChange } = props;
+  const { qItem, codings, answers, readOnly, terminologyError, onCheckedChange } = props;
+
+  const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
   if (codings.length > 0) {
     return (

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

@@ -19,7 +19,6 @@ import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
-import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import { mapCodingsToOptions, updateQrCheckboxAnswers } from '../../../utils/choice';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
@@ -42,7 +41,6 @@ interface ChoiceCheckboxAnswerValueSetItemProps
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
-  orientation: ChoiceItemOrientation;
   showText?: boolean;
 }
 
@@ -50,7 +48,6 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
   const {
     qItem,
     qrItem,
-    orientation,
     isRepeated,
     showMinimalView = false,
     parentIsReadOnly,
@@ -90,9 +87,9 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
     return (
       <>
         <ChoiceCheckboxAnswerValueSetFields
+          qItem={qItem}
           codings={codings}
           answers={answers}
-          orientation={orientation}
           readOnly={readOnly}
           terminologyError={terminologyError}
           onCheckedChange={handleCheckedChange}
@@ -109,9 +106,9 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceCheckboxAnswerValueSetFields
+          qItem={qItem}
           codings={codings}
           answers={answers}
-          orientation={orientation}
           readOnly={readOnly}
           terminologyError={terminologyError}
           onCheckedChange={handleCheckedChange}

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

@@ -23,7 +23,7 @@ import ChoiceSelectAnswerOptionItem from './ChoiceSelectAnswerOptionItem';
 import ChoiceCheckboxAnswerOptionItem from './ChoiceCheckboxAnswerOptionItem';
 import ChoiceAutocompleteItem from './ChoiceAutocompleteItem';
 import ChoiceSelectAnswerValueSetItem from './ChoiceSelectAnswerValueSetItem';
-import { getChoiceControlType, getChoiceOrientation } from '../../../utils/choice';
+import { getChoiceControlType } from '../../../utils/choice';
 import ChoiceRadioAnswerValueSetItem from './ChoiceRadioAnswerValueSetItem';
 import ChoiceCheckboxAnswerValueSetItem from './ChoiceCheckboxAnswerValueSetItem';
 import type {
@@ -48,7 +48,6 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
   const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
-  const orientation = getChoiceOrientation(qItem);
   const choiceControlType = getChoiceControlType(qItem);
 
   switch (choiceControlType) {
@@ -58,7 +57,6 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceRadioAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
-            orientation={orientation}
             isRepeated={isRepeated}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
@@ -69,7 +67,6 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceRadioAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
-            orientation={orientation}
             isRepeated={isRepeated}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
@@ -82,7 +79,6 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceCheckboxAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
-            orientation={orientation}
             isRepeated={qItem.repeats ?? false}
             showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
@@ -95,7 +91,6 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={qItem.repeats ?? false}
-            orientation={orientation}
             showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}

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

@@ -20,17 +20,19 @@ import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem } from 'fhir/r4';
 import RadioAnswerOptionButtons from '../ItemParts/RadioAnswerOptionButtons';
 import { StyledRadioGroup } from '../Item.styles';
+import { getChoiceOrientation } from '../../../utils/choice';
 
 interface ChoiceRadioAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;
   valueRadio: string | null;
-  orientation: ChoiceItemOrientation;
   readOnly: boolean;
   onCheckedChange: (newValue: string) => void;
 }
 
 function ChoiceRadioAnswerOptionFields(props: ChoiceRadioAnswerOptionFieldsProps) {
-  const { qItem, valueRadio, orientation, readOnly, onCheckedChange } = props;
+  const { qItem, valueRadio, readOnly, onCheckedChange } = props;
+
+  const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
   return (
     <StyledRadioGroup

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

@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -37,11 +36,10 @@ interface ChoiceRadioAnswerOptionItemProps
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
-  orientation: ChoiceItemOrientation;
 }
 
 function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
-  const { qItem, qrItem, orientation, isRepeated, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, parentIsReadOnly, onQrItemChange } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -66,7 +64,6 @@ function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
       <ChoiceRadioAnswerOptionFields
         qItem={qItem}
         valueRadio={valueRadio}
-        orientation={orientation}
         readOnly={readOnly}
         onCheckedChange={handleChange}
       />
@@ -82,7 +79,6 @@ function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
         <ChoiceRadioAnswerOptionFields
           qItem={qItem}
           valueRadio={valueRadio}
-          orientation={orientation}
           readOnly={readOnly}
           onCheckedChange={handleChange}
         />

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

@@ -24,20 +24,21 @@ import { StyledRadioGroup } from '../Item.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { StyledAlert } from '../../Alert.styles';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
+import { getChoiceOrientation } from '../../../utils/choice';
 
 interface ChoiceRadioAnswerValueSetFieldsProps {
   qItem: QuestionnaireItem;
   codings: Coding[];
   valueRadio: string | null;
-  orientation: ChoiceItemOrientation;
   readOnly: boolean;
   terminologyError: TerminologyError;
   onCheckedChange: (newValue: string) => void;
 }
 
 function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsProps) {
-  const { qItem, codings, valueRadio, orientation, readOnly, terminologyError, onCheckedChange } =
-    props;
+  const { qItem, codings, valueRadio, readOnly, terminologyError, onCheckedChange } = props;
+
+  const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
   if (codings.length > 0) {
     return (

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

@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerValueSetCodings } from '../../../utils/choice';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -38,11 +37,10 @@ interface ChoiceRadioAnswerValueSetItemProps
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
-  orientation: ChoiceItemOrientation;
 }
 
 function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps) {
-  const { qItem, qrItem, orientation, isRepeated, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, parentIsReadOnly, onQrItemChange } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -77,7 +75,6 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
         qItem={qItem}
         codings={codings}
         valueRadio={valueRadio}
-        orientation={orientation}
         readOnly={readOnly}
         terminologyError={terminologyError}
         onCheckedChange={handleChange}
@@ -95,7 +92,6 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
           qItem={qItem}
           codings={codings}
           valueRadio={valueRadio}
-          orientation={orientation}
           readOnly={readOnly}
           terminologyError={terminologyError}
           onCheckedChange={handleChange}

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

@@ -25,6 +25,7 @@ import type {
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
+import type { PropsWithParentIsRepeatGroupAttribute } from '../../../interfaces/renderProps.interface';
 import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
 import useHidden from '../../../hooks/useHidden';
 import type { Tabs } from '../../../interfaces/tab.interface';
@@ -37,7 +38,8 @@ import useReadOnly from '../../../hooks/useReadOnly';
 interface GroupItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithParentIsReadOnlyAttribute {
+    PropsWithParentIsReadOnlyAttribute,
+    PropsWithParentIsRepeatGroupAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
   groupCardElevation: number;
@@ -56,13 +58,15 @@ function GroupItem(props: GroupItemProps) {
     tabs,
     currentTabIndex,
     parentIsReadOnly,
+    parentIsRepeatGroup,
+    parentRepeatGroupIndex,
     onQrItemChange
   } = props;
 
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const itemIsHidden = useHidden(qItem);
+  const itemIsHidden = useHidden(qItem, parentRepeatGroupIndex);
   if (itemIsHidden) {
     return null;
   }
@@ -113,6 +117,8 @@ function GroupItem(props: GroupItemProps) {
               qrItemOrItems={qrItemOrItems}
               groupCardElevation={groupCardElevation}
               parentIsReadOnly={readOnly}
+              parentIsRepeatGroup={parentIsRepeatGroup}
+              parentRepeatGroupIndex={parentRepeatGroupIndex}
               onQrItemChange={handleQrItemChange}
               onQrRepeatGroupChange={handleQrRepeatGroupChange}
             />

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

@@ -21,6 +21,7 @@ import type {
   PropsWithQrItemChangeHandler,
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
+import type { PropsWithParentIsRepeatGroupAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { isRepeatItemAndNotCheckbox, isSpecificItemControl } from '../../../utils';
 import GroupTable from '../Tables/GroupTable';
@@ -34,7 +35,8 @@ import GridGroup from '../GridGroup/GridGroup';
 interface GroupItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
     PropsWithQrRepeatGroupChangeHandler,
-    PropsWithParentIsReadOnlyAttribute {
+    PropsWithParentIsReadOnlyAttribute,
+    PropsWithParentIsRepeatGroupAttribute {
   qItem: QuestionnaireItem;
   qrItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[] | undefined;
   groupCardElevation: number;
@@ -46,11 +48,13 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
     qrItemOrItems,
     groupCardElevation,
     parentIsReadOnly,
+    parentIsRepeatGroup,
+    parentRepeatGroupIndex,
     onQrItemChange,
     onQrRepeatGroupChange
   } = props;
 
-  const itemIsHidden = useHidden(qItem);
+  const itemIsHidden = useHidden(qItem, parentRepeatGroupIndex);
   if (itemIsHidden) {
     return null;
   }
@@ -152,6 +156,8 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
         isRepeated={false}
         groupCardElevation={groupCardElevation + 1}
         parentIsReadOnly={parentIsReadOnly}
+        parentIsRepeatGroup={parentIsRepeatGroup}
+        parentRepeatGroupIndex={parentRepeatGroupIndex}
         onQrItemChange={onQrItemChange}
       />
     );
@@ -166,6 +172,8 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       isTabled={false}
       groupCardElevation={groupCardElevation + 1}
       parentIsReadOnly={parentIsReadOnly}
+      parentIsRepeatGroup={parentIsRepeatGroup}
+      parentRepeatGroupIndex={parentRepeatGroupIndex}
       onQrItemChange={onQrItemChange}
     />
   );

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

@@ -21,6 +21,7 @@ import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import CheckboxSingle from '../ItemParts/CheckboxSingle';
 import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
 import type { QuestionnaireItem, QuestionnaireResponseItemAnswer } from 'fhir/r4';
+import { getChoiceOrientation } from '../../../utils/choice';
 
 interface OpenChoiceCheckboxAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;
@@ -29,7 +30,6 @@ interface OpenChoiceCheckboxAnswerOptionFieldsProps {
   openLabelValue: string;
   openLabelChecked: boolean;
   readOnly: boolean;
-  orientation: ChoiceItemOrientation;
   onValueChange: (changedOptionValue: string | null, changedOpenLabelValue: string | null) => void;
   onOpenLabelCheckedChange: (checked: boolean) => void;
   onOpenLabelInputChange: (input: string) => void;
@@ -43,12 +43,13 @@ function OpenChoiceCheckboxAnswerOptionFields(props: OpenChoiceCheckboxAnswerOpt
     openLabelValue,
     openLabelChecked,
     readOnly,
-    orientation,
     onValueChange,
     onOpenLabelCheckedChange,
     onOpenLabelInputChange
   } = props;
 
+  const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
+
   return (
     <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
       {qItem.answerOption?.map((option) => {

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

@@ -16,7 +16,6 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import { CheckBoxOption } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -48,14 +47,12 @@ interface OpenChoiceCheckboxAnswerOptionItemProps
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
-  orientation: ChoiceItemOrientation;
 }
 
 function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptionItemProps) {
   const {
     qItem,
     qrItem,
-    orientation,
     isRepeated,
     showMinimalView = false,
     parentIsReadOnly,
@@ -149,7 +146,6 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
           openLabelValue={openLabelValue}
           openLabelChecked={openLabelChecked}
           readOnly={readOnly}
-          orientation={orientation}
           onValueChange={handleValueChange}
           onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
           onOpenLabelInputChange={handleOpenLabelInputChange}
@@ -172,7 +168,6 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
           openLabelValue={openLabelValue}
           openLabelChecked={openLabelChecked}
           readOnly={readOnly}
-          orientation={orientation}
           onValueChange={handleValueChange}
           onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
           onOpenLabelInputChange={handleOpenLabelInputChange}

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

@@ -22,7 +22,6 @@ import OpenChoiceSelectAnswerOptionItem from './OpenChoiceSelectAnswerOptionItem
 import OpenChoiceSelectAnswerValueSetItem from './OpenChoiceSelectAnswerValueSetItem';
 import OpenChoiceAutocompleteItem from './OpenChoiceAutocompleteItem';
 import { getOpenChoiceControlType } from '../../../utils/openChoice';
-import { getChoiceOrientation } from '../../../utils/choice';
 import OpenChoiceCheckboxAnswerOptionItem from './OpenChoiceCheckboxAnswerOptionItem';
 import OpenChoiceRadioAnswerOptionItem from './OpenChoiceRadioAnswerOptionItem';
 import type {
@@ -47,15 +46,12 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
   const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
-  const orientation = getChoiceOrientation(qItem);
-
   switch (getOpenChoiceControlType(qItem)) {
     case OpenChoiceItemControl.Checkbox:
       return (
         <OpenChoiceCheckboxAnswerOptionItem
           qItem={qItem}
           qrItem={qrItem}
-          orientation={orientation}
           isRepeated={qItem['repeats'] ?? false}
           showMinimalView={showMinimalView}
           parentIsReadOnly={parentIsReadOnly}
@@ -67,7 +63,6 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
         <OpenChoiceRadioAnswerOptionItem
           qItem={qItem}
           qrItem={qrItem}
-          orientation={orientation}
           isRepeated={qItem['repeats'] ?? false}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}

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

@@ -22,6 +22,7 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import { StyledRadioGroup } from '../Item.styles';
 import RadioButtonWithOpenLabel from '../ItemParts/RadioButtonWithOpenLabel';
 import RadioAnswerOptionButtons from '../ItemParts/RadioAnswerOptionButtons';
+import { getChoiceOrientation } from '../../../utils/choice';
 
 interface OpenChoiceRadioAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;
@@ -29,7 +30,6 @@ interface OpenChoiceRadioAnswerOptionFieldsProps {
   openLabelText: string | null;
   openLabelValue: string | null;
   openLabelSelected: boolean;
-  orientation: ChoiceItemOrientation;
   readOnly: boolean;
   onValueChange: (changedOptionValue: string | null, changedOpenLabelValue: string | null) => void;
 }
@@ -41,11 +41,12 @@ function OpenChoiceRadioAnswerOptionFields(props: OpenChoiceRadioAnswerOptionFie
     openLabelText,
     openLabelValue,
     openLabelSelected,
-    orientation,
     readOnly,
     onValueChange
   } = props;
 
+  const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
+
   return (
     <StyledRadioGroup
       row={orientation === ChoiceItemOrientation.Horizontal}

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

@@ -16,7 +16,6 @@
  */
 
 import React, { useState } from 'react';
-import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { getOpenLabelText } from '../../../utils/itemControl';
@@ -39,11 +38,10 @@ interface OpenChoiceRadioAnswerOptionItemProps
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
-  orientation: ChoiceItemOrientation;
 }
 
 function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemProps) {
-  const { qItem, qrItem, orientation, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, parentIsReadOnly, onQrItemChange } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -130,7 +128,6 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
           openLabelText={openLabelText}
           openLabelValue={openLabelValue}
           openLabelSelected={openLabelSelected}
-          orientation={orientation}
           readOnly={readOnly}
           onValueChange={handleValueChange}
         />