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

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

@@ -24,6 +24,9 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import { getContextDisplays } from '../../../utils/tabs';
 import ContextDisplayItem from '../ItemParts/ContextDisplayItem';
 import ItemLabelText from '../ItemParts/ItemLabelText';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { useRendererStylingStore } from '../../../stores';
+import RequiredAsterisk from '../ItemParts/RequiredAsterisk';
 
 interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
@@ -35,6 +38,9 @@ interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
 const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
   const { qItem, readOnly, tabIsMarkedAsComplete, pageIsMarkedAsComplete, isRepeated } = props;
 
+  const requiredIndicatorPosition = useRendererStylingStore.use.requiredIndicatorPosition();
+
+  const { required } = useRenderingExtensions(qItem);
   const contextDisplayItems = getContextDisplays(qItem);
 
   if (isRepeated) {
@@ -47,13 +53,28 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
   return (
     <>
       <Box display="flex" alignItems="center" width="100%">
-        <Typography
-          variant="h6"
-          fontSize={isTabHeading || isPageHeading ? 16 : 15}
-          color={readOnly && (!isTabHeading || !isPageHeading) ? 'text.secondary' : 'text.primary'}>
-          <ItemLabelText qItem={qItem} />
-        </Typography>
+        <Box position="relative">
+          {required && requiredIndicatorPosition === 'start' ? (
+            <RequiredAsterisk
+              sx={{ position: 'absolute', top: 0, left: -8 }} // Adjust top and left values as needed
+            >
+              *
+            </RequiredAsterisk>
+          ) : null}
+          <Box display="flex" columnGap={0.75} justifyContent="space-between" alignItems="center">
+            <Typography
+              variant="h6"
+              fontSize={isTabHeading || isPageHeading ? 16 : 15}
+              color={
+                readOnly && (!isTabHeading || !isPageHeading) ? 'text.secondary' : 'text.primary'
+              }>
+              <ItemLabelText qItem={qItem} readOnly={readOnly} />
+            </Typography>
+          </Box>
+        </Box>
+
         <Box flexGrow={1} />
+
         <Box display="flex" columnGap={0.5} mx={1}>
           {contextDisplayItems.map((item) => {
             return <ContextDisplayItem key={item.linkId} displayItem={item} />;

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

@@ -39,6 +39,7 @@ interface GroupItemProps
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
   groupCardElevation: number;
+  disableCardView?: boolean;
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
@@ -53,6 +54,7 @@ function GroupItem(props: GroupItemProps) {
     qrItem,
     isRepeated,
     groupCardElevation,
+    disableCardView,
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
@@ -103,6 +105,7 @@ function GroupItem(props: GroupItemProps) {
       qrItemsByIndex={qrItemsByIndex}
       isRepeated={isRepeated}
       groupCardElevation={groupCardElevation}
+      disableCardView={disableCardView}
       tabIsMarkedAsComplete={tabIsMarkedAsComplete}
       tabs={tabs}
       currentTabIndex={currentTabIndex}

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

@@ -31,6 +31,7 @@ import SingleItem from '../SingleItem/SingleItem';
 import useHidden from '../../../hooks/useHidden';
 import GroupItem from './GroupItem';
 import GridGroup from '../GridGroup/GridGroup';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface GroupItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
@@ -54,11 +55,36 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
     onQrRepeatGroupChange
   } = props;
 
+  const qItemOverrideComponents = useQuestionnaireStore.use.qItemOverrideComponents();
+  const QItemOverrideComponent = qItemOverrideComponents[qItem.linkId];
+
   const itemIsHidden = useHidden(qItem, parentRepeatGroupIndex);
   if (itemIsHidden) {
     return null;
   }
 
+  // If a qItem (type=group) override component is defined for this item, render it
+  // Don't get too strict with the "typeof" checks for now
+  if (
+    qItem.type === 'group' &&
+    QItemOverrideComponent &&
+    typeof QItemOverrideComponent === 'function'
+  ) {
+    return (
+      <QItemOverrideComponent
+        qItem={qItem}
+        qrItem={qrItemOrItems ?? null}
+        isRepeated={!!qItem.repeats}
+        groupCardElevation={groupCardElevation}
+        parentIsReadOnly={parentIsReadOnly}
+        parentIsRepeatGroup={parentIsRepeatGroup}
+        parentRepeatGroupIndex={parentRepeatGroupIndex}
+        onQrItemChange={onQrItemChange}
+        onQrRepeatGroupChange={onQrRepeatGroupChange}
+      />
+    );
+  }
+
   // If there are multiple answers
   const hasMultipleAnswers = Array.isArray(qrItemOrItems);
   if (hasMultipleAnswers) {

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

@@ -50,6 +50,7 @@ interface GroupItemViewProps
   childQItems: QuestionnaireItem[];
   qrItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[] | undefined)[];
   groupCardElevation: number;
+  disableCardView?: boolean;
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
@@ -65,6 +66,7 @@ function GroupItemView(props: GroupItemViewProps) {
     qrItemsByIndex,
     isRepeated,
     groupCardElevation,
+    disableCardView,
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
@@ -78,7 +80,7 @@ function GroupItemView(props: GroupItemViewProps) {
     onQrRepeatGroupChange
   } = props;
 
-  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const readOnly = useReadOnly(qItem, parentIsReadOnly, parentRepeatGroupIndex);
 
   // Render collapsible group item
   // If group item is a repeating instance, do not render group item as collapsible
@@ -133,6 +135,37 @@ function GroupItemView(props: GroupItemViewProps) {
     );
   }
 
+  // Disable card view - currently only available via disablePageCardView API
+  if (disableCardView) {
+    return (
+      <QGroupContainerBox
+        cardElevation={groupCardElevation}
+        isRepeated={isRepeated}
+        data-test="q-item-group-box">
+        {childQItems.map((qItem: QuestionnaireItem, i) => {
+          const qrItemOrItems = qrItemsByIndex[i];
+
+          return (
+            <GroupItemSwitcher
+              key={qItem.linkId}
+              qItem={qItem}
+              qrItemOrItems={qrItemOrItems}
+              groupCardElevation={groupCardElevation}
+              parentIsReadOnly={readOnly}
+              parentIsRepeatGroup={parentIsRepeatGroup}
+              parentRepeatGroupIndex={parentRepeatGroupIndex}
+              onQrItemChange={onQrItemChange}
+              onQrRepeatGroupChange={onQrRepeatGroupChange}
+            />
+          );
+        })}
+        {/* Next tab button at the end of each tab group */}
+        <TabButtonsWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+        <PageButtonsWrapper currentPageIndex={currentPageIndex} pages={pages} />
+      </QGroupContainerBox>
+    );
+  }
+
   return (
     <QGroupContainerBox
       cardElevation={groupCardElevation}

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

@@ -6,6 +6,7 @@ import { useQuestionnaireStore } from '../../../stores';
 import NextPageButton from './NextPageButton';
 import PreviousPageButton from './PreviousPageButton';
 import useNextAndPreviousVisiblePages from '../../../hooks/useNextAndPreviousVisiblePages';
+import { useRendererStylingStore } from '../../../stores/rendererStylingStore';
 
 interface PageButtonsWrapperProps {
   currentPageIndex?: number;
@@ -16,6 +17,7 @@ const PageButtonsWrapper = memo(function PageButtonsWrapper(props: PageButtonsWr
   const { currentPageIndex, pages } = props;
 
   const switchPage = useQuestionnaireStore.use.switchPage();
+  const disablePageButtons = useRendererStylingStore.use.disablePageButtons();
 
   const { previousPageIndex, nextPageIndex, numOfVisiblePages } = useNextAndPreviousVisiblePages(
     currentPageIndex,
@@ -47,10 +49,16 @@ const PageButtonsWrapper = memo(function PageButtonsWrapper(props: PageButtonsWr
     window.scrollTo(0, 0);
   }
 
+  // No pages defined, do not render page buttons
   if (pagesNotDefined) {
     return null;
   }
 
+  // Disable page buttons - currently only available via disableTabButtons API
+  if (disablePageButtons) {
+    return null;
+  }
+
   const previousPageButtonHidden = previousPageIndex === null;
   const nextPageButtonHidden = nextPageIndex === null;
 

package/src/components/FormComponents/GroupItem/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 GroupItem } from './GroupItem';

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

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

package/src/components/FormComponents/IntegerItem/IntegerItem.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 useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -35,23 +35,33 @@ import { parseIntegerString } from '../../../utils/parseInputs';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface IntegerItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function IntegerItem(props: IntegerItemProps) {
-  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 { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
   const answerKey = qrItem?.answer?.[0].id;
@@ -136,20 +146,25 @@ function IntegerItem(props: IntegerItemProps) {
       data-test="q-item-integer-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <IntegerField
-          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={
+          <IntegerField
+            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/ItemParts/CheckboxSingle.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import Checkbox from '@mui/material/Checkbox';
-import { StyledFormControlLabel } from '../../Box.styles';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 interface Props {
   value: string;
@@ -31,13 +31,12 @@ function CheckboxSingle(props: Props) {
   const { value, label, readOnly, isChecked, onCheckedChange } = props;
 
   return (
-    <StyledFormControlLabel
+    <FormControlLabel
       disabled={readOnly}
       control={
         <Checkbox size="small" checked={isChecked} onChange={() => onCheckedChange(value)} />
       }
       label={label}
-      sx={{ mr: 3 }}
     />
   );
 }

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

@@ -21,6 +21,7 @@ import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { StandardTextField } from '../Textfield.styles';
+import { useRendererStylingStore } from '../../../stores';
 
 interface Props {
   value: string | null;
@@ -33,6 +34,8 @@ interface Props {
 function CheckboxSingleWithOpenLabel(props: Props) {
   const { value, label, isChecked, onCheckedChange, onInputChange } = props;
 
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
   function handleCheckedChange(event: ChangeEvent<HTMLInputElement>) {
     onCheckedChange(event.target.checked);
   }
@@ -46,13 +49,13 @@ function CheckboxSingleWithOpenLabel(props: Props) {
       <FormControlLabel
         control={<Checkbox size="small" checked={isChecked} onChange={handleCheckedChange} />}
         label={label + ':'}
-        sx={{ mr: 3 }}
       />
       <StandardTextField
         disabled={!isChecked}
         value={value}
         onChange={handleInputChange}
         fullWidth
+        textFieldWidth={textFieldWidth}
         isTabled={false}
         size="small"
         data-test="q-item-checkbox-open-label-field"

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

@@ -0,0 +1,52 @@
+/*
+ * 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 React from 'react';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import { grey } from '@mui/material/colors';
+import Fade from '@mui/material/Fade';
+
+interface ClearInputButtonProps {
+  buttonShown: boolean;
+  readOnly: boolean;
+  onClear: () => void;
+}
+
+function ClearInputButton(props: ClearInputButtonProps) {
+  const { buttonShown, readOnly, onClear } = props;
+
+  return (
+    <Fade in={buttonShown} 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>
+  );
+}
+
+export default ClearInputButton;

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

@@ -32,7 +32,7 @@ const ContextDisplayItem = memo(function GroupHeadingIcon(props: GroupHeadingIco
     return null;
   }
 
-  return <ItemLabelText qItem={displayItem} />;
+  return <ItemLabelText qItem={displayItem} readOnly={false} />;
 });
 
 export default ContextDisplayItem;

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

@@ -0,0 +1,62 @@
+/*
+ * 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 React from 'react';
+import Tooltip from '@mui/material/Tooltip';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { useQuestionnaireStore } from '../../../stores';
+
+interface FlyoverItemProps {
+  displayFlyover: string | JSX.Element | JSX.Element[];
+  readOnly: boolean;
+}
+
+function FlyoverItem(props: FlyoverItemProps) {
+  const { displayFlyover, readOnly } = props;
+
+  const sdcUiOverrideComponents = useQuestionnaireStore.use.sdcUiOverrideComponents();
+  const FlyoverOverrideComponent = sdcUiOverrideComponents['flyover'];
+
+  // If a flyover override component is defined for this item, render it
+  if (FlyoverOverrideComponent && typeof FlyoverOverrideComponent === 'function') {
+    return <FlyoverOverrideComponent displayText={displayFlyover} readOnly={readOnly} />;
+  }
+
+  return (
+    <Tooltip
+      title={displayFlyover}
+      placement="top"
+      slotProps={{
+        popper: {
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, -8]
+              }
+            }
+          ]
+        }
+      }}>
+      <span>
+        <InfoOutlinedIcon sx={{ color: 'text.secondary' }} fontSize="small" />
+      </span>
+    </Tooltip>
+  );
+}
+
+export default FlyoverItem;

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

@@ -17,36 +17,50 @@
 
 import type { ReactNode } from 'react';
 import React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import type { QuestionnaireItem } from 'fhir/r4';
-import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from './ItemLabelWrapper';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import Box from '@mui/material/Box';
+import { useRendererStylingStore } from '../../../stores';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 
 interface ItemFieldGridProps {
-  children: ReactNode;
   qItem: QuestionnaireItem;
   readOnly: boolean;
+  labelChildren?: ReactNode;
+  fieldChildren?: ReactNode;
 }
 
 function ItemFieldGrid(props: ItemFieldGridProps) {
-  const { children, qItem, readOnly } = props;
+  const { qItem, readOnly, labelChildren, fieldChildren } = props;
+
+  const itemLabelGridBreakpoints = useRendererStylingStore.use.itemLabelGridBreakpoints();
+  const itemFieldGridBreakpoints = useRendererStylingStore.use.itemFieldGridBreakpoints();
 
   const { displayInstructions } = useRenderingExtensions(qItem);
 
   return (
     <Grid container columnSpacing={4}>
-      <Grid item md={4} xs={12}>
-        <LabelWrapper qItem={qItem} readOnly={readOnly} />
+      <Grid
+        xs={itemLabelGridBreakpoints.xs}
+        sm={itemLabelGridBreakpoints.sm}
+        md={itemLabelGridBreakpoints.md}
+        lg={itemLabelGridBreakpoints.lg}
+        xl={itemLabelGridBreakpoints.xl}>
+        {labelChildren}
       </Grid>
       <Box
         sx={{
           my: { xs: 1.5, md: 0 } // Adds padding for `xs` breakpoint and removes it for `md` and up
         }}
       />
-      <Grid item md={8} xs={12}>
-        {children}
+      <Grid
+        xs={itemFieldGridBreakpoints.xs}
+        sm={itemFieldGridBreakpoints.sm}
+        md={itemFieldGridBreakpoints.md}
+        lg={itemFieldGridBreakpoints.lg}
+        xl={itemFieldGridBreakpoints.xl}>
+        {fieldChildren}
         <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
       </Grid>
     </Grid>