@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

package/src/components/FormComponents/RepeatItem/AddItemButton.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { Box, Button } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import type { RepeatAnswer } from '../../../interfaces/repeatItem.interface';
+
+interface AddItemButtonProps {
+  repeatAnswers: RepeatAnswer[];
+  onAddItem: () => void;
+}
+
+function AddItemButton(props: AddItemButtonProps) {
+  const { repeatAnswers, onAddItem } = props;
+
+  const isDisabled = repeatAnswers[repeatAnswers.length - 1].answer === null;
+
+  return (
+    <Box display="flex" flexDirection="row-reverse">
+      <Button
+        variant="contained"
+        startIcon={<AddIcon />}
+        disabled={isDisabled}
+        onClick={onAddItem}
+        data-test="button-add-repeat-item">
+        Add Item
+      </Button>
+    </Box>
+  );
+}
+
+export default AddItemButton;

package/src/components/FormComponents/RepeatItem/DeleteItemButton.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { RepeatDeleteTooltip } from './RepeatItem.styles';
+import { IconButton } from '@mui/material';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+function DeleteItemButton(props) {
+    const { answer, numOfRepeatAnswers, onDeleteAnswer } = props;
+    const isDisabled = answer === null || numOfRepeatAnswers === 1;
+    return (React.createElement(RepeatDeleteTooltip, { className: "repeat-item-delete", title: "Delete item" },
+        React.createElement("span", null,
+            React.createElement(IconButton, { size: "small", color: "error", disabled: isDisabled, onClick: onDeleteAnswer },
+                React.createElement(RemoveCircleOutlineIcon, { fontSize: "small" })))));
+}
+export default DeleteItemButton;
+//# sourceMappingURL=DeleteItemButton.js.map

package/src/components/FormComponents/RepeatItem/DeleteItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteItemButton.js","sourceRoot":"","sources":["DeleteItemButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,uBAAuB,MAAM,yCAAyC,CAAC;AAS9E,SAAS,gBAAgB,CAAC,KAA4B;IACpD,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7D,MAAM,UAAU,GAAG,MAAM,KAAK,IAAI,IAAI,kBAAkB,KAAK,CAAC,CAAC;IAE/D,OAAO,CACL,oBAAC,mBAAmB,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAC,aAAa;QACrE;YACE,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;gBAClF,oBAAC,uBAAuB,IAAC,QAAQ,EAAC,OAAO,GAAG,CACjC,CACR,CACa,CACvB,CAAC;AACJ,CAAC;AAED,eAAe,gBAAgB,CAAC"}

package/src/components/FormComponents/RepeatItem/DeleteItemButton.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 { RepeatDeleteTooltip } from './RepeatItem.styles';
+import { IconButton } from '@mui/material';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import type { QuestionnaireResponseItemAnswer } from 'fhir/r4';
+
+interface DeleteItemButtonProps {
+  answer: QuestionnaireResponseItemAnswer | null;
+  numOfRepeatAnswers: number;
+  onDeleteAnswer: () => void;
+}
+
+function DeleteItemButton(props: DeleteItemButtonProps) {
+  const { answer, numOfRepeatAnswers, onDeleteAnswer } = props;
+
+  const isDisabled = answer === null || numOfRepeatAnswers === 1;
+
+  return (
+    <RepeatDeleteTooltip className="repeat-item-delete" title="Delete item">
+      <span>
+        <IconButton size="small" color="error" disabled={isDisabled} onClick={onDeleteAnswer}>
+          <RemoveCircleOutlineIcon fontSize="small" />
+        </IconButton>
+      </span>
+    </RepeatDeleteTooltip>
+  );
+}
+
+export default DeleteItemButton;

package/src/components/FormComponents/RepeatItem/RepeatField.js

@@ -0,0 +1,31 @@
+/*
+ * 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 { Box } from '@mui/material';
+import { RepeatItemContainerStack } from './RepeatItem.styles';
+import SingleItem from '../SingleItem/SingleItem';
+import DeleteItemButton from './DeleteItemButton';
+function RepeatField(props) {
+    var _a;
+    const { qItem, qrItem, answer, numOfRepeatAnswers, onDeleteAnswer, onQrItemChange } = props;
+    return (React.createElement(RepeatItemContainerStack, { direction: "row" },
+        React.createElement(Box, { sx: { flexGrow: 1 } },
+            React.createElement(SingleItem, { qItem: qItem, qrItem: qrItem, isRepeated: (_a = qItem.repeats) !== null && _a !== void 0 ? _a : false, isTabled: false, onQrItemChange: onQrItemChange })),
+        React.createElement(DeleteItemButton, { answer: answer, numOfRepeatAnswers: numOfRepeatAnswers, onDeleteAnswer: onDeleteAnswer })));
+}
+export default RepeatField;
+//# sourceMappingURL=RepeatField.js.map

package/src/components/FormComponents/RepeatItem/RepeatField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatField.js","sourceRoot":"","sources":["RepeatField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAOlD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAUlD,SAAS,WAAW,CAAC,KAAuB;;IAC1C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE5F,OAAO,CACL,oBAAC,wBAAwB,IAAC,SAAS,EAAC,KAAK;QACvC,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;YACtB,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAA,KAAK,CAAC,OAAO,mCAAI,KAAK,EAClC,QAAQ,EAAE,KAAK,EACf,cAAc,EAAE,cAAc,GAC9B,CACE;QACN,oBAAC,gBAAgB,IACf,MAAM,EAAE,MAAM,EACd,kBAAkB,EAAE,kBAAkB,EACtC,cAAc,EAAE,cAAc,GAC9B,CACuB,CAC5B,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC"}

package/src/components/FormComponents/RepeatItem/RepeatField.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 { Box } from '@mui/material';
+import { RepeatItemContainerStack } from './RepeatItem.styles';
+import SingleItem from '../SingleItem/SingleItem';
+import type {
+  QuestionnaireItem,
+  QuestionnaireResponseItem,
+  QuestionnaireResponseItemAnswer
+} from 'fhir/r4';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import DeleteItemButton from './DeleteItemButton';
+
+interface RepeatFieldProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  answer: QuestionnaireResponseItemAnswer | null;
+  numOfRepeatAnswers: number;
+  onDeleteAnswer: () => void;
+}
+
+function RepeatField(props: RepeatFieldProps) {
+  const { qItem, qrItem, answer, numOfRepeatAnswers, onDeleteAnswer, onQrItemChange } = props;
+
+  return (
+    <RepeatItemContainerStack direction="row">
+      <Box sx={{ flexGrow: 1 }}>
+        <SingleItem
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={qItem.repeats ?? false}
+          isTabled={false}
+          onQrItemChange={onQrItemChange}
+        />
+      </Box>
+      <DeleteItemButton
+        answer={answer}
+        numOfRepeatAnswers={numOfRepeatAnswers}
+        onDeleteAnswer={onDeleteAnswer}
+      />
+    </RepeatItemContainerStack>
+  );
+}
+
+export default RepeatField;

package/src/components/FormComponents/RepeatItem/RepeatItem.js

@@ -0,0 +1,69 @@
+/*
+ * 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, { useState } from 'react';
+import { nanoid } from 'nanoid';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import AddItemButton from './AddItemButton';
+import { TransitionGroup } from 'react-transition-group';
+import RepeatField from './RepeatField';
+import { Collapse } from '@mui/material';
+import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+function RepeatItem(props) {
+    const { qItem, qrItem, onQrItemChange } = props;
+    // Get additional rendering extensions
+    const { displayInstructions } = useRenderingExtensions(qItem);
+    const initialRepeatAnswers = useInitialiseRepeatAnswers(qrItem);
+    const [repeatAnswers, setRepeatAnswers] = useState(initialRepeatAnswers);
+    // Event Handlers
+    function handleAnswerChange(newQrItem, index) {
+        const updatedRepeatAnswers = [...repeatAnswers];
+        updatedRepeatAnswers[index].answer = newQrItem.answer ? newQrItem.answer[0] : null;
+        setRepeatAnswers(updatedRepeatAnswers);
+        onQrItemChange(Object.assign(Object.assign({}, createEmptyQrItem(qItem)), { answer: updatedRepeatAnswers.flatMap((repeatAnswer) => repeatAnswer.answer ? [repeatAnswer.answer] : []) }));
+    }
+    function handleDeleteItem(index) {
+        const updatedRepeatAnswers = [...repeatAnswers];
+        updatedRepeatAnswers.splice(index, 1);
+        setRepeatAnswers(updatedRepeatAnswers);
+        onQrItemChange(Object.assign(Object.assign({}, createEmptyQrItem(qItem)), { answer: updatedRepeatAnswers.flatMap((repeatAnswer) => repeatAnswer.answer ? [repeatAnswer.answer] : []) }));
+    }
+    function handleAddItem() {
+        setRepeatAnswers([
+            ...repeatAnswers,
+            {
+                nanoId: nanoid(),
+                answer: null
+            }
+        ]);
+    }
+    return (React.createElement(FullWidthFormComponentBox, { "data-test": "q-item-repeat-box" },
+        React.createElement(ItemFieldGrid, { qItem: qItem, displayInstructions: displayInstructions },
+            React.createElement(TransitionGroup, null, repeatAnswers.map(({ nanoId, answer }, index) => {
+                const repeatAnswerQrItem = createEmptyQrItem(qItem);
+                if (answer) {
+                    repeatAnswerQrItem.answer = [answer];
+                }
+                return (React.createElement(Collapse, { key: nanoId, timeout: 200 },
+                    React.createElement(RepeatField, { qItem: qItem, qrItem: repeatAnswerQrItem, answer: answer, numOfRepeatAnswers: repeatAnswers.length, onDeleteAnswer: () => handleDeleteItem(index), onQrItemChange: (newQrItem) => handleAnswerChange(newQrItem, index) })));
+            }))),
+        React.createElement(AddItemButton, { repeatAnswers: repeatAnswers, onAddItem: handleAddItem })));
+}
+export default RepeatItem;
+//# sourceMappingURL=RepeatItem.js.map

package/src/components/FormComponents/RepeatItem/RepeatItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatItem.js","sourceRoot":"","sources":["RepeatItem.tsx"],"names":[],"mappings":"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"}

package/src/components/FormComponents/RepeatItem/RepeatItem.styles.js

@@ -0,0 +1,29 @@
+/*
+ * 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 { Stack, styled, Tooltip } from '@mui/material';
+export const RepeatDeleteTooltip = styled(Tooltip)(() => ({
+    marginLeft: 8
+}));
+export const RepeatItemContainerStack = styled(Stack)(() => ({
+    alignItems: 'center',
+    paddingBottom: 8
+}));
+export const RepeatGroupContainerStack = styled(Stack)(() => ({
+    alignItems: 'center',
+    paddingBottom: 16
+}));
+//# sourceMappingURL=RepeatItem.styles.js.map

package/src/components/FormComponents/RepeatItem/RepeatItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatItem.styles.js","sourceRoot":"","sources":["RepeatItem.styles.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACxD,UAAU,EAAE,CAAC;CACd,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC3D,UAAU,EAAE,QAAQ;IACpB,aAAa,EAAE,CAAC;CACjB,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5D,UAAU,EAAE,QAAQ;IACpB,aAAa,EAAE,EAAE;CAClB,CAAC,CAAC,CAAC"}

package/src/components/FormComponents/RepeatItem/RepeatItem.styles.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 { Stack, styled, Tooltip } from '@mui/material';
+
+export const RepeatDeleteTooltip = styled(Tooltip)(() => ({
+  marginLeft: 8
+}));
+
+export const RepeatItemContainerStack = styled(Stack)(() => ({
+  alignItems: 'center',
+  paddingBottom: 8
+}));
+
+export const RepeatGroupContainerStack = styled(Stack)(() => ({
+  alignItems: 'center',
+  paddingBottom: 16
+}));

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -0,0 +1,116 @@
+/*
+ * 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, { useState } from 'react';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { nanoid } from 'nanoid';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import AddItemButton from './AddItemButton';
+import { TransitionGroup } from 'react-transition-group';
+import RepeatField from './RepeatField';
+import { Collapse } from '@mui/material';
+import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+
+interface RepeatItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function RepeatItem(props: RepeatItemProps) {
+  const { qItem, qrItem, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayInstructions } = useRenderingExtensions(qItem);
+
+  const initialRepeatAnswers = useInitialiseRepeatAnswers(qrItem);
+
+  const [repeatAnswers, setRepeatAnswers] = useState(initialRepeatAnswers);
+
+  // Event Handlers
+  function handleAnswerChange(newQrItem: QuestionnaireResponseItem, index: number) {
+    const updatedRepeatAnswers = [...repeatAnswers];
+    updatedRepeatAnswers[index].answer = newQrItem.answer ? newQrItem.answer[0] : null;
+
+    setRepeatAnswers(updatedRepeatAnswers);
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: updatedRepeatAnswers.flatMap((repeatAnswer) =>
+        repeatAnswer.answer ? [repeatAnswer.answer] : []
+      )
+    });
+  }
+
+  function handleDeleteItem(index: number) {
+    const updatedRepeatAnswers = [...repeatAnswers];
+
+    updatedRepeatAnswers.splice(index, 1);
+
+    setRepeatAnswers(updatedRepeatAnswers);
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: updatedRepeatAnswers.flatMap((repeatAnswer) =>
+        repeatAnswer.answer ? [repeatAnswer.answer] : []
+      )
+    });
+  }
+
+  function handleAddItem() {
+    setRepeatAnswers([
+      ...repeatAnswers,
+      {
+        nanoId: nanoid(),
+        answer: null
+      }
+    ]);
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-repeat-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <TransitionGroup>
+          {repeatAnswers.map(({ nanoId, answer }, index) => {
+            const repeatAnswerQrItem = createEmptyQrItem(qItem);
+            if (answer) {
+              repeatAnswerQrItem.answer = [answer];
+            }
+
+            return (
+              <Collapse key={nanoId} timeout={200}>
+                <RepeatField
+                  qItem={qItem}
+                  qrItem={repeatAnswerQrItem}
+                  answer={answer}
+                  numOfRepeatAnswers={repeatAnswers.length}
+                  onDeleteAnswer={() => handleDeleteItem(index)}
+                  onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+                />
+              </Collapse>
+            );
+          })}
+        </TransitionGroup>
+      </ItemFieldGrid>
+
+      <AddItemButton repeatAnswers={repeatAnswers} onAddItem={handleAddItem} />
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default RepeatItem;

package/src/components/FormComponents/SingleItem/SingleItem.js

@@ -0,0 +1,32 @@
+/*
+ * 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, { useCallback } from 'react';
+import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
+import SingleItemSwitcher from './SingleItemSwitcher';
+function SingleItem(props) {
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
+    const handleQrItemChange = useCallback((newQrItem) => {
+        if (newQrItem.answer) {
+            updateEnableWhenItem(qItem.linkId, newQrItem.answer);
+        }
+        onQrItemChange(newQrItem);
+    }, [updateEnableWhenItem, onQrItemChange, qItem.linkId]);
+    return (React.createElement(SingleItemSwitcher, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: handleQrItemChange }));
+}
+export default SingleItem;
+//# sourceMappingURL=SingleItem.js.map

package/src/components/FormComponents/SingleItem/SingleItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleItem.js","sourceRoot":"","sources":["SingleItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAO3C,OAAO,qBAAqB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAUtD,SAAS,UAAU,CAAC,KAAsB;IACxC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEtE,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;IAE1F,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,SAAoC,EAAE,EAAE;QACvC,IAAI,SAAS,CAAC,MAAM,EAAE;YACpB,oBAAoB,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;SACtD;QACD,cAAc,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC,EACD,CAAC,oBAAoB,EAAE,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,CACrD,CAAC;IAEF,OAAO,CACL,oBAAC,kBAAkB,IACjB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,kBAAkB,GAClC,CACH,CAAC;AACJ,CAAC;AAED,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,62 @@
+/*
+ * 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, { useCallback } from 'react';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
+import SingleItemSwitcher from './SingleItemSwitcher';
+
+interface SingleItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function SingleItem(props: SingleItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
+
+  const handleQrItemChange = useCallback(
+    (newQrItem: QuestionnaireResponseItem) => {
+      if (newQrItem.answer) {
+        updateEnableWhenItem(qItem.linkId, newQrItem.answer);
+      }
+      onQrItemChange(newQrItem);
+    },
+    [updateEnableWhenItem, onQrItemChange, qItem.linkId]
+  );
+
+  return (
+    <SingleItemSwitcher
+      qItem={qItem}
+      qrItem={qrItem}
+      isRepeated={isRepeated}
+      isTabled={isTabled}
+      onQrItemChange={handleQrItemChange}
+    />
+  );
+}
+
+export default SingleItem;

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

@@ -0,0 +1,63 @@
+/*
+ * 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 QItemChoice from '../QItemChoice/QItemChoice';
+import QItemOpenChoice from '../QItemOpenChoice/QItemOpenChoice';
+import { Typography } from '@mui/material';
+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';
+function SingleItemSwitcher(props) {
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    switch (qItem.type) {
+        case 'string':
+            return (React.createElement(StringItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case 'boolean':
+            return (React.createElement(BooleanItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case 'time':
+            return (React.createElement(TimeItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case 'date':
+            return (React.createElement(DateItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case 'dateTime':
+            return (React.createElement(DateTimeItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case 'text':
+            return (React.createElement(TextItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, onQrItemChange: onQrItemChange }));
+        case 'display':
+            return React.createElement(DisplayItem, { qItem: qItem });
+        case 'integer':
+            return (React.createElement(IntegerItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case 'decimal':
+            return (React.createElement(DecimalItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case 'choice':
+            return (React.createElement(QItemChoice, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case 'open-choice':
+            return (React.createElement(QItemOpenChoice, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case 'url':
+            return (React.createElement(UrlItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        default:
+            return (React.createElement(Typography, null, "Item type not supported yet. Only R4 datatypes are supported at the moment."));
+    }
+}
+export default SingleItemSwitcher;
+//# sourceMappingURL=SingleItemSwitcher.js.map

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleItemSwitcher.js","sourceRoot":"","sources":["SingleItemSwitcher.tsx"],"names":[],"mappings":"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"}