@olaboot/esm-form-engine-lib 4.1.0

package/dist/constants.js

@@ -0,0 +1,13 @@
+export const ConceptTrue = 'cf82933b-3f3f-45e7-a5ab-5d31aaee3da3';
+export const ConceptFalse = '488b58ff-64f5-4f8a-8979-fa79940b1594';
+export const UnspecifiedValue = 'VALUE_UNSPECIFIED';
+export const encounterRepresentation = 'custom:(uuid,encounterDatetime,encounterType:(uuid,name,description),location:(uuid,name),' + 'patient:(uuid,display),encounterProviders:(uuid,provider:(uuid,name),encounterRole:(uuid,name)),' + 'orders:(uuid,display,concept:(uuid,display),voided),' + 'diagnoses:(uuid,certainty,condition,formFieldPath,formFieldNamespace,display,rank,voided,diagnosis:(coded:(uuid,display))),' + 'obs:(uuid,obsDatetime,comment,voided,groupMembers,formFieldNamespace,formFieldPath,concept:(uuid,name:(uuid,name)),value:(uuid,name:(uuid,name),' + 'names:(uuid,conceptNameType,name))))';
+export const FormsStore = 'forms-engine-store';
+export const PatientChartWorkspaceHeaderSlot = 'patient-chart-workspace-header-slot';
+export const codedTypes = [
+    'radio',
+    'checkbox',
+    'select',
+    'content-switcher'
+];
+export const NullSelectOption = 'OPTION_NULL';

package/dist/datasources/concept-data-source.d.ts

@@ -0,0 +1,6 @@
+import { BaseOpenMRSDataSource } from './data-source';
+export declare class ConceptDataSource extends BaseOpenMRSDataSource {
+    constructor();
+    fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]>;
+}
+//# sourceMappingURL=concept-data-source.d.ts.map

package/dist/datasources/concept-data-source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"concept-data-source.d.ts","sourceRoot":"","sources":["../../src/datasources/concept-data-source.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,qBAAa,iBAAkB,SAAQ,qBAAqB;;IAK1D,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;CAgC5E"}

package/dist/datasources/concept-data-source.js

@@ -0,0 +1,35 @@
+import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
+import { BaseOpenMRSDataSource } from "./data-source.js";
+import { isEmpty } from "../validators/form-validator.js";
+export class ConceptDataSource extends BaseOpenMRSDataSource {
+    fetchData(searchTerm, config) {
+        if (isEmpty(config?.class) && isEmpty(config?.concept) && !config?.useSetMembersByConcept && isEmpty(searchTerm)) {
+            return Promise.resolve([]);
+        }
+        let searchUrl = `${restBaseUrl}/concept?name=&searchType=fuzzy&v=custom:(uuid,display,conceptClass:(uuid,display))`;
+        if (config?.class) {
+            if (typeof config.class == 'string') {
+                const urlParts = searchUrl.split('searchType=fuzzy');
+                searchUrl = `${urlParts[0]}searchType=fuzzy&class=${config.class}&${urlParts[1]}`;
+            } else {
+                return openmrsFetch(searchTerm ? `${searchUrl}&q=${searchTerm}` : searchUrl).then(({ data })=>{
+                    return data.results.filter((concept)=>concept.conceptClass && config.class.includes(concept.conceptClass.uuid));
+                });
+            }
+        }
+        if (config?.concept && config?.useSetMembersByConcept) {
+            let urlParts = searchUrl.split('?name=&searchType=fuzzy&v=');
+            searchUrl = `${urlParts[0]}/${config.concept}?v=custom:(uuid,setMembers:(uuid,display))`;
+            return openmrsFetch(searchTerm ? `${searchUrl}&q=${searchTerm}` : searchUrl).then(({ data })=>{
+                // return the setMembers from the retrieved concept object
+                return data['setMembers'];
+            });
+        }
+        return openmrsFetch(searchTerm ? `${searchUrl}&q=${searchTerm}` : searchUrl).then(({ data })=>{
+            return data.results;
+        });
+    }
+    constructor(){
+        super(`${restBaseUrl}/concept?v=custom:(uuid,display,conceptClass:(uuid,display))`);
+    }
+}

package/dist/datasources/data-source.d.ts

@@ -0,0 +1,10 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { type DataSource } from '../types';
+export declare class BaseOpenMRSDataSource implements DataSource<OpenmrsResource> {
+    url: string;
+    constructor(url: string);
+    fetchData(searchTerm: string): Promise<any[]>;
+    fetchSingleItem(uuid: string): Promise<OpenmrsResource | null>;
+    toUuidAndDisplay(data: OpenmrsResource): OpenmrsResource;
+}
+//# sourceMappingURL=data-source.d.ts.map

package/dist/datasources/data-source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-source.d.ts","sourceRoot":"","sources":["../../src/datasources/data-source.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,qBAAa,qBAAsB,YAAW,UAAU,CAAC,eAAe,CAAC;IACvE,GAAG,EAAE,MAAM,CAAC;gBAEA,GAAG,EAAE,MAAM;IAIvB,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAM7C,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;IAW9D,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,eAAe;CAMzD"}

package/dist/datasources/data-source.js

@@ -0,0 +1,41 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import { openmrsFetch } from "@openmrs/esm-framework";
+export class BaseOpenMRSDataSource {
+    fetchData(searchTerm) {
+        return openmrsFetch(searchTerm ? `${this.url}&q=${searchTerm}` : this.url).then(({ data })=>{
+            return data.results;
+        });
+    }
+    fetchSingleItem(uuid) {
+        let apiUrl = this.url;
+        if (apiUrl.includes('?')) {
+            const urlParts = apiUrl.split('?');
+            apiUrl = `${urlParts[0]}/${uuid}?${urlParts[1]}`;
+        } else {
+            apiUrl = `${apiUrl}/${uuid}`;
+        }
+        return openmrsFetch(apiUrl).then(({ data })=>data);
+    }
+    toUuidAndDisplay(data) {
+        if (typeof data.uuid === 'undefined' || typeof data.display === 'undefined') {
+            throw new Error("'uuid' or 'display' not found in the OpenMRS object.");
+        }
+        return data;
+    }
+    constructor(url){
+        _define_property(this, "url", void 0);
+        this.url = url;
+    }
+}

package/dist/datasources/encounter-role-datasource.d.ts

@@ -0,0 +1,6 @@
+import { BaseOpenMRSDataSource } from './data-source';
+export declare class EncounterRoleDataSource extends BaseOpenMRSDataSource {
+    constructor();
+    fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]>;
+}
+//# sourceMappingURL=encounter-role-datasource.d.ts.map

package/dist/datasources/encounter-role-datasource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"encounter-role-datasource.d.ts","sourceRoot":"","sources":["../../src/datasources/encounter-role-datasource.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,qBAAa,uBAAwB,SAAQ,qBAAqB;;IAK1D,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;CAMlF"}

package/dist/datasources/encounter-role-datasource.js

@@ -0,0 +1,13 @@
+import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
+import { BaseOpenMRSDataSource } from "./data-source.js";
+export class EncounterRoleDataSource extends BaseOpenMRSDataSource {
+    async fetchData(searchTerm, config) {
+        const rep = 'v=custom:(uuid,display,name)';
+        const url = `${restBaseUrl}/encounterrole?${rep}`;
+        const { data } = await openmrsFetch(searchTerm ? `${url}&q=${searchTerm}` : url);
+        return data?.results;
+    }
+    constructor(){
+        super(null);
+    }
+}

package/dist/datasources/historical-data-source.d.ts

@@ -0,0 +1,6 @@
+export declare class HistoricalDataSourceService {
+    dataSourceMap: Record<string, any>;
+    putObject(key: string, value: any): void;
+    getObject(key: string): any;
+}
+//# sourceMappingURL=historical-data-source.d.ts.map

package/dist/datasources/historical-data-source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"historical-data-source.d.ts","sourceRoot":"","sources":["../../src/datasources/historical-data-source.ts"],"names":[],"mappings":"AAAA,qBAAa,2BAA2B;IACtC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAM;IAExC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAIjC,SAAS,CAAC,GAAG,EAAE,MAAM;CAGtB"}

package/dist/datasources/historical-data-source.js

@@ -0,0 +1,24 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+export class HistoricalDataSourceService {
+    putObject(key, value) {
+        this.dataSourceMap[key] = value;
+    }
+    getObject(key) {
+        return this.dataSourceMap[key];
+    }
+    constructor(){
+        _define_property(this, "dataSourceMap", {});
+    }
+}

package/dist/datasources/location-data-source.d.ts

@@ -0,0 +1,6 @@
+import { BaseOpenMRSDataSource } from './data-source';
+export declare class LocationDataSource extends BaseOpenMRSDataSource {
+    constructor();
+    fetchData(searchTerm: string, config?: Record<string, any>, uuid?: string): Promise<any[]>;
+}
+//# sourceMappingURL=location-data-source.d.ts.map

package/dist/datasources/location-data-source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"location-data-source.d.ts","sourceRoot":"","sources":["../../src/datasources/location-data-source.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,qBAAa,kBAAmB,SAAQ,qBAAqB;;IAK3D,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;CAkB3F"}

package/dist/datasources/location-data-source.js

@@ -0,0 +1,24 @@
+import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
+import { BaseOpenMRSDataSource } from "./data-source.js";
+export class LocationDataSource extends BaseOpenMRSDataSource {
+    fetchData(searchTerm, config, uuid) {
+        let apiUrl = this.url;
+        const urlParts = apiUrl.split('?');
+        if (config?.tag) {
+            apiUrl = `${urlParts[0]}?tag=${config.tag}&${urlParts[1]}`;
+        }
+        //overwrite url if there's a uuid value, meaning we are in edit mode
+        if (uuid) {
+            apiUrl = `${urlParts[0]}/${uuid}?${urlParts[1]}`;
+        }
+        return openmrsFetch(searchTerm ? `${apiUrl}&q=${searchTerm}` : apiUrl).then(({ data })=>{
+            if (data.results) {
+                return data.results;
+            }
+            return data;
+        });
+    }
+    constructor(){
+        super(`${restBaseUrl}/location?v=custom:(uuid,display)`);
+    }
+}

package/dist/datasources/provider-datasource.d.ts

@@ -0,0 +1,6 @@
+import { BaseOpenMRSDataSource } from './data-source';
+export declare class ProviderDataSource extends BaseOpenMRSDataSource {
+    constructor();
+    fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]>;
+}
+//# sourceMappingURL=provider-datasource.d.ts.map

package/dist/datasources/provider-datasource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-datasource.d.ts","sourceRoot":"","sources":["../../src/datasources/provider-datasource.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,qBAAa,kBAAmB,SAAQ,qBAAqB;;IAKrD,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;CAMlF"}

package/dist/datasources/provider-datasource.js

@@ -0,0 +1,13 @@
+import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
+import { BaseOpenMRSDataSource } from "./data-source.js";
+export class ProviderDataSource extends BaseOpenMRSDataSource {
+    async fetchData(searchTerm, config) {
+        const rep = 'v=custom:(uuid,display)';
+        const url = `${restBaseUrl}/provider?${rep}`;
+        const { data } = await openmrsFetch(searchTerm ? `${url}&q=${searchTerm}` : url);
+        return data?.results;
+    }
+    constructor(){
+        super(null);
+    }
+}

package/dist/datasources/select-concept-answers-datasource.d.ts

@@ -0,0 +1,9 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { BaseOpenMRSDataSource } from './data-source';
+export declare class SelectConceptAnswersDatasource extends BaseOpenMRSDataSource {
+    constructor();
+    fetchSingleItem(uuid: string): Promise<OpenmrsResource | null>;
+    fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]>;
+    private buildUrl;
+}
+//# sourceMappingURL=select-concept-answers-datasource.d.ts.map

package/dist/datasources/select-concept-answers-datasource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-concept-answers-datasource.d.ts","sourceRoot":"","sources":["../../src/datasources/select-concept-answers-datasource.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,eAAe,EAAe,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,qBAAa,8BAA+B,SAAQ,qBAAqB;;IAOvE,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;IAI9D,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAO3E,OAAO,CAAC,QAAQ;CAGjB"}

package/dist/datasources/select-concept-answers-datasource.js

@@ -0,0 +1,19 @@
+import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
+import { BaseOpenMRSDataSource } from "./data-source.js";
+export class SelectConceptAnswersDatasource extends BaseOpenMRSDataSource {
+    fetchSingleItem(uuid) {
+        return openmrsFetch(this.buildUrl(uuid)).then(({ data })=>data);
+    }
+    fetchData(searchTerm, config) {
+        const apiUrl = this.buildUrl(config.referencedValue || config.concept);
+        return openmrsFetch(apiUrl).then(({ data })=>{
+            return data['setMembers'].length ? data['setMembers'] : data['answers'];
+        });
+    }
+    buildUrl(conceptUuid) {
+        return this.url.replace(':conceptUuid', conceptUuid);
+    }
+    constructor(){
+        super(`${restBaseUrl}/concept/:conceptUuid?v=custom:(uuid,display,setMembers:(uuid,display),answers:(uuid,display))`);
+    }
+}

package/dist/external-function-context.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FormField } from './types';
+export type ExternalFunctionContextProps = {
+    handleConfirmQuestionDeletion: (question: Readonly<FormField>) => Promise<void>;
+};
+export declare const ExternalFunctionContext: React.Context<ExternalFunctionContextProps>;
+//# sourceMappingURL=external-function-context.d.ts.map

package/dist/external-function-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"external-function-context.d.ts","sourceRoot":"","sources":["../src/external-function-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,4BAA4B,GAAG;IACzC,6BAA6B,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACjF,CAAC;AAEF,eAAO,MAAM,uBAAuB,6CAA2E,CAAC"}

package/dist/external-function-context.js

@@ -0,0 +1,2 @@
+import React from "react";
+export const ExternalFunctionContext = /*#__PURE__*/ React.createContext(undefined);

package/dist/form-engine.component.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type Visit } from '@openmrs/esm-framework';
+import type { FormField, FormSchema, SessionMode, PreFilledQuestions } from './types';
+interface FormEngineProps {
+    patientUUID: string;
+    formUUID?: string;
+    formJson?: FormSchema;
+    encounterUUID?: string;
+    visit?: Visit;
+    formSessionIntent?: string;
+    mode?: SessionMode;
+    onSubmit?: (data: any) => void;
+    onCancel?: () => void;
+    handleClose?: () => void;
+    handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
+    markFormAsDirty?: (isDirty: boolean) => void;
+    hideControls?: boolean;
+    hidePatientBanner?: boolean;
+    preFilledQuestions?: PreFilledQuestions;
+}
+declare function I18FormEngine(props: FormEngineProps): React.JSX.Element;
+export default I18FormEngine;
+//# sourceMappingURL=form-engine.component.d.ts.map

package/dist/form-engine.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-engine.component.d.ts","sourceRoot":"","sources":["../src/form-engine.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAUhE,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAQtF,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,6BAA6B,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjF,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AA+KD,iBAAS,aAAa,CAAC,KAAK,EAAE,eAAe,qBAM5C;AAED,eAAe,aAAa,CAAC"}

package/dist/form-engine.component.js

@@ -0,0 +1,174 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import classNames from "classnames";
+import { Button, ButtonSet, InlineLoading } from "@carbon/react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import { useSession } from "@openmrs/esm-framework";
+import { FormFactoryProvider } from "./provider/form-factory-provider.js";
+import { init, teardown } from "./lifecycle.js";
+import { isEmpty, useFormJson } from "./index.js";
+import { formEngineAppName } from "./globals.js";
+import { reportError } from "./utils/error-utils.js";
+import { useFormCollapse } from "./hooks/useFormCollapse.js";
+import { useFormWorkspaceSize } from "./hooks/useFormWorkspaceSize.js";
+import { usePageObserver } from "./components/sidebar/usePageObserver.js";
+import { usePatientData } from "./hooks/usePatientData.js";
+import FormProcessorFactory from "./components/processor-factory/form-processor-factory.component.js";
+import Loader from "./components/loaders/loader.component.js";
+import MarkdownWrapper from "./components/inputs/markdown/markdown-wrapper.component.js";
+import PatientBanner from "./components/patient-banner/patient-banner.component.js";
+import Sidebar from "./components/sidebar/sidebar.component.js";
+import styles from "./form-engine.scss";
+const FormEngine = ({ formJson, patientUUID, formUUID, encounterUUID, visit, formSessionIntent, mode, onSubmit, onCancel, handleClose, handleConfirmQuestionDeletion, markFormAsDirty, hideControls = false, hidePatientBanner = false, preFilledQuestions })=>{
+    const { t } = useTranslation();
+    const session = useSession();
+    const ref = useRef(null);
+    const sessionDate = useMemo(()=>{
+        return new Date();
+    }, []);
+    const workspaceSize = useFormWorkspaceSize(ref);
+    const { patient, isLoadingPatient } = usePatientData(patientUUID);
+    const [isLoadingDependencies, setIsLoadingDependencies] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isFormDirty, setIsFormDirty] = useState(false);
+    const sessionMode = !isEmpty(mode) ? mode : !isEmpty(encounterUUID) ? 'edit' : 'enter';
+    const { isFormExpanded, hideFormCollapseToggle } = useFormCollapse(sessionMode);
+    const { hasMultiplePages } = usePageObserver();
+    const { formJson: refinedFormJson, isLoading: isLoadingFormJson, formError } = useFormJson(formUUID, formJson, encounterUUID, formSessionIntent, preFilledQuestions);
+    const showPatientBanner = useMemo(()=>{
+        if (hidePatientBanner) {
+            return false;
+        }
+        return patient && workspaceSize === 'ultra-wide' && mode !== 'embedded-view';
+    }, [
+        patient,
+        mode,
+        workspaceSize,
+        hidePatientBanner
+    ]);
+    const isFormWorkspaceTooNarrow = useMemo(()=>[
+            'narrow'
+        ].includes(workspaceSize), [
+        workspaceSize
+    ]);
+    const showBottomButtonSet = useMemo(()=>{
+        if (mode === 'embedded-view' || isLoadingDependencies || hasMultiplePages === null) {
+            return false;
+        }
+        return isFormWorkspaceTooNarrow || !hasMultiplePages;
+    }, [
+        mode,
+        isFormWorkspaceTooNarrow,
+        isLoadingDependencies,
+        hasMultiplePages
+    ]);
+    const showSidebar = useMemo(()=>{
+        if (mode === 'embedded-view' || isLoadingDependencies || hasMultiplePages === null) {
+            return false;
+        }
+        return !isFormWorkspaceTooNarrow && hasMultiplePages;
+    }, [
+        isFormWorkspaceTooNarrow,
+        isLoadingDependencies,
+        hasMultiplePages
+    ]);
+    useEffect(()=>{
+        reportError(formError, t('errorLoadingFormSchema', 'Error loading form schema'));
+    }, [
+        formError
+    ]);
+    useEffect(()=>{
+        init();
+        return ()=>{
+            teardown();
+        };
+    }, []);
+    useEffect(()=>{
+        markFormAsDirty?.(isFormDirty);
+    }, [
+        isFormDirty
+    ]);
+    const handleSubmit = useCallback((e)=>{
+        e.preventDefault();
+        setIsSubmitting(true);
+    }, []);
+    return /*#__PURE__*/ React.createElement("form", {
+        ref: ref,
+        noValidate: true,
+        className: classNames('cds--form', styles.form),
+        onSubmit: handleSubmit
+    }, isLoadingPatient || isLoadingFormJson ? /*#__PURE__*/ React.createElement(Loader, null) : /*#__PURE__*/ React.createElement(FormFactoryProvider, {
+        patient: patient,
+        patientUUID: patientUUID,
+        sessionMode: sessionMode,
+        sessionDate: sessionDate,
+        formJson: refinedFormJson,
+        workspaceLayout: workspaceSize === 'ultra-wide' ? 'maximized' : 'minimized',
+        location: session?.sessionLocation,
+        provider: session?.currentProvider,
+        visit: visit,
+        handleConfirmQuestionDeletion: handleConfirmQuestionDeletion,
+        isFormExpanded: isFormExpanded,
+        formSubmissionProps: {
+            isSubmitting,
+            setIsSubmitting,
+            onSubmit,
+            onError: ()=>{},
+            handleClose: ()=>{}
+        },
+        hideFormCollapseToggle: hideFormCollapseToggle,
+        setIsFormDirty: setIsFormDirty
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.formContainer
+    }, isLoadingDependencies && /*#__PURE__*/ React.createElement("div", {
+        className: styles.linearActivity
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.indeterminate
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: styles.formContent
+    }, showSidebar && /*#__PURE__*/ React.createElement(Sidebar, {
+        isFormSubmitting: isSubmitting,
+        sessionMode: mode,
+        defaultPage: refinedFormJson.defaultPage,
+        onCancel: onCancel,
+        handleClose: handleClose,
+        hideFormCollapseToggle: hideFormCollapseToggle,
+        hideControls: hideControls
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles.formContentInner
+    }, showPatientBanner && /*#__PURE__*/ React.createElement(PatientBanner, {
+        patient: patient,
+        hideActionsOverflow: true
+    }), refinedFormJson.markdown && /*#__PURE__*/ React.createElement("div", {
+        className: styles.markdownContainer
+    }, /*#__PURE__*/ React.createElement(MarkdownWrapper, {
+        markdown: refinedFormJson.markdown
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: styles.formBody
+    }, /*#__PURE__*/ React.createElement(FormProcessorFactory, {
+        formJson: refinedFormJson,
+        setIsLoadingFormDependencies: setIsLoadingDependencies
+    })), showBottomButtonSet && !hideControls && /*#__PURE__*/ React.createElement(ButtonSet, {
+        className: styles.minifiedButtons
+    }, /*#__PURE__*/ React.createElement(Button, {
+        kind: "secondary",
+        onClick: ()=>{
+            onCancel && onCancel();
+            handleClose && handleClose();
+            hideFormCollapseToggle();
+        }
+    }, mode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')), /*#__PURE__*/ React.createElement(Button, {
+        className: styles.saveButton,
+        disabled: isLoadingDependencies || isSubmitting || mode === 'view',
+        kind: "primary",
+        type: "submit"
+    }, isSubmitting ? /*#__PURE__*/ React.createElement(InlineLoading, {
+        description: t('submitting', 'Submitting') + '...'
+    }) : /*#__PURE__*/ React.createElement("span", null, `${t('save', 'Save')}`))))))));
+};
+function I18FormEngine(props) {
+    return /*#__PURE__*/ React.createElement(I18nextProvider, {
+        i18n: window.i18next,
+        defaultNS: formEngineAppName
+    }, /*#__PURE__*/ React.createElement(FormEngine, props));
+}
+export default I18FormEngine;

package/dist/form-engine.scss

@@ -0,0 +1,148 @@
+@use '@carbon/layout';
+
+// replaces .formEngine
+.form {
+  height: 100%;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+// replaces .container
+.formContainer {
+  display: flex;
+  height: 100%;
+  overflow-y: hidden;
+  flex-direction: column;
+}
+
+// replaces .body
+.formContent {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+// replaces .content
+.formContentInner {
+  height: var(--desktop-workspace-window-height);
+  margin: 0;
+  flex-basis: 65%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  display: flex;
+  position: relative;
+  overflow-y: hidden;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+// replaces .contentBody
+.formBody {
+  overflow-y: auto;
+  width: inherit;
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.minifiedButtons {
+  button {
+    height: 4rem;
+    display: flex;
+    align-content: flex-start;
+    align-items: baseline;
+    min-width: 50%;
+  }
+}
+
+.markdownContainer {
+  padding: 1rem;
+}
+
+.loader {
+  @extend .formContent;
+  height: 1rem;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .formContentInner {
+    height: var(--tablet-workspace-window-height);
+  }
+
+  .minifiedButtons {
+    border-top: 1px solid #ededed;
+    padding: 1.5rem 1rem;
+    background-color: white;
+  }
+}
+
+.linearActivity {
+  overflow: hidden;
+  width: 100%;
+  height: 4px;
+  background-color: var(--brand-03);
+  margin-top: 0px;
+}
+
+.determinate {
+  position: relative;
+  max-width: 100%;
+  height: 100%;
+  -webkit-transition: width 500ms ease-out 1s;
+  -moz-transition: width 500ms ease-out 1s;
+  -o-transition: width 500ms ease-out 1s;
+  transition: width 500ms ease-out 1s;
+  background-color: var(--brand-02);
+}
+
+.indeterminate {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.indeterminate:before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  background-color: var(--brand-02);
+  animation: indeterminate_first 2.5s infinite ease-out;
+}
+
+.indeterminate:after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  background-color: var(--brand-01);
+  animation: indeterminate_second 2.5s infinite ease-in;
+}
+
+@keyframes indeterminate_first {
+  0% {
+    left: -100%;
+    width: 100%;
+  }
+  100% {
+    left: 100%;
+    width: 10%;
+  }
+}
+
+@keyframes indeterminate_second {
+  0% {
+    left: -150%;
+    width: 100%;
+  }
+  100% {
+    left: 100%;
+    width: 10%;
+  }
+}
+
+.saveButton {
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+}