@aehrc/smart-forms-renderer 0.44.3 → 1.0.0-alpha.10

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

@@ -21,11 +21,11 @@ import { createEmptyQrItem } from '../../../utils/qrItem';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import { convertCodingsToAnswerOptions, updateChoiceCheckboxAnswers } from '../../../utils/choice';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute,
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
@@ -33,10 +33,12 @@ import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerValueSetFi
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface ChoiceCheckboxAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
@@ -49,6 +51,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
     qItem,
     qrItem,
     isRepeated,
+    renderingExtensions,
     showMinimalView = false,
     parentIsReadOnly,
     onQrItemChange
@@ -62,7 +65,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
   const answers = qrChoiceCheckbox.answer ?? [];
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions } = renderingExtensions;
 
   // Get codings/options from valueSet
   const { codings, terminologyError } = useValueSetCodings(qItem);
@@ -115,16 +118,21 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
       data-test="q-item-choice-checkbox-answer-value-set-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <ChoiceCheckboxAnswerValueSetFields
-          qItem={qItem}
-          options={options}
-          answers={answers}
-          readOnly={readOnly}
-          terminologyError={terminologyError}
-          onCheckedChange={handleCheckedChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <ChoiceCheckboxAnswerValueSetFields
+            qItem={qItem}
+            options={options}
+            answers={answers}
+            readOnly={readOnly}
+            terminologyError={terminologyError}
+            onCheckedChange={handleCheckedChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

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

@@ -31,6 +31,7 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute,
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import Typography from '@mui/material/Typography';
@@ -39,6 +40,7 @@ interface ChoiceItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
@@ -46,8 +48,16 @@ interface ChoiceItemSwitcherProps
 }
 
 function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
-    props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const choiceControlType = getChoiceControlType(qItem);
 
@@ -60,6 +70,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qrItem={qrItem}
             isRepeated={isRepeated}
             isTabled={isTabled}
+            renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
@@ -70,6 +81,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={isRepeated}
+            renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
@@ -82,6 +94,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={qItem.repeats ?? false}
+            renderingExtensions={renderingExtensions}
             showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
@@ -93,6 +106,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={qItem.repeats ?? false}
+            renderingExtensions={renderingExtensions}
             showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
@@ -106,6 +120,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          renderingExtensions={renderingExtensions}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
@@ -118,6 +133,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qrItem={qrItem}
             isRepeated={isRepeated}
             isTabled={isTabled}
+            renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
@@ -129,6 +145,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qrItem={qrItem}
             isRepeated={isRepeated}
             isTabled={isTabled}
+            renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />

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

@@ -23,10 +23,8 @@ import { StyledRadioGroup } from '../Item.styles';
 import { getChoiceOrientation } from '../../../utils/choice';
 import Box from '@mui/material/Box';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
-import Fade from '@mui/material/Fade';
-import Tooltip from '@mui/material/Tooltip';
-import Button from '@mui/material/Button';
-import { grey } from '@mui/material/colors';
+import ClearInputButton from '../ItemParts/ClearInputButton';
+import { useRendererStylingStore } from '../../../stores';
 
 interface ChoiceRadioAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;
@@ -41,6 +39,9 @@ interface ChoiceRadioAnswerOptionFieldsProps {
 function ChoiceRadioAnswerOptionFields(props: ChoiceRadioAnswerOptionFieldsProps) {
   const { qItem, options, valueRadio, readOnly, calcExpUpdated, onCheckedChange, onClear } = props;
 
+  const inputsFlexGrow = useRendererStylingStore.use.inputsFlexGrow();
+  const hideClearButton = useRendererStylingStore.use.hideClearButton();
+
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
   return (
@@ -49,30 +50,19 @@ function ChoiceRadioAnswerOptionFields(props: ChoiceRadioAnswerOptionFieldsProps
         id={qItem.linkId}
         row={orientation === ChoiceItemOrientation.Horizontal}
         name={qItem.text}
+        sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}
         onChange={(e) => onCheckedChange(e.target.value)}
         value={valueRadio}
         data-test="q-item-radio-group">
-        <RadioOptionList options={options} readOnly={readOnly} />
+        <RadioOptionList options={options} readOnly={readOnly} fullWidth={inputsFlexGrow} />
       </StyledRadioGroup>
 
       <Box flexGrow={1} />
 
       <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
-      <Fade in={!!valueRadio} timeout={100}>
-        <Tooltip title="Set question as unanswered">
-          <span>
-            <Button
-              sx={{
-                color: grey['500'],
-                '&:hover': { backgroundColor: grey['200'] }
-              }}
-              disabled={readOnly}
-              onClick={onClear}>
-              Clear
-            </Button>
-          </span>
-        </Tooltip>
-      </Fade>
+      {hideClearButton ? null : (
+        <ClearInputButton buttonShown={!!valueRadio} readOnly={readOnly} onClear={onClear} />
+      )}
     </Box>
   );
 }

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

@@ -27,7 +27,8 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
@@ -41,13 +42,22 @@ interface ChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -134,6 +144,7 @@ function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
           isTabled={isTabled}
           readOnly={readOnly}
           calcExpUpdated={calcExpUpdated}
+          renderingExtensions={renderingExtensions}
           onFocusLinkId={() => onFocusLinkId(qItem.linkId)}
           onSelectChange={handleChange}
         />

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

@@ -21,6 +21,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import type { PropsWithIsRepeatedAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface ChoiceRadioAnswerOptionViewProps extends PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
@@ -65,17 +66,22 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
       data-test="q-item-choice-radio-answer-option-box"
       data-linkid={qItem.linkId}
       onClick={onFocusLinkId}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <ChoiceRadioAnswerOptionFields
-          qItem={qItem}
-          options={options}
-          valueRadio={valueChoice}
-          readOnly={readOnly}
-          calcExpUpdated={calcExpUpdated}
-          onCheckedChange={onCheckedChange}
-          onClear={onClear}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <ChoiceRadioAnswerOptionFields
+            qItem={qItem}
+            options={options}
+            valueRadio={valueChoice}
+            readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
+            onCheckedChange={onCheckedChange}
+            onClear={onClear}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

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

@@ -27,10 +27,8 @@ import { getChoiceOrientation } from '../../../utils/choice';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 import Box from '@mui/material/Box';
 import RadioOptionList from '../ItemParts/RadioOptionList';
-import Tooltip from '@mui/material/Tooltip';
-import Button from '@mui/material/Button';
-import { grey } from '@mui/material/colors';
-import Fade from '@mui/material/Fade';
+import ClearInputButton from '../ItemParts/ClearInputButton';
+import { useRendererStylingStore } from '../../../stores';
 
 interface ChoiceRadioAnswerValueSetFieldsProps {
   qItem: QuestionnaireItem;
@@ -55,6 +53,9 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
     onClear
   } = props;
 
+  const inputsFlexGrow = useRendererStylingStore.use.inputsFlexGrow();
+  const hideClearButton = useRendererStylingStore.use.hideClearButton();
+
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
   if (options.length > 0) {
@@ -64,30 +65,20 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
           id={qItem.linkId}
           row={orientation === ChoiceItemOrientation.Horizontal}
           name={qItem.text}
+          sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}
           onChange={(e) => onCheckedChange(e.target.value)}
           value={valueRadio}
           data-test="q-item-radio-group">
-          <RadioOptionList options={options} readOnly={readOnly} />
+          <RadioOptionList options={options} readOnly={readOnly} fullWidth={inputsFlexGrow} />
         </StyledRadioGroup>
 
         <Box flexGrow={1} />
 
         <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
-        <Fade in={!!valueRadio} timeout={100}>
-          <Tooltip title="Set question as unanswered">
-            <span>
-              <Button
-                sx={{
-                  color: grey['500'],
-                  '&:hover': { backgroundColor: grey['200'] }
-                }}
-                disabled={readOnly}
-                onClick={onClear}>
-                Clear
-              </Button>
-            </span>
-          </Tooltip>
-        </Fade>
+
+        {hideClearButton ? null : (
+          <ClearInputButton buttonShown={!!valueRadio} readOnly={readOnly} onClear={onClear} />
+        )}
       </Box>
     );
   }

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

@@ -24,17 +24,20 @@ import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import ChoiceRadioAnswerValueSetFields from './ChoiceRadioAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
 import useCodingCalculatedExpression from '../../../hooks/useCodingCalculatedExpression';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface ChoiceRadioAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
@@ -106,18 +109,23 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
       data-test="q-item-choice-radio-answer-value-set-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <ChoiceRadioAnswerValueSetFields
-          qItem={qItem}
-          options={options}
-          valueRadio={valueRadio}
-          readOnly={readOnly}
-          calcExpUpdated={calcExpUpdated}
-          terminologyError={terminologyError}
-          onCheckedChange={handleChange}
-          onClear={handleClear}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <ChoiceRadioAnswerValueSetFields
+            qItem={qItem}
+            options={options}
+            valueRadio={valueRadio}
+            readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
+            terminologyError={terminologyError}
+            onCheckedChange={handleChange}
+            onClear={handleClear}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

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

@@ -17,24 +17,25 @@
 
 import React from 'react';
 import Radio from '@mui/material/Radio';
-import { StyledFormControlLabel } from '../../Box.styles';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 interface ChoiceRadioSingleProps {
   value: string;
   label: string;
   readOnly: boolean;
+  fullWidth: boolean;
 }
 
 function ChoiceRadioSingle(props: ChoiceRadioSingleProps) {
-  const { value, label, readOnly } = props;
+  const { value, label, readOnly, fullWidth } = props;
 
   return (
-    <StyledFormControlLabel
+    <FormControlLabel
+      sx={{ width: fullWidth ? '100%' : 'unset' }}
       disabled={readOnly}
       value={value}
       control={<Radio size="small" />}
       label={label}
-      sx={{ mr: 3 }}
     />
   );
 }

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

@@ -17,15 +17,21 @@
 
 import React, { Fragment } from 'react';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
-import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
+import type {
+  PropsWithIsTabledAttribute,
+  PropsWithRenderingExtensionsAttribute
+} from '../../../interfaces/renderProps.interface';
+import { StandardTextField } from '../Textfield.styles';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 import Autocomplete from '@mui/material/Autocomplete';
 import { getAnswerOptionLabel } from '../../../utils/openChoice';
 import { compareAnswerOptionValue } from '../../../utils/choice';
+import { useRendererStylingStore } from '../../../stores';
+import Typography from '@mui/material/Typography';
 
-interface ChoiceSelectAnswerOptionFieldsProps extends PropsWithIsTabledAttribute {
+interface ChoiceSelectAnswerOptionFieldsProps
+  extends PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
   options: QuestionnaireItemAnswerOption[];
   valueSelect: QuestionnaireItemAnswerOption | null;
@@ -35,9 +41,20 @@ interface ChoiceSelectAnswerOptionFieldsProps extends PropsWithIsTabledAttribute
 }
 
 function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsProps) {
-  const { qItem, options, valueSelect, readOnly, calcExpUpdated, isTabled, onSelectChange } = props;
+  const {
+    qItem,
+    options,
+    valueSelect,
+    readOnly,
+    calcExpUpdated,
+    isTabled,
+    renderingExtensions,
+    onSelectChange
+  } = props;
 
-  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
+  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   return (
     <Autocomplete
@@ -49,11 +66,12 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
       onChange={(_, newValue) => onSelectChange(newValue)}
       openOnFocus
       autoHighlight
-      sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
+      sx={{ maxWidth: !isTabled ? textFieldWidth : 3000, minWidth: 160, flexGrow: 1 }}
       size="small"
       disabled={readOnly}
       renderInput={(params) => (
         <StandardTextField
+          textFieldWidth={textFieldWidth}
           isTabled={isTabled}
           label={displayPrompt}
           placeholder={entryFormat}
@@ -64,7 +82,9 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
               <>
                 {params.InputProps.endAdornment}
                 <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
-                {displayUnit}
+                <Typography color={readOnly ? 'text.disabled' : 'text.secondary'}>
+                  {displayUnit}
+                </Typography>
               </>
             )
           }}

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

@@ -28,7 +28,8 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
@@ -40,13 +41,22 @@ interface ChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -106,6 +116,7 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
       calcExpUpdated={calcExpUpdated}
       isRepeated={isRepeated}
       isTabled={isTabled}
+      renderingExtensions={renderingExtensions}
       onFocusLinkId={() => onFocusLinkId(qItem.linkId)}
       onSelectChange={handleChange}
     />

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

@@ -20,15 +20,18 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import type {
   PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledAttribute
+  PropsWithIsTabledAttribute,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import { findInAnswerOptions } from '../../../utils/choice';
 import ChoiceSelectAnswerOptionFields from './ChoiceSelectAnswerOptionFields';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface ChoiceSelectAnswerOptionViewProps
   extends PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
   options: QuestionnaireItemAnswerOption[];
   valueChoice: string | null;
@@ -45,6 +48,7 @@ function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps)
     valueChoice,
     isRepeated,
     isTabled,
+    renderingExtensions,
     readOnly,
     calcExpUpdated,
     onFocusLinkId,
@@ -65,6 +69,7 @@ function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps)
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
+        renderingExtensions={renderingExtensions}
         onSelectChange={onSelectChange}
       />
     );
@@ -75,17 +80,23 @@ function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps)
       data-test="q-item-choice-select-answer-option-box"
       data-linkid={qItem.linkId}
       onClick={onFocusLinkId}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <ChoiceSelectAnswerOptionFields
-          qItem={qItem}
-          options={options}
-          valueSelect={valueSelect}
-          readOnly={readOnly}
-          calcExpUpdated={calcExpUpdated}
-          isTabled={isTabled}
-          onSelectChange={onSelectChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <ChoiceSelectAnswerOptionFields
+            qItem={qItem}
+            options={options}
+            valueSelect={valueSelect}
+            readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
+            isTabled={isTabled}
+            renderingExtensions={renderingExtensions}
+            onSelectChange={onSelectChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }