@olaboot/esm-form-engine-lib 4.1.0

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

@@ -0,0 +1,98 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { act, render, screen } from "@testing-library/react";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import NumberField from "./number.component.js";
+jest.mock('../../../provider/form-provider', ()=>({
+        useFormProviderContext: jest.fn()
+    }));
+const mockUseFormProviderContext = useFormProviderContext;
+const numberFieldMock = {
+    label: 'Weight(kg):',
+    type: 'obs',
+    id: 'weight',
+    questionOptions: {
+        rendering: 'number',
+        concept: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
+    },
+    isHidden: false,
+    isDisabled: false,
+    readonly: false
+};
+const renderNumberField = async (props)=>{
+    await act(()=>render(/*#__PURE__*/ React.createElement(NumberField, props)));
+};
+const mockProviderValues = {
+    layoutType: 'small-desktop',
+    sessionMode: 'enter',
+    workspaceLayout: 'minimized',
+    formFieldAdapters: {}
+};
+describe('NumberField Component', ()=>{
+    beforeEach(()=>{
+        mockUseFormProviderContext.mockReturnValue(mockProviderValues);
+    });
+    it('renders correctly', async ()=>{
+        await renderNumberField({
+            field: numberFieldMock,
+            value: '',
+            errors: [],
+            warnings: [],
+            setFieldValue: jest.fn()
+        });
+        expect(screen.getByLabelText('Weight(kg):')).toBeInTheDocument();
+    });
+    it('should render with NaN value', async ()=>{
+        await renderNumberField({
+            field: numberFieldMock,
+            value: NaN,
+            errors: [],
+            warnings: [],
+            setFieldValue: jest.fn()
+        });
+        const inputElement = screen.getByLabelText('Weight(kg):');
+        expect(inputElement.value).toBe('');
+    });
+    it('calls setFieldValue on input change', async ()=>{
+        const user = userEvent.setup();
+        const mockSetFieldValue = jest.fn();
+        await renderNumberField({
+            field: numberFieldMock,
+            value: '',
+            errors: [],
+            warnings: [],
+            setFieldValue: mockSetFieldValue
+        });
+        const inputElement = screen.getByLabelText('Weight(kg):');
+        await user.type(inputElement, '150');
+        expect(mockSetFieldValue).toHaveBeenCalledWith(150);
+    });
+    it('displays error message when invalid', async ()=>{
+        await renderNumberField({
+            field: numberFieldMock,
+            value: '',
+            errors: [
+                {
+                    message: 'Invalid value'
+                }
+            ],
+            warnings: [],
+            setFieldValue: jest.fn()
+        });
+        expect(screen.getByText('Invalid value')).toBeInTheDocument();
+    });
+    it('disables input when field is disabled', async ()=>{
+        await renderNumberField({
+            field: {
+                ...numberFieldMock,
+                isDisabled: true
+            },
+            value: '',
+            errors: [],
+            warnings: [],
+            setFieldValue: jest.fn()
+        });
+        const inputElement = screen.getByLabelText('Weight(kg):');
+        expect(inputElement).toBeDisabled();
+    });
+});

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

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

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

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

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

@@ -0,0 +1,69 @@
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { FormGroup, RadioButtonGroup, RadioButton } 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 "./radio.scss";
+const Radio = ({ field, value, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+    const handleChange = (value)=>{
+        setFieldValue(value);
+    };
+    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' || isTrue(field.readonly) ? /*#__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(FormGroup, {
+        legendText: /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        }),
+        className: styles.boldedLegend,
+        disabled: field.isDisabled,
+        invalid: errors?.length > 0
+    }, /*#__PURE__*/ React.createElement(RadioButtonGroup, {
+        name: field.id,
+        valueSelected: value,
+        onChange: handleChange,
+        readOnly: isTrue(field.readonly),
+        orientation: field.questionOptions?.orientation || 'vertical'
+    }, field.questionOptions.answers.filter((answer)=>!answer.isHidden).map((answer, index)=>{
+        return /*#__PURE__*/ React.createElement(RadioButton, {
+            id: `${field.id}-${answer.label}`,
+            labelText: t(answer.label) ?? '',
+            value: answer.concept,
+            key: index,
+            onClick: (e)=>{
+                if (value && e.target.checked) {
+                    e.target.checked = false;
+                    e.preventDefault();
+                    handleChange(null);
+                } else {
+                    handleChange(answer.concept);
+                }
+            }
+        });
+    })), (errors?.length > 0 || warnings?.length > 0) && /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+        className: styles.errorMessage
+    }, errors.length > 0 ? errors[0].message : warnings.length > 0 ? warnings[0].message : null)));
+};
+export default Radio;

package/dist/components/inputs/radio/radio.scss

@@ -0,0 +1,36 @@
+@use '@carbon/colors';
+
+.errorLegend legend {
+  color: colors.$red-60 !important;
+  font-weight: 600;
+}
+
+.boldedLegend legend {
+  color: colors.$black-100 !important;
+  font-weight: 600;
+}
+
+.warningLabel {
+  display: block;
+  max-height: 12.5rem;
+  overflow: visible;
+  font-weight: 400;
+  color: colors.$gray-70;
+}
+
+.errorLabel {
+  display: block;
+  max-height: 12.5rem;
+  overflow: visible;
+  font-weight: 400;
+  color: colors.$red-60;
+}
+
+.errorMessage {
+  display: block;
+  max-height: 12.5rem;
+  overflow: visible;
+  font-weight: 400;
+  color: colors.$red-60;
+  font-size: 0.8rem;
+}

package/dist/components/inputs/radio/radio.test.js

@@ -0,0 +1,190 @@
+import React from "react";
+import { act, render, screen } from "@testing-library/react";
+import { openmrsFetch, usePatient, useSession } from "@openmrs/esm-framework";
+import { mockPatient, mockSessionDataResponse, mockVisit } from "__mocks__";
+import { radioButtonFormSchema } from "__mocks__/forms";
+import { useFormProviderContext } from "src/provider/form-provider";
+import Radio from "./radio.component.js";
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseSession = jest.mocked(useSession);
+const mockUsePatient = jest.mocked(usePatient);
+jest.mock('../../../api', ()=>{
+    const originalModule = jest.requireActual('../../../api');
+    return {
+        ...originalModule,
+        getPreviousEncounter: jest.fn().mockImplementation(()=>Promise.resolve(null))
+    };
+});
+jest.mock('src/provider/form-provider', ()=>({
+        useFormProviderContext: jest.fn()
+    }));
+const mockUseFormProviderContext = useFormProviderContext;
+const addTestValues = {
+    field: {
+        label: 'Visit type',
+        type: 'obs',
+        required: false,
+        id: 'visitType',
+        questionOptions: {
+            rendering: 'radio',
+            concept: '164181AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            conceptMappings: [
+                {
+                    relationship: 'SAME-AS',
+                    type: 'CIEL',
+                    value: '164181'
+                }
+            ],
+            answers: [
+                {
+                    concept: '164180AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                    label: 'New visit'
+                },
+                {
+                    concept: '160530AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                    label: 'Return visit type'
+                },
+                {
+                    concept: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                    label: 'Other'
+                }
+            ]
+        },
+        validators: [
+            {
+                type: 'form_field'
+            },
+            {
+                type: 'default_value'
+            }
+        ],
+        meta: {
+            submission: null,
+            concept: {
+                uuid: '164181AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                display: 'Visit type',
+                conceptClass: {
+                    uuid: '8d491e50-c2cc-11de-8d13-0010c6dffd0f',
+                    display: 'Question'
+                },
+                answers: [
+                    {
+                        uuid: '164180AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                        display: 'New visit'
+                    },
+                    {
+                        uuid: '160530AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                        display: 'Return visit type'
+                    },
+                    {
+                        uuid: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                        display: 'Other'
+                    }
+                ],
+                conceptMappings: [
+                    {
+                        conceptReferenceTerm: {
+                            conceptSource: {
+                                name: 'CIEL'
+                            },
+                            code: '164181'
+                        }
+                    }
+                ]
+            }
+        },
+        isHidden: false,
+        isRequired: false,
+        isDisabled: false
+    },
+    value: null,
+    errors: null,
+    warnings: undefined,
+    setFieldValue: null
+};
+const renderForm = async (props)=>{
+    await act(()=>render(/*#__PURE__*/ React.createElement(Radio, props)));
+};
+let formProcessor;
+const mockProviderValues = {
+    layoutType: 'small-desktop',
+    sessionMode: 'enter',
+    workspaceLayout: 'minimized',
+    formFieldAdapters: {},
+    patient: mockPatient,
+    methods: undefined,
+    formJson: radioButtonFormSchema,
+    visit: mockVisit,
+    sessionDate: new Date(),
+    location: mockVisit.location,
+    currentProvider: mockVisit.encounters[0]?.encounterProvider,
+    processor: formProcessor
+};
+describe('Radio Component', ()=>{
+    beforeEach(()=>{
+        formProcessor = {
+            getInitialValues: jest.fn()
+        };
+        mockOpenmrsFetch.mockResolvedValue({
+            data: {
+                results: [
+                    {
+                        ...radioButtonFormSchema
+                    }
+                ]
+            }
+        });
+        mockUseSession.mockReturnValue(mockSessionDataResponse.data);
+        mockUsePatient.mockReturnValue({
+            isLoading: false,
+            patient: mockPatient,
+            patientUuid: mockPatient.id,
+            error: null
+        });
+    });
+    it('renders correctly', async ()=>{
+        mockUseFormProviderContext.mockReturnValue({
+            ...mockProviderValues
+        });
+        await renderForm(addTestValues);
+        expect(screen.getByText('Visit type')).toBeInTheDocument();
+        expect(screen.getByLabelText('New visit')).toBeInTheDocument();
+        expect(screen.getByLabelText('Return visit type')).toBeInTheDocument();
+        expect(screen.getByLabelText('Other')).toBeInTheDocument();
+        const radioButtons = screen.getAllByRole('radio');
+        expect(radioButtons).toHaveLength(3);
+    });
+    it('renders correctly on view mode', async ()=>{
+        mockUseFormProviderContext.mockReturnValue({
+            ...mockProviderValues,
+            sessionMode: 'view'
+        });
+        await renderForm(addTestValues);
+        expect(screen.getByRole('button', {
+            name: /visit type/i
+        })).toBeInTheDocument();
+        const visitTypeElements = screen.getAllByText('Visit type');
+        expect(visitTypeElements.length).toBeGreaterThan(0);
+    });
+    it('renders radio buttons as disabled when the field is disabled', async ()=>{
+        mockUseFormProviderContext.mockReturnValue({
+            ...mockProviderValues
+        });
+        await renderForm({
+            ...addTestValues,
+            field: {
+                ...addTestValues.field,
+                isDisabled: true
+            }
+        });
+        expect(screen.getByText('Visit type')).toBeInTheDocument();
+        const radioButtons = screen.getAllByRole('radio');
+        expect(radioButtons).toHaveLength(3);
+        radioButtons.forEach((radio)=>{
+            expect(radio).toBeDisabled();
+        });
+        expect(screen.getByLabelText('New visit')).toBeDisabled();
+        expect(screen.getByLabelText('Return visit type')).toBeDisabled();
+        expect(screen.getByLabelText('Other')).toBeDisabled();
+    });
+});

package/dist/components/inputs/select/dropdown.component.d.ts

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

package/dist/components/inputs/select/dropdown.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/select/dropdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAM1D,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsE3C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/inputs/select/dropdown.component.js

@@ -0,0 +1,82 @@
+import React, { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Dropdown as DropdownInput, Layer } from "@carbon/react";
+import { shouldUseInlineLayout } from "../../../utils/form-helper.js";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { isEmpty } from "../../../validators/form-validator.js";
+import { NullSelectOption } from "../../../constants.js";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import FieldValueView from "../../value/view/field-value-view.component.js";
+import FieldLabel from "../../field-label/field-label.component.js";
+import styles from "./dropdown.scss";
+const Dropdown = ({ field, value, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+    const handleChange = useCallback(({ selectedItem })=>{
+        setFieldValue(selectedItem === NullSelectOption ? null : selectedItem);
+    }, [
+        setFieldValue
+    ]);
+    const itemToString = useCallback((item)=>{
+        let answer = field.questionOptions.answers.find((opt)=>{
+            return opt.value ? opt.value == item : opt.concept == item;
+        });
+        return answer ? t(answer.label) : '';
+    }, [
+        field.questionOptions.answers,
+        t
+    ]);
+    const items = useMemo(()=>{
+        const options = field.questionOptions.answers;
+        if (!options.some((option)=>option.value === NullSelectOption)) {
+            options.unshift({
+                value: NullSelectOption,
+                label: t('chooseAnOption', 'Choose an option')
+            });
+        }
+        return options.filter((option)=>!option.isHidden).map((item)=>item.value || item.concept);
+    }, [
+        field.questionOptions.answers
+    ]);
+    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(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("div", {
+        className: styles.boldedLabel
+    }, /*#__PURE__*/ React.createElement(Layer, null, /*#__PURE__*/ React.createElement(DropdownInput, {
+        "aria-label": t(field.label),
+        disabled: field.isDisabled,
+        id: field.id,
+        invalid: errors.length > 0,
+        invalidText: errors[0]?.message,
+        items: items,
+        itemToString: itemToString,
+        label: "",
+        onChange: handleChange,
+        readOnly: isTrue(field.readonly),
+        selectedItem: isEmpty(value) ? NullSelectOption : value,
+        titleText: /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        }),
+        warn: warnings.length > 0,
+        warnText: warnings[0]?.message
+    })));
+};
+export default Dropdown;

package/dist/components/inputs/select/dropdown.scss

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

package/dist/components/inputs/select/dropdown.test.js

@@ -0,0 +1,157 @@
+import React from "react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+const question = {
+    label: 'Patient past program.',
+    type: 'obs',
+    questionOptions: {
+        rendering: 'select',
+        concept: '1c43b05b-b6d8-4eb5-8f37-0b14f5347568',
+        answers: [
+            {
+                label: 'HIV Care and Treatment',
+                value: '6ddd933a-e65c-4f35-8884-c555b50c55e1'
+            },
+            {
+                label: 'Oncology Screening and Diagnosis Program',
+                value: '12f7be3d-fb5d-47dc-b5e3-56c501be80a6'
+            },
+            {
+                label: 'Fight Malaria Initiative',
+                value: '14cd2628-8a33-4b93-9c10-43989950bba0'
+            }
+        ]
+    },
+    meta: {},
+    id: 'patient-past-program'
+};
+const encounterContext = {
+    patient: {
+        id: '833db896-c1f0-11eb-8529-0242ac130003'
+    },
+    location: {
+        uuid: '41e6e516-c1f0-11eb-8529-0242ac130003'
+    },
+    encounter: {
+        uuid: '873455da-3ec4-453c-b565-7c1fe35426be',
+        obs: []
+    },
+    sessionMode: 'enter',
+    encounterDate: new Date(2020, 11, 29),
+    setEncounterDate: (value)=>{},
+    encounterProvider: '2c95f6f5-788e-4e73-9079-5626911231fa',
+    setEncounterProvider: jest.fn,
+    setEncounterLocation: jest.fn,
+    encounterRole: '8cb3a399-d18b-4b62-aefb-5a0f948a3809',
+    setEncounterRole: jest.fn
+};
+const renderForm = (initialValues)=>{
+    render(/*#__PURE__*/ React.createElement(React.Fragment, null));
+};
+describe.skip('dropdown input field', ()=>{
+    afterEach(()=>{
+        // teardown
+        question.meta = {};
+    });
+    it('should record new obs', async ()=>{
+        await renderForm({});
+        // setup
+        const dropdownWidget = screen.getByRole('combobox', {
+            name: /Patient past program./
+        });
+        // assert initial values
+        await act(async ()=>{
+            expect(question.meta.submission).toBe(undefined);
+        });
+        // choose an option
+        fireEvent.click(dropdownWidget);
+        const fightMalariaOption = screen.getByText('Fight Malaria Initiative');
+        fireEvent.click(fightMalariaOption);
+        // verify
+        await act(async ()=>{
+            expect(question.meta.submission.newValue).toEqual({
+                concept: '1c43b05b-b6d8-4eb5-8f37-0b14f5347568',
+                formFieldNamespace: 'rfe-forms',
+                formFieldPath: 'rfe-forms-patient-past-program',
+                value: '14cd2628-8a33-4b93-9c10-43989950bba0'
+            });
+        });
+    });
+    it('should edit obs', async ()=>{
+        // setup
+        question.meta.initialValue = {
+            omrsObject: {
+                uuid: '305ed1fc-c1fd-11eb-8529-0242ac130003',
+                person: '833db896-c1f0-11eb-8529-0242ac130003',
+                obsDatetime: encounterContext.encounterDate,
+                concept: '1c43b05b-b6d8-4eb5-8f37-0b14f5347568',
+                location: {
+                    uuid: '41e6e516-c1f0-11eb-8529-0242ac130003'
+                },
+                order: null,
+                groupMembers: [],
+                voided: false,
+                value: '6ddd933a-e65c-4f35-8884-c555b50c55e1'
+            }
+        };
+        await renderForm({
+            'patient-past-program': question.meta.initialValue.omrsObject.value
+        });
+        const dropdownWidget = screen.getByRole('combobox', {
+            name: /Patient past program./
+        });
+        // do some edits
+        fireEvent.click(dropdownWidget);
+        const oncologyScreeningOption = screen.getByText('Oncology Screening and Diagnosis Program');
+        fireEvent.click(oncologyScreeningOption);
+        // verify
+        await act(async ()=>{
+            expect(question.meta.submission.newValue).toEqual({
+                uuid: '305ed1fc-c1fd-11eb-8529-0242ac130003',
+                value: '12f7be3d-fb5d-47dc-b5e3-56c501be80a6',
+                formFieldNamespace: 'rfe-forms',
+                formFieldPath: 'rfe-forms-patient-past-program'
+            });
+        });
+    });
+    it('should clear selection when empty option is selected', async ()=>{
+        // setup
+        question.meta.initialValue = {
+            omrsObject: {
+                uuid: '305ed1fc-c1fd-11eb-8529-0242ac130003',
+                person: '833db896-c1f0-11eb-8529-0242ac130003',
+                obsDatetime: encounterContext.encounterDate,
+                concept: '1c43b05b-b6d8-4eb5-8f37-0b14f5347568',
+                location: {
+                    uuid: '41e6e516-c1f0-11eb-8529-0242ac130003'
+                },
+                order: null,
+                groupMembers: [],
+                voided: false,
+                value: '6ddd933a-e65c-4f35-8884-c555b50c55e1'
+            }
+        };
+        await renderForm({
+            'patient-past-program': question.meta.initialValue.omrsObject.value
+        });
+        const dropdownWidget = screen.getByRole('combobox', {
+            name: /Patient past program./
+        });
+        // select an option first
+        fireEvent.click(dropdownWidget);
+        const oncologyScreeningOption = screen.getByText('Oncology Screening and Diagnosis Program');
+        fireEvent.click(oncologyScreeningOption);
+        // clear the selection
+        fireEvent.click(dropdownWidget);
+        const clearOption = screen.getByText('Select an option');
+        fireEvent.click(clearOption);
+        // verify
+        await act(async ()=>{
+            expect(question.meta.submission.newValue).toEqual({
+                uuid: '305ed1fc-c1fd-11eb-8529-0242ac130003',
+                value: null,
+                formFieldNamespace: 'rfe-forms',
+                formFieldPath: 'rfe-forms-patient-past-program'
+            });
+        });
+    });
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/text/text.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAO1D,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqD5C,CAAC;AAEF,eAAe,SAAS,CAAC"}