From 0e7e69ac70a417861990c71f8be0a8e9e30d0980 Mon Sep 17 00:00:00 2001
From: Sean Fong <sean.fong@csiro.au>
Date: Wed, 5 Jun 2024 15:52:01 +0930
Subject: [PATCH 1/5] Fix linting

---
 .../Buttons/ViewExistingResponsesButton.tsx   | 15 ++++++----
 .../QuestionnaireListToolbar.styles.ts        | 28 ++++++++++---------
 .../TableComponents/ResponseListToolbar.tsx   |  3 +-
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/Buttons/ViewExistingResponsesButton.tsx b/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/Buttons/ViewExistingResponsesButton.tsx
index 4615ec2c7..0b3e85e9b 100644
--- a/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/Buttons/ViewExistingResponsesButton.tsx
+++ b/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/Buttons/ViewExistingResponsesButton.tsx
@@ -46,6 +46,15 @@ function ViewExistingResponsesButton() {
     navigate('/dashboard/responses');
   }
 
+  let responseMessage;
+  if (isFetching && selectedQuestionnaire) {
+    responseMessage = 'Loading responses';
+  } else if (existingResponses.length === 0) {
+    responseMessage = 'No responses found';
+  } else {
+    responseMessage = 'View responses';
+  }
+
   const buttonIsDisabled = !selectedQuestionnaire || existingResponses.length === 0 || isFetching;
 
   return (
@@ -70,11 +79,7 @@ function ViewExistingResponsesButton() {
         color={buttonIsDisabled ? 'text.disabled' : 'primary'}
         textAlign="center"
         sx={{ mt: -0.5, mb: 0.5 }}>
-        {isFetching && selectedQuestionnaire
-          ? 'Loading responses'
-          : existingResponses.length === 0
-            ? 'No responses found'
-            : 'View responses'}
+        {responseMessage}
       </Typography>
     </Stack>
   );
diff --git a/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts b/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts
index c17af3cbb..1dfc5aa00 100644
--- a/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts
+++ b/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts
@@ -65,19 +65,21 @@ export function getResponseToolBarColors(
   selectedQuestionnaire: Questionnaire | null,
   existingResponses: QuestionnaireResponse[]
 ) {
-  return {
-    ...(selected
-      ? {
-          color: 'primary.main',
-          bgcolor: 'pale.primary'
-        }
-      : selectedQuestionnaire && existingResponses.length > 0
-        ? {
-            color: 'secondary.main',
-            bgcolor: 'pale.secondary'
-          }
-        : null)
-  };
+  if (selected) {
+    return {
+      color: 'primary.main',
+      bgcolor: 'pale.primary'
+    };
+  }
+
+  if (selectedQuestionnaire && existingResponses.length > 0) {
+    return {
+      color: 'secondary.main',
+      bgcolor: 'pale.secondary'
+    };
+  }
+
+  return {};
 }
 
 export function getQuestionnaireToolBarColors(selected: Questionnaire | null) {
diff --git a/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListToolbar.tsx b/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListToolbar.tsx
index e8a862b54..d76066beb 100644
--- a/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListToolbar.tsx
+++ b/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListToolbar.tsx
@@ -21,8 +21,7 @@ import {
   StyledRoot
 } from '../../QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts';
 import ResponseListToolbarButtons from './ResponseListToolbarButtons.tsx';
-import type { QuestionnaireResponse } from 'fhir/r4';
-import type { Questionnaire } from 'fhir/r4';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import ResponseListToolbarLeftSection from './ResponseListToolbarLeftSection.tsx';
 import useSelectedQuestionnaire from '../../../../hooks/useSelectedQuestionnaire.ts';
 

From 29070a79eb902eb47a306af681451670945f2e89 Mon Sep 17 00:00:00 2001
From: Sean Fong <sean.fong@csiro.au>
Date: Wed, 5 Jun 2024 16:01:40 +0930
Subject: [PATCH 2/5] Exclude storybook-static folder and .html files from
 prettier check

---
 .prettierignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.prettierignore b/.prettierignore
index 32f77635c..b609d0456 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,8 +2,10 @@ lib
 dist
 coverage
 build
+storybook-static
 *.md
 *.stories.*
 *.cjs
 *.js
 *.config.*
+*.html

From 49e6122fc2cad91d4fed71614a0f98b4f944386c Mon Sep 17 00:00:00 2001
From: Sean Fong <sean.fong@csiro.au>
Date: Thu, 6 Jun 2024 10:25:30 +0930
Subject: [PATCH 3/5] Minor fixes to datetime item

---
 .../DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx b/packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx
index 682a1974d..3fb930e77 100644
--- a/packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx
+++ b/packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx
@@ -112,6 +112,7 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
 
     if (newDateInput === '') {
       onQrItemChange(createEmptyQrItem(qItem));
+      return;
     }
 
     if (!validateDateInput(newDateInput)) {
@@ -126,7 +127,8 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
     setPeriodInput(newPeriodInput);
 
     if (newTimeInput === '') {
-      onQrItemChange(createEmptyQrItem(qItem));
+      updateQRDateTime(dateInput, '', '', false);
+      return;
     }
 
     const { timeIsValid, is24HourNotation } = validateTimeInput(newTimeInput, newPeriodInput);

From bd15323feba0603636f19641735723cea73d7832 Mon Sep 17 00:00:00 2001
From: Sean Fong <sean.fong@csiro.au>
Date: Thu, 6 Jun 2024 12:05:27 +0930
Subject: [PATCH 4/5] Support collapsible for single nested items

---
 documentation/docs/sdc/advanced/question.mdx  |  38 ++-
 .../GroupItem/GroupItemView.tsx               |  10 +-
 .../RepeatGroup/RepeatGroupView.tsx           |   6 +-
 .../NestedSingleItemAccordion.styles.ts       |  54 ++++
 .../FormComponents/SingleItem/SingleItem.tsx  |  66 +----
 .../SingleItem/SingleItemView.tsx             | 169 +++++++++++
 .../SingleItem/StopPropagationWrapper.tsx     |  38 +++
 .../components/Renderer/FormTopLevelItem.tsx  |   2 +-
 .../QAdvancedControlAppearance.ts             | 271 +++++++++++++++++-
 .../sdc/AdvancedControlAppearance.stories.tsx |  32 ++-
 10 files changed, 593 insertions(+), 93 deletions(-)
 create mode 100644 packages/smart-forms-renderer/src/components/FormComponents/SingleItem/NestedSingleItemAccordion.styles.ts
 create mode 100644 packages/smart-forms-renderer/src/components/FormComponents/SingleItem/SingleItemView.tsx
 create mode 100644 packages/smart-forms-renderer/src/components/FormComponents/SingleItem/StopPropagationWrapper.tsx

diff --git a/documentation/docs/sdc/advanced/question.mdx b/documentation/docs/sdc/advanced/question.mdx
index 3c1cf3a5d..10005ba0b 100644
--- a/documentation/docs/sdc/advanced/question.mdx
+++ b/documentation/docs/sdc/advanced/question.mdx
@@ -216,31 +216,51 @@ Allows the child items of a group to be displayed in a collapsible form where it
 
 Collapsible is only supported on **group** items.
 
-#### Default Open Usage
+#### Non-Group - Default Open Usage
 
-<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-default-open">
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-single-default-open">
   <iframe
-    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-default-open"
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-single-default-open"
+    width="100%"
+    height="230"
+  />
+</IframeContainer>
+
+#### Non-Group - Default Closed Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-single-default-closed">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-single-default-closed"
+    width="100%"
+    height="230"
+  />
+</IframeContainer>
+
+#### Group - Default Open Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-group-default-open">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-group-default-open"
     width="100%"
     height="260"
   />
 </IframeContainer>
 
-#### Default Closed Usage
+#### Group - Default Closed Usage
 
-<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-default-closed">
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-group-default-closed">
   <iframe
-    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-default-closed"
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-group-default-closed"
     width="100%"
     height="260"
   />
 </IframeContainer>
 
-#### Nested Usage
+#### Group - Nested Usage
 
-<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-nested">
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-group-nested">
   <iframe
-    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-nested"
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-group-nested"
     width="100%"
     height="760"
   />
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 d153d591c..cbb39447d 100644
--- a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx
+++ b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx
@@ -22,9 +22,9 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithParentIsRepeatGroupAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import type { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
 import type { Tabs } from '../../../interfaces/tab.interface';
 import GroupHeading from './GroupHeading';
 import { GroupCard } from './GroupItem.styles';
@@ -74,9 +74,9 @@ function GroupItemView(props: GroupItemViewProps) {
 
   // Render collapsible group item
   // If group item is a repeating instance, do not render group item as collapsible
-  const groupIsCollapsible = getGroupCollapsible(qItem);
-  if (groupIsCollapsible && !isRepeated) {
-    const isDefaultOpen = groupIsCollapsible === 'default-open';
+  const groupCollapsibleValue = getGroupCollapsible(qItem);
+  if (groupCollapsibleValue && !isRepeated) {
+    const isDefaultOpen = groupCollapsibleValue === 'default-open';
     return (
       <GroupAccordion
         disableGutters
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx b/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx
index efdb2e871..c20c4f6ce 100644
--- a/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx
+++ b/packages/smart-forms-renderer/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx
@@ -103,9 +103,9 @@ function RepeatGroupView(props: RepeatGroupViewProps) {
     );
   }
 
-  const groupIsCollapsible = getGroupCollapsible(qItem);
-  if (groupIsCollapsible) {
-    const isDefaultOpen = groupIsCollapsible === 'default-open';
+  const groupCollapsibleValue = getGroupCollapsible(qItem);
+  if (groupCollapsibleValue) {
+    const isDefaultOpen = groupCollapsibleValue === 'default-open';
     return (
       <GroupAccordion
         disableGutters
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/NestedSingleItemAccordion.styles.ts b/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/NestedSingleItemAccordion.styles.ts
new file mode 100644
index 000000000..363d865d7
--- /dev/null
+++ b/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/NestedSingleItemAccordion.styles.ts
@@ -0,0 +1,54 @@
+/*
+ * 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 { styled } from '@mui/material/styles';
+import { AccordionSummary } from '@mui/material';
+import Accordion from '@mui/material/Accordion';
+import Box from '@mui/material/Box';
+
+export const NestedSingleItemAccordionWrapper = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'isRepeated'
+})<{ isRepeated: boolean }>(({ isRepeated }) => ({
+  marginBottom: isRepeated ? 0 : '28px'
+}));
+
+export const NestedSingleItemAccordion = styled(Accordion, {
+  shouldForwardProp: (prop) => prop !== 'elevation'
+})<{ elevation: number }>(({ elevation }) => ({
+  paddingTop: '8px',
+  paddingBottom: '4px',
+  paddingLeft: elevation === 1 ? '10px' : '8px',
+  paddingRight: elevation === 1 ? '10px' : '8px'
+}));
+
+export const NestedSingleItemAccordionSummary = styled(AccordionSummary)(() => ({
+  minHeight: '28px',
+  '.MuiAccordionSummary-expandIconWrapper': {
+    '&:hover:not(.Mui-disabled)': {
+      cursor: 'pointer'
+    }
+  },
+  '.MuiAccordionSummary-content': {
+    marginBottom: 0
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: 'transparent'
+  },
+  '&:hover:not(.Mui-disabled)': {
+    cursor: 'default'
+  }
+}));
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/SingleItem.tsx b/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/SingleItem.tsx
index 4261dac84..de9f395a4 100644
--- a/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/SingleItem.tsx
+++ b/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/SingleItem.tsx
@@ -26,13 +26,10 @@ import type {
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
-import SingleItemSwitcher from './SingleItemSwitcher';
 import useHidden from '../../../hooks/useHidden';
 import useReadOnly from '../../../hooks/useReadOnly';
-import SingleNestedItems from './SingleNestedItems';
-import { GroupCard } from '../GroupItem/GroupItem.styles';
-import { QGroupContainerBox } from '../../Box.styles';
 import { shouldRenderNestedItems } from '../../../utils/itemControl';
+import SingleItemView from './SingleItemView';
 
 interface SingleItemProps
   extends PropsWithQrItemChangeHandler,
@@ -100,61 +97,28 @@ function SingleItem(props: SingleItemProps) {
     [qrItem, onQrItemChange]
   );
 
-  const qItemHasNestedItems = useMemo(
+  const itemHasNestedItems = useMemo(
     () => !!qItem.item && qItem.item.length > 0 && shouldRenderNestedItems(qItem),
     [qItem]
   );
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem, parentRepeatGroupIndex);
-  if (itemIsHidden) {
-    return null;
-  }
-
-  if (qItemHasNestedItems) {
-    return (
-      <QGroupContainerBox
-        cardElevation={groupCardElevation}
-        isRepeated={isRepeated}
-        data-test="q-item-group-box">
-        <GroupCard elevation={groupCardElevation} isRepeated={isRepeated}>
-          <SingleItemSwitcher
-            qItem={qItem}
-            qrItem={qrItem}
-            isRepeated={isRepeated}
-            isTabled={isTabled}
-            showMinimalView={showMinimalView}
-            parentIsReadOnly={readOnly}
-            onQrItemChange={handleQrItemChange}
-          />
-          {qItemHasNestedItems ? (
-            <>
-              <SingleNestedItems
-                qItem={qItem}
-                qrItem={qrItem}
-                groupCardElevation={groupCardElevation}
-                parentIsReadOnly={readOnly}
-                onQrItemChange={handleQrItemChangeWithNestedItems}
-              />
-            </>
-          ) : null}
-        </GroupCard>
-      </QGroupContainerBox>
-    );
-  }
 
   return (
-    <>
-      <SingleItemSwitcher
-        qItem={qItem}
-        qrItem={qrItem}
-        isRepeated={isRepeated}
-        isTabled={isTabled}
-        showMinimalView={showMinimalView}
-        parentIsReadOnly={readOnly}
-        onQrItemChange={handleQrItemChange}
-      />
-    </>
+    <SingleItemView
+      qItem={qItem}
+      qrItem={qrItem}
+      itemIsHidden={itemIsHidden}
+      itemHasNestedItems={itemHasNestedItems}
+      isRepeated={isRepeated}
+      isTabled={isTabled}
+      groupCardElevation={groupCardElevation}
+      showMinimalView={showMinimalView}
+      parentIsReadOnly={readOnly}
+      onQrItemChange={handleQrItemChange}
+      onQrItemChangeWithNestedItems={handleQrItemChangeWithNestedItems}
+    />
   );
 }
 
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/SingleItemView.tsx b/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/SingleItemView.tsx
new file mode 100644
index 000000000..86193f1a0
--- /dev/null
+++ b/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/SingleItemView.tsx
@@ -0,0 +1,169 @@
+/*
+ * 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 { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler,
+  PropsWithShowMinimalViewAttribute
+} from '../../../interfaces/renderProps.interface';
+import SingleItemSwitcher from './SingleItemSwitcher';
+import SingleNestedItems from './SingleNestedItems';
+import { GroupCard } from '../GroupItem/GroupItem.styles';
+import { QGroupContainerBox } from '../../Box.styles';
+import { getGroupCollapsible } from '../../../utils/qItem';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import StopPropagationWrapper from './StopPropagationWrapper';
+import {
+  NestedSingleItemAccordion,
+  NestedSingleItemAccordionSummary,
+  NestedSingleItemAccordionWrapper
+} from './NestedSingleItemAccordion.styles';
+import useReadOnly from '../../../hooks/useReadOnly';
+import Box from '@mui/material/Box';
+
+interface SingleItemViewProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+  itemIsHidden: boolean;
+  itemHasNestedItems: boolean;
+  groupCardElevation: number;
+  onQrItemChangeWithNestedItems: (newQrItem: QuestionnaireResponseItem) => void;
+}
+
+function SingleItemView(props: SingleItemViewProps) {
+  const {
+    qItem,
+    qrItem,
+    itemIsHidden,
+    itemHasNestedItems,
+    isRepeated,
+    isTabled,
+    groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrItemChange,
+    onQrItemChangeWithNestedItems
+  } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const groupCollapsibleValue = getGroupCollapsible(qItem);
+
+  // Item hidden, do not render
+  if (itemIsHidden) {
+    return null;
+  }
+
+  // Item has nested items and is collapsible
+  if (itemHasNestedItems && groupCollapsibleValue) {
+    const isDefaultOpen = groupCollapsibleValue === 'default-open';
+    return (
+      <NestedSingleItemAccordionWrapper isRepeated={isRepeated}>
+        <NestedSingleItemAccordion
+          disableGutters
+          defaultExpanded={isDefaultOpen}
+          elevation={groupCardElevation}
+          slotProps={{
+            transition: { unmountOnExit: true, timeout: 250 }
+          }}>
+          <NestedSingleItemAccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Box width="100%">
+              <StopPropagationWrapper>
+                <SingleItemSwitcher
+                  qItem={qItem}
+                  qrItem={qrItem}
+                  isRepeated={isRepeated}
+                  isTabled={isTabled}
+                  showMinimalView={showMinimalView}
+                  parentIsReadOnly={readOnly}
+                  onQrItemChange={onQrItemChange}
+                />
+              </StopPropagationWrapper>
+            </Box>
+          </NestedSingleItemAccordionSummary>
+
+          <AccordionDetails sx={{ pt: 0 }}>
+            {/* This box with marginRight:"24px" below is to align the parent item with the nested child items (due to space taken by the expand button */}
+            <Box mr={3}>
+              <SingleNestedItems
+                qItem={qItem}
+                qrItem={qrItem}
+                groupCardElevation={groupCardElevation}
+                parentIsReadOnly={readOnly}
+                onQrItemChange={onQrItemChangeWithNestedItems}
+              />
+            </Box>
+          </AccordionDetails>
+        </NestedSingleItemAccordion>
+      </NestedSingleItemAccordionWrapper>
+    );
+  }
+
+  // Item has nested items but is not collapsible
+  if (itemHasNestedItems) {
+    return (
+      <QGroupContainerBox
+        cardElevation={groupCardElevation}
+        isRepeated={isRepeated}
+        data-test="q-item-group-box">
+        <GroupCard elevation={groupCardElevation} isRepeated={isRepeated}>
+          <SingleItemSwitcher
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            showMinimalView={showMinimalView}
+            parentIsReadOnly={readOnly}
+            onQrItemChange={onQrItemChange}
+          />
+          <SingleNestedItems
+            qItem={qItem}
+            qrItem={qrItem}
+            groupCardElevation={groupCardElevation}
+            parentIsReadOnly={readOnly}
+            onQrItemChange={onQrItemChangeWithNestedItems}
+          />
+        </GroupCard>
+      </QGroupContainerBox>
+    );
+  }
+
+  return (
+    <>
+      <SingleItemSwitcher
+        qItem={qItem}
+        qrItem={qrItem}
+        isRepeated={isRepeated}
+        isTabled={isTabled}
+        showMinimalView={showMinimalView}
+        parentIsReadOnly={readOnly}
+        onQrItemChange={onQrItemChange}
+      />
+    </>
+  );
+}
+
+export default SingleItemView;
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/StopPropagationWrapper.tsx b/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/StopPropagationWrapper.tsx
new file mode 100644
index 000000000..2161604d1
--- /dev/null
+++ b/packages/smart-forms-renderer/src/components/FormComponents/SingleItem/StopPropagationWrapper.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 type { ReactNode } from 'react';
+import React from 'react';
+
+interface StopPropagationWrapperProps {
+  children: ReactNode;
+}
+
+function StopPropagationWrapper(props: StopPropagationWrapperProps) {
+  const { children } = props;
+
+  return (
+    <div
+      onClick={(event) => {
+        event.stopPropagation();
+      }}>
+      {children}
+    </div>
+  );
+}
+
+export default StopPropagationWrapper;
diff --git a/packages/smart-forms-renderer/src/components/Renderer/FormTopLevelItem.tsx b/packages/smart-forms-renderer/src/components/Renderer/FormTopLevelItem.tsx
index fd80df11e..dec56ec3a 100644
--- a/packages/smart-forms-renderer/src/components/Renderer/FormTopLevelItem.tsx
+++ b/packages/smart-forms-renderer/src/components/Renderer/FormTopLevelItem.tsx
@@ -123,7 +123,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
 
   // Otherwise, it is rendered as a non-group item
   return (
-    <Box pt={1}>
+    <Box mt={1}>
       <SingleItem
         key={topLevelQItem.linkId}
         qItem={topLevelQItem}
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 de41838ab..fde854aee 100644
--- a/packages/smart-forms-renderer/src/stories/assets/questionnaires/QAdvancedControlAppearance.ts
+++ b/packages/smart-forms-renderer/src/stories/assets/questionnaires/QAdvancedControlAppearance.ts
@@ -293,16 +293,257 @@ export const qSliderStepValue: Questionnaire = {
   ]
 };
 
-export const qCollapsibleDefaultOpen: Questionnaire = {
+export const qCollapsibleSingleDefaultOpen: Questionnaire = {
   resourceType: 'Questionnaire',
-  id: 'CollapsibleDefaultOpen',
-  name: 'CollapsibleDefaultOpen',
-  title: 'CollapsibleDefaultOpen',
+  id: 'CollapsibleSingleDefaultOpen',
+  name: 'CollapsibleSingleDefaultOpen',
+  title: 'Collapsible Single - Default Open',
   version: '0.1.0',
   status: 'draft',
   publisher: 'AEHRC CSIRO',
   date: '2024-05-08',
-  url: 'https://smartforms.csiro.au/docs/advanced/control/collapsible-1',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/collapsible-single-1',
+  contained: [
+    {
+      resourceType: 'ValueSet',
+      id: 'YesNoNA',
+      url: 'https://smartforms.csiro.au/ig/ValueSet/YesNoNA',
+      name: 'YesNoNA',
+      title: 'Yes/No/NA',
+      status: 'draft',
+      experimental: false,
+      description: 'Concepts for Yes, No and Not applicable',
+      compose: {
+        include: [
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/v2-0532',
+            concept: [
+              {
+                code: 'Y',
+                display: 'Yes'
+              },
+              {
+                code: 'N',
+                display: 'No'
+              },
+              {
+                code: 'NA',
+                display: 'N/A'
+              }
+            ]
+          }
+        ]
+      },
+      expansion: {
+        identifier: 'urn:uuid:5baa5444-e553-4412-a08c-9ce93d3271e0',
+        timestamp: '2023-09-01T11:16:50+10:00',
+        total: 3,
+        parameter: [
+          {
+            name: 'version',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/v2-0532|2.1.0'
+          },
+          {
+            name: 'used-codesystem',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/v2-0532|2.1.0'
+          }
+        ],
+        contains: [
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/v2-0532',
+            code: 'Y',
+            display: 'Yes'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/v2-0532',
+            code: 'N',
+            display: 'No'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/v2-0532',
+            code: 'NA',
+            display: 'N/A'
+          }
+        ]
+      }
+    }
+  ],
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/questionnaire-item-control',
+                code: 'radio-button'
+              }
+            ]
+          }
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-choiceOrientation',
+          valueCode: 'horizontal'
+        },
+        {
+          url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-collapsible',
+          valueCode: 'default-open'
+        }
+      ],
+      linkId: 'working-collapsible',
+      text: 'Are you working?',
+      type: 'choice',
+      repeats: false,
+      answerValueSet: '#YesNoNA',
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-shortText',
+              valueString: 'Details'
+            }
+          ],
+          linkId: 'details-working',
+          text: 'Details (occupation including occupational hazards, study, training, disability, etc)',
+          type: 'text',
+          repeats: false
+        }
+      ]
+    }
+  ]
+};
+export const qCollapsibleSingleDefaultClosed: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'CollapsibleSingleDefaultClosed',
+  name: 'CollapsibleSingleDefaultClosed',
+  title: 'Collapsible Single - Default Closed',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-08',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/collapsible-single-2',
+  contained: [
+    {
+      resourceType: 'ValueSet',
+      id: 'YesNoNA',
+      url: 'https://smartforms.csiro.au/ig/ValueSet/YesNoNA',
+      name: 'YesNoNA',
+      title: 'Yes/No/NA',
+      status: 'draft',
+      experimental: false,
+      description: 'Concepts for Yes, No and Not applicable',
+      compose: {
+        include: [
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/v2-0532',
+            concept: [
+              {
+                code: 'Y',
+                display: 'Yes'
+              },
+              {
+                code: 'N',
+                display: 'No'
+              },
+              {
+                code: 'NA',
+                display: 'N/A'
+              }
+            ]
+          }
+        ]
+      },
+      expansion: {
+        identifier: 'urn:uuid:5baa5444-e553-4412-a08c-9ce93d3271e0',
+        timestamp: '2023-09-01T11:16:50+10:00',
+        total: 3,
+        parameter: [
+          {
+            name: 'version',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/v2-0532|2.1.0'
+          },
+          {
+            name: 'used-codesystem',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/v2-0532|2.1.0'
+          }
+        ],
+        contains: [
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/v2-0532',
+            code: 'Y',
+            display: 'Yes'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/v2-0532',
+            code: 'N',
+            display: 'No'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/v2-0532',
+            code: 'NA',
+            display: 'N/A'
+          }
+        ]
+      }
+    }
+  ],
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/questionnaire-item-control',
+                code: 'radio-button'
+              }
+            ]
+          }
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-choiceOrientation',
+          valueCode: 'horizontal'
+        },
+        {
+          url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-collapsible',
+          valueCode: 'default-closed'
+        }
+      ],
+      linkId: 'working-collapsible',
+      text: 'Are you working?',
+      type: 'choice',
+      repeats: false,
+      answerValueSet: '#YesNoNA',
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-shortText',
+              valueString: 'Details'
+            }
+          ],
+          linkId: 'details-working',
+          text: 'Details (occupation including occupational hazards, study, training, disability, etc)',
+          type: 'text',
+          repeats: false
+        }
+      ]
+    }
+  ]
+};
+
+export const qCollapsibleGroupDefaultOpen: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'CollapsibleGroupDefaultOpen',
+  name: 'CollapsibleGroupDefaultOpen',
+  title: 'Collapsible Group - Default Open',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-08',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/collapsible-group-1',
   item: [
     {
       extension: [
@@ -396,16 +637,16 @@ export const qCollapsibleDefaultOpen: Questionnaire = {
   ]
 };
 
-export const qCollapsibleDefaultClosed: Questionnaire = {
+export const qCollapsibleGroupDefaultClosed: Questionnaire = {
   resourceType: 'Questionnaire',
-  id: 'CollapsibleDefaultClosed',
-  name: 'CollapsibleDefaultClosed',
-  title: 'CollapsibleDefaultClosed',
+  id: 'CollapsibleGroupDefaultClosed',
+  name: 'CollapsibleGroupDefaultClosed',
+  title: 'Collapsible Group - Default Closed',
   version: '0.1.0',
   status: 'draft',
   publisher: 'AEHRC CSIRO',
   date: '2024-05-08',
-  url: 'https://smartforms.csiro.au/docs/advanced/control/collapsible-2',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/collapsible-group-2',
   item: [
     {
       extension: [
@@ -499,16 +740,16 @@ export const qCollapsibleDefaultClosed: Questionnaire = {
   ]
 };
 
-export const qCollapsibleNested: Questionnaire = {
+export const qCollapsibleGroupNested: Questionnaire = {
   resourceType: 'Questionnaire',
-  id: 'CollapsibleNested',
-  name: 'CollapsibleNested',
-  title: 'CollapsibleNested',
+  id: 'CollapsibleGroupNested',
+  name: 'CollapsibleGroupNested',
+  title: 'Collapsible Group - Nested',
   version: '0.1.0',
   status: 'draft',
   publisher: 'AEHRC CSIRO',
   date: '2024-05-08',
-  url: 'https://smartforms.csiro.au/docs/advanced/control/collapsible-3',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/collapsible-group-3',
   item: [
     {
       extension: [
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 bd269663d..2539e303a 100644
--- a/packages/smart-forms-renderer/src/stories/sdc/AdvancedControlAppearance.stories.tsx
+++ b/packages/smart-forms-renderer/src/stories/sdc/AdvancedControlAppearance.stories.tsx
@@ -19,9 +19,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 import BuildFormWrapperForStorybook from '../storybookWrappers/BuildFormWrapperForStorybook';
 import {
   qChoiceOrientation,
-  qCollapsibleDefaultClosed,
-  qCollapsibleDefaultOpen,
-  qCollapsibleNested,
+  qCollapsibleGroupDefaultClosed,
+  qCollapsibleGroupDefaultOpen,
+  qCollapsibleGroupNested,
+  qCollapsibleSingleDefaultClosed,
+  qCollapsibleSingleDefaultOpen,
   qItemControl,
   qSliderStepValue
 } from '../assets/questionnaires';
@@ -57,20 +59,32 @@ export const SliderStepValue: Story = {
   }
 };
 
-export const CollapsibleDefaultOpen: Story = {
+export const CollapsibleSingleDefaultOpen: Story = {
   args: {
-    questionnaire: qCollapsibleDefaultOpen
+    questionnaire: qCollapsibleSingleDefaultOpen
   }
 };
 
-export const CollapsibleDefaultClosed: Story = {
+export const CollapsibleSingleDefaultClosed: Story = {
   args: {
-    questionnaire: qCollapsibleDefaultClosed
+    questionnaire: qCollapsibleSingleDefaultClosed
   }
 };
 
-export const CollapsibleNested: Story = {
+export const CollapsibleGroupDefaultOpen: Story = {
   args: {
-    questionnaire: qCollapsibleNested
+    questionnaire: qCollapsibleGroupDefaultOpen
+  }
+};
+
+export const CollapsibleGroupDefaultClosed: Story = {
+  args: {
+    questionnaire: qCollapsibleGroupDefaultClosed
+  }
+};
+
+export const CollapsibleGroupNested: Story = {
+  args: {
+    questionnaire: qCollapsibleGroupNested
   }
 };

From f4701cc6caa86ea56aa5635a1ab0e730ac9b7d42 Mon Sep 17 00:00:00 2001
From: Sean Fong <sean.fong@csiro.au>
Date: Thu, 6 Jun 2024 12:08:31 +0930
Subject: [PATCH 5/5] Update package versions

---
 apps/smart-forms-app/package.json          | 2 +-
 documentation/package.json                 | 2 +-
 package-lock.json                          | 6 +++---
 packages/smart-forms-renderer/package.json | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/smart-forms-app/package.json b/apps/smart-forms-app/package.json
index 8b2699b80..e99005b46 100644
--- a/apps/smart-forms-app/package.json
+++ b/apps/smart-forms-app/package.json
@@ -27,7 +27,7 @@
   "dependencies": {
     "@aehrc/sdc-assemble": "^1.2.0",
     "@aehrc/sdc-populate": "^2.2.0",
-    "@aehrc/smart-forms-renderer": "^0.34.2",
+    "@aehrc/smart-forms-renderer": "^0.35.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/material-icons": "^5.0.16",
diff --git a/documentation/package.json b/documentation/package.json
index 6c1ccded6..10efddd83 100644
--- a/documentation/package.json
+++ b/documentation/package.json
@@ -15,7 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@aehrc/smart-forms-renderer": "^0.34.2",
+    "@aehrc/smart-forms-renderer": "^0.35.0",
     "@docusaurus/core": "3.3.2",
     "@docusaurus/preset-classic": "3.3.2",
     "@docusaurus/theme-live-codeblock": "^3.3.2",
diff --git a/package-lock.json b/package-lock.json
index f78b43fbe..6590f1ded 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,7 @@
       "dependencies": {
         "@aehrc/sdc-assemble": "^1.2.0",
         "@aehrc/sdc-populate": "^2.2.0",
-        "@aehrc/smart-forms-renderer": "^0.34.2",
+        "@aehrc/smart-forms-renderer": "^0.35.0",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
         "@fontsource/material-icons": "^5.0.16",
@@ -465,7 +465,7 @@
       "name": "@aehrc/smart-forms-documentation",
       "version": "0.0.0",
       "dependencies": {
-        "@aehrc/smart-forms-renderer": "^0.34.2",
+        "@aehrc/smart-forms-renderer": "^0.35.0",
         "@docusaurus/core": "3.3.2",
         "@docusaurus/preset-classic": "3.3.2",
         "@docusaurus/theme-live-codeblock": "^3.3.2",
@@ -43947,7 +43947,7 @@
     },
     "packages/smart-forms-renderer": {
       "name": "@aehrc/smart-forms-renderer",
-      "version": "0.34.2",
+      "version": "0.35.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@aehrc/sdc-populate": "^2.2.0",
diff --git a/packages/smart-forms-renderer/package.json b/packages/smart-forms-renderer/package.json
index ef6304260..13b995d89 100644
--- a/packages/smart-forms-renderer/package.json
+++ b/packages/smart-forms-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.34.2",
+  "version": "0.35.0",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {