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

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

@@ -29,6 +29,7 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute,
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import OpenChoiceCheckboxAnswerValueSetItem from './OpenChoiceCheckboxAnswerValueSetItem';
@@ -38,6 +39,7 @@ interface OpenChoiceItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
@@ -45,8 +47,16 @@ interface OpenChoiceItemSwitcherProps
 }
 
 function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
-    props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   switch (getOpenChoiceControlType(qItem)) {
     case OpenChoiceItemControl.Checkbox:
@@ -56,6 +66,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={qItem['repeats'] ?? false}
+            renderingExtensions={renderingExtensions}
             showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
@@ -67,6 +78,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={qItem['repeats'] ?? false}
+            renderingExtensions={renderingExtensions}
             showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
@@ -80,6 +92,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={qItem['repeats'] ?? false}
+            renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
@@ -90,6 +103,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={qItem['repeats'] ?? false}
+            renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
@@ -102,6 +116,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          renderingExtensions={renderingExtensions}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
@@ -114,6 +129,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
             qrItem={qrItem}
             isRepeated={isRepeated}
             isTabled={isTabled}
+            renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
@@ -125,6 +141,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
             qrItem={qrItem}
             isRepeated={isRepeated}
             isTabled={isTabled}
+            renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />

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

@@ -23,6 +23,7 @@ import { StyledRadioGroup } from '../Item.styles';
 import RadioButtonWithOpenLabel from '../ItemParts/RadioButtonWithOpenLabel';
 import RadioOptionList from '../ItemParts/RadioOptionList';
 import { getChoiceOrientation } from '../../../utils/choice';
+import { useRendererStylingStore } from '../../../stores';
 
 interface OpenChoiceRadioAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;
@@ -47,6 +48,8 @@ function OpenChoiceRadioAnswerOptionFields(props: OpenChoiceRadioAnswerOptionFie
     onValueChange
   } = props;
 
+  const inputsFlexGrow = useRendererStylingStore.use.inputsFlexGrow();
+
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
   return (
@@ -54,10 +57,11 @@ function OpenChoiceRadioAnswerOptionFields(props: OpenChoiceRadioAnswerOptionFie
       id={qItem.linkId}
       row={orientation === ChoiceItemOrientation.Horizontal}
       name={qItem.text}
+      sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}
       onChange={(e: ChangeEvent<HTMLInputElement>) => onValueChange(e.target.value, null)}
       value={valueRadio}
       data-test="q-item-radio-group">
-      <RadioOptionList options={options} readOnly={readOnly} />
+      <RadioOptionList options={options} readOnly={readOnly} fullWidth={inputsFlexGrow} />
 
       {openLabelText ? (
         <RadioButtonWithOpenLabel

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

@@ -25,17 +25,20 @@ import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import OpenChoiceRadioAnswerOptionFields from './OpenChoiceRadioAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface OpenChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithParentIsReadOnlyAttribute {
+    PropsWithParentIsReadOnlyAttribute,
+    PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
@@ -132,18 +135,23 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
       data-test="q-item-open-choice-radio-answer-option-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <OpenChoiceRadioAnswerOptionFields
-          qItem={qItem}
-          options={options}
-          valueRadio={valueRadio}
-          openLabelText={openLabelText}
-          openLabelValue={openLabelValue}
-          openLabelSelected={openLabelSelected}
-          readOnly={readOnly}
-          onValueChange={handleValueChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <OpenChoiceRadioAnswerOptionFields
+            qItem={qItem}
+            options={options}
+            valueRadio={valueRadio}
+            openLabelText={openLabelText}
+            openLabelValue={openLabelValue}
+            openLabelSelected={openLabelSelected}
+            readOnly={readOnly}
+            onValueChange={handleValueChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

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

@@ -27,6 +27,7 @@ import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 import { StyledAlert } from '../../Alert.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Typography from '@mui/material/Typography';
+import { useRendererStylingStore } from '../../../stores';
 
 interface OpenChoiceRadioAnswerValueSetFieldsProps {
   qItem: QuestionnaireItem;
@@ -53,6 +54,8 @@ function OpenChoiceRadioAnswerValueSetFields(props: OpenChoiceRadioAnswerValueSe
     onValueChange
   } = props;
 
+  const inputsFlexGrow = useRendererStylingStore.use.inputsFlexGrow();
+
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
   if (options.length > 0) {
@@ -61,10 +64,11 @@ function OpenChoiceRadioAnswerValueSetFields(props: OpenChoiceRadioAnswerValueSe
         id={qItem.linkId}
         row={orientation === ChoiceItemOrientation.Horizontal}
         name={qItem.text}
+        sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}
         onChange={(e: ChangeEvent<HTMLInputElement>) => onValueChange(e.target.value, null)}
         value={valueRadio}
         data-test="q-item-radio-group">
-        <RadioOptionList options={options} readOnly={readOnly} />
+        <RadioOptionList options={options} readOnly={readOnly} fullWidth={inputsFlexGrow} />
 
         {openLabelText ? (
           <RadioButtonWithOpenLabel

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

@@ -29,18 +29,21 @@ import {
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import OpenChoiceRadioAnswerValueSetFields from './OpenChoiceRadioAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface OpenChoiceRadioAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithParentIsReadOnlyAttribute {
+    PropsWithParentIsReadOnlyAttribute,
+    PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
@@ -140,19 +143,24 @@ function OpenChoiceRadioAnswerValueSetItem(props: OpenChoiceRadioAnswerValueSetI
       data-test="q-item-open-choice-radio-answer-option-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <OpenChoiceRadioAnswerValueSetFields
-          qItem={qItem}
-          options={options}
-          valueRadio={valueRadio}
-          openLabelText={openLabelText}
-          openLabelValue={openLabelValue}
-          openLabelSelected={openLabelSelected}
-          readOnly={readOnly}
-          terminologyError={terminologyError}
-          onValueChange={handleValueChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <OpenChoiceRadioAnswerValueSetFields
+            qItem={qItem}
+            options={options}
+            valueRadio={valueRadio}
+            openLabelText={openLabelText}
+            openLabelValue={openLabelValue}
+            openLabelSelected={openLabelSelected}
+            readOnly={readOnly}
+            terminologyError={terminologyError}
+            onValueChange={handleValueChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

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

@@ -1,17 +1,20 @@
 import React from 'react';
 import { getAnswerOptionLabel } from '../../../utils/openChoice';
-import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
+import { StandardTextField } from '../Textfield.styles';
 import Autocomplete from '@mui/material/Autocomplete';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import type {
   PropsWithIsTabledAttribute,
-  PropsWithParentIsReadOnlyAttribute
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { useRendererStylingStore } from '../../../stores';
+import Typography from '@mui/material/Typography';
 
 interface OpenChoiceSelectAnswerOptionFieldProps
   extends PropsWithIsTabledAttribute,
-    PropsWithParentIsReadOnlyAttribute {
+    PropsWithParentIsReadOnlyAttribute,
+    PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
   options: QuestionnaireItemAnswerOption[];
   valueSelect: QuestionnaireItemAnswerOption | null;
@@ -20,9 +23,11 @@ interface OpenChoiceSelectAnswerOptionFieldProps
 }
 
 function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFieldProps) {
-  const { qItem, options, valueSelect, readOnly, isTabled, onChange } = props;
+  const { qItem, options, valueSelect, readOnly, isTabled, renderingExtensions, onChange } = props;
 
-  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
+  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   return (
     <Autocomplete
@@ -33,11 +38,12 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
       onChange={(_, newValue) => onChange(newValue)}
       freeSolo
       autoHighlight
-      sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
+      sx={{ maxWidth: !isTabled ? textFieldWidth : 3000, minWidth: 160, flexGrow: 1 }}
       disabled={readOnly}
       size="small"
       renderInput={(params) => (
         <StandardTextField
+          textFieldWidth={textFieldWidth}
           isTabled={isTabled}
           label={displayPrompt}
           placeholder={entryFormat}
@@ -47,7 +53,9 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
             endAdornment: (
               <>
                 {params.InputProps.endAdornment}
-                {displayUnit}
+                <Typography color={readOnly ? 'text.disabled' : 'text.secondary'}>
+                  {displayUnit}
+                </Typography>
               </>
             )
           }}

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

@@ -27,24 +27,35 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import OpenChoiceSelectAnswerOptionField from './OpenChoiceSelectAnswerOptionField';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface OpenChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -102,6 +113,7 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
         valueSelect={valueSelect}
         readOnly={readOnly}
         isTabled={isTabled}
+        renderingExtensions={renderingExtensions}
         onChange={handleChange}
       />
     );
@@ -112,16 +124,22 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
       data-test="q-item-open-choice-select-answer-option-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <OpenChoiceSelectAnswerOptionField
-          qItem={qItem}
-          options={answerOptions}
-          valueSelect={valueSelect}
-          readOnly={readOnly}
-          isTabled={isTabled}
-          onChange={handleChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <OpenChoiceSelectAnswerOptionField
+            qItem={qItem}
+            options={answerOptions}
+            valueSelect={valueSelect}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            renderingExtensions={renderingExtensions}
+            onChange={handleChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

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

@@ -1,18 +1,20 @@
 import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
-import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
+import { StandardTextField } from '../Textfield.styles';
 import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsTabledAttribute,
-  PropsWithParentIsReadOnlyAttribute
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
+import { useRendererStylingStore } from '../../../stores';
 
 interface OpenChoiceSelectAnswerValueSetFieldProps
   extends PropsWithIsTabledAttribute,
-    PropsWithParentIsReadOnlyAttribute {
+    PropsWithParentIsReadOnlyAttribute,
+    PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
   options: Coding[];
   valueSelect: Coding | null;
@@ -22,10 +24,20 @@ interface OpenChoiceSelectAnswerValueSetFieldProps
 }
 
 function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueSetFieldProps) {
-  const { qItem, options, valueSelect, terminologyError, readOnly, isTabled, onValueChange } =
-    props;
+  const {
+    qItem,
+    options,
+    valueSelect,
+    terminologyError,
+    readOnly,
+    isTabled,
+    renderingExtensions,
+    onValueChange
+  } = props;
 
-  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
+  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   return (
     <>
@@ -40,11 +52,12 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
         onInputChange={(_, newValue) => onValueChange(newValue)}
         freeSolo
         autoHighlight
-        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
+        sx={{ maxWidth: !isTabled ? textFieldWidth : 3000, minWidth: 160, flexGrow: 1 }}
         disabled={readOnly}
         size="small"
         renderInput={(params) => (
           <StandardTextField
+            textFieldWidth={textFieldWidth}
             isTabled={isTabled}
             label={displayPrompt}
             placeholder={entryFormat}
@@ -54,7 +67,9 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
               endAdornment: (
                 <>
                   {params.InputProps.endAdornment}
-                  {displayUnit}
+                  <Typography color={readOnly ? 'text.disabled' : 'text.secondary'}>
+                    {displayUnit}
+                  </Typography>
                 </>
               )
             }}

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

@@ -24,24 +24,35 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import OpenChoiceSelectAnswerValueSetField from './OpenChoiceSelectAnswerValueSetField';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface OpenChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSetItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -87,6 +98,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
         valueSelect={valueSelect}
         terminologyError={terminologyError}
         isTabled={isTabled}
+        renderingExtensions={renderingExtensions}
         readOnly={readOnly}
         onValueChange={handleValueChange}
       />
@@ -98,17 +110,23 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
       data-test="q-item-open-choice-select-answer-value-set-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <OpenChoiceSelectAnswerValueSetField
-          qItem={qItem}
-          options={codings}
-          valueSelect={valueSelect}
-          terminologyError={terminologyError}
-          isTabled={isTabled}
-          readOnly={readOnly}
-          onValueChange={handleValueChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <OpenChoiceSelectAnswerValueSetField
+            qItem={qItem}
+            options={codings}
+            valueSelect={valueSelect}
+            terminologyError={terminologyError}
+            isTabled={isTabled}
+            renderingExtensions={renderingExtensions}
+            readOnly={readOnly}
+            onValueChange={handleValueChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/QuantityItem/QuantityComparatorField.tsx

@@ -5,6 +5,7 @@ import MuiTextField from '../TextItem/MuiTextField';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import type { Quantity } from 'fhir/r4';
+import { useRendererStylingStore } from '../../../stores';
 
 interface QuantityComparatorFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -17,6 +18,11 @@ interface QuantityComparatorFieldProps extends PropsWithIsTabledAttribute {
 function QuantityComparatorField(props: QuantityComparatorFieldProps) {
   const { linkId, options, valueSelect, readOnly, onChange } = props;
 
+  const hideQuantityComparatorField = useRendererStylingStore.use.hideQuantityComparatorField();
+  if (hideQuantityComparatorField) {
+    return null;
+  }
+
   return (
     <Box>
       <Autocomplete

package/src/components/FormComponents/QuantityItem/QuantityField.tsx

@@ -3,6 +3,8 @@ import InputAdornment from '@mui/material/InputAdornment';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 import { StandardTextField } from '../Textfield.styles';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import { useRendererStylingStore } from '../../../stores';
+import Typography from '@mui/material/Typography';
 
 interface QuantityFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -30,6 +32,8 @@ function QuantityField(props: QuantityFieldProps) {
     onInputChange
   } = props;
 
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
   return (
     <StandardTextField
       id={linkId}
@@ -40,6 +44,7 @@ function QuantityField(props: QuantityFieldProps) {
       label={displayPrompt}
       placeholder={entryFormat === '' ? '0.0' : entryFormat}
       fullWidth
+      textFieldWidth={textFieldWidth}
       isTabled={isTabled}
       size="small"
       inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
@@ -47,7 +52,9 @@ function QuantityField(props: QuantityFieldProps) {
         endAdornment: (
           <InputAdornment position={'end'}>
             <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
-            {displayUnit}
+            <Typography color={readOnly ? 'text.disabled' : 'text.secondary'}>
+              {displayUnit}
+            </Typography>
           </InputAdornment>
         )
       }}