@olaboot/esm-form-engine-lib 4.1.0

package/dist/components/renderer/section/section-renderer.scss

@@ -0,0 +1,19 @@
+@use '@carbon/colors';
+
+.section {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.sectionBody {
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.flexFullWidth {
+  flex-basis: 100%;
+}
+
+.questionInfoDefault {
+  display: flex;
+}

package/dist/components/repeat/helpers.d.ts

@@ -0,0 +1,6 @@
+import { type FormField } from '../../types';
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+export declare function cloneRepeatField(srcField: FormField, value: OpenmrsResource, idSuffix: number): FormField;
+export declare function updateFieldIdInExpression(expression: string, index: number, questionIds: string[]): string;
+export declare function disableRepeatAddButton(limit: string | number, counter: number): boolean;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/components/repeat/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/repeat/helpers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAI9D,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,aAoD7F;AAED,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,UAQjG;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,MAAM,WAM7E"}

package/dist/components/repeat/helpers.js

@@ -0,0 +1,64 @@
+import { cloneDeep } from "lodash-es";
+import { isEmpty } from "../../validators/form-validator.js";
+import { clearSubmission } from "../../utils/common-utils.js";
+export function cloneRepeatField(srcField, value, idSuffix) {
+    const originalGroupMembersIds = [];
+    const clonedField = cloneDeep(srcField);
+    clonedField.questionOptions.repeatOptions = {
+        ...clonedField.questionOptions.repeatOptions ?? {}
+    };
+    clonedField.meta = {
+        repeat: {
+            ...clonedField.meta ?? {},
+            isClone: true
+        },
+        initialValue: {
+            omrsObject: value
+        }
+    };
+    clonedField.id = `${clonedField.id}_${idSuffix}`;
+    clonedField.questions?.forEach((childField)=>{
+        originalGroupMembersIds.push(childField.id);
+        childField.id = `${childField.id}_${idSuffix}`;
+        childField.meta.groupId = clonedField.id;
+        childField.meta.initialValue = {
+            omrsObject: null,
+            refinedValue: null
+        };
+        childField.fieldDependents = new Set();
+        clearSubmission(childField);
+        // cleanup expressions
+        if (childField['hide'] && childField['hide'].hideWhenExpression) {
+            childField['hide'].hideWhenExpression = updateFieldIdInExpression(childField['hide'].hideWhenExpression, idSuffix, originalGroupMembersIds);
+        }
+        if (childField.validators?.length) {
+            childField.validators.forEach((validator)=>{
+                if (validator.type === 'js_expression') {
+                    validator.failsWhenExpression = updateFieldIdInExpression(validator.failsWhenExpression, idSuffix, originalGroupMembersIds);
+                }
+            });
+        }
+        if (childField.questionOptions.calculate?.calculateExpression) {
+            childField.questionOptions.calculate.calculateExpression = updateFieldIdInExpression(childField.questionOptions.calculate?.calculateExpression, idSuffix, originalGroupMembersIds);
+        }
+    });
+    return clonedField;
+}
+export function updateFieldIdInExpression(expression, index, questionIds) {
+    let uniqueQuestionIds = [
+        ...new Set(questionIds)
+    ];
+    uniqueQuestionIds.forEach((id)=>{
+        if (expression.match(id)) {
+            expression = expression.replace(new RegExp(id, 'g'), `${id}_${index}`);
+        }
+    });
+    return expression;
+}
+export function disableRepeatAddButton(limit, counter) {
+    const repeatLimit = Number(limit);
+    if (isEmpty(limit) || isNaN(repeatLimit)) {
+        return false;
+    }
+    return counter >= repeatLimit;
+}

package/dist/components/repeat/helpers.test.js

@@ -0,0 +1,25 @@
+import { updateFieldIdInExpression } from "./helpers.js";
+describe('RepeatingFieldComponent - handleExpressionFieldIdUpdate', ()=>{
+    it('Should handle update of expression with ids in repeat group', ()=>{
+        const expression = "infantStatus !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'";
+        const fieldIds = [
+            'birthDate',
+            'infantStatus',
+            'deathDate'
+        ];
+        const index = 2;
+        const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+        expect(updatedExpression).toEqual("infantStatus_2 !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus_2 !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'");
+    });
+    it('Should handle update of expression with ids not in repeat group', ()=>{
+        const expression = "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')";
+        const fieldIds = [
+            'birthDate',
+            'infantStatus',
+            'deathDate'
+        ];
+        const index = 1;
+        const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+        expect(updatedExpression).toEqual("myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')");
+    });
+});

package/dist/components/repeat/repeat-controls.component.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type FormField } from '../../types';
+interface RepeatingControlsProps {
+    rows: FormField[];
+    question: FormField;
+    questionIndex: number;
+    handleDelete: () => void;
+    handleAdd: () => void;
+}
+declare function RepeatControls({ question, rows, handleDelete, handleAdd, questionIndex }: RepeatingControlsProps): React.JSX.Element;
+export default RepeatControls;
+//# sourceMappingURL=repeat-controls.component.d.ts.map

package/dist/components/repeat/repeat-controls.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeat-controls.component.d.ts","sourceRoot":"","sources":["../../../src/components/repeat/repeat-controls.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAG7C,UAAU,sBAAsB;IAC9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,sBAAsB,qBAqBzG;AAED,eAAe,cAAc,CAAC"}

package/dist/components/repeat/repeat-controls.component.js

@@ -0,0 +1,22 @@
+import { Button } from "@carbon/react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { disableRepeatAddButton } from "./helpers.js";
+import styles from "./repeat-controls.scss";
+function RepeatControls({ question, rows, handleDelete, handleAdd, questionIndex }) {
+    const { t } = useTranslation();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.actionButtons
+    }, questionIndex > 0 && /*#__PURE__*/ React.createElement(Button, {
+        className: styles.button,
+        kind: "danger",
+        onClick: handleDelete
+    }, /*#__PURE__*/ React.createElement("span", null, t('remove', 'Remove'))), questionIndex === rows.length - 1 && /*#__PURE__*/ React.createElement(Button, {
+        className: styles.button,
+        iconDescription: t('add', 'Add'),
+        kind: "primary",
+        disabled: disableRepeatAddButton(question.questionOptions.repeatOptions?.limit, rows.length),
+        onClick: handleAdd
+    }, /*#__PURE__*/ React.createElement("span", null, question.questionOptions.repeatOptions?.addText || t('add', 'Add'))));
+}
+export default RepeatControls;

package/dist/components/repeat/repeat-controls.scss

@@ -0,0 +1,7 @@
+.actionButtons {
+  margin: 0.5rem 0;
+}
+
+.actionButtons > button {
+  margin-right: 0.5rem;
+}

package/dist/components/repeat/repeat.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { FormFieldInputProps } from '../../types';
+declare const Repeat: React.FC<FormFieldInputProps>;
+export default Repeat;
+//# sourceMappingURL=repeat.component.d.ts.map

package/dist/components/repeat/repeat.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeat.component.d.ts","sourceRoot":"","sources":["../../../src/components/repeat/repeat.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAa,mBAAmB,EAAc,MAAM,aAAa,CAAC;AAkB9E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsKzC,CAAC;AAmBF,eAAe,MAAM,CAAC"}

package/dist/components/repeat/repeat.component.js

@@ -0,0 +1,185 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { evaluateAsyncExpression, evaluateExpression } from "../../utils/expression-runner.js";
+import { isEmpty } from "../../validators/form-validator.js";
+import styles from "./repeat.scss";
+import { cloneRepeatField } from "./helpers.js";
+import { clearSubmission, isViewMode } from "../../utils/common-utils.js";
+import RepeatControls from "./repeat-controls.component.js";
+import { createErrorHandler } from "@openmrs/esm-framework";
+import { useFormProviderContext } from "../../provider/form-provider.js";
+import { FormFieldRenderer } from "../renderer/field/form-field-renderer.component.js";
+import { useFormFactory } from "../../provider/form-factory-provider.js";
+const renderingByTypeMap = {
+    obsGroup: 'group',
+    testOrder: 'select',
+    diagnosis: 'ui-select-extended'
+};
+const Repeat = ({ field })=>{
+    const { t } = useTranslation();
+    const isGrouped = useMemo(()=>field.questions?.length > 1, [
+        field
+    ]);
+    const [counter, setCounter] = useState(0);
+    const [rows, setRows] = useState([]);
+    const context = useFormProviderContext();
+    const { handleConfirmQuestionDeletion } = useFormFactory();
+    const { patient, sessionMode, formFieldAdapters, formFields, methods: { getValues, setValue }, addFormField, removeFormField, deletedFields, setDeletedFields, visit } = context;
+    useEffect(()=>{
+        const repeatedFields = formFields.filter((_field)=>_field.questionOptions.concept === field.questionOptions.concept && _field.id.startsWith(field.id) && !_field.meta?.repeat?.wasDeleted);
+        setCounter(repeatedFields.length - 1);
+        setRows(repeatedFields);
+    }, [
+        formFields,
+        field
+    ]);
+    const handleAdd = useCallback((counter)=>{
+        const clonedFieldsBuffer = [];
+        function evaluateExpressions(field) {
+            if (field.hide?.hideWhenExpression) {
+                field.isHidden = evaluateExpression(field.hide.hideWhenExpression, {
+                    value: field,
+                    type: 'field'
+                }, [
+                    ...formFields,
+                    ...clonedFieldsBuffer
+                ], getValues(), {
+                    mode: sessionMode,
+                    patient: patient,
+                    visit
+                });
+            }
+            if (field.questionOptions.calculate?.calculateExpression) {
+                evaluateAsyncExpression(field.questionOptions.calculate?.calculateExpression, {
+                    value: field,
+                    type: 'field'
+                }, [
+                    ...formFields,
+                    ...clonedFieldsBuffer
+                ], getValues(), {
+                    mode: sessionMode,
+                    patient: patient,
+                    visit
+                }).then((result)=>{
+                    if (!isEmpty(result)) {
+                        setValue(field.id, result);
+                        formFieldAdapters[field.type]?.transformFieldValue(field, result, context);
+                    }
+                });
+            }
+        }
+        const clonedField = cloneRepeatField(field, null, counter);
+        clonedFieldsBuffer.push(clonedField);
+        // Handle nested questions
+        if (clonedField.type === 'obsGroup') {
+            clonedField.questions?.forEach((childField)=>{
+                clonedFieldsBuffer.push(childField);
+            });
+        }
+        clonedFieldsBuffer.forEach((field)=>{
+            evaluateExpressions(field);
+            addFormField(field);
+        });
+        setRows([
+            ...rows,
+            clonedField
+        ]);
+    }, [
+        formFields,
+        field,
+        rows,
+        context
+    ]);
+    const removeNthRow = (field)=>{
+        if (field.meta.initialValue?.omrsObject) {
+            formFieldAdapters[field.type]?.transformFieldValue(field, null, context);
+            field.meta.repeat = {
+                ...field.meta.repeat || {},
+                wasDeleted: true
+            };
+            if (field.type === 'obsGroup') {
+                field.questions.forEach((child)=>{
+                    child.meta.repeat = {
+                        ...field.meta.repeat || {},
+                        wasDeleted: true
+                    };
+                    formFieldAdapters[child.type]?.transformFieldValue(child, null, context);
+                });
+            }
+        } else {
+            clearSubmission(field);
+        }
+        setRows(rows.filter((q)=>q.id !== field.id));
+        setDeletedFields([
+            ...deletedFields,
+            field
+        ]);
+        removeFormField(field.id);
+    };
+    const onClickDeleteQuestion = (field)=>{
+        if (handleConfirmQuestionDeletion && typeof handleConfirmQuestionDeletion === 'function') {
+            const result = handleConfirmQuestionDeletion(field);
+            if (result && typeof result.then === 'function' && typeof result.catch === 'function') {
+                result.then(()=>removeNthRow(field)).catch(()=>createErrorHandler());
+            } else if (typeof result === 'boolean') {
+                result && removeNthRow(field);
+            } else {
+                removeNthRow(field);
+            }
+        } else {
+            removeNthRow(field);
+        }
+    };
+    const nodes = useMemo(()=>{
+        return rows.map((field, index)=>{
+            const component = /*#__PURE__*/ React.createElement(FormFieldRenderer, {
+                fieldId: field.id,
+                valueAdapter: formFieldAdapters[field.type],
+                repeatOptions: {
+                    targetRendering: getQuestionWithSupportedRendering(field).questionOptions.rendering
+                }
+            });
+            return /*#__PURE__*/ React.createElement("div", {
+                key: field.id + '_wrapper'
+            }, index !== 0 && /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("hr", {
+                className: styles.divider
+            })), /*#__PURE__*/ React.createElement("div", {
+                className: styles.nodeContainer
+            }, component), !isViewMode(sessionMode) && /*#__PURE__*/ React.createElement(RepeatControls, {
+                question: field,
+                rows: rows,
+                questionIndex: index,
+                handleDelete: ()=>{
+                    onClickDeleteQuestion(field);
+                },
+                handleAdd: ()=>{
+                    const nextCount = counter + 1;
+                    handleAdd(nextCount);
+                    setCounter(nextCount);
+                }
+            }));
+        });
+    }, [
+        rows
+    ]);
+    if (field.isHidden || !nodes || !hasVisibleField(field)) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", null, nodes));
+};
+function hasVisibleField(field) {
+    if (field.questions?.length) {
+        return field.questions?.some((child)=>!child.isHidden);
+    }
+    return !field.isHidden;
+}
+function getQuestionWithSupportedRendering(field) {
+    return {
+        ...field,
+        questionOptions: {
+            ...field.questionOptions,
+            rendering: renderingByTypeMap[field.type] || null
+        }
+    };
+}
+export default Repeat;

package/dist/components/repeat/repeat.scss

@@ -0,0 +1,30 @@
+.boldLegend > legend {
+  font-weight: bolder;
+}
+
+.flexColumn {
+  display: flex;
+  flex-direction: column;
+  margin-right: 2.5rem;
+  flex: 1;
+}
+
+.removeButton {
+  @extend .flexColumn;
+  margin-left: 0.5rem;
+}
+
+.nodeContainer {
+  margin: 1rem 0rem;
+}
+
+.container {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.divider {
+  border: 1.5px solid #e0e0e0;
+  border-bottom: none;
+  margin: 2rem 0;
+}

package/dist/components/repeat/repeat.test.js

@@ -0,0 +1,25 @@
+import { updateFieldIdInExpression } from "./helpers.js";
+describe('RepeatingFieldComponent - handleExpressionFieldIdUpdate', ()=>{
+    it('Should handle update of expression with ids in repeat group', ()=>{
+        const expression = "infantStatus !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'";
+        const fieldIds = [
+            'birthDate',
+            'infantStatus',
+            'deathDate'
+        ];
+        const index = 2;
+        const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+        expect(updatedExpression).toEqual("infantStatus_2 !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus_2 !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'");
+    });
+    it('Should handle update of expression with ids not in repeat group', ()=>{
+        const expression = "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')";
+        const fieldIds = [
+            'birthDate',
+            'infantStatus',
+            'deathDate'
+        ];
+        const index = 1;
+        const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+        expect(updatedExpression).toEqual("myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')");
+    });
+});

package/dist/components/sidebar/page-observer.d.ts

@@ -0,0 +1,20 @@
+import { type FormPage } from '../../types';
+declare class PageObserver {
+    private scrollablePagesSubject;
+    private pagesWithErrorsSubject;
+    private activePagesSubject;
+    private evaluatedPagesVisibilitySubject;
+    setEvaluatedPagesVisibility(evaluatedPagesVisibility: boolean): void;
+    updateScrollablePages(newPages: Array<FormPage>): void;
+    updatePagesWithErrors(newErrors: string[]): void;
+    addActivePage(pageId: string): void;
+    removeInactivePage(pageId: string): void;
+    getActivePagesObservable(): import("rxjs").Observable<Set<string>>;
+    getScrollablePagesObservable(): import("rxjs").Observable<FormPage[]>;
+    getPagesWithErrorsObservable(): import("rxjs").Observable<Set<string>>;
+    getEvaluatedPagesVisibilityObservable(): import("rxjs").Observable<boolean>;
+    clear(): void;
+}
+export declare const pageObserver: PageObserver;
+export {};
+//# sourceMappingURL=page-observer.d.ts.map

package/dist/components/sidebar/page-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-observer.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/page-observer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,cAAM,YAAY;IAChB,OAAO,CAAC,sBAAsB,CAA4C;IAC1E,OAAO,CAAC,sBAAsB,CAA+C;IAC7E,OAAO,CAAC,kBAAkB,CAA+C;IACzE,OAAO,CAAC,+BAA+B,CAAsC;IAE7E,2BAA2B,CAAC,wBAAwB,EAAE,OAAO;IAI7D,qBAAqB,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC;IAI/C,qBAAqB,CAAC,SAAS,EAAE,MAAM,EAAE;IAIzC,aAAa,CAAC,MAAM,EAAE,MAAM;IAM5B,kBAAkB,CAAC,MAAM,EAAE,MAAM;IAMjC,wBAAwB;IAIxB,4BAA4B;IAI5B,4BAA4B;IAI5B,qCAAqC;IAIrC,KAAK;CAMN;AAED,eAAO,MAAM,YAAY,cAAqB,CAAC"}

package/dist/components/sidebar/page-observer.js

@@ -0,0 +1,60 @@
+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 { BehaviorSubject } from "rxjs";
+class PageObserver {
+    setEvaluatedPagesVisibility(evaluatedPagesVisibility) {
+        this.evaluatedPagesVisibilitySubject.next(evaluatedPagesVisibility);
+    }
+    updateScrollablePages(newPages) {
+        this.scrollablePagesSubject.next(newPages);
+    }
+    updatePagesWithErrors(newErrors) {
+        this.pagesWithErrorsSubject.next(new Set(newErrors));
+    }
+    addActivePage(pageId) {
+        const currentActivePages = this.activePagesSubject.value;
+        currentActivePages.add(pageId);
+        this.activePagesSubject.next(currentActivePages);
+    }
+    removeInactivePage(pageId) {
+        const currentActivePages = this.activePagesSubject.value;
+        currentActivePages.delete(pageId);
+        this.activePagesSubject.next(currentActivePages);
+    }
+    getActivePagesObservable() {
+        return this.activePagesSubject.asObservable();
+    }
+    getScrollablePagesObservable() {
+        return this.scrollablePagesSubject.asObservable();
+    }
+    getPagesWithErrorsObservable() {
+        return this.pagesWithErrorsSubject.asObservable();
+    }
+    getEvaluatedPagesVisibilityObservable() {
+        return this.evaluatedPagesVisibilitySubject.asObservable();
+    }
+    clear() {
+        this.scrollablePagesSubject.next([]);
+        this.pagesWithErrorsSubject.next(new Set());
+        this.activePagesSubject.next(new Set());
+        this.evaluatedPagesVisibilitySubject.next(false);
+    }
+    constructor(){
+        _define_property(this, "scrollablePagesSubject", new BehaviorSubject([]));
+        _define_property(this, "pagesWithErrorsSubject", new BehaviorSubject(new Set()));
+        _define_property(this, "activePagesSubject", new BehaviorSubject(new Set()));
+        _define_property(this, "evaluatedPagesVisibilitySubject", new BehaviorSubject(null));
+    }
+}
+export const pageObserver = new PageObserver();

package/dist/components/sidebar/sidebar.component.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SessionMode } from '../../types';
+interface SidebarProps {
+    defaultPage: string;
+    isFormSubmitting: boolean;
+    sessionMode: SessionMode;
+    onCancel: () => void;
+    handleClose: () => void;
+    hideFormCollapseToggle: () => void;
+    hideControls?: boolean;
+}
+declare const Sidebar: React.FC<SidebarProps>;
+export default Sidebar;
+//# sourceMappingURL=sidebar.component.d.ts.map

package/dist/components/sidebar/sidebar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAY,WAAW,EAAE,MAAM,aAAa,CAAC;AAGzD,UAAU,YAAY;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,sBAAsB,EAAE,MAAM,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkEnC,CAAC;AAiCF,eAAe,OAAO,CAAC"}

package/dist/components/sidebar/sidebar.component.js

@@ -0,0 +1,77 @@
+import React, { useMemo } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { Button, InlineLoading } from "@carbon/react";
+import { useLayoutType } from "@openmrs/esm-framework";
+import { isPageContentVisible } from "../../utils/form-helper.js";
+import { useCurrentActivePage } from "./useCurrentActivePage.js";
+import { usePageObserver } from "./usePageObserver.js";
+import styles from "./sidebar.scss";
+const Sidebar = ({ defaultPage, isFormSubmitting, sessionMode, onCancel, handleClose, hideFormCollapseToggle, hideControls })=>{
+    const { t } = useTranslation();
+    const { pages, pagesWithErrors, activePages, evaluatedPagesVisibility } = usePageObserver();
+    const { currentActivePage, requestPage } = useCurrentActivePage({
+        pages,
+        defaultPage,
+        activePages,
+        evaluatedPagesVisibility
+    });
+    const layout = useLayoutType();
+    const responsiveSize = useMemo(()=>{
+        const isTablet = layout === 'tablet';
+        return isTablet ? 'lg' : 'sm';
+    }, [
+        layout
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.sidebar
+    }, pages.filter((page)=>isPageContentVisible(page)).map((page)=>/*#__PURE__*/ React.createElement(PageLink, {
+            key: page.id,
+            page: page,
+            currentActivePage: currentActivePage,
+            pagesWithErrors: pagesWithErrors,
+            requestPage: requestPage
+        })), sessionMode !== 'view' && !hideControls && /*#__PURE__*/ React.createElement("hr", {
+        className: styles.divider
+    }), !hideControls && /*#__PURE__*/ React.createElement("div", {
+        className: styles.sideNavActions
+    }, sessionMode !== 'view' && /*#__PURE__*/ React.createElement(Button, {
+        className: styles.saveButton,
+        disabled: isFormSubmitting,
+        type: "submit",
+        size: responsiveSize
+    }, isFormSubmitting ? /*#__PURE__*/ React.createElement(InlineLoading, {
+        description: t('submitting', 'Submitting') + '...'
+    }) : /*#__PURE__*/ React.createElement("span", null, `${t('save', 'Save')}`)), /*#__PURE__*/ React.createElement(Button, {
+        className: classNames(styles.closeButton, {
+            [styles.topMargin]: sessionMode === 'view'
+        }),
+        kind: "tertiary",
+        onClick: ()=>{
+            onCancel?.();
+            handleClose?.();
+            hideFormCollapseToggle();
+        },
+        size: responsiveSize
+    }, sessionMode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel'))));
+};
+function PageLink({ page, currentActivePage, pagesWithErrors, requestPage }) {
+    const { t } = useTranslation();
+    const isActive = page.id === currentActivePage;
+    const hasError = pagesWithErrors.includes(page.id);
+    const isTablet = useLayoutType() === 'tablet';
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles.pageLink, {
+            [styles.activePage]: isActive && !hasError,
+            [styles.errorPage]: hasError && !isActive,
+            [styles.activeErrorPage]: hasError && isActive,
+            [styles.pageLinkTablet]: isTablet
+        })
+    }, /*#__PURE__*/ React.createElement("button", {
+        onClick: (e)=>{
+            e.preventDefault();
+            requestPage(page.id);
+        }
+    }, /*#__PURE__*/ React.createElement("span", null, t(page.label))));
+}
+export default Sidebar;