@aehrc/smart-forms-renderer 0.8.1 → 0.9.1

package/lib/utils/repopulateRepeatGroup.js

@@ -30,8 +30,14 @@ export function getRepeatGroupToRepopulate(qItem, itemsToRepopulate) {
         return null;
     }
     const childLinkIds = qItem.item
-        .filter((childItem) => !!itemsToRepopulate[childItem.linkId])
+        // .filter((childItem) => !!itemsToRepopulate[childItem.linkId])
         .map((childItem) => childItem.linkId);
+    console.log(childLinkIds);
+    const aggr = childLinkIds
+        .map((linkId) => itemsToRepopulate[linkId])
+        .map((itemToRepopulate) => itemToRepopulate.newQRItems);
+    console.log(aggr);
+    // TODO ok good progress but how do we know to map sprased answers
     const childQRItemsToRepopulate = childLinkIds
         .reduce((result, linkId) => {
         if (itemsToRepopulate[linkId]) {
@@ -40,6 +46,8 @@ export function getRepeatGroupToRepopulate(qItem, itemsToRepopulate) {
         return result;
     }, [])
         .map((itemToRepopulate) => itemToRepopulate.newQRItem);
+    // console.log(cloneDeep(childQRItemsToRepopulate));
+    console.log(childQRItemsToRepopulate);
     const repeatGroupToRepopulate = {
         heading: (_a = qItem.text) !== null && _a !== void 0 ? _a : null,
         qItem: qItem,

package/lib/utils/repopulateRepeatGroup.js.map

@@ -1 +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"}
+{"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;QAC7B,gEAAgE;SAC/D,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAExC,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAE1B,MAAM,IAAI,GAAG,YAAY;SACtB,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;SAC1C,GAAG,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAE1D,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,kEAAkE;IAElE,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,oDAAoD;IACpD,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;IAEtC,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/lib/utils/slider.d.ts

@@ -0,0 +1,28 @@
+import type { QuestionnaireItem } from 'fhir/r4';
+/**
+ * Get Questionnaire slider step value if its extension is present (http://hl7.org/fhir/StructureDefinition/questionnaire-sliderStepValue)
+ *
+ * @author Sean Fong
+ */
+export declare function getSliderStepValue(qItem: QuestionnaireItem): number | null;
+/**
+ * Get minimum value if its extension is present (http://hl7.org/fhir/StructureDefinition/minValue)
+ * Only supports valueInteger and valueDecimal for now
+ *
+ * @author Sean Fong
+ */
+export declare function getMinValue(qItem: QuestionnaireItem): number | null;
+/**
+ * Get maximum value if its extension is present (http://hl7.org/fhir/StructureDefinition/maxValue)
+ * Only supports valueInteger and valueDecimal for now
+ *
+ * @author Sean Fong
+ */
+export declare function getMaxValue(qItem: QuestionnaireItem): number | null;
+export declare function getSliderMarks(minValue: number, maxValue: number, minLabel: string, maxLabel: string, stepValue: number): {
+    value: number;
+    label: number;
+}[] | {
+    value: number;
+    label: string;
+}[];

package/lib/utils/slider.js

@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+/**
+ * Get Questionnaire slider step value if its extension is present (http://hl7.org/fhir/StructureDefinition/questionnaire-sliderStepValue)
+ *
+ * @author Sean Fong
+ */
+export function getSliderStepValue(qItem) {
+    var _a;
+    const itemControl = (_a = qItem.extension) === null || _a === void 0 ? void 0 : _a.find((extension) => extension.url === 'http://hl7.org/fhir/StructureDefinition/questionnaire-sliderStepValue');
+    if (itemControl) {
+        if (itemControl.valueInteger) {
+            return itemControl.valueInteger;
+        }
+    }
+    return null;
+}
+/**
+ * Get minimum value if its extension is present (http://hl7.org/fhir/StructureDefinition/minValue)
+ * Only supports valueInteger and valueDecimal for now
+ *
+ * @author Sean Fong
+ */
+export function getMinValue(qItem) {
+    var _a;
+    const itemControl = (_a = qItem.extension) === null || _a === void 0 ? void 0 : _a.find((extension) => extension.url === 'http://hl7.org/fhir/StructureDefinition/minValue');
+    if (itemControl) {
+        if (itemControl.valueInteger) {
+            return itemControl.valueInteger;
+        }
+        if (itemControl.valueDecimal) {
+            return itemControl.valueDecimal;
+        }
+    }
+    return null;
+}
+/**
+ * Get maximum value if its extension is present (http://hl7.org/fhir/StructureDefinition/maxValue)
+ * Only supports valueInteger and valueDecimal for now
+ *
+ * @author Sean Fong
+ */
+export function getMaxValue(qItem) {
+    var _a;
+    const itemControl = (_a = qItem.extension) === null || _a === void 0 ? void 0 : _a.find((extension) => extension.url === 'http://hl7.org/fhir/StructureDefinition/maxValue');
+    if (itemControl) {
+        if (itemControl.valueInteger) {
+            return itemControl.valueInteger;
+        }
+        if (itemControl.valueDecimal) {
+            return itemControl.valueDecimal;
+        }
+    }
+    return null;
+}
+export function getSliderMarks(minValue, maxValue, minLabel, maxLabel, stepValue) {
+    const numOfSteps = Math.ceil((maxValue - minValue) / stepValue);
+    if (numOfSteps > 20) {
+        return [
+            {
+                value: minValue,
+                label: minLabel !== '' ? minLabel : minValue.toString()
+            },
+            {
+                value: maxValue,
+                label: maxLabel !== '' ? maxLabel : maxValue.toString()
+            }
+        ];
+    }
+    return Array.from({ length: numOfSteps + 1 }, (_, i) => minValue + i * stepValue).map((value) => ({
+        value: value,
+        label: value
+    }));
+}
+//# sourceMappingURL=slider.js.map

package/lib/utils/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/utils/slider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAwB;;IACzD,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CACvC,CAAC,SAAoB,EAAE,EAAE,CACvB,SAAS,CAAC,GAAG,KAAK,uEAAuE,CAC5F,CAAC;IAEF,IAAI,WAAW,EAAE;QACf,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,OAAO,WAAW,CAAC,YAAY,CAAC;SACjC;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,KAAwB;;IAClD,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CACvC,CAAC,SAAoB,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,kDAAkD,CAC/F,CAAC;IAEF,IAAI,WAAW,EAAE;QACf,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,OAAO,WAAW,CAAC,YAAY,CAAC;SACjC;QAED,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,OAAO,WAAW,CAAC,YAAY,CAAC;SACjC;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,KAAwB;;IAClD,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CACvC,CAAC,SAAoB,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,kDAAkD,CAC/F,CAAC;IAEF,IAAI,WAAW,EAAE;QACf,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,OAAO,WAAW,CAAC,YAAY,CAAC;SACjC;QAED,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,OAAO,WAAW,CAAC,YAAY,CAAC;SACjC;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,QAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,SAAiB;IAEjB,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,SAAS,CAAC,CAAC;IAChE,IAAI,UAAU,GAAG,EAAE,EAAE;QACnB,OAAO;YACL;gBACE,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE;aACxD;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE;aACxD;SACF,CAAC;KACH;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,QAAQ,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC,GAAG,CACnF,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACV,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,KAAK;KACb,CAAC,CACH,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
@@ -23,19 +23,20 @@
   },
   "homepage": "https://github.com/aehrc/smart-forms#readme",
   "dependencies": {
-    "deep-diff": "^1.0.2",
+    "@aehrc/sdc-assemble": "^1.0.2",
     "@iconify/react": "^4.1.1",
+    "@types/fhir": "^0.0.38",
     "dayjs": "^1.11.10",
+    "deep-diff": "^1.0.2",
     "fhirclient": "^2.5.2",
-    "fhirpath": "^3.6.1",
-    "html-react-parser": "^4.2.0",
+    "fhirpath": "^3.7.1",
+    "html-react-parser": "^5.0.3",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "nanoid": "^5.0.1",
-    "@types/fhir": "^0.0.37",
-    "zustand": "^4.4.1",
     "react-markdown": "^8.0.7",
-    "@aehrc/sdc-assemble": "^1.0.2"
+    "zustand": "^4.4.1",
+    "moment": "^2.29.4"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11.0",
@@ -49,25 +50,27 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
+    "@babel/core": "^7.23.3",
     "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.3",
-    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.5.2",
     "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.4.0",
+    "@storybook/blocks": "^7.5.2",
     "@storybook/react": "^7.4.3",
     "@storybook/react-vite": "^7.4.5",
     "@storybook/testing-library": "^0.2.1",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.2",
-    "@types/jest": "^29.5.5",
-    "@types/deep-diff": "^1.0.3",
-    "@types/react": "^18.2.18",
+    "@types/deep-diff": "^1.0.4",
+    "@types/jest": "^29.5.7",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.clonedeep": "^4.5.7",
+    "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.9",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.4.5",

package/src/components/FormComponents/BooleanItem/BooleanItem.tsx

@@ -32,12 +32,12 @@ import Box from '@mui/material/Box';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface BooleanItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function BooleanItem(props: BooleanItemProps) {

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

@@ -47,12 +47,12 @@ import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceAutocompleteItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {

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

@@ -27,7 +27,7 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
@@ -35,12 +35,12 @@ import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerOptionFiel
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceCheckboxAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 
@@ -50,7 +50,7 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
     qrItem,
     orientation,
     isRepeated,
-    textShown = true,
+    showMinimalView = false,
     parentIsReadOnly,
     onQrItemChange
   } = props;
@@ -80,39 +80,39 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
     }
   }
 
-  if (textShown) {
+  if (showMinimalView) {
     return (
-      <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
-        <Grid container columnSpacing={6}>
-          <Grid item xs={5}>
-            <LabelWrapper qItem={qItem} readOnly={readOnly} />
-          </Grid>
-          <Grid item xs={7}>
-            <ChoiceCheckboxAnswerValueSetFields
-              qItem={qItem}
-              answers={answers}
-              orientation={orientation}
-              readOnly={readOnly}
-              onCheckedChange={handleCheckedChange}
-            />
-            <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-          </Grid>
-        </Grid>
-      </FullWidthFormComponentBox>
+      <>
+        <ChoiceCheckboxAnswerValueSetFields
+          qItem={qItem}
+          answers={answers}
+          orientation={orientation}
+          readOnly={readOnly}
+          onCheckedChange={handleCheckedChange}
+        />
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+      </>
     );
   }
 
   return (
-    <>
-      <ChoiceCheckboxAnswerValueSetFields
-        qItem={qItem}
-        answers={answers}
-        orientation={orientation}
-        readOnly={readOnly}
-        onCheckedChange={handleCheckedChange}
-      />
-      <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-    </>
+    <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
+        </Grid>
+        <Grid item xs={7}>
+          <ChoiceCheckboxAnswerValueSetFields
+            qItem={qItem}
+            answers={answers}
+            orientation={orientation}
+            readOnly={readOnly}
+            onCheckedChange={handleCheckedChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
   );
 }
 

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

@@ -28,7 +28,7 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
@@ -36,12 +36,12 @@ import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerValueSetFi
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceCheckboxAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
   showText?: boolean;
 }
@@ -52,7 +52,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
     qrItem,
     orientation,
     isRepeated,
-    textShown = true,
+    showMinimalView = false,
     parentIsReadOnly,
     onQrItemChange
   } = props;
@@ -84,41 +84,41 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
     }
   }
 
-  if (textShown) {
+  if (showMinimalView) {
     return (
-      <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-value-set-box">
-        <Grid container columnSpacing={6}>
-          <Grid item xs={5}>
-            <LabelWrapper qItem={qItem} readOnly={readOnly} />
-          </Grid>
-          <Grid item xs={7}>
-            <ChoiceCheckboxAnswerValueSetFields
-              codings={codings}
-              answers={answers}
-              orientation={orientation}
-              readOnly={readOnly}
-              serverError={serverError}
-              onCheckedChange={handleCheckedChange}
-            />
-            <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-          </Grid>
-        </Grid>
-      </FullWidthFormComponentBox>
+      <>
+        <ChoiceCheckboxAnswerValueSetFields
+          codings={codings}
+          answers={answers}
+          orientation={orientation}
+          readOnly={readOnly}
+          serverError={serverError}
+          onCheckedChange={handleCheckedChange}
+        />
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+      </>
     );
   }
 
   return (
-    <>
-      <ChoiceCheckboxAnswerValueSetFields
-        codings={codings}
-        answers={answers}
-        orientation={orientation}
-        readOnly={readOnly}
-        serverError={serverError}
-        onCheckedChange={handleCheckedChange}
-      />
-      <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-    </>
+    <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-value-set-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
+        </Grid>
+        <Grid item xs={7}>
+          <ChoiceCheckboxAnswerValueSetFields
+            codings={codings}
+            answers={answers}
+            orientation={orientation}
+            readOnly={readOnly}
+            serverError={serverError}
+            onCheckedChange={handleCheckedChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
   );
 }
 

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

@@ -29,23 +29,23 @@ import ChoiceCheckboxAnswerValueSetItem from './ChoiceCheckboxAnswerValueSetItem
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
-import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
 
 interface ChoiceItemSwitcherProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
   const orientation = getChoiceOrientation(qItem);
@@ -84,7 +84,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qrItem={qrItem}
             orientation={orientation}
             isRepeated={qItem.repeats ?? false}
-            textShown={textShown}
+            showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
@@ -96,7 +96,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qrItem={qrItem}
             isRepeated={qItem.repeats ?? false}
             orientation={orientation}
-            textShown={textShown}
+            showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />

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

@@ -34,11 +34,11 @@ import ChoiceRadioAnswerOptionFields from './ChoiceRadioAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceRadioAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 

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

@@ -35,11 +35,11 @@ import ChoiceRadioAnswerValueSetFields from './ChoiceRadioAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceRadioAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 

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

@@ -35,12 +35,12 @@ import ChoiceSelectAnswerOptionFields from './ChoiceSelectAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceSelectAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps) {

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

@@ -35,12 +35,12 @@ import ChoiceSelectAnswerValueSetFields from './ChoiceSelectAnswerValueSetFields
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceSelectAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemProps) {