@olaboot/esm-form-engine-lib 4.1.0

package/dist/components/inputs/file/file-thumbnail.scss

@@ -0,0 +1,42 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.thumbnail {
+  height: 7rem;
+  width: 7rem;
+}
+
+.imageThumbnail {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+}
+
+.pdfThumbnail {
+  background-color: vars.$color-gray-30;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.removeButton {
+  position: absolute;
+  top: layout.$spacing-02;
+  right: layout.$spacing-02;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  padding-block-start: 0;
+  --cds-layout-size-height-local: 0;
+}
+
+.removeButton:hover {
+  background-color: transparent;
+}
+
+.closeIcon {
+  fill: white !important;
+}

package/dist/components/inputs/file/file.component.d.ts

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

package/dist/components/inputs/file/file.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/file/file.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAK3C,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAS3E,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAiF1D,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/inputs/file/file.component.js

@@ -0,0 +1,90 @@
+import React, { useCallback } from "react";
+import { Button } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { Add } from "@carbon/react/icons";
+import styles from "./file.scss";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import { isViewMode } from "../../../utils/common-utils.js";
+import FieldValueView from "../../value/view/field-value-view.component.js";
+import FieldLabel from "../../field-label/field-label.component.js";
+import { showModal, useLayoutType } from "@openmrs/esm-framework";
+import { FileThumbnail } from "./file-thumbnail.component.js";
+import classNames from "classnames";
+const File = ({ field, value, setFieldValue })=>{
+    const { t } = useTranslation();
+    const { sessionMode } = useFormProviderContext();
+    const isTablet = useLayoutType() === 'tablet';
+    const showImageCaptureModal = useCallback(()=>{
+        const close = showModal('capture-photo-modal', {
+            saveFile: (file)=>{
+                if (file.capturedFromWebcam && !file.fileName.includes('.')) {
+                    file.fileName = `${file.fileName}.png`;
+                }
+                const currentFiles = value ? value : [];
+                setFieldValue([
+                    ...currentFiles,
+                    file
+                ]);
+                close();
+                return Promise.resolve();
+            },
+            closeModal: ()=>{
+                close();
+            },
+            allowedExtensions: field.questionOptions.allowedFileTypes,
+            multipleFiles: field.questionOptions.allowMultiple,
+            collectDescription: true
+        });
+    }, [
+        value,
+        field
+    ]);
+    const handleRemoveFile = useCallback((index)=>{
+        const buffer = [
+            ...value
+        ];
+        const attachment = buffer[index];
+        if (attachment.uuid) {
+            buffer[index] = {
+                ...attachment,
+                voided: true
+            };
+        } else {
+            buffer.splice(index, 1);
+        }
+        setFieldValue(buffer);
+    }, [
+        value
+    ]);
+    if (isViewMode(sessionMode) && !value) {
+        return /*#__PURE__*/ React.createElement(FieldValueView, {
+            label: t(field.label),
+            value: null,
+            conceptName: field.meta.concept?.display,
+            isInline: false
+        });
+    }
+    return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles.label, 'cds--label')
+    }, /*#__PURE__*/ React.createElement(FieldLabel, {
+        field: field
+    })), !isViewMode(sessionMode) && /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Button, {
+        className: styles.uploadButton,
+        kind: isTablet ? 'ghost' : 'tertiary',
+        onClick: showImageCaptureModal,
+        renderIcon: (props)=>/*#__PURE__*/ React.createElement(Add, {
+                size: 16,
+                ...props
+            })
+    }, field.questionOptions.buttonLabel ? t(field.questionOptions.buttonLabel) : t('addFile', 'Add file'))), /*#__PURE__*/ React.createElement("div", {
+        className: styles.thumbnailGrid
+    }, value && value.filter((file)=>!file.voided).map((file, index)=>/*#__PURE__*/ React.createElement("div", {
+            className: styles.thumbnailContainer
+        }, /*#__PURE__*/ React.createElement(FileThumbnail, {
+            title: file.fileName,
+            src: file.base64Content,
+            bytesContentFamily: file.fileType,
+            removeFileCb: ()=>handleRemoveFile(index)
+        })))));
+};
+export default File;

package/dist/components/inputs/file/file.scss

@@ -0,0 +1,21 @@
+@use '@carbon/layout';
+
+.label {
+  font-weight: 600;
+  line-height: 30px;
+  color: #000000;
+}
+
+.thumbnailGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 7rem);
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+}
+
+.thumbnailContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}

package/dist/components/inputs/fixed-value/fixed-value.component.d.ts

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

package/dist/components/inputs/fixed-value/fixed-value.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-value.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/fixed-value/fixed-value.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG1D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAW7C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/inputs/fixed-value/fixed-value.component.js

@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+import { isEmpty } from "../../../validators/form-validator.js";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+const FixedValue = ({ field, setFieldValue })=>{
+    const context = useFormProviderContext();
+    useEffect(()=>{
+        if (!field.meta?.initialValue?.omrsObject && !isEmpty(field.meta.fixedValue)) {
+            setFieldValue(field.meta.fixedValue);
+            context.formFieldAdapters[field.type].transformFieldValue(field, field.meta.fixedValue, context);
+        }
+    }, []);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null);
+};
+export default FixedValue;

package/dist/components/inputs/markdown/markdown-wrapper.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const MarkdownWrapper: React.FC<{
+    markdown: string;
+}>;
+export default MarkdownWrapper;
+//# sourceMappingURL=markdown-wrapper.component.d.ts.map

package/dist/components/inputs/markdown/markdown-wrapper.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-wrapper.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/markdown/markdown-wrapper.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAQnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/inputs/markdown/markdown-wrapper.component.js

@@ -0,0 +1,20 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+const MarkdownWrapper = ({ markdown })=>{
+    return /*#__PURE__*/ React.createElement(ReactMarkdown, {
+        children: markdown,
+        unwrapDisallowed: true,
+        allowedElements: [
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            'p',
+            'strong',
+            'em'
+        ]
+    });
+};
+export default MarkdownWrapper;

package/dist/components/inputs/markdown/markdown.component.d.ts

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

package/dist/components/inputs/markdown/markdown.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/markdown/markdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG1D,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgB3C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/inputs/markdown/markdown.component.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import MarkdownWrapper from "./markdown-wrapper.component.js";
+const Markdown = ({ field })=>{
+    const { t } = useTranslation();
+    const translateMarkdown = (markdownContent)=>{
+        if (Array.isArray(markdownContent)) {
+            return markdownContent.map((line)=>t(line, {
+                    defaultValue: line,
+                    interpolation: {
+                        escapeValue: false
+                    }
+                })).join('\n\n');
+        }
+        return typeof markdownContent === 'string' ? t(markdownContent, {
+            defaultValue: markdownContent,
+            interpolation: {
+                escapeValue: false
+            }
+        }) : markdownContent;
+    };
+    return !field.isHidden && /*#__PURE__*/ React.createElement(MarkdownWrapper, {
+        markdown: translateMarkdown(field.value)
+    });
+};
+export default Markdown;

package/dist/components/inputs/multi-select/multi-select.component.d.ts

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

package/dist/components/inputs/multi-select/multi-select.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/multi-select/multi-select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAKpE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAO1D,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyI9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/inputs/multi-select/multi-select.component.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Checkbox, CheckboxGroup, FilterableMultiSelect, Layer, Tag } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { shouldUseInlineLayout } from "../../../utils/form-helper.js";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import { ValueEmpty } from "../../value/value.component.js";
+import FieldLabel from "../../field-label/field-label.component.js";
+import FieldValueView from "../../value/view/field-value-view.component.js";
+import styles from "./multi-select.scss";
+const MultiSelect = ({ field, value, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+    const [counter, setCounter] = useState(0);
+    const [initiallyCheckedQuestionItems, setInitiallyCheckedQuestionItems] = useState([]);
+    const isFirstRender = useRef(true);
+    const selectOptions = field.questionOptions.answers.filter((answer)=>!answer.isHidden).map((answer, index)=>({
+            id: `${field.id}-${answer.concept}`,
+            concept: answer.concept,
+            label: t(answer.label),
+            key: index,
+            disabled: answer.disable?.isDisabled,
+            readonly: isTrue(field.readonly)
+        }));
+    const initiallySelectedQuestionItems = useMemo(()=>{
+        if (value?.length && counter < 1) {
+            setCounter(counter + 1);
+            return selectOptions.filter((item)=>value?.includes(item.concept));
+        }
+        return [];
+    }, [
+        value
+    ]);
+    const handleSelectItemsChange = ({ selectedItems })=>{
+        const value = selectedItems.map((selectedItem)=>{
+            return selectedItem.concept;
+        });
+        setFieldValue(value);
+    };
+    const isSearchable = useMemo(()=>isTrue(field.questionOptions.isCheckboxSearchable), [
+        field.questionOptions.isCheckboxSearchable
+    ]);
+    useEffect(()=>{
+        if (isFirstRender.current && counter === 1) {
+            setInitiallyCheckedQuestionItems(initiallySelectedQuestionItems.map((item)=>item.concept));
+            isFirstRender.current = false;
+        }
+    }, [
+        initiallySelectedQuestionItems,
+        isFirstRender
+    ]);
+    const handleSelectCheckbox = (val)=>{
+        const value = val.concept;
+        const isChecked = initiallyCheckedQuestionItems.some((item)=>item === value);
+        let updatedItems;
+        if (isChecked) {
+            updatedItems = initiallyCheckedQuestionItems.filter((item)=>item !== value);
+        } else {
+            updatedItems = initiallyCheckedQuestionItems.some((val)=>val === value) ? initiallyCheckedQuestionItems.filter((item)=>item !== value) : [
+                ...initiallyCheckedQuestionItems,
+                value
+            ];
+        }
+        setInitiallyCheckedQuestionItems(updatedItems);
+        setFieldValue(updatedItems);
+    };
+    const isInline = useMemo(()=>{
+        if ([
+            'view',
+            'embedded-view'
+        ].includes(sessionMode) || isTrue(field.readonly)) {
+            return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+        }
+        return false;
+    }, [
+        sessionMode,
+        field.readonly,
+        field.inlineRendering,
+        layoutType,
+        workspaceLayout
+    ]);
+    return sessionMode == 'view' || sessionMode == 'embedded-view' ? /*#__PURE__*/ React.createElement("div", {
+        className: styles.formField
+    }, /*#__PURE__*/ React.createElement(FieldValueView, {
+        label: t(field.label),
+        value: value ? formFieldAdapters[field.type]?.getDisplayValue(field, value) : value,
+        conceptName: field.meta?.concept?.display,
+        isInline: isInline
+    })) : !field.isHidden && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        className: styles.boldedLabel
+    }, /*#__PURE__*/ React.createElement(Layer, null, isSearchable ? /*#__PURE__*/ React.createElement(FilterableMultiSelect, {
+        disabled: field.isDisabled,
+        id: field.id,
+        initialSelectedItems: initiallySelectedQuestionItems,
+        invalid: errors.length > 0,
+        invalidText: errors[0]?.message,
+        items: selectOptions,
+        itemToString: (item)=>item ? t(item.label) : ' ',
+        key: field.id,
+        onChange: handleSelectItemsChange,
+        placeholder: t('search', 'Search') + '...',
+        readOnly: isTrue(field.readonly),
+        titleText: /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        }),
+        warn: warnings.length > 0,
+        warnText: warnings[0]?.message
+    }) : /*#__PURE__*/ React.createElement(CheckboxGroup, {
+        legendText: /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        }),
+        readOnly: isTrue(field.readonly)
+    }, selectOptions?.map((value, index)=>{
+        return /*#__PURE__*/ React.createElement(Checkbox, {
+            className: styles.checkbox,
+            checked: initiallyCheckedQuestionItems.some((item)=>item === value.concept),
+            disabled: value.disabled,
+            id: `${field.id}-${value.concept}`,
+            key: `${field.id}-${value.concept}-${index}`,
+            labelText: t(value.label),
+            name: value.concept,
+            onChange: ()=>handleSelectCheckbox(value),
+            readOnly: isTrue(field.readonly)
+        });
+    })))), isSearchable && /*#__PURE__*/ React.createElement("div", {
+        className: styles.selectionDisplay
+    }, value?.length ? /*#__PURE__*/ React.createElement("div", {
+        className: styles.tagContainer
+    }, formFieldAdapters[field.type]?.getDisplayValue(field, value)?.map((displayValue, index)=>/*#__PURE__*/ React.createElement(Tag, {
+            key: index,
+            type: "cool-gray"
+        }, t(displayValue)))) : /*#__PURE__*/ React.createElement(ValueEmpty, null)));
+};
+export default MultiSelect;

package/dist/components/inputs/multi-select/multi-select.scss

@@ -0,0 +1,25 @@
+@use '@carbon/colors';
+
+.boldedLabel label,
+legend > span {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.selectionDisplay {
+  margin-top: 0.125rem;
+}
+
+.tagContainer {
+  margin: 0.5rem 0;
+}
+
+.checkbox label {
+  color: colors.$black-100 !important;
+  font-weight: 500 !important;
+}

package/dist/components/inputs/multi-select/multi-select.test.js

@@ -0,0 +1,106 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { act, render, screen } from "@testing-library/react";
+import { openmrsFetch, usePatient, useSession } from "@openmrs/esm-framework";
+import { mockPatient, mockSessionDataResponse, mockVisit } from "__mocks__";
+import { multiSelectFormSchema } from "__mocks__/forms";
+import FormEngine from "../../../form-engine.component.js";
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseSession = jest.mocked(useSession);
+const mockUsePatient = jest.mocked(usePatient);
+const visit = mockVisit;
+const patientUUID = '8673ee4f-e2ab-4077-ba55-4980f408773e';
+jest.mock('../../../api', ()=>{
+    const originalModule = jest.requireActual('../../../api');
+    return {
+        ...originalModule,
+        getPreviousEncounter: jest.fn().mockImplementation(()=>Promise.resolve(null)),
+        getConcept: jest.fn().mockImplementation(()=>Promise.resolve(null)),
+        getLatestObs: jest.fn().mockImplementation(()=>Promise.resolve({
+                valueNumeric: 60
+            })),
+        saveEncounter: jest.fn(),
+        createProgramEnrollment: jest.fn()
+    };
+});
+const renderForm = async ()=>{
+    await act(async ()=>{
+        render(/*#__PURE__*/ React.createElement(FormEngine, {
+            formJson: multiSelectFormSchema,
+            formUUID: null,
+            patientUUID: patientUUID,
+            formSessionIntent: undefined,
+            visit: visit
+        }));
+    });
+};
+describe('MultiSelect Component', ()=>{
+    beforeEach(()=>{
+        mockOpenmrsFetch.mockResolvedValue({
+            data: {
+                results: [
+                    {
+                        ...multiSelectFormSchema
+                    }
+                ]
+            }
+        });
+        mockUseSession.mockReturnValue(mockSessionDataResponse.data);
+        mockUsePatient.mockReturnValue({
+            isLoading: false,
+            patient: mockPatient,
+            patientUuid: mockPatient.id,
+            error: null
+        });
+    });
+    it('renders correctly', async ()=>{
+        await renderForm();
+        expect(screen.getByRole('combobox', {
+            name: /Patient covered by NHIF/i
+        })).toBeInTheDocument();
+        expect(screen.getByText('Was this visit scheduled?')).toBeInTheDocument();
+    });
+    it('should render a checkbox searchable (combobox) for the "multiCheckbox" rendering type', async ()=>{
+        await renderForm();
+        const user = userEvent.setup();
+        const searchableCombobox = screen.getByRole('combobox', {
+            name: /Checkbox searchable/i
+        });
+        expect(searchableCombobox).toBeInTheDocument();
+        await user.click(searchableCombobox);
+        expect(screen.getByRole('option', {
+            name: /Option 1/i
+        })).toBeInTheDocument();
+        expect(screen.getByRole('option', {
+            name: /Option 2/i
+        })).toBeInTheDocument();
+    });
+    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
+        }));
+        const unscheduledVisitOption = screen.getByRole('checkbox', {
+            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
+        }));
+        const unscheduledVisitOption = screen.getByRole('checkbox', {
+            name: /Unscheduled visit early/i
+        });
+        expect(unscheduledVisitOption).not.toBeDisabled();
+    });
+});

package/dist/components/inputs/number/number.component.d.ts

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

package/dist/components/inputs/number/number.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/number/number.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAMpD,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAO1D,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqE9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/inputs/number/number.component.js

@@ -0,0 +1,77 @@
+import React, { useCallback, useMemo } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { Layer, NumberInput } from "@carbon/react";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { shouldUseInlineLayout } from "../../../utils/form-helper.js";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import FieldLabel from "../../field-label/field-label.component.js";
+import FieldValueView from "../../value/view/field-value-view.component.js";
+import styles from "./number.scss";
+const NumberField = ({ field, value, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+    const numberValue = useMemo(()=>{
+        if (isNaN(value)) {
+            return '';
+        }
+        return value ?? '';
+    }, [
+        value
+    ]);
+    const getNumericValue = useCallback((value)=>typeof value === 'undefined' || isNaN(Number(value)) ? undefined : Number(value), []);
+    const handleChange = useCallback((event, { value })=>{
+        const parsedValue = getNumericValue(value);
+        setFieldValue(isNaN(parsedValue) ? undefined : parsedValue);
+    }, [
+        setFieldValue,
+        getNumericValue
+    ]);
+    const isInline = useMemo(()=>{
+        if ([
+            'view',
+            'embedded-view'
+        ].includes(sessionMode) || isTrue(field.readonly)) {
+            return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+        }
+        return false;
+    }, [
+        sessionMode,
+        field.readonly,
+        field.inlineRendering,
+        layoutType,
+        workspaceLayout
+    ]);
+    const max = getNumericValue(field.questionOptions.max);
+    const min = getNumericValue(field.questionOptions.min);
+    return sessionMode == 'view' || sessionMode == 'embedded-view' ? /*#__PURE__*/ React.createElement("div", {
+        className: styles.formField
+    }, /*#__PURE__*/ React.createElement(FieldValueView, {
+        label: t(field.label),
+        value: value,
+        conceptName: field.meta?.concept?.display,
+        isInline: isInline
+    })) : !field.isHidden && /*#__PURE__*/ React.createElement(Layer, null, /*#__PURE__*/ React.createElement(NumberInput, {
+        id: field.id,
+        invalid: errors.length > 0,
+        invalidText: errors[0]?.message,
+        label: /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        }),
+        max: max,
+        min: min,
+        name: field.id,
+        value: numberValue,
+        onChange: handleChange,
+        allowEmpty: true,
+        size: "lg",
+        hideSteppers: field.hideSteppers ?? false,
+        disabled: field.isDisabled,
+        readOnly: isTrue(field.readonly),
+        className: classNames(styles.controlWidthConstrained, styles.boldedLabel),
+        warn: warnings.length > 0,
+        warnText: warnings[0]?.message,
+        step: field.questionOptions.step ?? 0.01
+    }));
+};
+export default NumberField;

package/dist/components/inputs/number/number.scss

@@ -0,0 +1,15 @@
+@use '@carbon/colors';
+
+.boldedLabel label {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.controlWidthConstrained {
+  max-width: 18rem;
+}