@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceSelectAnswerValueSet.tsx

@@ -0,0 +1,138 @@
+/*
+ * 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 type { SyntheticEvent } from 'react';
+import React from 'react';
+import { Autocomplete, Grid, Typography } from '@mui/material';
+
+import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { StandardTextField } from '../Textfield.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useValueSetCodings from '../../../hooks/useValueSetCodings';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemOpenChoiceSelectAnswerValueSet(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Init input value
+  const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
+  let valueSelect: Coding | undefined = undefined;
+  if (qrOpenChoice['answer']) {
+    valueSelect = qrOpenChoice['answer'][0].valueCoding;
+  }
+
+  // Get codings/options from valueSet
+  const { codings, serverError } = useValueSetCodings(qItem);
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Event handlers
+  function handleValueChange(_: SyntheticEvent<Element, Event>, newValue: Coding | string | null) {
+    if (newValue) {
+      if (typeof newValue === 'string') {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueString: newValue }]
+        });
+      } else {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueCoding: newValue }]
+        });
+      }
+      return;
+    }
+    onQrItemChange(createEmptyQrItem(qItem));
+  }
+
+  const openChoiceSelectAnswerValueSet = (
+    <>
+      <Autocomplete
+        id={qItem.id}
+        value={valueSelect ?? null}
+        options={codings}
+        getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
+        onChange={handleValueChange}
+        onInputChange={(event, newValue) => handleValueChange(event, newValue)}
+        freeSolo
+        autoHighlight
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        disabled={readOnly}
+        size="small"
+        placeholder={entryFormat}
+        renderInput={(params) => (
+          <StandardTextField
+            isTabled={isTabled}
+            label={displayPrompt}
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {params.InputProps.endAdornment}
+                  {displayUnit}
+                </>
+              )
+            }}
+          />
+        )}
+      />
+      {serverError ? (
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server.
+        </Typography>
+      ) : null}
+    </>
+  );
+
+  const renderQItemOpenChoiceSelectAnswerValueSet = isRepeated ? (
+    <>{openChoiceSelectAnswerValueSet}</>
+  ) : (
+    <FullWidthFormComponentBox>
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {openChoiceSelectAnswerValueSet}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemOpenChoiceSelectAnswerValueSet}</>;
+}
+
+export default QItemOpenChoiceSelectAnswerValueSet;

package/src/components/FormComponents/RepeatGroup/AddItemButton.js

@@ -0,0 +1,27 @@
+/*
+ * 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';
+function AddItemButton(props) {
+    const { repeatGroups, onAddItem } = props;
+    const isDisabled = repeatGroups[repeatGroups.length - 1].qrItem === null;
+    return (React.createElement(Box, { display: "flex", flexDirection: "row-reverse" },
+        React.createElement(Button, { variant: "contained", startIcon: React.createElement(AddIcon, null), disabled: isDisabled, onClick: onAddItem, "data-test": "button-add-repeat-item" }, "Add Item")));
+}
+export default AddItemButton;
+//# sourceMappingURL=AddItemButton.js.map

package/src/components/FormComponents/RepeatGroup/AddItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddItemButton.js","sourceRoot":"","sources":["AddItemButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAQ9C,SAAS,aAAa,CAAC,KAAyB;IAC9C,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1C,MAAM,UAAU,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC;IAEzE,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,aAAa;QAC7C,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,oBAAC,OAAO,OAAG,EACtB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,SAAS,eACR,wBAAwB,eAE3B,CACL,CACP,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC"}

package/src/components/FormComponents/RepeatGroup/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 { RepeatGroupSingle } from '../../../interfaces/repeatGroup.interface';
+
+interface AddItemButtonProps {
+  repeatGroups: RepeatGroupSingle[];
+  onAddItem: () => void;
+}
+
+function AddItemButton(props: AddItemButtonProps) {
+  const { repeatGroups, onAddItem } = props;
+
+  const isDisabled = repeatGroups[repeatGroups.length - 1].qrItem === 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/RepeatGroup/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/RepeatItem.styles';
+import { IconButton } from '@mui/material';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+function DeleteItemButton(props) {
+    const { nullableQrItem, numOfRepeatGroups, onDeleteItem } = props;
+    const isDisabled = nullableQrItem === null || numOfRepeatGroups === 1;
+    return (React.createElement(RepeatDeleteTooltip, { className: "repeat-group-delete", title: "Delete item" },
+        React.createElement("span", null,
+            React.createElement(IconButton, { size: "small", color: "error", disabled: isDisabled, onClick: onDeleteItem },
+                React.createElement(RemoveCircleOutlineIcon, null)))));
+}
+export default DeleteItemButton;
+//# sourceMappingURL=DeleteItemButton.js.map

package/src/components/FormComponents/RepeatGroup/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,iCAAiC,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,uBAAuB,MAAM,yCAAyC,CAAC;AAS9E,SAAS,gBAAgB,CAAC,KAA4B;IACpD,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAElE,MAAM,UAAU,GAAG,cAAc,KAAK,IAAI,IAAI,iBAAiB,KAAK,CAAC,CAAC;IAEtE,OAAO,CACL,oBAAC,mBAAmB,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAC,aAAa;QACtE;YACE,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY;gBAChF,oBAAC,uBAAuB,OAAG,CAChB,CACR,CACa,CACvB,CAAC;AACJ,CAAC;AAED,eAAe,gBAAgB,CAAC"}

package/src/components/FormComponents/RepeatGroup/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/RepeatItem.styles';
+import { IconButton } from '@mui/material';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import type { QuestionnaireResponseItem } from 'fhir/r4';
+
+interface DeleteItemButtonProps {
+  nullableQrItem: QuestionnaireResponseItem | null;
+  numOfRepeatGroups: number;
+  onDeleteItem: () => void;
+}
+
+function DeleteItemButton(props: DeleteItemButtonProps) {
+  const { nullableQrItem, numOfRepeatGroups, onDeleteItem } = props;
+
+  const isDisabled = nullableQrItem === null || numOfRepeatGroups === 1;
+
+  return (
+    <RepeatDeleteTooltip className="repeat-group-delete" title="Delete item">
+      <span>
+        <IconButton size="small" color="error" disabled={isDisabled} onClick={onDeleteItem}>
+          <RemoveCircleOutlineIcon />
+        </IconButton>
+      </span>
+    </RepeatDeleteTooltip>
+  );
+}
+
+export default DeleteItemButton;

package/src/components/FormComponents/RepeatGroup/RepeatGroup.js

@@ -0,0 +1,81 @@
+/*
+ * 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 useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
+import { QGroupContainerBox } from '../../Box.styles';
+import { Card, Collapse, Divider } from '@mui/material';
+import { QGroupHeadingTypography } from '../Typography.styles';
+import { TransitionGroup } from 'react-transition-group';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { nanoid } from 'nanoid';
+import RepeatGroupItem from './RepeatGroupItem';
+import AddItemButton from './AddItemButton';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+function RepeatGroup(props) {
+    const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
+    const initialRepeatGroups = useInitialiseRepeatGroups(qrItems);
+    const [repeatGroups, setRepeatGroups] = useState(initialRepeatGroups);
+    function handleAnswerChange(newQrItem, index) {
+        const updatedRepeatGroups = [...repeatGroups];
+        if (newQrItem.item) {
+            updatedRepeatGroups[index].qrItem = {
+                linkId: newQrItem.linkId,
+                text: newQrItem.text,
+                item: newQrItem.item
+            };
+        }
+        setRepeatGroups(updatedRepeatGroups);
+        onQrRepeatGroupChange({
+            linkId: qItem.linkId,
+            qrItems: updatedRepeatGroups.flatMap((singleGroup) => singleGroup.qrItem ? [singleGroup.qrItem] : [])
+        });
+    }
+    function handleDeleteItem(index) {
+        const updatedRepeatGroups = [...repeatGroups];
+        updatedRepeatGroups.splice(index, 1);
+        setRepeatGroups(updatedRepeatGroups);
+        onQrRepeatGroupChange({
+            linkId: qItem.linkId,
+            qrItems: updatedRepeatGroups.flatMap((singleGroup) => singleGroup.qrItem ? [singleGroup.qrItem] : [])
+        });
+    }
+    function handleAddItem() {
+        setRepeatGroups([
+            ...repeatGroups,
+            {
+                nanoId: nanoid(),
+                qrItem: null
+            }
+        ]);
+    }
+    return (React.createElement(QGroupContainerBox, { key: qItem.linkId, cardElevation: groupCardElevation, isRepeated: true },
+        React.createElement(Card, { elevation: groupCardElevation, sx: { p: 3, py: 2.5, mb: 3.5 } },
+            React.createElement(QGroupHeadingTypography, { variant: "h6" },
+                React.createElement(LabelWrapper, { qItem: qItem })),
+            React.createElement(Divider, { sx: { mt: 1, mb: 1.5 }, light: true }),
+            React.createElement(TransitionGroup, null, repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+                const answeredQrItem = createEmptyQrItem(qItem);
+                if (nullableQrItem) {
+                    answeredQrItem.item = nullableQrItem.item;
+                }
+                return (React.createElement(Collapse, { key: nanoId, timeout: 200 },
+                    React.createElement(RepeatGroupItem, { qItem: qItem, answeredQrItem: answeredQrItem, nullableQrItem: nullableQrItem, numOfRepeatGroups: repeatGroups.length, groupCardElevation: groupCardElevation + 1, onDeleteItem: () => handleDeleteItem(index), onQrItemChange: (newQrItem) => handleAnswerChange(newQrItem, index) })));
+            })),
+            React.createElement(AddItemButton, { repeatGroups: repeatGroups, onAddItem: handleAddItem }))));
+}
+export default RepeatGroup;
+//# sourceMappingURL=RepeatGroup.js.map

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

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

package/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx

@@ -0,0 +1,125 @@
+/*
+ * 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 { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
+import { QGroupContainerBox } from '../../Box.styles';
+import { Card, Collapse, Divider } from '@mui/material';
+import { QGroupHeadingTypography } from '../Typography.styles';
+import { TransitionGroup } from 'react-transition-group';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { nanoid } from 'nanoid';
+import RepeatGroupItem from './RepeatGroupItem';
+import AddItemButton from './AddItemButton';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface RepeatGroupProps extends PropsWithQrRepeatGroupChangeHandler {
+  qItem: QuestionnaireItem;
+  qrItems: QuestionnaireResponseItem[];
+  groupCardElevation: number;
+}
+
+function RepeatGroup(props: RepeatGroupProps) {
+  const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
+
+  const initialRepeatGroups = useInitialiseRepeatGroups(qrItems);
+
+  const [repeatGroups, setRepeatGroups] = useState(initialRepeatGroups);
+
+  function handleAnswerChange(newQrItem: QuestionnaireResponseItem, index: number) {
+    const updatedRepeatGroups = [...repeatGroups];
+
+    if (newQrItem.item) {
+      updatedRepeatGroups[index].qrItem = {
+        linkId: newQrItem.linkId,
+        text: newQrItem.text,
+        item: newQrItem.item
+      };
+    }
+
+    setRepeatGroups(updatedRepeatGroups);
+    onQrRepeatGroupChange({
+      linkId: qItem.linkId,
+      qrItems: updatedRepeatGroups.flatMap((singleGroup) =>
+        singleGroup.qrItem ? [singleGroup.qrItem] : []
+      )
+    });
+  }
+
+  function handleDeleteItem(index: number) {
+    const updatedRepeatGroups = [...repeatGroups];
+
+    updatedRepeatGroups.splice(index, 1);
+
+    setRepeatGroups(updatedRepeatGroups);
+    onQrRepeatGroupChange({
+      linkId: qItem.linkId,
+      qrItems: updatedRepeatGroups.flatMap((singleGroup) =>
+        singleGroup.qrItem ? [singleGroup.qrItem] : []
+      )
+    });
+  }
+
+  function handleAddItem() {
+    setRepeatGroups([
+      ...repeatGroups,
+      {
+        nanoId: nanoid(),
+        qrItem: null
+      }
+    ]);
+  }
+
+  return (
+    <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
+      <Card elevation={groupCardElevation} sx={{ p: 3, py: 2.5, mb: 3.5 }}>
+        <QGroupHeadingTypography variant="h6">
+          <LabelWrapper qItem={qItem} />
+        </QGroupHeadingTypography>
+        <Divider sx={{ mt: 1, mb: 1.5 }} light />
+        <TransitionGroup>
+          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+            const answeredQrItem = createEmptyQrItem(qItem);
+            if (nullableQrItem) {
+              answeredQrItem.item = nullableQrItem.item;
+            }
+
+            return (
+              <Collapse key={nanoId} timeout={200}>
+                <RepeatGroupItem
+                  qItem={qItem}
+                  answeredQrItem={answeredQrItem}
+                  nullableQrItem={nullableQrItem}
+                  numOfRepeatGroups={repeatGroups.length}
+                  groupCardElevation={groupCardElevation + 1}
+                  onDeleteItem={() => handleDeleteItem(index)}
+                  onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+                />
+              </Collapse>
+            );
+          })}
+        </TransitionGroup>
+
+        <AddItemButton repeatGroups={repeatGroups} onAddItem={handleAddItem} />
+      </Card>
+    </QGroupContainerBox>
+  );
+}
+
+export default RepeatGroup;

package/src/components/FormComponents/RepeatGroup/RepeatGroupItem.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 { RepeatGroupContainerStack } from '../RepeatItem/RepeatItem.styles';
+import { Box } from '@mui/material';
+import GroupItem from '../GroupItem/GroupItem';
+import DeleteItemButton from './DeleteItemButton';
+function RepeatGroupItem(props) {
+    const { qItem, answeredQrItem, nullableQrItem, numOfRepeatGroups, groupCardElevation, onDeleteItem, onQrItemChange } = props;
+    return (React.createElement(RepeatGroupContainerStack, { direction: "row", justifyContent: "end" },
+        React.createElement(Box, { sx: { flexGrow: 1 } },
+            React.createElement(GroupItem, { qItem: qItem, qrItem: answeredQrItem, isRepeated: true, groupCardElevation: groupCardElevation + 1, onQrItemChange: onQrItemChange })),
+        React.createElement(DeleteItemButton, { nullableQrItem: nullableQrItem, numOfRepeatGroups: numOfRepeatGroups, onDeleteItem: onDeleteItem })));
+}
+export default RepeatGroupItem;
+//# sourceMappingURL=RepeatGroupItem.js.map

package/src/components/FormComponents/RepeatGroup/RepeatGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatGroupItem.js","sourceRoot":"","sources":["RepeatGroupItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAG/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAWlD,SAAS,eAAe,CAAC,KAA2B;IAClD,MAAM,EACJ,KAAK,EACL,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACf,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,oBAAC,yBAAyB,IAAC,SAAS,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK;QAC7D,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;YACtB,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,cAAc,EACtB,UAAU,EAAE,IAAI,EAChB,kBAAkB,EAAE,kBAAkB,GAAG,CAAC,EAC1C,cAAc,EAAE,cAAc,GAC9B,CACE;QACN,oBAAC,gBAAgB,IACf,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,YAAY,GAC1B,CACwB,CAC7B,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,CAAC"}

package/src/components/FormComponents/RepeatGroup/RepeatGroupItem.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { RepeatGroupContainerStack } from '../RepeatItem/RepeatItem.styles';
+import { Box } from '@mui/material';
+import GroupItem from '../GroupItem/GroupItem';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import DeleteItemButton from './DeleteItemButton';
+
+interface RepeatGroupItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  answeredQrItem: QuestionnaireResponseItem;
+  nullableQrItem: QuestionnaireResponseItem | null;
+  numOfRepeatGroups: number;
+  groupCardElevation: number;
+  onDeleteItem: () => void;
+}
+
+function RepeatGroupItem(props: RepeatGroupItemProps) {
+  const {
+    qItem,
+    answeredQrItem,
+    nullableQrItem,
+    numOfRepeatGroups,
+    groupCardElevation,
+    onDeleteItem,
+    onQrItemChange
+  } = props;
+
+  return (
+    <RepeatGroupContainerStack direction="row" justifyContent="end">
+      <Box sx={{ flexGrow: 1 }}>
+        <GroupItem
+          qItem={qItem}
+          qrItem={answeredQrItem}
+          isRepeated={true}
+          groupCardElevation={groupCardElevation + 1}
+          onQrItemChange={onQrItemChange}
+        />
+      </Box>
+      <DeleteItemButton
+        nullableQrItem={nullableQrItem}
+        numOfRepeatGroups={numOfRepeatGroups}
+        onDeleteItem={onDeleteItem}
+      />
+    </RepeatGroupContainerStack>
+  );
+}
+
+export default RepeatGroupItem;

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

@@ -0,0 +1,27 @@
+/*
+ * 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';
+function AddItemButton(props) {
+    const { repeatAnswers, onAddItem } = props;
+    const isDisabled = repeatAnswers[repeatAnswers.length - 1].answer === null;
+    return (React.createElement(Box, { display: "flex", flexDirection: "row-reverse" },
+        React.createElement(Button, { variant: "contained", startIcon: React.createElement(AddIcon, null), disabled: isDisabled, onClick: onAddItem, "data-test": "button-add-repeat-item" }, "Add Item")));
+}
+export default AddItemButton;
+//# sourceMappingURL=AddItemButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddItemButton.js","sourceRoot":"","sources":["AddItemButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAQ9C,SAAS,aAAa,CAAC,KAAyB;IAC9C,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE3C,MAAM,UAAU,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC;IAE3E,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,aAAa;QAC7C,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,oBAAC,OAAO,OAAG,EACtB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,SAAS,eACR,wBAAwB,eAE3B,CACL,CACP,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC"}