From 1e21bbe8f5ab6503ca2ddb320d6945381152ced4 Mon Sep 17 00:00:00 2001
From: Sean Fong <sean.fong@csiro.au>
Date: Wed, 5 Jun 2024 11:03:30 +0930
Subject: [PATCH] Add support for collapsible in repeat groups

---
 Conformance.md                                |   6 +-
 .../docs/devUsage/renderer-overview.mdx       |   2 +-
 documentation/docs/sdc/advanced/question.mdx  |  44 ++++
 documentation/docs/sdc/index.mdx              |   6 +-
 .../GroupItem/GroupItemView.tsx               |   6 +-
 .../RepeatGroup/RepeatGroup.tsx               |  93 +-------
 .../RepeatGroup/RepeatGroupView.tsx           | 202 ++++++++++++++++++
 .../QAdvancedControlAppearance.ts             | 124 +++++++++++
 .../assets/questionnaires/QMbs715Tester.ts    |   8 +-
 .../sdc/AdvancedControlAppearance.stories.tsx |   7 +
 10 files changed, 406 insertions(+), 92 deletions(-)
 create mode 100644 packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx

diff --git a/Conformance.md b/Conformance.md
index 06519d5cf..509e9a2dd 100644
--- a/Conformance.md
+++ b/Conformance.md
@@ -51,11 +51,11 @@ View the source here: http://hl7.org/fhir/uv/sdc/expressions.html
 View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 
 #### [Text Appearance](http://hl7.org/fhir/uv/sdc/rendering.html#extension-overview)
-- [ ] rendering-style
+- [x] rendering-style
 - [x] rendering-xhtml
 - [x] displayCategory
 - [x] openLabel
-- [x] hidden
+- [x] hidden  
 - [ ] itemMedia
 - [ ] itemAnswerMedia
 
@@ -64,7 +64,7 @@ View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 - [x] choiceOrientation
 - [x] sliderStepValue
 - [ ] width
-- [ ] collapsible
+- [x] collapsible
 
 **Questionnaire `itemControl` Checklist**
 
diff --git a/documentation/docs/devUsage/renderer-overview.mdx b/documentation/docs/devUsage/renderer-overview.mdx
index 68c1005a4..38e07d14f 100644
--- a/documentation/docs/devUsage/renderer-overview.mdx
+++ b/documentation/docs/devUsage/renderer-overview.mdx
@@ -312,7 +312,7 @@ The button will look different in the output, but it still functions the same wa
   <TabItem value="output">
     <IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-testing-build-form-button-tester--build-form-button-tester">
       <iframe
-        src="http://localhost:6006/iframe.html?args=&id=component-testing-build-form-button-tester--build-form-button-tester"
+        src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-testing-build-form-button-tester--build-form-button-tester"
         width="100%"
         height="130"
       />
diff --git a/documentation/docs/sdc/advanced/question.mdx b/documentation/docs/sdc/advanced/question.mdx
index 25af8ee03..3c1cf3a5d 100644
--- a/documentation/docs/sdc/advanced/question.mdx
+++ b/documentation/docs/sdc/advanced/question.mdx
@@ -22,6 +22,7 @@ The extensions that fall under this subsection are:
 
 - [choiceOrientation](http://hl7.org/fhir/uv/sdc/rendering.html#choiceOrientation)
 - [sliderStepValue](http://hl7.org/fhir/uv/sdc/rendering.html#sliderStepValue)
+- [collapsible](http://hl7.org/fhir/uv/sdc/rendering.html#collapsible)
 - [entryFormat](http://hl7.org/fhir/uv/sdc/rendering.html#entryFormat)
 - [questionnaire-unit](https://hl7.org/fhir/extensions/StructureDefinition-questionnaire-unit.html)
 
@@ -209,6 +210,49 @@ SliderStepValue is only supported on the [itemControl](https://hl7.org/fhir/exte
   />
 </IframeContainer>
 
+### Collapsible
+
+Allows the child items of a group to be displayed in a collapsible form where items can be shown and hidden from the view. It is useful for particularly long questionnaires.
+
+Collapsible is only supported on **group** items.
+
+#### Default Open Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-default-open">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-default-open"
+    width="100%"
+    height="260"
+  />
+</IframeContainer>
+
+#### Default Closed Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-default-closed">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-default-closed"
+    width="100%"
+    height="260"
+  />
+</IframeContainer>
+
+#### Nested Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-nested">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-nested"
+    width="100%"
+    height="760"
+  />
+</IframeContainer>
+
+:::note
+
+When a parent of a child collapsible item is collapsed, its child items effectively stopped being rendered by React.
+This means the collapsible status of any child collapsible groups will return to the default values ("default-open" or "default-closed") as defined in the Questionnaire.
+
+:::
+
 ### EntryFormat
 
 Displays a "ghost" text in the field. Acts as a guide for the user on what to enter in the field.
diff --git a/documentation/docs/sdc/index.mdx b/documentation/docs/sdc/index.mdx
index 9244a5881..54e021d07 100644
--- a/documentation/docs/sdc/index.mdx
+++ b/documentation/docs/sdc/index.mdx
@@ -11,7 +11,7 @@ The SDC specification provides a set of guidance around the use of Questionnaire
 
 :::tip
 
-Before diving into this section, it might be worth reading the [usage examples guide](http://localhost:3000/docs/components#usage-examples) in the Components section.
+Before diving into this section, it might be worth reading the [usage examples guide](/docs/components#usage-examples) in the Components section.
 
 :::
 
@@ -54,7 +54,7 @@ View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 
 #### [Text Appearance](http://hl7.org/fhir/uv/sdc/rendering.html#extension-overview)
 
-- [ ] rendering-style
+- [x] rendering-style
 - [x] rendering-xhtml
 - [x] displayCategory
 - [x] openLabel
@@ -68,7 +68,7 @@ View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 - [x] choiceOrientation
 - [x] sliderStepValue
 - [ ] width
-- [ ] collapsible
+- [x] collapsible
 
 **Questionnaire `itemControl` Checklist**
 
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx
index 963e5efaf..706f628dc 100644
--- a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx
+++ b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx
@@ -72,8 +72,10 @@ function GroupItemView(props: GroupItemViewProps) {
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
+  // Render collapsible group item
+  // If group item is a repeating instance, do not render group item as collapsible
   const groupIsCollapsible = getGroupCollapsible(qItem);
-  if (groupIsCollapsible) {
+  if (groupIsCollapsible && !isRepeated) {
     const isDefaultOpen = groupIsCollapsible === 'default-open';
     return (
       <GroupAccordion
@@ -84,7 +86,7 @@ function GroupItemView(props: GroupItemViewProps) {
         slotProps={{
           transition: { unmountOnExit: true, timeout: 250 }
         }}>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ minHeight: '28px' }}>
           <GroupHeading
             qItem={qItem}
             readOnly={readOnly}
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx b/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx
index b53e3d8d4..8f9c6358b 100644
--- a/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx
+++ b/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx
@@ -24,21 +24,11 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
-import { QGroupContainerBox } from '../../Box.styles';
-import Card from '@mui/material/Card';
-import Collapse from '@mui/material/Collapse';
-import Divider from '@mui/material/Divider';
-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';
 import cloneDeep from 'lodash.clonedeep';
-import useReadOnly from '../../../hooks/useReadOnly';
-import Typography from '@mui/material/Typography';
 import { useQuestionnaireStore } from '../../../stores';
 import useRepeatGroups from '../../../hooks/useRepeatGroups';
+import RepeatGroupView from './RepeatGroupView';
 
 interface RepeatGroupProps
   extends PropsWithQrRepeatGroupChangeHandler,
@@ -68,8 +58,6 @@ function RepeatGroup(props: RepeatGroupProps) {
 
   const mutateRepeatEnableWhenItems = useQuestionnaireStore.use.mutateRepeatEnableWhenItems();
 
-  const readOnly = useReadOnly(qItem, parentIsReadOnly);
-
   const initialRepeatGroups = useInitialiseRepeatGroups(qItem, qrItems);
 
   const [repeatGroups, setRepeatGroups] = useRepeatGroups(initialRepeatGroups);
@@ -122,76 +110,17 @@ function RepeatGroup(props: RepeatGroupProps) {
     ]);
   }
 
-  if (showMinimalView) {
-    return (
-      <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
-        <Card elevation={groupCardElevation} sx={{ p: 2 }}>
-          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
-            const answeredQrItem = createEmptyQrItem(qItem);
-            if (nullableQrItem) {
-              answeredQrItem.item = nullableQrItem.item;
-            }
-
-            return (
-              <RepeatGroupItem
-                key={nanoId}
-                qItem={qItem}
-                repeatGroupIndex={index}
-                answeredQrItem={answeredQrItem}
-                nullableQrItem={nullableQrItem}
-                numOfRepeatGroups={repeatGroups.length}
-                groupCardElevation={groupCardElevation + 1}
-                showMinimalView={showMinimalView}
-                parentIsReadOnly={parentIsReadOnly}
-                onDeleteItem={() => handleDeleteItem(index)}
-                onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
-              />
-            );
-          })}
-        </Card>
-      </QGroupContainerBox>
-    );
-  }
-
   return (
-    <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
-      <Card elevation={groupCardElevation} sx={{ p: 3, py: 2.5, mb: 3.5 }}>
-        {qItem.text ? (
-          <>
-            <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
-              <LabelWrapper qItem={qItem} readOnly={readOnly} />
-            </Typography>
-            <Divider sx={{ mt: 1, mb: 1.5 }} light />
-          </>
-        ) : null}
-        <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}
-                  repeatGroupIndex={index}
-                  answeredQrItem={answeredQrItem}
-                  nullableQrItem={nullableQrItem}
-                  numOfRepeatGroups={repeatGroups.length}
-                  groupCardElevation={groupCardElevation + 1}
-                  parentIsReadOnly={parentIsReadOnly}
-                  onDeleteItem={() => handleDeleteItem(index)}
-                  onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
-                />
-              </Collapse>
-            );
-          })}
-        </TransitionGroup>
-
-        <AddItemButton repeatGroups={repeatGroups} readOnly={readOnly} onAddItem={handleAddItem} />
-      </Card>
-    </QGroupContainerBox>
+    <RepeatGroupView
+      qItem={qItem}
+      repeatGroups={repeatGroups}
+      groupCardElevation={groupCardElevation}
+      showMinimalView={showMinimalView}
+      parentIsReadOnly={parentIsReadOnly}
+      onAnswerChange={handleAnswerChange}
+      onAddItem={handleAddItem}
+      onDeleteItem={handleDeleteItem}
+    />
   );
 }
 
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx b/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx
new file mode 100644
index 000000000..efdb2e871
--- /dev/null
+++ b/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx
@@ -0,0 +1,202 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithParentIsRepeatGroupAttribute,
+  PropsWithShowMinimalViewAttribute
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { QGroupContainerBox } from '../../Box.styles';
+import Card from '@mui/material/Card';
+import Collapse from '@mui/material/Collapse';
+import Divider from '@mui/material/Divider';
+import { TransitionGroup } from 'react-transition-group';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import RepeatGroupItem from './RepeatGroupItem';
+import AddItemButton from './AddItemButton';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import Typography from '@mui/material/Typography';
+import type { RepeatGroupSingle } from '../../../interfaces/repeatGroup.interface';
+import useReadOnly from '../../../hooks/useReadOnly';
+import { getGroupCollapsible } from '../../../utils/qItem';
+import { GroupAccordion } from '../GroupItem/GroupAccordion.styles';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import AccordionDetails from '@mui/material/AccordionDetails';
+
+interface RepeatGroupViewProps
+  extends PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute,
+    PropsWithParentIsRepeatGroupAttribute {
+  qItem: QuestionnaireItem;
+  repeatGroups: RepeatGroupSingle[];
+  groupCardElevation: number;
+  onAnswerChange: (newQrItem: QuestionnaireResponseItem, index: number) => void;
+  onAddItem: () => void;
+  onDeleteItem: (index: number) => void;
+}
+
+/**
+ * Main component to render a repeating, group Questionnaire item.
+ * Store and manages the state of multiple instances of GroupItem in a repeating group.
+ *
+ * @author Sean Fong
+ */
+function RepeatGroupView(props: RepeatGroupViewProps) {
+  const {
+    qItem,
+    repeatGroups,
+    groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
+    onAnswerChange,
+    onAddItem,
+    onDeleteItem
+  } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+
+  if (showMinimalView) {
+    return (
+      <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
+        <Card elevation={groupCardElevation} sx={{ p: 2 }}>
+          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+            const answeredQrItem = createEmptyQrItem(qItem);
+            if (nullableQrItem) {
+              answeredQrItem.item = nullableQrItem.item;
+            }
+
+            return (
+              <RepeatGroupItem
+                key={nanoId}
+                qItem={qItem}
+                repeatGroupIndex={index}
+                answeredQrItem={answeredQrItem}
+                nullableQrItem={nullableQrItem}
+                numOfRepeatGroups={repeatGroups.length}
+                groupCardElevation={groupCardElevation + 1}
+                showMinimalView={showMinimalView}
+                parentIsReadOnly={parentIsReadOnly}
+                onDeleteItem={() => onDeleteItem(index)}
+                onQrItemChange={(newQrItem) => onAnswerChange(newQrItem, index)}
+              />
+            );
+          })}
+        </Card>
+      </QGroupContainerBox>
+    );
+  }
+
+  const groupIsCollapsible = getGroupCollapsible(qItem);
+  if (groupIsCollapsible) {
+    const isDefaultOpen = groupIsCollapsible === 'default-open';
+    return (
+      <GroupAccordion
+        disableGutters
+        defaultExpanded={isDefaultOpen}
+        elevation={groupCardElevation}
+        isRepeated={true}
+        slotProps={{
+          transition: { unmountOnExit: true, timeout: 250 }
+        }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ minHeight: '28px' }}>
+          {qItem.text ? (
+            <>
+              <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
+                <LabelWrapper qItem={qItem} readOnly={readOnly} />
+              </Typography>
+            </>
+          ) : null}
+        </AccordionSummary>
+        <AccordionDetails sx={{ pt: 0 }}>
+          {qItem.text ? <Divider sx={{ mb: 1.5 }} light /> : null}
+          <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}
+                    repeatGroupIndex={index}
+                    answeredQrItem={answeredQrItem}
+                    nullableQrItem={nullableQrItem}
+                    numOfRepeatGroups={repeatGroups.length}
+                    groupCardElevation={groupCardElevation + 1}
+                    parentIsReadOnly={parentIsReadOnly}
+                    onDeleteItem={() => onDeleteItem(index)}
+                    onQrItemChange={(newQrItem) => onAnswerChange(newQrItem, index)}
+                  />
+                </Collapse>
+              );
+            })}
+          </TransitionGroup>
+
+          <AddItemButton repeatGroups={repeatGroups} readOnly={readOnly} onAddItem={onAddItem} />
+        </AccordionDetails>
+      </GroupAccordion>
+    );
+  }
+
+  return (
+    <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
+      <Card elevation={groupCardElevation} sx={{ p: 3, py: 2.5, mb: 3.5 }}>
+        {qItem.text ? (
+          <>
+            <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
+              <LabelWrapper qItem={qItem} readOnly={readOnly} />
+            </Typography>
+            <Divider sx={{ mt: 1, mb: 1.5 }} light />
+          </>
+        ) : null}
+        <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}
+                  repeatGroupIndex={index}
+                  answeredQrItem={answeredQrItem}
+                  nullableQrItem={nullableQrItem}
+                  numOfRepeatGroups={repeatGroups.length}
+                  groupCardElevation={groupCardElevation + 1}
+                  parentIsReadOnly={parentIsReadOnly}
+                  onDeleteItem={() => onDeleteItem(index)}
+                  onQrItemChange={(newQrItem) => onAnswerChange(newQrItem, index)}
+                />
+              </Collapse>
+            );
+          })}
+        </TransitionGroup>
+
+        <AddItemButton repeatGroups={repeatGroups} readOnly={readOnly} onAddItem={onAddItem} />
+      </Card>
+    </QGroupContainerBox>
+  );
+}
+
+export default RepeatGroupView;
diff --git a/packages/smart-forms-renderer/src/stories/assets/questionnaires/QAdvancedControlAppearance.ts b/packages/smart-forms-renderer/src/stories/assets/questionnaires/QAdvancedControlAppearance.ts
index e3bfeebf7..de41838ab 100644
--- a/packages/smart-forms-renderer/src/stories/assets/questionnaires/QAdvancedControlAppearance.ts
+++ b/packages/smart-forms-renderer/src/stories/assets/questionnaires/QAdvancedControlAppearance.ts
@@ -498,3 +498,127 @@ export const qCollapsibleDefaultClosed: Questionnaire = {
     }
   ]
 };
+
+export const qCollapsibleNested: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'CollapsibleNested',
+  name: 'CollapsibleNested',
+  title: 'CollapsibleNested',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-08',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/collapsible-3',
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-collapsible',
+          valueCode: 'default-open'
+        }
+      ],
+      linkId: 'f1262ade-843c-4eba-a86d-51a9c97d134b',
+      text: 'Home address',
+      type: 'group',
+      repeats: false,
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    code: 'check-box'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: '311d83bb-f22e-4f60-9b50-b6e38dd2059b',
+          definition:
+            'http://hl7.org.au/fhir/StructureDefinition/au-address#Address.extension:noFixedAddress',
+          text: 'No fixed address',
+          type: 'boolean',
+          repeats: false
+        },
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-collapsible',
+              valueCode: 'default-open'
+            }
+          ],
+          linkId: '4e0dc185-f83e-4027-b7a8-ecb543d42c6d',
+          type: 'group',
+          text: 'Address',
+          enableWhen: [
+            {
+              question: '311d83bb-f22e-4f60-9b50-b6e38dd2059b',
+              operator: '!=',
+              answerBoolean: true
+            }
+          ],
+          repeats: true,
+          item: [
+            {
+              linkId: '2fee2d51-7828-4178-b8c1-35edd32ba338',
+              definition: 'http://hl7.org.au/fhir/StructureDefinition/au-address#Address.line',
+              text: 'Street address',
+              type: 'string',
+              repeats: false
+            },
+            {
+              linkId: 'ddb65ed1-f4b2-4730-af2a-2f98bc73c76f',
+              definition: 'http://hl7.org.au/fhir/StructureDefinition/au-address#Address.city',
+              text: 'City',
+              type: 'string',
+              repeats: false
+            },
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                  valueCodeableConcept: {
+                    coding: [
+                      {
+                        system: 'http://hl7.org/fhir/questionnaire-item-control',
+                        code: 'drop-down'
+                      }
+                    ]
+                  }
+                }
+              ],
+              linkId: 'd9a1236c-8d6e-4f20-a12a-9d5de5a1d0f6',
+              definition: 'http://hl7.org.au/fhir/StructureDefinition/au-address#Address.state',
+              text: 'State',
+              type: 'choice',
+              repeats: false,
+              answerValueSet:
+                'https://healthterminologies.gov.au/fhir/ValueSet/australian-states-territories-2'
+            },
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/regex',
+                  valueString: "matches('^[0-9]{4}$')"
+                },
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/entryFormat',
+                  valueString: '####'
+                }
+              ],
+              linkId: '3f61a1ea-1c74-4f52-8519-432ce861a74f',
+              definition:
+                'http://hl7.org.au/fhir/StructureDefinition/au-address#Address.postalCode',
+              text: 'Postcode',
+              type: 'string',
+              repeats: false
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
diff --git a/packages/smart-forms-renderer/src/stories/assets/questionnaires/QMbs715Tester.ts b/packages/smart-forms-renderer/src/stories/assets/questionnaires/QMbs715Tester.ts
index b24cd287c..f33b5a87c 100644
--- a/packages/smart-forms-renderer/src/stories/assets/questionnaires/QMbs715Tester.ts
+++ b/packages/smart-forms-renderer/src/stories/assets/questionnaires/QMbs715Tester.ts
@@ -19526,7 +19526,7 @@ export const qModifiedMbs715WithCollapsible: Questionnaire = {
               extension: [
                 {
                   url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-collapsible',
-                  valueCode: 'default-closed'
+                  valueCode: 'default-open'
                 },
                 {
                   url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemPopulationContext',
@@ -19573,6 +19573,12 @@ export const qModifiedMbs715WithCollapsible: Questionnaire = {
                   repeats: false
                 },
                 {
+                  extension: [
+                    {
+                      url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-collapsible',
+                      valueCode: 'default-open'
+                    }
+                  ],
                   linkId: '4e0dc185-f83e-4027-b7a8-ecb543d42c6d',
                   type: 'group',
                   enableWhen: [
diff --git a/packages/smart-forms-renderer/src/stories/sdc/AdvancedControlAppearance.stories.tsx b/packages/smart-forms-renderer/src/stories/sdc/AdvancedControlAppearance.stories.tsx
index ce8218d92..bd269663d 100644
--- a/packages/smart-forms-renderer/src/stories/sdc/AdvancedControlAppearance.stories.tsx
+++ b/packages/smart-forms-renderer/src/stories/sdc/AdvancedControlAppearance.stories.tsx
@@ -21,6 +21,7 @@ import {
   qChoiceOrientation,
   qCollapsibleDefaultClosed,
   qCollapsibleDefaultOpen,
+  qCollapsibleNested,
   qItemControl,
   qSliderStepValue
 } from '../assets/questionnaires';
@@ -67,3 +68,9 @@ export const CollapsibleDefaultClosed: Story = {
     questionnaire: qCollapsibleDefaultClosed
   }
 };
+
+export const CollapsibleNested: Story = {
+  args: {
+    questionnaire: qCollapsibleNested
+  }
+};