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

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

@@ -17,17 +17,22 @@
 
 import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
-import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
+import { StandardTextField } from '../Textfield.styles';
 import { StyledAlert } from '../../Alert.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Typography from '@mui/material/Typography';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithIsTabledAttribute,
+  PropsWithRenderingExtensionsAttribute
+} from '../../../interfaces/renderProps.interface';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+import { useRendererStylingStore } from '../../../stores';
 
-interface ChoiceSelectAnswerValueSetFieldsProps extends PropsWithIsTabledAttribute {
+interface ChoiceSelectAnswerValueSetFieldsProps
+  extends PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
   codings: Coding[];
   valueCoding: Coding | null;
@@ -46,10 +51,13 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
     readOnly,
     calcExpUpdated,
     isTabled,
+    renderingExtensions,
     onSelectChange
   } = props;
 
-  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
+  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   if (codings.length > 0) {
     return (
@@ -61,11 +69,12 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
         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}
@@ -76,7 +85,9 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
                 <>
                   {params.InputProps.endAdornment}
                   <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
-                  {displayUnit}
+                  <Typography color={readOnly ? 'text.disabled' : 'text.secondary'}>
+                    {displayUnit}
+                  </Typography>
                 </>
               )
             }}

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

@@ -25,7 +25,8 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import ChoiceSelectAnswerValueSetFields from './ChoiceSelectAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
@@ -33,18 +34,28 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
 import useCodingCalculatedExpression from '../../../hooks/useCodingCalculatedExpression';
 import { convertCodingsToAnswerOptions, findInAnswerOptions } from '../../../utils/choice';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface ChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -126,6 +137,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
+        renderingExtensions={renderingExtensions}
         onSelectChange={handleChange}
       />
     );
@@ -135,18 +147,24 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
     <FullWidthFormComponentBox
       data-test="q-item-choice-select-answer-value-set-box"
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <ChoiceSelectAnswerValueSetFields
-          qItem={qItem}
-          codings={codings}
-          valueCoding={valueCoding}
-          terminologyError={terminologyError}
-          readOnly={readOnly}
-          calcExpUpdated={calcExpUpdated}
-          isTabled={isTabled}
-          onSelectChange={handleChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <ChoiceSelectAnswerValueSetFields
+            qItem={qItem}
+            codings={codings}
+            valueCoding={valueCoding}
+            terminologyError={terminologyError}
+            readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
+            isTabled={isTabled}
+            renderingExtensions={renderingExtensions}
+            onSelectChange={handleChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

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

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as ChoiceRadioSingle } from './ChoiceRadioSingle';

package/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateField.tsx

@@ -22,6 +22,7 @@ import type { PropsWithIsTabledAttribute } from '../../../../interfaces/renderPr
 import { StandardTextField } from '../../Textfield.styles';
 import DatePicker from './DatePicker';
 import Tooltip from '@mui/material/Tooltip';
+import { useRendererStylingStore } from '../../../../stores';
 
 interface CustomDateFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -53,6 +54,8 @@ function CustomDateField(props: CustomDateFieldProps) {
     onSelectDate
   } = props;
 
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
   const anchorRef: RefObject<HTMLDivElement> = useRef(null);
 
   return (
@@ -61,6 +64,7 @@ function CustomDateField(props: CustomDateFieldProps) {
         id={linkId + '-date'}
         ref={anchorRef}
         fullWidth
+        textFieldWidth={textFieldWidth}
         isTabled={isTabled}
         value={input}
         error={!!feedback}

package/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateItem.tsx

@@ -20,11 +20,11 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useReadOnly from '../../../../hooks/useReadOnly';
-import useRenderingExtensions from '../../../../hooks/useRenderingExtensions';
 import { FullWidthFormComponentBox } from '../../../Box.styles';
 import ItemFieldGrid from '../../ItemParts/ItemFieldGrid';
 import {
@@ -36,23 +36,33 @@ import { createEmptyQrItem } from '../../../../utils/qrItem';
 import useDateValidation from '../../../../hooks/useDateValidation';
 import CustomDateField from './CustomDateField';
 import { useQuestionnaireStore } from '../../../../stores';
+import { ItemLabelWrapper } from '../../ItemParts';
 
 interface CustomDateItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithParentIsReadOnlyAttribute {
+    PropsWithParentIsReadOnlyAttribute,
+    PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function CustomDateItem(props: CustomDateItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const { displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
   const answerKey = qrItem?.answer?.[0].id;
@@ -124,22 +134,27 @@ function CustomDateItem(props: CustomDateItemProps) {
       data-test="q-item-date-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <CustomDateField
-          linkId={qItem.linkId}
-          valueDate={displayDate}
-          input={input}
-          feedback={errorFeedback ?? ''}
-          isFocused={focused}
-          displayPrompt={displayPrompt}
-          entryFormat={entryFormat}
-          readOnly={readOnly}
-          isTabled={isTabled}
-          setFocused={setFocused}
-          onInputChange={handleInputChange}
-          onSelectDate={handleSelectDate}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <CustomDateField
+            linkId={qItem.linkId}
+            valueDate={displayDate}
+            input={input}
+            feedback={errorFeedback ?? ''}
+            isFocused={focused}
+            displayPrompt={displayPrompt}
+            entryFormat={entryFormat}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            setFocused={setFocused}
+            onInputChange={handleInputChange}
+            onSelectDate={handleSelectDate}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx

@@ -20,11 +20,11 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useReadOnly from '../../../../hooks/useReadOnly';
-import useRenderingExtensions from '../../../../hooks/useRenderingExtensions';
 import { FullWidthFormComponentBox } from '../../../Box.styles';
 import ItemFieldGrid from '../../ItemParts/ItemFieldGrid';
 import { createEmptyQrItem } from '../../../../utils/qrItem';
@@ -43,23 +43,33 @@ import {
 import useTimeValidation from '../../../../hooks/useTimeValidation';
 import useDateNonEmptyValidation from '../../../../hooks/useDateTimeNonEmpty';
 import DateTimeField from './DateTimeField';
+import { ItemLabelWrapper } from '../../ItemParts';
 
 interface CustomDateTimeItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function CustomDateTimeItem(props: CustomDateTimeItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const { displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
   const answerKey = qrItem?.answer?.[0].id;
@@ -200,27 +210,32 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
       data-test="q-item-datetime-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <DateTimeField
-          linkId={qItem.linkId}
-          displayDate={displayDate}
-          dateInput={dateInput}
-          timeInput={timeInput}
-          periodInput={periodInput}
-          is24HourNotation={is24HourNotation}
-          dateFeedback={dateFeedback ?? ''}
-          timeFeedback={timeFeedback ?? ''}
-          dateFocused={dateFocused}
-          displayPrompt={displayPrompt}
-          entryFormat={entryFormat}
-          readOnly={readOnly}
-          isTabled={isTabled}
-          onDateInputChange={handleDateInputChange}
-          onSelectDate={handleSelectDate}
-          setDateFocused={setDateFocused}
-          onTimeInputChange={handleTimeInputChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <DateTimeField
+            linkId={qItem.linkId}
+            displayDate={displayDate}
+            dateInput={dateInput}
+            timeInput={timeInput}
+            periodInput={periodInput}
+            is24HourNotation={is24HourNotation}
+            dateFeedback={dateFeedback ?? ''}
+            timeFeedback={timeFeedback ?? ''}
+            dateFocused={dateFocused}
+            displayPrompt={displayPrompt}
+            entryFormat={entryFormat}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            onDateInputChange={handleDateInputChange}
+            onSelectDate={handleSelectDate}
+            setDateFocused={setDateFocused}
+            onTimeInputChange={handleTimeInputChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomTimeField.tsx

@@ -15,27 +15,9 @@
  * limitations under the License.
  */
 
-/*
- * Copyright 2024 Commonwealth Scientific and Industrial Research
- * Organisation (CSIRO) ABN 41 687 119 230.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { ChangeEvent } from 'react';
 import React from 'react';
 import type { PropsWithIsTabledAttribute } from '../../../../interfaces/renderProps.interface';
-import { TEXT_FIELD_WIDTH } from '../../Textfield.styles';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
 import Select from '@mui/material/Select';
@@ -43,6 +25,7 @@ import MenuItem from '@mui/material/MenuItem';
 import MuiTextField from '../../TextItem/MuiTextField';
 import { grey } from '@mui/material/colors';
 import Typography from '@mui/material/Typography';
+import { useRendererStylingStore } from '../../../../stores';
 
 interface CustomTimeFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -70,6 +53,8 @@ function CustomTimeField(props: CustomTimeFieldProps) {
     onPeriodChange
   } = props;
 
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
   return (
     <Tooltip title={isTabled ? feedback : ''}>
       <>
@@ -77,7 +62,7 @@ function CustomTimeField(props: CustomTimeFieldProps) {
           display="flex"
           alignItems="center"
           columnGap={1}
-          sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}>
+          sx={{ maxWidth: !isTabled ? textFieldWidth : 3000, minWidth: 160 }}>
           <MuiTextField
             id={linkId + '-time'}
             value={timeInput}

package/src/components/FormComponents/DecimalItem/DecimalField.tsx

@@ -20,6 +20,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 DecimalFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -47,6 +49,8 @@ function DecimalField(props: DecimalFieldProps) {
     onInputChange
   } = props;
 
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
   return (
     <StandardTextField
       id={linkId}
@@ -56,6 +60,7 @@ function DecimalField(props: DecimalFieldProps) {
       disabled={readOnly}
       label={displayPrompt}
       placeholder={entryFormat === '' ? '0.0' : entryFormat}
+      textFieldWidth={textFieldWidth}
       fullWidth
       isTabled={isTabled}
       size="small"
@@ -64,7 +69,9 @@ function DecimalField(props: DecimalFieldProps) {
         endAdornment: (
           <InputAdornment position={'end'}>
             <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
-            {displayUnit}
+            <Typography color={readOnly ? 'text.disabled' : 'text.secondary'}>
+              {displayUnit}
+            </Typography>
           </InputAdornment>
         )
       }}

package/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -20,10 +20,10 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
@@ -40,24 +40,34 @@ import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedE
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
 import Box from '@mui/material/Box';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface DecimalItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function DecimalItem(props: DecimalItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const precision = getDecimalPrecision(qItem);
-  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
   const answerKey = qrItem?.answer?.[0].id;
@@ -157,20 +167,25 @@ function DecimalItem(props: DecimalItemProps) {
       data-test="q-item-decimal-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <DecimalField
-          linkId={qItem.linkId}
-          input={input}
-          feedback={feedback}
-          displayPrompt={displayPrompt}
-          displayUnit={displayUnit}
-          entryFormat={entryFormat}
-          readOnly={readOnly}
-          calcExpUpdated={calcExpUpdated}
-          isTabled={isTabled}
-          onInputChange={handleInputChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <DecimalField
+            linkId={qItem.linkId}
+            input={input}
+            feedback={feedback}
+            displayPrompt={displayPrompt}
+            displayUnit={displayUnit}
+            entryFormat={entryFormat}
+            readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
+            isTabled={isTabled}
+            onInputChange={handleInputChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

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

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as DecimalField } from './DecimalField';

package/src/components/FormComponents/DisplayItem/DisplayItem.tsx

@@ -21,13 +21,18 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import { isSpecificItemControl } from '../../../utils';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import { useQuestionnaireStore } from '../../../stores';
+import useReadOnly from '../../../hooks/useReadOnly';
+import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
+import Divider from '@mui/material/Divider';
 
-interface DisplayItemProps {
+interface DisplayItemProps extends PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
 }
 
 const DisplayItem = memo(function DisplayItem(props: DisplayItemProps) {
-  const { qItem } = props;
+  const { qItem, parentIsReadOnly } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -36,12 +41,22 @@ const DisplayItem = memo(function DisplayItem(props: DisplayItemProps) {
     return null;
   }
 
+  const isFlyover = isSpecificItemControl(qItem, 'flyover');
+  if (isFlyover) {
+    return null;
+  }
+
+  const isDivider = isSpecificItemControl(qItem, 'divider');
+  if (isDivider) {
+    return <Divider sx={{ mt: 1.5, mb: 1 }} />;
+  }
+
   return (
     <FullWidthFormComponentBox
       data-test="q-item-display-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <LabelWrapper qItem={qItem} readOnly={false} />
+      <LabelWrapper qItem={qItem} readOnly={readOnly} />
     </FullWidthFormComponentBox>
   );
 });