@olaboot/esm-form-engine-lib 4.1.0

package/dist/components/renderer/field/form-field-renderer.component.js

@@ -0,0 +1,214 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { ToastNotification } from "@carbon/react";
+import { Controller, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { ErrorBoundary } from "react-error-boundary";
+import { useConfig } from "@openmrs/esm-framework";
+import { getFieldControlWithFallback, getRegisteredControl } from "../../../registry/registry.js";
+import { handleFieldLogic, validateFieldValue } from "./fieldLogic.js";
+import { hasRendering } from "../../../utils/common-utils.js";
+import { isEmpty } from "../../../validators/form-validator.js";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import PreviousValueReview from "../../previous-value-review/previous-value-review.component.js";
+import UnspecifiedField from "../../inputs/unspecified/unspecified.component.js";
+import { shouldRenderField } from "./fieldRenderUtils.js";
+import styles from "./form-field-renderer.scss";
+export const FormFieldRenderer = ({ fieldId, valueAdapter, repeatOptions })=>{
+    const [inputComponentWrapper, setInputComponentWrapper] = useState(null);
+    const [errors, setErrors] = useState([]);
+    const [warnings, setWarnings] = useState([]);
+    const [historicalValue, setHistoricalValue] = useState(null);
+    const context = useFormProviderContext();
+    // Try to get config from external module, fallback to default if not available
+    let hideUnansweredQuestionsInReadonlyForms = false;
+    try {
+        const config = useConfig({
+            externalModuleName: '@openmrs/esm-form-engine-app'
+        });
+        hideUnansweredQuestionsInReadonlyForms = config?.hideUnansweredQuestionsInReadonlyForms ?? false;
+    } catch (error) {
+        // If external module config is not available, use default value
+        console.warn('Failed to load @openmrs/esm-form engine-app config - using hideUnansweredQuestionsInReadonlyForms=false (empty fields will be visible in readonly mode): ', error);
+    }
+    const { methods: { control, getValues, getFieldState }, patient, sessionMode, formFields, formFieldValidators, addInvalidField, removeInvalidField, updateFormField } = context;
+    const fieldValue = useWatch({
+        control,
+        name: fieldId,
+        exact: true
+    });
+    const noop = ()=>{};
+    const field = useMemo(()=>formFields.find((field)=>field.id === fieldId), [
+        fieldId,
+        formFields
+    ]);
+    useEffect(()=>{
+        if (hasRendering(field, 'repeating') && repeatOptions?.targetRendering) {
+            getRegisteredControl(repeatOptions.targetRendering).then((component)=>{
+                if (component) {
+                    setInputComponentWrapper({
+                        value: component
+                    });
+                }
+            });
+        } else {
+            getFieldControlWithFallback(field).then((component)=>{
+                if (component) {
+                    setInputComponentWrapper({
+                        value: component
+                    });
+                }
+            });
+        }
+        if (sessionMode === 'enter' && (field.historicalExpression || context.previousDomainObjectValue)) {
+            try {
+                context.processor.getHistoricalValue(field, context).then((value)=>{
+                    setHistoricalValue(value);
+                });
+            } catch (error) {
+                console.error(error);
+            }
+        }
+    }, []);
+    useEffect(()=>{
+        const { isDirty, isTouched } = getFieldState(field.id);
+        const { submission, unspecified } = field.meta;
+        const { calculate, defaultValue } = field.questionOptions;
+        if (!isEmpty(fieldValue) && !submission?.newValue && !isDirty && !unspecified && (calculate?.calculateExpression || defaultValue)) {
+            valueAdapter.transformFieldValue(field, fieldValue, context);
+        }
+        if (isDirty || isTouched) {
+            onAfterChange(fieldValue);
+        }
+    }, [
+        fieldValue
+    ]);
+    useEffect(()=>{
+        if (field.meta.submission?.errors) {
+            setErrors(field.meta.submission.errors);
+        }
+        if (field.meta.submission?.warnings) {
+            setWarnings(field.meta.submission.warnings);
+        }
+        if (field.meta.submission?.unspecified) {
+            setErrors([]);
+            removeInvalidField(field.id);
+        }
+    }, [
+        field.meta.submission
+    ]);
+    const onAfterChange = (value)=>{
+        const { errors: validationErrors, warnings: validationWarnings } = validateFieldValue(field, value, formFieldValidators, {
+            formFields: formFields,
+            values: getValues(),
+            expressionContext: {
+                patient,
+                mode: sessionMode
+            }
+        });
+        if (field.meta.submission) {
+            // clear stale submission validation results
+            field.meta.submission.errors = undefined;
+            field.meta.submission.warnings = undefined;
+        }
+        if (errors.length && !validationErrors.length) {
+            removeInvalidField(field.id);
+            setErrors([]);
+        } else if (validationErrors.length) {
+            setErrors(validationErrors);
+            addInvalidField(field);
+        }
+        if (!validationErrors.length) {
+            valueAdapter.transformFieldValue(field, value, context);
+        }
+        setWarnings(validationWarnings);
+        handleFieldLogic(field, context);
+        if (field.meta.groupId) {
+            const group = formFields.find((f)=>f.id === field.meta.groupId);
+            if (group) {
+                group.questions = group.questions.map((child)=>{
+                    if (child.id === field.id) {
+                        return field;
+                    }
+                    return child;
+                });
+                updateFormField(group);
+            }
+        }
+    };
+    if (!inputComponentWrapper) {
+        return null;
+    }
+    const InputComponent = inputComponentWrapper.value;
+    if (!repeatOptions?.targetRendering && isGroupField(field.questionOptions.rendering)) {
+        return /*#__PURE__*/ React.createElement(InputComponent, {
+            key: field.id,
+            field: field,
+            value: null,
+            errors: errors,
+            warnings: warnings,
+            setFieldValue: null
+        });
+    }
+    // In 'embedded-view' mode, empty fields are hidden if they are transient
+    // or if the config flag `hideUnansweredQuestionsInReadonlyForms` is enabled.
+    if (!shouldRenderField(sessionMode, !!field.questionOptions.isTransient, isEmpty(fieldValue), hideUnansweredQuestionsInReadonlyForms)) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(ErrorBoundary, {
+        FallbackComponent: ErrorFallback,
+        onReset: noop
+    }, /*#__PURE__*/ React.createElement(Controller, {
+        control: control,
+        name: field.id,
+        render: ({ field: { value, onChange, onBlur } })=>/*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(InputComponent, {
+                key: `${field.id}-input-component`,
+                field: field,
+                value: value,
+                errors: errors,
+                warnings: warnings,
+                setFieldValue: (val)=>{
+                    onChange(val);
+                    onAfterChange(val);
+                    onBlur();
+                }
+            }), isUnspecifiedSupported(field) && /*#__PURE__*/ React.createElement("div", {
+                className: styles.unspecifiedContainer
+            }, field.unspecified && /*#__PURE__*/ React.createElement(UnspecifiedField, {
+                key: `${field.id}-unspecified`,
+                field: field,
+                setFieldValue: onChange,
+                onAfterChange: onAfterChange,
+                fieldValue: value
+            })), historicalValue?.value && /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(PreviousValueReview, {
+                key: `${field.id}-previous-value-review`,
+                previousValue: historicalValue.value,
+                displayText: historicalValue.display,
+                onAfterChange: onAfterChange,
+                field: field
+            })))
+    }));
+};
+export function ErrorFallback({ error }) {
+    const { t } = useTranslation();
+    return /*#__PURE__*/ React.createElement(ToastNotification, {
+        "aria-label": t('closesNotification', 'Closes notification'),
+        caption: "",
+        hideCloseButton: true,
+        lowContrast: true,
+        onClose: function noRefCheck() {},
+        onCloseButtonClick: function noRefCheck() {},
+        statusIconDescription: t('notification', 'Notification'),
+        subtitle: error.message,
+        title: t('errorRenderingField', 'Error rendering field')
+    });
+}
+/**
+ * Determines whether a field can be unspecified
+ */ export function isUnspecifiedSupported(question) {
+    const { rendering } = question.questionOptions;
+    return isTrue(question.unspecified) && rendering != 'toggle' && rendering != 'group' && rendering != 'repeating' && rendering != 'markdown' && rendering != 'extension-widget' && rendering != 'workspace-launcher';
+}
+export function isGroupField(rendering) {
+    return rendering === 'group' || rendering === 'repeating';
+}

package/dist/components/renderer/field/form-field-renderer.scss

@@ -0,0 +1,5 @@
+.unspecifiedContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

package/dist/components/renderer/form/form-renderer.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type FormProcessorContextProps } from '../../../types';
+export type FormRendererProps = {
+    processorContext: FormProcessorContextProps;
+    initialValues: Record<string, any>;
+    isSubForm: boolean;
+    setIsLoadingFormDependencies: (isLoading: boolean) => void;
+};
+export declare const FormRenderer: ({ processorContext, initialValues, isSubForm, setIsLoadingFormDependencies, }: FormRendererProps) => React.JSX.Element;
+//# sourceMappingURL=form-renderer.component.d.ts.map

package/dist/components/renderer/form/form-renderer.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-renderer.component.d.ts","sourceRoot":"","sources":["../../../../src/components/renderer/form/form-renderer.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAQ9D,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAKhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,yBAAyB,CAAC;IAC5C,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,4BAA4B,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,+EAK1B,iBAAiB,sBAiGnB,CAAC"}

package/dist/components/renderer/form/form-renderer.component.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useMemo, useReducer } from "react";
+import { useForm } from "react-hook-form";
+import PageRenderer from "../page/page.renderer.component.js";
+import FormProcessorFactory from "../../processor-factory/form-processor-factory.component.js";
+import { formStateReducer, initialState } from "./state.js";
+import { useEvaluateFormFieldExpressions } from "../../../hooks/useEvaluateFormFieldExpressions.js";
+import { useFormFactory } from "../../../provider/form-factory-provider.js";
+import { FormProvider } from "../../../provider/form-provider.js";
+import { useFormStateHelpers } from "../../../hooks/useFormStateHelpers.js";
+import { pageObserver } from "../../sidebar/page-observer.js";
+import { isPageContentVisible } from "../../../utils/form-helper.js";
+export const FormRenderer = ({ processorContext, initialValues, isSubForm, setIsLoadingFormDependencies })=>{
+    const { evaluatedFields, evaluatedFormJson, evaluatedPagesVisibility } = useEvaluateFormFieldExpressions(initialValues, processorContext);
+    const { registerForm, setIsFormDirty, workspaceLayout, isFormExpanded } = useFormFactory();
+    const methods = useForm({
+        defaultValues: initialValues,
+        mode: 'onChange',
+        reValidateMode: 'onChange',
+        criteriaMode: 'all'
+    });
+    const { formState: { isDirty } } = methods;
+    const [{ formFields, invalidFields, formJson, deletedFields }, dispatch] = useReducer(formStateReducer, {
+        ...initialState,
+        formFields: evaluatedFields,
+        formJson: evaluatedFormJson
+    });
+    const { addFormField, updateFormField, getFormField, removeFormField, setInvalidFields, addInvalidField, removeInvalidField, setForm, setDeletedFields } = useFormStateHelpers(dispatch, formFields);
+    useEffect(()=>{
+        const scrollablePages = formJson.pages.filter((page)=>!page.isSubform).map((page)=>page);
+        pageObserver.updateScrollablePages(scrollablePages);
+    }, [
+        formJson.pages
+    ]);
+    useEffect(()=>{
+        pageObserver.setEvaluatedPagesVisibility(evaluatedPagesVisibility);
+    }, [
+        evaluatedPagesVisibility
+    ]);
+    useEffect(()=>{
+        pageObserver.updatePagesWithErrors(invalidFields.map((field)=>field.meta.pageId));
+    }, [
+        invalidFields
+    ]);
+    const context = useMemo(()=>{
+        return {
+            ...processorContext,
+            workspaceLayout,
+            methods,
+            formFields,
+            formJson,
+            invalidFields,
+            deletedFields,
+            addFormField,
+            updateFormField,
+            getFormField,
+            removeFormField,
+            setInvalidFields,
+            addInvalidField,
+            removeInvalidField,
+            setForm,
+            setDeletedFields
+        };
+    }, [
+        processorContext,
+        workspaceLayout,
+        methods,
+        formFields,
+        formJson,
+        invalidFields,
+        deletedFields
+    ]);
+    useEffect(()=>{
+        registerForm(formJson.name, isSubForm, context);
+    }, [
+        formJson.name,
+        isSubForm,
+        context
+    ]);
+    useEffect(()=>{
+        setIsFormDirty(isDirty);
+    }, [
+        isDirty
+    ]);
+    return /*#__PURE__*/ React.createElement(FormProvider, context, formJson.pages.map((page)=>{
+        if (!page.isSubform && !isPageContentVisible(page)) {
+            return null;
+        }
+        if (page.isSubform && page.subform?.form) {
+            return /*#__PURE__*/ React.createElement(FormProcessorFactory, {
+                key: page.subform.form.uuid,
+                formJson: page.subform.form,
+                isSubForm: true,
+                setIsLoadingFormDependencies: setIsLoadingFormDependencies
+            });
+        }
+        return /*#__PURE__*/ React.createElement(PageRenderer, {
+            key: page.label,
+            page: page,
+            isFormExpanded: isFormExpanded
+        });
+    }));
+};

package/dist/components/renderer/form/state.d.ts

@@ -0,0 +1,41 @@
+import { type FormField, type FormSchema } from '../../../types';
+type FormState = {
+    formFields: FormField[];
+    invalidFields: FormField[];
+    formJson: FormSchema;
+    deletedFields: FormField[];
+};
+type Action = {
+    type: 'SET_FORM_FIELDS';
+    value: FormField[];
+} | {
+    type: 'ADD_FORM_FIELD';
+    value: FormField;
+} | {
+    type: 'UPDATE_FORM_FIELD';
+    value: FormField;
+} | {
+    type: 'REMOVE_FORM_FIELD';
+    value: string;
+} | {
+    type: 'SET_INVALID_FIELDS';
+    value: FormField[];
+} | {
+    type: 'ADD_INVALID_FIELD';
+    value: FormField;
+} | {
+    type: 'REMOVE_INVALID_FIELD';
+    value: string;
+} | {
+    type: 'CLEAR_INVALID_FIELDS';
+} | {
+    type: 'SET_FORM_JSON';
+    value: any;
+} | {
+    type: 'SET_DELETED_FIELDS';
+    value: FormField[];
+};
+declare const initialState: FormState;
+declare const formStateReducer: (state: FormState, action: Action) => FormState;
+export { formStateReducer, initialState, FormState, Action };
+//# sourceMappingURL=state.d.ts.map

package/dist/components/renderer/form/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/components/renderer/form/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjE,KAAK,SAAS,GAAG;IACf,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,QAAQ,EAAE,UAAU,CAAC;IACrB,aAAa,EAAE,SAAS,EAAE,CAAC;CAC5B,CAAC;AAEF,KAAK,MAAM,GACP;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,GAC/C;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,GAC5C;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,GAC/C;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC5C;IAAE,IAAI,EAAE,oBAAoB,CAAC;IAAC,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,GAC/C;IAAE,IAAI,EAAE,sBAAsB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC/C;IAAE,IAAI,EAAE,sBAAsB,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,GACrC;IAAE,IAAI,EAAE,oBAAoB,CAAC;IAAC,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,CAAC;AAEvD,QAAA,MAAM,YAAY,EAAE,SAKnB,CAAC;AAEF,QAAA,MAAM,gBAAgB,GAAI,OAAO,SAAS,EAAE,QAAQ,MAAM,KAAG,SA4B5D,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/renderer/form/state.js

@@ -0,0 +1,69 @@
+const initialState = {
+    formFields: [],
+    invalidFields: [],
+    formJson: null,
+    deletedFields: []
+};
+const formStateReducer = (state, action)=>{
+    switch(action.type){
+        case 'SET_FORM_FIELDS':
+            return {
+                ...state,
+                formFields: action.value
+            };
+        case 'ADD_FORM_FIELD':
+            return {
+                ...state,
+                formFields: [
+                    ...state.formFields,
+                    action.value
+                ]
+            };
+        case 'UPDATE_FORM_FIELD':
+            return {
+                ...state,
+                formFields: state.formFields.map((field)=>field.id === action.value.id ? action.value : field)
+            };
+        case 'REMOVE_FORM_FIELD':
+            return {
+                ...state,
+                formFields: state.formFields.filter((field)=>field.id !== action.value)
+            };
+        case 'SET_INVALID_FIELDS':
+            return {
+                ...state,
+                invalidFields: action.value
+            };
+        case 'ADD_INVALID_FIELD':
+            return {
+                ...state,
+                invalidFields: [
+                    ...state.invalidFields,
+                    action.value
+                ]
+            };
+        case 'REMOVE_INVALID_FIELD':
+            return {
+                ...state,
+                invalidFields: state.invalidFields.filter((field)=>field.id !== action.value)
+            };
+        case 'CLEAR_INVALID_FIELDS':
+            return {
+                ...state,
+                invalidFields: []
+            };
+        case 'SET_FORM_JSON':
+            return {
+                ...state,
+                formJson: action.value
+            };
+        case 'SET_DELETED_FIELDS':
+            return {
+                ...state,
+                deletedFields: action.value
+            };
+        default:
+            return state;
+    }
+};
+export { formStateReducer, initialState };

package/dist/components/renderer/page/page.renderer.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type FormPage } from '../../../types';
+interface PageRendererProps {
+    page: FormPage;
+    isFormExpanded: boolean;
+}
+declare function PageRenderer({ page, isFormExpanded }: PageRendererProps): React.JSX.Element;
+export default PageRenderer;
+//# sourceMappingURL=page.renderer.component.d.ts.map

package/dist/components/renderer/page/page.renderer.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.renderer.component.d.ts","sourceRoot":"","sources":["../../../../src/components/renderer/page/page.renderer.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAWjE,UAAU,iBAAiB;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;CACzB;AASD,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,iBAAiB,qBAiEhE;AA8BD,eAAe,YAAY,CAAC"}

package/dist/components/renderer/page/page.renderer.component.js

@@ -0,0 +1,85 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { useTranslation } from "react-i18next";
+import { SectionRenderer } from "../section/section-renderer.component.js";
+import { Waypoint } from "react-waypoint";
+import styles from "./page.renderer.scss";
+import { Accordion, AccordionItem } from "@carbon/react";
+import { ChevronDownIcon, ChevronUpIcon } from "@openmrs/esm-framework";
+import classNames from "classnames";
+import { pageObserver } from "../../sidebar/page-observer.js";
+function PageRenderer({ page, isFormExpanded }) {
+    const { t } = useTranslation();
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const visibleSections = useMemo(()=>page.sections.filter((section)=>{
+            const hasVisibleQuestions = section.questions.some((question)=>!isTrue(question.isHidden));
+            return !isTrue(section.isHidden) && hasVisibleQuestions;
+        }), [
+        page.sections
+    ]);
+    const toggleCollapse = ()=>setIsCollapsed(!isCollapsed);
+    useEffect(()=>{
+        setIsCollapsed(!isFormExpanded);
+        return ()=>{
+            pageObserver.removeInactivePage(page.id);
+        };
+    }, [
+        isFormExpanded
+    ]);
+    return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Waypoint, {
+        key: page.id,
+        onEnter: ()=>pageObserver.addActivePage(page.id),
+        onLeave: ()=>pageObserver.removeInactivePage(page.id),
+        topOffset: "40%",
+        bottomOffset: "40%"
+    }, /*#__PURE__*/ React.createElement("div", {
+        id: page.id,
+        className: styles.pageContent
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.pageHeader,
+        onClick: toggleCollapse
+    }, /*#__PURE__*/ React.createElement("p", {
+        className: styles.pageTitle
+    }, t(page.label), /*#__PURE__*/ React.createElement("span", {
+        className: styles.collapseIconWrapper
+    }, isCollapsed ? /*#__PURE__*/ React.createElement(ChevronDownIcon, {
+        className: styles.collapseIcon,
+        "aria-label": "Expand"
+    }) : /*#__PURE__*/ React.createElement(ChevronUpIcon, {
+        className: styles.collapseIcon,
+        "aria-label": "Collapse"
+    })))), /*#__PURE__*/ React.createElement("div", {
+        className: classNames({
+            [styles.hiddenAccordion]: isCollapsed,
+            [styles.accordionContainer]: !isCollapsed
+        })
+    }, /*#__PURE__*/ React.createElement(Accordion, null, visibleSections.map((section, index)=>/*#__PURE__*/ React.createElement(CollapsibleSectionContainer, {
+            key: `section-${section.label}`,
+            section: section,
+            sectionIndex: index,
+            visibleSections: visibleSections,
+            isFormExpanded: isFormExpanded
+        })))))));
+}
+function CollapsibleSectionContainer({ section, sectionIndex, visibleSections, isFormExpanded }) {
+    const { t } = useTranslation();
+    const [isSectionOpen, setIsSectionOpen] = useState(isFormExpanded);
+    useEffect(()=>{
+        setIsSectionOpen(isFormExpanded);
+    }, [
+        isFormExpanded
+    ]);
+    return /*#__PURE__*/ React.createElement(AccordionItem, {
+        title: t(section.label),
+        open: isSectionOpen,
+        className: classNames(styles.sectionContainer, {
+            [styles.firstSection]: sectionIndex === 0,
+            [styles.lastSection]: sectionIndex === visibleSections.length - 1
+        })
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.formSection
+    }, /*#__PURE__*/ React.createElement(SectionRenderer, {
+        section: section
+    })));
+}
+export default PageRenderer;

package/dist/components/renderer/page/page.renderer.scss

@@ -0,0 +1,74 @@
+@use '@carbon/colors';
+@use '@carbon/type';
+@use '@carbon/layout';
+
+.pageContent:last-child > hr {
+  display: none;
+}
+
+.pageHeader {
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border-radius: 1px;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
+  &:hover {
+    background-color: colors.$gray-20;
+  }
+}
+
+.pageTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  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 {
+  background-color: colors.$gray-10;
+}
+
+.sectionContainer :global(.cds--accordion__content) {
+  padding-right: layout.$spacing-05;
+}
+
+.accordionContainer {
+  width: 95%;
+}
+
+.firstSection {
+  border-top: none;
+}
+
+.lastSection {
+  border-bottom: none !important;
+}
+
+.formSection {
+  flex: 1 1 65%;
+}
+
+.hiddenAccordion {
+  display: none;
+}
+
+.formSection > div > fieldset {
+  margin-bottom: 0 !important;
+}
+
+// TODO: try removing this when upgrading @carbon/react. Added at 1.37
+:global(.cds--accordion__wrapper) {
+  max-block-size: unset !important;
+}

package/dist/components/renderer/section/section-renderer.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type FormSection } from '../../../types';
+export declare const SectionRenderer: ({ section }: {
+    section: FormSection;
+}) => React.JSX.Element;
+//# sourceMappingURL=section-renderer.component.d.ts.map

package/dist/components/renderer/section/section-renderer.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-renderer.component.d.ts","sourceRoot":"","sources":["../../../../src/components/renderer/section/section-renderer.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKlD,eAAO,MAAM,eAAe,GAAI,aAAa;IAAE,OAAO,EAAE,WAAW,CAAA;CAAE,sBAkBpE,CAAC"}

package/dist/components/renderer/section/section-renderer.component.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from "react";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import { FormFieldRenderer } from "../field/form-field-renderer.component.js";
+import styles from "./section-renderer.scss";
+export const SectionRenderer = ({ section })=>{
+    const { formFieldAdapters } = useFormProviderContext();
+    const sectionId = useMemo(()=>section.label.replace(/\s/g, ''), [
+        section.label
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.section
+    }, section.questions.map((question)=>formFieldAdapters[question.type] ? /*#__PURE__*/ React.createElement("div", {
+            key: `${sectionId}-${question.id}`,
+            className: styles.sectionBody
+        }, /*#__PURE__*/ React.createElement(FormFieldRenderer, {
+            key: question.id,
+            fieldId: question.id,
+            valueAdapter: formFieldAdapters[question.type]
+        })) : null));
+};