@aehrc/smart-forms-renderer 0.7.0 → 0.7.2

package/lib/utils/repopulateIntoResponse.js

@@ -0,0 +1,92 @@
+import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
+import { updateQrItemsInGroup } from './qrItem';
+export function repopulateItemsIntoResponse(questionnaire, updatableResponse, checkedItemsToRepopulate) {
+    var _a;
+    if (!questionnaire.item ||
+        questionnaire.item.length === 0 ||
+        !updatableResponse.item ||
+        updatableResponse.item.length === 0) {
+        return updatableResponse;
+    }
+    const topLevelQrItems = [];
+    for (const [index, topLevelQItem] of questionnaire.item.entries()) {
+        const repopulatedTopLevelQrItem = (_a = updatableResponse.item[index]) !== null && _a !== void 0 ? _a : {
+            linkId: topLevelQItem.linkId,
+            text: topLevelQItem.text,
+            item: []
+        };
+        const updatedTopLevelQRItem = repopulateItemRecursive(topLevelQItem, repopulatedTopLevelQrItem, checkedItemsToRepopulate);
+        if (Array.isArray(updatedTopLevelQRItem)) {
+            if (updatedTopLevelQRItem.length > 0) {
+                topLevelQrItems.push(...updatedTopLevelQRItem);
+            }
+            continue;
+        }
+        if (updatedTopLevelQRItem) {
+            topLevelQrItems.push(updatedTopLevelQRItem);
+        }
+    }
+    return Object.assign(Object.assign({}, updatableResponse), { item: topLevelQrItems });
+}
+function repopulateItemRecursive(qItem, qrItem, checkedItemsToRepopulate) {
+    var _a;
+    const childQItems = qItem.item;
+    if (childQItems && childQItems.length > 0) {
+        // iterate through items of item recursively
+        const childQrItems = (_a = qrItem === null || qrItem === void 0 ? void 0 : qrItem.item) !== null && _a !== void 0 ? _a : [];
+        // const updatedChildQrItems: QuestionnaireResponseItem[] = [];
+        // FIXME Not implemented for repeat groups
+        if (qItem.type === 'group' && qItem.repeats) {
+            return qrItem !== null && qrItem !== void 0 ? qrItem : null;
+        }
+        const indexMap = mapQItemsIndex(qItem);
+        const qrItemsByIndex = getQrItemsIndex(childQItems, childQrItems, indexMap);
+        // Otherwise loop through qItem as usual
+        for (const [index, childQItem] of childQItems.entries()) {
+            const childQrItem = qrItemsByIndex[index];
+            // FIXME Not implemented for repeat groups
+            if (Array.isArray(childQrItem)) {
+                continue;
+            }
+            const newQrItem = repopulateItemRecursive(childQItem, childQrItem, checkedItemsToRepopulate);
+            // FIXME Not implemented for repeat groups
+            if (Array.isArray(newQrItem)) {
+                continue;
+            }
+            if (newQrItem) {
+                updateQrItemsInGroup(newQrItem, null, qrItem !== null && qrItem !== void 0 ? qrItem : { linkId: qItem.linkId, text: qItem.text, item: [] }, indexMap);
+            }
+        }
+        return constructGroupItem(qItem, qrItem, checkedItemsToRepopulate);
+    }
+    return constructSingleItem(qItem, qrItem, checkedItemsToRepopulate);
+}
+function constructGroupItem(qItem, qrItem, checkedItemsToRepopulate) {
+    const itemToRepopulate = checkedItemsToRepopulate[qItem.linkId];
+    if (!itemToRepopulate) {
+        return qrItem !== null && qrItem !== void 0 ? qrItem : null;
+    }
+    if (qrItem) {
+        return Object.assign(Object.assign({}, qrItem), { answer: itemToRepopulate.newQRItem.answer });
+    }
+    return {
+        linkId: qItem.linkId,
+        text: qItem.text,
+        answer: itemToRepopulate.newQRItem.answer
+    };
+}
+function constructSingleItem(qItem, qrItem, checkedItemsToRepopulate) {
+    const itemToRepopulate = checkedItemsToRepopulate[qItem.linkId];
+    if (!itemToRepopulate) {
+        return qrItem !== null && qrItem !== void 0 ? qrItem : null;
+    }
+    if (qrItem) {
+        return Object.assign(Object.assign({}, qrItem), { answer: itemToRepopulate.newQRItem.answer });
+    }
+    return {
+        linkId: qItem.linkId,
+        text: qItem.text,
+        answer: itemToRepopulate.newQRItem.answer
+    };
+}
+//# sourceMappingURL=repopulateIntoResponse.js.map

package/lib/utils/repopulateIntoResponse.js.map

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

package/lib/utils/repopulateItems.d.ts

@@ -0,0 +1,9 @@
+import type { Questionnaire, QuestionnaireItem, QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
+import type { Tabs } from '../interfaces/tab.interface';
+export interface ItemToRepopulate {
+    qItem: QuestionnaireItem | null;
+    heading: string | null;
+    newQRItem: QuestionnaireResponseItem;
+    oldQRItem?: QuestionnaireResponseItem;
+}
+export declare function getItemsToRepopulate(sourceQuestionnaire: Questionnaire, itemTypes: Record<string, string>, tabs: Tabs, populatedResponse: QuestionnaireResponse, updatableResponse: QuestionnaireResponse): Record<string, ItemToRepopulate>;

package/lib/utils/repopulateItems.js

@@ -0,0 +1,131 @@
+/*
+ * 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 _isEqual from 'lodash/isEqual';
+import { containsTabs, isTabContainer } from './tabs';
+import { getShortText } from './itemControl';
+import { checkIsRepeatGroupToRepopulate, getRepeatGroupToRepopulate } from './repopulateRepeatGroup';
+export function getItemsToRepopulate(sourceQuestionnaire, itemTypes, tabs, populatedResponse, updatableResponse) {
+    var _a;
+    if (!sourceQuestionnaire.item ||
+        sourceQuestionnaire.item.length === 0 ||
+        !populatedResponse.item ||
+        populatedResponse.item.length === 0 ||
+        !updatableResponse.item ||
+        updatableResponse.item.length === 0) {
+        return {};
+    }
+    const populatedItems = [];
+    for (const topLevelItem of populatedResponse.item) {
+        populatedItems.push(...getPopulatedItemsRecursive(topLevelItem, itemTypes));
+    }
+    const itemsToRepopulate = populatedItems.reduce((mapping, item) => {
+        mapping[item.linkId] = {
+            qItem: null,
+            heading: null,
+            newQRItem: item
+        };
+        return mapping;
+    }, {});
+    // Get corresponding old items from updatableResponse if they are different
+    for (const topLevelItem of updatableResponse.item) {
+        checkCorrespondingOldItemsRecursive(topLevelItem, itemTypes, itemsToRepopulate);
+    }
+    // Get corresponding old items from updatableResponse if they are different
+    for (const topLevelItem of sourceQuestionnaire.item) {
+        const heading = (_a = topLevelItem.text) !== null && _a !== void 0 ? _a : null;
+        const hasTabs = isTabContainer(topLevelItem) || containsTabs(topLevelItem);
+        getCorrespondingQuestionnaireItemsRecursive(topLevelItem, heading, tabs, hasTabs, itemsToRepopulate);
+    }
+    return itemsToRepopulate;
+}
+// 1. Get items to repopulate (only new items)
+// 2. Get corresponding old items from updatableResponse (if they are different)
+// 3. Compare old and new items in dialog - if there are none, show a dialog saying there is no new data
+// 4. Have checkboxes in dialog to update response
+// 5. Replace old answers with new answers
+function getCorrespondingQuestionnaireItemsRecursive(qItem, heading, tabs, hasTabs, itemsToRepopulate) {
+    var _a, _b;
+    if (qItem.type === 'group' && qItem.item && qItem.item.length > 0) {
+        const isTab = !!tabs[qItem.linkId];
+        if (isTab) {
+            heading = (_b = (_a = getShortText(qItem)) !== null && _a !== void 0 ? _a : qItem.text) !== null && _b !== void 0 ? _b : null;
+        }
+        // TODO it seems like there can only be one answer per linkId, we might need to do repeat groups differently
+        // so we need to fix this one first it seems like
+        /* Repeat group implementation */
+        if (qItem.type === 'group' && qItem.repeats) {
+            const isRepeatGroupToRepopulate = checkIsRepeatGroupToRepopulate(qItem, itemsToRepopulate);
+            if (isRepeatGroupToRepopulate) {
+                const repeatGroupToRepopulate = getRepeatGroupToRepopulate(qItem, itemsToRepopulate);
+                if (repeatGroupToRepopulate) {
+                    itemsToRepopulate[qItem.linkId] = repeatGroupToRepopulate;
+                    return;
+                }
+            }
+        }
+        // /* Grid implementation */
+        // if (qItem.type === 'group' && isSpecificItemControl(qItem, 'grid')) {
+        //   const isRepeatGroupToRepopulate = checkIsRepeatGroupToRepopulate(qItem, itemsToRepopulate);
+        //   if (isRepeatGroupToRepopulate) {
+        //     getRepeatGroupToRepopulate(qItem, itemsToRepopulate);
+        //   }
+        // }
+        for (const childItem of qItem.item) {
+            getCorrespondingQuestionnaireItemsRecursive(childItem, heading, tabs, hasTabs, itemsToRepopulate);
+        }
+        return;
+    }
+    if (!itemsToRepopulate[qItem.linkId]) {
+        return;
+    }
+    itemsToRepopulate[qItem.linkId].qItem = qItem;
+    itemsToRepopulate[qItem.linkId].heading = heading;
+}
+function getPopulatedItemsRecursive(qrItem, itemTypes) {
+    const itemType = itemTypes[qrItem.linkId];
+    if (itemType === 'group' && qrItem.item && qrItem.item.length > 0) {
+        const populatedChildItems = [];
+        for (const childItem of qrItem.item) {
+            populatedChildItems.push(...getPopulatedItemsRecursive(childItem, itemTypes));
+        }
+        return populatedChildItems;
+    }
+    // record item if it is not a group item
+    return [qrItem];
+}
+function checkCorrespondingOldItemsRecursive(qrItem, itemTypes, itemsToRepopulate) {
+    var _a;
+    const itemType = itemTypes[qrItem.linkId];
+    if (itemType === 'group' && qrItem.item && qrItem.item.length > 0) {
+        for (const childItem of qrItem.item) {
+            checkCorrespondingOldItemsRecursive(childItem, itemTypes, itemsToRepopulate);
+        }
+        return;
+    }
+    const oldItem = qrItem;
+    const newItem = (_a = itemsToRepopulate[qrItem.linkId]) === null || _a === void 0 ? void 0 : _a.newQRItem;
+    if (!newItem) {
+        return;
+    }
+    if (_isEqual(oldItem, newItem)) {
+        delete itemsToRepopulate[qrItem.linkId];
+        return;
+    }
+    // const filteredNewItems = newItems.filter((newItem) => !_isEqual(oldItem, newItem));
+    itemsToRepopulate[qrItem.linkId].oldQRItem = oldItem;
+}
+//# sourceMappingURL=repopulateItems.js.map

package/lib/utils/repopulateItems.js.map

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

package/lib/utils/repopulateRepeatGroup.d.ts

@@ -0,0 +1,4 @@
+import type { QuestionnaireItem } from 'fhir/r4';
+import type { ItemToRepopulate } from './repopulateItems';
+export declare function checkIsRepeatGroupToRepopulate(qItem: QuestionnaireItem, itemsToRepopulate: Record<string, ItemToRepopulate>): boolean | undefined;
+export declare function getRepeatGroupToRepopulate(qItem: QuestionnaireItem, itemsToRepopulate: Record<string, ItemToRepopulate>): ItemToRepopulate | null;

package/lib/utils/repopulateRepeatGroup.js

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+export function checkIsRepeatGroupToRepopulate(qItem, itemsToRepopulate) {
+    if (!qItem.item) {
+        return false;
+    }
+    for (const childItem of qItem.item) {
+        if (itemsToRepopulate[childItem.linkId]) {
+            return true;
+        }
+    }
+}
+export function getRepeatGroupToRepopulate(qItem, itemsToRepopulate) {
+    var _a;
+    if (!qItem.item) {
+        return null;
+    }
+    const childLinkIds = qItem.item
+        .filter((childItem) => !!itemsToRepopulate[childItem.linkId])
+        .map((childItem) => childItem.linkId);
+    const childQRItemsToRepopulate = childLinkIds
+        .reduce((result, linkId) => {
+        if (itemsToRepopulate[linkId]) {
+            result.push(itemsToRepopulate[linkId]);
+        }
+        return result;
+    }, [])
+        .map((itemToRepopulate) => itemToRepopulate.newQRItem);
+    const repeatGroupToRepopulate = {
+        heading: (_a = qItem.text) !== null && _a !== void 0 ? _a : null,
+        qItem: qItem,
+        newQRItem: {
+            linkId: qItem.linkId,
+            text: qItem.text,
+            item: childQRItemsToRepopulate
+        }
+    };
+    return repeatGroupToRepopulate;
+}
+//# sourceMappingURL=repopulateRepeatGroup.js.map

package/lib/utils/repopulateRepeatGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repopulateRepeatGroup.js","sourceRoot":"","sources":["../../src/utils/repopulateRepeatGroup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAKH,MAAM,UAAU,8BAA8B,CAC5C,KAAwB,EACxB,iBAAmD;IAEnD,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;QACf,OAAO,KAAK,CAAC;KACd;IAED,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,EAAE;QAClC,IAAI,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE;YACvC,OAAO,IAAI,CAAC;SACb;KACF;AACH,CAAC;AAED,MAAM,UAAU,0BAA0B,CACxC,KAAwB,EACxB,iBAAmD;;IAEnD,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;QACf,OAAO,IAAI,CAAC;KACb;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI;SAC5B,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SAC5D,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAExC,MAAM,wBAAwB,GAAG,YAAY;SAC1C,MAAM,CAAC,CAAC,MAA0B,EAAE,MAAM,EAAE,EAAE;QAC7C,IAAI,iBAAiB,CAAC,MAAM,CAAC,EAAE;YAC7B,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;SACxC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC;SACL,GAAG,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAEzD,MAAM,uBAAuB,GAAqB;QAChD,OAAO,EAAE,MAAA,KAAK,CAAC,IAAI,mCAAI,IAAI;QAC3B,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE;YACT,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,IAAI,EAAE,wBAAwB;SAC/B;KACF,CAAC;IAEF,OAAO,uBAAuB,CAAC;AACjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
@@ -23,6 +23,7 @@
   },
   "homepage": "https://github.com/aehrc/smart-forms#readme",
   "dependencies": {
+    "json-diff": "^1.0.6",
     "@iconify/react": "^4.1.1",
     "dayjs": "^1.11.9",
     "fhirclient": "^2.5.2",
@@ -62,6 +63,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@types/jest": "^29.5.4",
+    "@types/json-diff": "^1.0.0",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "jest": "^29.6.4",

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

@@ -106,6 +106,7 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
         options={options}
         getOptionLabel={(option) => `${option.display}`}
         isOptionEqualToValue={(option, value) => option.id === value.id}
+        disabled={readOnly}
         loading={loading}
         loadingText={'Fetching results...'}
         clearOnEscape
@@ -118,7 +119,6 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
             {...params}
             onChange={(e: ChangeEvent<HTMLInputElement>) => setInput(e.target.value)}
             isTabled={isTabled}
-            disabled={readOnly}
             label={displayPrompt}
             size="small"
             InputProps={{

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -36,6 +36,7 @@ import {
 } from '../../../utils/parseInputs';
 import { getDecimalPrecision } from '../../../utils/itemControl';
 import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedExpression';
+import useStringInput from '../../../hooks/useStringInput';
 
 interface DecimalItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -74,7 +75,7 @@ function DecimalItem(props: DecimalItemProps) {
 
     initialInput = precision ? valueDecimal.toFixed(precision) : valueDecimal.toString();
   }
-  const [input, setInput] = useState(initialInput);
+  const [input, setInput] = useStringInput(initialInput);
 
   // Perform validation checks
   const feedback = useValidationError(input, regexValidation, maxLength);

package/src/components/FormComponents/GridGroup/GridGroup.tsx

@@ -18,7 +18,7 @@
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
-import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import useHidden from '../../../hooks/useHidden';
 import { QGroupContainerBox } from '../../Box.styles';
 import Divider from '@mui/material/Divider';
@@ -66,7 +66,7 @@ function GridGroup(props: GridGroupProps) {
   // Event Handlers
   function handleRowChange(newQrItem: QuestionnaireResponseItem) {
     const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
-    updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+    updateQrItemsInGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
     onQrItemChange(updatedQrGroup);
   }
 

package/src/components/FormComponents/GridGroup/GridRow.tsx

@@ -18,7 +18,7 @@
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
-import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import { GridAnswerTableCell, GridTextTableCell } from '../Tables/Table.styles';
 import SingleItem from '../SingleItem/SingleItem';
 import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
@@ -52,7 +52,7 @@ function GridRow(props: GridRowProps) {
 
   function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
     const qrRow: QuestionnaireResponseItem = { ...row };
-    updateQrGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+    updateQrItemsInGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
     onQrItemChange(qrRow);
   }
 

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

@@ -18,7 +18,7 @@
 import React, { useMemo } from 'react';
 import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import { QGroupContainerBox } from '../../Box.styles';
 import type {
   PropsWithIsRepeatedAttribute,
@@ -70,13 +70,13 @@ function GroupItem(props: GroupItemProps) {
   // Event Handlers
   function handleQrItemChange(newQrItem: QuestionnaireResponseItem) {
     const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
-    updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+    updateQrItemsInGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
     onQrItemChange(updatedQrGroup);
   }
 
   function handleQrRepeatGroupChange(qrRepeatGroup: QrRepeatGroup) {
     const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
-    updateQrGroup(null, qrRepeatGroup, updatedQrGroup, qItemsIndexMap);
+    updateQrItemsInGroup(null, qrRepeatGroup, updatedQrGroup, qItemsIndexMap);
     onQrItemChange(updatedQrGroup);
   }
 

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -32,6 +32,7 @@ import IntegerField from './IntegerField';
 import useIntegerCalculatedExpression from '../../../hooks/useIntegerCalculatedExpression';
 import { parseValidInteger } from '../../../utils/parseInputs';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useNumberInput from '../../../hooks/useNumberInput';
 
 interface IntegerItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -65,7 +66,7 @@ function IntegerItem(props: IntegerItemProps) {
       valueInteger = Math.round(qrItem.answer[0].valueDecimal);
     }
   }
-  const [value, setValue] = useState(valueInteger);
+  const [value, setValue] = useNumberInput(valueInteger);
 
   // Perform validation checks
   const feedback = useValidationError(value.toString(), regexValidation, maxLength);

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceAutocompleteItem.tsx

@@ -122,6 +122,7 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
           value={valueAutocomplete}
           options={options}
           getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
+          disabled={readOnly}
           loading={loading}
           loadingText={'Fetching results...'}
           clearOnEscape
@@ -146,7 +147,6 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
               }}
               onChange={(e: ChangeEvent<HTMLInputElement>) => setInput(e.target.value)}
               isTabled={isTabled}
-              disabled={readOnly}
               label={displayPrompt}
               size="small"
               InputProps={{

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

@@ -31,6 +31,7 @@ import { nanoid } from 'nanoid';
 import RepeatGroupItem from './RepeatGroupItem';
 import AddItemButton from './AddItemButton';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import cloneDeep from 'lodash.clonedeep';
 
 interface RepeatGroupProps extends PropsWithQrRepeatGroupChangeHandler {
   qItem: QuestionnaireItem;
@@ -41,7 +42,7 @@ interface RepeatGroupProps extends PropsWithQrRepeatGroupChangeHandler {
 function RepeatGroup(props: RepeatGroupProps) {
   const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
 
-  const initialRepeatGroups = useInitialiseRepeatGroups(qrItems);
+  const initialRepeatGroups = useInitialiseRepeatGroups(qItem, qrItems);
 
   const [repeatGroups, setRepeatGroups] = useState(initialRepeatGroups);
 
@@ -60,7 +61,7 @@ function RepeatGroup(props: RepeatGroupProps) {
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
       qrItems: updatedRepeatGroups.flatMap((singleGroup) =>
-        singleGroup.qrItem ? [singleGroup.qrItem] : []
+        singleGroup.qrItem ? [cloneDeep(singleGroup.qrItem)] : []
       )
     });
   }
@@ -74,7 +75,7 @@ function RepeatGroup(props: RepeatGroupProps) {
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
       qrItems: updatedRepeatGroups.flatMap((singleGroup) =>
-        singleGroup.qrItem ? [singleGroup.qrItem] : []
+        singleGroup.qrItem ? [cloneDeep(singleGroup.qrItem)] : []
       )
     });
   }

package/src/{theme/overrides/Backdrop.ts → components/FormComponents/RepeatGroup/index.ts}

@@ -15,20 +15,4 @@
  * limitations under the License.
  */
 
-import type { Theme } from '@mui/material/styles';
-import { alpha } from '@mui/material/styles';
-
-export default function Backdrop(theme: Theme) {
-  return {
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: alpha(theme.palette.grey[800], 0.8)
-        },
-        invisible: {
-          background: 'transparent'
-        }
-      }
-    }
-  };
-}
+export { default as RepeatGroup } from './RepeatGroup';

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

@@ -40,7 +40,7 @@ function RepeatItem(props: RepeatItemProps) {
   // Get additional rendering extensions
   const { displayInstructions } = useRenderingExtensions(qItem);
 
-  const initialRepeatAnswers = useInitialiseRepeatAnswers(qrItem);
+  const initialRepeatAnswers = useInitialiseRepeatAnswers(qItem, qrItem);
 
   const [repeatAnswers, setRepeatAnswers] = useState(initialRepeatAnswers);
 

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { default as SingleItem } from './SingleItem';

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -31,6 +31,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import StringField from './StringField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
+import useStringInput from '../../../hooks/useStringInput';
 
 interface StringItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -58,7 +59,7 @@ function StringItem(props: StringItemProps) {
   if (qrItem?.answer && qrItem?.answer[0].valueString) {
     valueString = qrItem.answer[0].valueString;
   }
-  const [input, setInput] = useState(valueString);
+  const [input, setInput] = useStringInput(valueString);
 
   // Perform validation checks
   const feedback = useValidationError(input, regexValidation, maxLength);

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

@@ -41,6 +41,7 @@ import { nanoid } from 'nanoid';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import DeleteRowButton from './DeleteRowButton';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import cloneDeep from 'lodash.clonedeep';
 
 interface Props extends PropsWithQrRepeatGroupChangeHandler {
   qItem: QuestionnaireItem;
@@ -84,7 +85,9 @@ function QItemGroupTable(props: Props) {
     setTableRows(updatedTableRows);
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
-      qrItems: updatedTableRows.flatMap((singleRow) => (singleRow.qrItem ? [singleRow.qrItem] : []))
+      qrItems: updatedTableRows.flatMap((singleRow) =>
+        singleRow.qrItem ? [cloneDeep(singleRow.qrItem)] : []
+      )
     });
   }
 
@@ -96,7 +99,9 @@ function QItemGroupTable(props: Props) {
     setTableRows(updatedTableRows);
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
-      qrItems: updatedTableRows.flatMap((singleRow) => (singleRow.qrItem ? [singleRow.qrItem] : []))
+      qrItems: updatedTableRows.flatMap((singleRow) =>
+        singleRow.qrItem ? [cloneDeep(singleRow.qrItem)] : []
+      )
     });
   }
 
@@ -112,10 +117,14 @@ function QItemGroupTable(props: Props) {
 
   return (
     <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
-      <Typography fontSize={13} variant="h6">
-        <LabelWrapper qItem={qItem} />
-      </Typography>
-      <Divider sx={{ my: 1 }} light />
+      {groupCardElevation !== 1 ? (
+        <>
+          <Typography fontSize={13} variant="h6">
+            <LabelWrapper qItem={qItem} />
+          </Typography>
+          <Divider sx={{ my: 1 }} light />
+        </>
+      ) : null}
       <TableContainer component={Paper} elevation={groupCardElevation}>
         <Table>
           <caption>