@openmrs/esm-form-engine-lib 2.1.0-pre.1443 → 2.1.0-pre.1464

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "2.1.0-pre.1443",
+  "version": "2.1.0-pre.1464",
   "description": "React Form Engine for O3",
   "browser": "dist/openmrs-esm-form-engine-lib.js",
   "main": "src/index.ts",

package/src/components/inputs/multi-select/multi-select.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, render, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event'; // Correct import for userEvent
 import { type FetchResponse, openmrsFetch, usePatient, useSession } from '@openmrs/esm-framework';
 import { type FormSchema } from '../../../types';
 import { mockPatient } from '__mocks__/patient.mock';
@@ -31,7 +31,7 @@ jest.mock('../../../api', () => {
 });
 
 const renderForm = async () => {
-  await act(() =>
+  await act(async () => {
     render(
       <FormEngine
         formJson={multiSelectFormSchema as unknown as FormSchema}
@@ -40,11 +40,11 @@ const renderForm = async () => {
         formSessionIntent={undefined}
         visit={visit}
       />,
-    ),
-  );
+    );
+  });
 };
 
-describe.skip('MultiSelect Component', () => {
+describe('MultiSelect Component', () => {
   beforeEach(() => {
     mockOpenmrsFetch.mockResolvedValue({
       data: { results: [{ ...multiSelectFormSchema }] },
@@ -69,22 +69,20 @@ describe.skip('MultiSelect Component', () => {
   it('should disable checkbox option if the field value depends on evaluates the expression to true', async () => {
     const user = userEvent.setup();
     await renderForm();
-
     await user.click(screen.getByRole('combobox', { name: /Patient covered by NHIF/i }));
     await user.click(screen.getByRole('option', { name: /no/i }));
-
     await user.click(screen.getByText('Was this visit scheduled?'));
-    expect(screen.getByRole('option', { name: /Unscheduled visit early/i })).toHaveAttribute('disabled');
+    const unscheduledVisitOption = screen.getByRole('option', { name: /Unscheduled visit early/i });
+    expect(unscheduledVisitOption).toHaveAttribute('disabled');
   });
 
   it('should enable checkbox option if the field value depends on evaluates the expression to false', async () => {
     const user = userEvent.setup();
     await renderForm();
-
     await user.click(screen.getByRole('combobox', { name: /patient covered by nhif/i }));
     await user.click(screen.getByRole('option', { name: /yes/i }));
-
     await user.click(screen.getByText('Was this visit scheduled?'));
-    expect(screen.getByRole('option', { name: /Unscheduled visit early/i })).not.toHaveAttribute('disabled');
+    const unscheduledVisitOption = screen.getByRole('option', { name: /Unscheduled visit early/i });
+    expect(unscheduledVisitOption).not.toBeDisabled();
   });
 });

package/src/components/renderer/form/form-renderer.component.tsx

@@ -91,7 +91,12 @@ export const FormRenderer = ({ processorContext, initialValues, setIsLoadingForm
             />
           );
         }
-        return <PageRenderer page={page} />;
+        return (
+          <PageRenderer
+            key={page.label}
+            page={page}
+          />
+        );
       })}
     </FormProvider>
   );

package/src/components/renderer/page/page.renderer.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { type FormPage } from '../../../types';
 import { isTrue } from '../../../utils/boolean-utils';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +7,7 @@ import { Waypoint } from 'react-waypoint';
 import styles from './page.renderer.scss';
 import { Accordion, AccordionItem } from '@carbon/react';
 import { useFormFactory } from '../../../provider/form-factory-provider';
+import { ChevronDownIcon, ChevronUpIcon } from '@openmrs/esm-framework';
 
 interface PageRendererProps {
   page: FormPage;
@@ -15,32 +16,47 @@ interface PageRendererProps {
 function PageRenderer({ page }: PageRendererProps) {
   const { t } = useTranslation();
   const pageId = useMemo(() => page.label.replace(/\s/g, ''), [page.label]);
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   const { setCurrentPage } = useFormFactory();
   const visibleSections = page.sections.filter((section) => {
     const hasVisibleQuestions = section.questions.some((question) => !isTrue(question.isHidden));
     return !isTrue(section.isHidden) && hasVisibleQuestions;
   });
+
+  const toggleCollapse = () => setIsCollapsed(!isCollapsed);
+
   return (
     <div>
       <Waypoint onEnter={() => setCurrentPage(pageId)} topOffset="50%" bottomOffset="60%">
         <div className={styles.pageContent}>
-          <div className={styles.pageHeader}>
-            <p className={styles.pageTitle}>{t(page.label)}</p>
+          <div className={styles.pageHeader} onClick={toggleCollapse}>
+            <p className={styles.pageTitle}>
+              {t(page.label)}
+              <span className={styles.collapseIconWrapper}>
+                {isCollapsed ? (
+                  <ChevronDownIcon className={styles.collapseIcon} aria-label="Expand" />
+                ) : (
+                  <ChevronUpIcon className={styles.collapseIcon} aria-label="Collapse" />
+                )}
+              </span>
+            </p>
           </div>
-          <Accordion>
-            {visibleSections.map((section) => (
-              <AccordionItem
-                title={t(section.label)}
-                open={true}
-                className={styles.sectionContainer}
-                key={`section-${section.label}`}>
-                <div className={styles.formSection}>
-                  <SectionRenderer section={section} />
-                </div>
-              </AccordionItem>
-            ))}
-          </Accordion>
+          {!isCollapsed && (
+            <Accordion>
+              {visibleSections.map((section) => (
+                <AccordionItem
+                  title={t(section.label)}
+                  open={true}
+                  className={styles.sectionContainer}
+                  key={`section-${section.label}`}>
+                  <div className={styles.formSection}>
+                    <SectionRenderer section={section} />
+                  </div>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          )}
         </div>
       </Waypoint>
     </div>

package/src/components/renderer/page/page.renderer.scss

@@ -1,13 +1,19 @@
 @use '@carbon/colors';
+@use '@carbon/type';
 
 .pageContent:last-child > hr {
   display: none;
 }
 
 .pageHeader {
-  display: flex;
-  flex-direction: row;
-  margin: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border-radius: 1px;
+  padding: 0.5rem 1rem;
+
+  &:hover {
+    background-color: colors.$gray-20;
+  }
 }
 
 .pageTitle {
@@ -16,6 +22,16 @@
   line-height: 1.4;
   color: colors.$gray-100;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+}
+
+.collapseIcon {
+  fill: colors.$gray-70;
+  width: 1rem;
+  height: 1rem;
 }
 
 .sectionContainer > div {

package/src/components/sidebar/sidebar.scss

@@ -118,4 +118,4 @@
 
 .toggleContainer {
   margin-bottom: 0.5rem;
-}
+}