@aehrc/smart-forms-renderer 0.8.1 → 0.9.0

package/src/components/FormComponents/SingleItem/SingleItem.tsx

@@ -22,7 +22,7 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
 import SingleItemSwitcher from './SingleItemSwitcher';
@@ -30,17 +30,17 @@ import useHidden from '../../../hooks/useHidden';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface SingleItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function SingleItem(props: SingleItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
   const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
@@ -67,7 +67,7 @@ function SingleItem(props: SingleItemProps) {
       qrItem={qrItem}
       isRepeated={isRepeated}
       isTabled={isTabled}
-      textShown={textShown}
+      showMinimalView={showMinimalView}
       parentIsReadOnly={readOnly}
       onQrItemChange={handleQrItemChange}
     />

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -25,31 +25,33 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import StringItem from '../StringItem/StringItem';
 import BooleanItem from '../BooleanItem/BooleanItem';
 import TimeItem from '../TimeItem/TimeItem';
 import DateTimeItem from '../DateTimeItem/DateTimeItem';
-import DateItem from '../DateItem/DateItem';
 import TextItem from '../TextItem/TextItem';
 import DisplayItem from '../DisplayItem/DisplayItem';
-import IntegerItem from '../IntegerItem/IntegerItem';
 import DecimalItem from '../DecimalItem/DecimalItem';
 import UrlItem from '../UrlItem/UrlItem';
+import CustomDateItem from '../CustomDateItem/CustomDateItem';
+import { isSpecificItemControl } from '../../../utils';
+import SliderItem from '../SliderItem/SliderItem';
+import IntegerItem from '../IntegerItem/IntegerItem';
 
 interface SingleItemSwitcherProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function SingleItemSwitcher(props: SingleItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
   switch (qItem.type) {
@@ -88,7 +90,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
       );
     case 'date':
       return (
-        <DateItem
+        <CustomDateItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -121,6 +123,19 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
     case 'display':
       return <DisplayItem qItem={qItem} />;
     case 'integer':
+      if (isSpecificItemControl(qItem, 'slider')) {
+        return (
+          <SliderItem
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
+
       return (
         <IntegerItem
           qItem={qItem}
@@ -149,7 +164,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
-          textShown={textShown}
+          showMinimalView={showMinimalView}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
@@ -161,7 +176,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
-          textShown={textShown}
+          showMinimalView={showMinimalView}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
@@ -180,7 +195,8 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
     default:
       return (
         <Typography>
-          Item type not supported yet. Only R4 datatypes are supported at the moment.
+          Item type not supported yet, or something has went wrong. If your questionnnaire is not a
+          FHIR R4 resource, there might be issues rendering it.
         </Typography>
       );
   }

package/src/components/FormComponents/SliderItem/Slider.styles.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2023 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 { alpha, styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const SliderDisplayBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'hasLabels'
+})<{ hasLabels: boolean }>(({ theme, hasLabels }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: '0 auto',
+  marginBottom: hasLabels ? -20 : 0,
+  padding: theme.spacing(0.5),
+  borderRadius: Number(theme.shape.borderRadius) * 0.5,
+  border: `1px solid ${alpha(theme.palette.text.disabled, 0.5)}`,
+  minWidth: 28,
+  height: 18
+}));

package/src/components/FormComponents/SliderItem/SliderDisplayValue.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2023 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 { SliderDisplayBox } from './Slider.styles';
+import Typography from '@mui/material/Typography';
+import { pxToRem } from '../../../theme/typography';
+
+interface SliderDisplayValueProps {
+  value: number;
+  hasLabels: boolean;
+  isInteracted: boolean;
+}
+
+function SliderDisplayValue(props: SliderDisplayValueProps) {
+  const { value, hasLabels, isInteracted } = props;
+
+  const valueToDisplay = isInteracted ? value : '-';
+
+  return (
+    <SliderDisplayBox hasLabels={hasLabels}>
+      <Typography textAlign="center" color="text.disabled" fontSize={pxToRem(9.5)}>
+        {valueToDisplay}
+      </Typography>
+    </SliderDisplayBox>
+  );
+}
+
+export default SliderDisplayValue;

package/src/components/FormComponents/SliderItem/SliderField.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2023 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 type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import Slider from '@mui/material/Slider';
+import { getSliderMarks } from '../../../utils/slider';
+import Stack from '@mui/material/Stack';
+import SliderLabels from './SliderLabels';
+import SliderDisplayValue from './SliderDisplayValue';
+
+interface SliderFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  value: number;
+  minValue: number;
+  minLabel: string;
+  maxValue: number;
+  maxLabel: string;
+  stepValue: number;
+  isInteracted: boolean;
+  readOnly: boolean;
+  onValueChange: (newValue: number) => void;
+}
+
+function SliderField(props: SliderFieldProps) {
+  const {
+    linkId,
+    value,
+    minValue,
+    maxValue,
+    stepValue,
+    minLabel,
+    maxLabel,
+    isInteracted,
+    readOnly,
+    isTabled,
+    onValueChange
+  } = props;
+
+  const sliderMarks = getSliderMarks(minValue, maxValue, minLabel, maxLabel, stepValue);
+
+  const sliderSx = {
+    maxWidth: !isTabled ? 280 : 3000,
+    minWidth: 160
+  };
+
+  const hasLabels = !!(minLabel || maxLabel);
+
+  return (
+    <Stack sx={{ ...sliderSx }}>
+      <SliderDisplayValue value={value} hasLabels={hasLabels} isInteracted={isInteracted} />
+      {hasLabels ? <SliderLabels minLabel={minLabel} maxLabel={maxLabel} /> : null}
+      <Slider
+        id={linkId}
+        value={value}
+        min={minValue}
+        max={maxValue}
+        step={stepValue}
+        marks={sliderMarks}
+        sx={{ ...sliderSx }}
+        onChange={(_, newValue) => {
+          if (typeof newValue === 'number') {
+            onValueChange(newValue);
+          }
+        }}
+        disabled={readOnly}
+        valueLabelDisplay="auto"
+        data-test="q-item-slider-field"
+      />
+    </Stack>
+  );
+}
+
+export default SliderField;

package/src/components/FormComponents/SliderItem/SliderItem.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright 2023 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 type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useReadOnly from '../../../hooks/useReadOnly';
+import SliderField from './SliderField';
+import useSliderExtensions from '../../../hooks/useSliderExtensions';
+import Box from '@mui/material/Box';
+
+interface SliderItemProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+}
+
+function SliderItem(props: SliderItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { minValue, maxValue, stepValue, minLabel, maxLabel } = useSliderExtensions(qItem);
+
+  const isInteracted = !!qrItem?.answer;
+
+  // Init input value
+  let valueInteger = 0;
+  if (qrItem?.answer) {
+    if (qrItem?.answer[0].valueInteger) {
+      valueInteger = qrItem.answer[0].valueInteger;
+    }
+    if (qrItem?.answer[0].valueDecimal) {
+      valueInteger = Math.round(qrItem.answer[0].valueDecimal);
+    }
+  }
+
+  // Event handlers
+  function handleValueChange(newValue: number) {
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: [{ valueInteger: newValue }]
+    });
+  }
+
+  if (isRepeated) {
+    return (
+      <Box px={4}>
+        <SliderField
+          linkId={qItem.linkId}
+          value={valueInteger}
+          minValue={minValue}
+          maxValue={maxValue}
+          stepValue={stepValue}
+          minLabel={minLabel}
+          maxLabel={maxLabel}
+          isInteracted={isInteracted}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          onValueChange={handleValueChange}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-slider-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+        <Box px={4}>
+          <SliderField
+            linkId={qItem.linkId}
+            value={valueInteger}
+            minValue={minValue}
+            maxValue={maxValue}
+            stepValue={stepValue}
+            minLabel={minLabel}
+            maxLabel={maxLabel}
+            isInteracted={isInteracted}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            onValueChange={handleValueChange}
+          />
+        </Box>
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default SliderItem;

package/src/components/FormComponents/SliderItem/SliderLabels.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2023 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 Typography from '@mui/material/Typography';
+import { pxToRem } from '../../../theme/typography';
+import Box from '@mui/material/Box';
+
+interface SliderLabelsProps {
+  minLabel: string;
+  maxLabel: string;
+}
+
+function SliderLabels(props: SliderLabelsProps) {
+  const { minLabel, maxLabel } = props;
+
+  if (!minLabel && !maxLabel) {
+    return null;
+  }
+
+  return (
+    <Box display="flex" justifyContent="space-between" pb={0.5}>
+      {[minLabel, maxLabel].map((label, index) => (
+        <Typography
+          key={index}
+          textAlign="center"
+          fontSize={pxToRem(10)}
+          sx={{
+            transform: `translateX(${index === 0 ? '-50%' : '50%'})`,
+            wordWrap: 'break-word'
+          }}>
+          {label}
+        </Typography>
+      ))}
+    </Box>
+  );
+}
+
+export default SliderLabels;

package/src/components/FormComponents/StringItem/StringItem.tsx

@@ -36,12 +36,12 @@ import useStringInput from '../../../hooks/useStringInput';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface StringItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 function StringItem(props: StringItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;

package/src/components/FormComponents/Tables/GroupTable.tsx

@@ -35,6 +35,7 @@ import type {
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
+import type { PropsWithShowMinimalViewAttribute } from '../../../interfaces/renderProps.interface';
 import useInitialiseGroupTable from '../../../hooks/useInitialiseGroupTable';
 import { nanoid } from 'nanoid';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -44,14 +45,24 @@ import cloneDeep from 'lodash.clonedeep';
 import AddRowButton from './AddRowButton';
 import useReadOnly from '../../../hooks/useReadOnly';
 
-interface Props extends PropsWithQrRepeatGroupChangeHandler, PropsWithParentIsReadOnlyAttribute {
+interface GroupTableProps
+  extends PropsWithQrRepeatGroupChangeHandler,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItems: QuestionnaireResponseItem[];
   groupCardElevation: number;
 }
 
-function GroupTable(props: Props) {
-  const { qItem, qrItems, groupCardElevation, parentIsReadOnly, onQrRepeatGroupChange } = props;
+function GroupTable(props: GroupTableProps) {
+  const {
+    qItem,
+    qrItems,
+    groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrRepeatGroupChange
+  } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
@@ -118,6 +129,47 @@ function GroupTable(props: Props) {
     ]);
   }
 
+  if (showMinimalView) {
+    return (
+      <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={1}>
+        <TableContainer component={Paper} elevation={groupCardElevation}>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                {itemLabels.map((itemLabel) => (
+                  <HeaderTableCell key={itemLabel} size="medium">
+                    {itemLabel}
+                  </HeaderTableCell>
+                ))}
+                <TableCell />
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {tableRows.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+                const answeredQrItem = createEmptyQrItem(qItem);
+                if (nullableQrItem) {
+                  answeredQrItem.item = nullableQrItem.item;
+                }
+
+                return (
+                  <TableRow key={nanoId}>
+                    <GroupTableRow
+                      qItem={qItem}
+                      qrItem={answeredQrItem}
+                      qItemsIndexMap={qItemsIndexMap}
+                      parentIsReadOnly={parentIsReadOnly}
+                      onQrItemChange={(newQrGroup) => handleRowChange(newQrGroup, index)}
+                    />
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </QGroupContainerBox>
+    );
+  }
+
   return (
     <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
       {groupCardElevation !== 1 ? (

package/src/components/FormComponents/Tables/GroupTableRow.tsx

@@ -17,18 +17,18 @@
 
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
+import { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import SingleItem from '../SingleItem/SingleItem';
 import { getQrItemsIndex } from '../../../utils/mapItem';
 import { StandardTableCell } from './Table.styles';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
-import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
 
-interface Props
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithParentIsReadOnlyAttribute {
+interface Props extends PropsWithQrItemChangeHandler, PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   qItemsIndexMap: Record<string, number>;
 }
 
@@ -36,7 +36,7 @@ function GroupTableRow(props: Props) {
   const { qItem, qrItem, qItemsIndexMap, parentIsReadOnly, onQrItemChange } = props;
 
   const rowItems = qItem.item;
-  const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const row = qrItem && qrItem.item ? qrItem : createEmptyQrGroup(qItem);
   const rowQrItems = row.item;
 
   if (!rowItems || !rowQrItems) {
@@ -65,9 +65,10 @@ function GroupTableRow(props: Props) {
             <SingleItem
               key={qItem.linkId}
               qItem={rowItem}
-              qrItem={qrItem}
+              qrItem={qrItem ?? null}
               isRepeated={true}
               isTabled={true}
+              showMinimalView={true}
               parentIsReadOnly={parentIsReadOnly}
               onQrItemChange={handleQrRowItemChange}
             />

package/src/components/FormComponents/TextItem/TextItem.tsx

@@ -35,11 +35,11 @@ import useStringInput from '../../../hooks/useStringInput';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface TextItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function TextItem(props: TextItemProps) {

package/src/components/FormComponents/TimeItem/TimeItem.tsx

@@ -33,12 +33,12 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface TimeItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function TimeItem(props: TimeItemProps) {

package/src/components/FormComponents/UrlItem/UrlItem.tsx

@@ -34,12 +34,12 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface UrlItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 function UrlItem(props: UrlItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;

package/src/components/FormComponents/index.ts

@@ -16,5 +16,8 @@
  */
 
 export * from './SingleItem';
+export * from './RepeatItem';
 export * from './RepeatGroup';
+export * from './GridGroup';
 export * from './Tables';
+export * from './CustomDateItem';