@olaboot/esm-form-engine-lib 4.1.0

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

@@ -0,0 +1,62 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Layer, TextInput } from "@carbon/react";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { shouldUseInlineLayout } from "../../../utils/form-helper.js";
+import FieldValueView from "../../value/view/field-value-view.component.js";
+import FieldLabel from "../../field-label/field-label.component.js";
+import styles from "./text.scss";
+const TextField = ({ field, value, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+    const [lastBlurredValue, setLastBlurredValue] = useState(null);
+    const onBlur = (event)=>{
+        event.preventDefault();
+        if (lastBlurredValue !== value) {
+            setLastBlurredValue(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' ? /*#__PURE__*/ React.createElement(FieldValueView, {
+        label: t(field.label),
+        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(TextInput, {
+        disabled: field.isDisabled,
+        id: field.id,
+        invalid: errors.length > 0,
+        invalidText: errors[0]?.message,
+        labelText: /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        }),
+        maxCount: field.questionOptions.max ? Number(field.questionOptions.max) : Number(field.questionOptions.maxLength),
+        name: field.id,
+        onBlur: onBlur,
+        onChange: (event)=>{
+            setFieldValue(event.target.value);
+        },
+        readOnly: isTrue(field.readonly),
+        value: value ?? '',
+        warn: warnings.length > 0,
+        warnText: warnings.length > 0 ? warnings[0].message : undefined
+    })));
+};
+export default TextField;

package/dist/components/inputs/text/text.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;
+}
+
+:global(.cds--text-input__readonly-icon) {
+  display: none;
+}

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

@@ -0,0 +1,184 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render, screen, act } from "@testing-library/react";
+import { openmrsFetch, usePatient, useSession } from "@openmrs/esm-framework";
+import { mockSessionDataResponse } from "__mocks__/session.mock";
+import { mockPatient } from "__mocks__/patient.mock";
+import { mockVisit } from "__mocks__/visit.mock";
+import { useFormProviderContext } from "src/provider/form-provider";
+import { sampleFieldsForm } from "__mocks__/forms";
+import TextField from "./text.component.js";
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseSession = jest.mocked(useSession);
+const mockUsePatient = jest.mocked(usePatient);
+const mockSetFieldValue = jest.fn();
+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 textValues = {
+    field: {
+        label: 'Indicate your notes',
+        type: 'obs',
+        required: false,
+        id: 'indicateNotes',
+        questionOptions: {
+            rendering: 'text',
+            concept: '160632AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            conceptMappings: [
+                {
+                    relationship: 'SAME-AS',
+                    type: 'CIEL',
+                    value: '160632'
+                },
+                {
+                    relationship: 'SAME-AS',
+                    type: 'AMPATH',
+                    value: '1915'
+                },
+                {
+                    relationship: 'BROADER-THAN',
+                    type: 'LOINC',
+                    value: '48767-8'
+                }
+            ],
+            answers: []
+        },
+        meta: {
+            submission: {
+                newValue: null
+            },
+            concept: {
+                uuid: '160632AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                display: 'Free text general',
+                conceptClass: {
+                    uuid: '8d491e50-c2cc-11de-8d13-0010c6dffd0f',
+                    display: 'Question'
+                },
+                answers: [],
+                conceptMappings: [
+                    {
+                        conceptReferenceTerm: {
+                            conceptSource: {
+                                name: 'CIEL'
+                            },
+                            code: '160632'
+                        }
+                    },
+                    {
+                        conceptReferenceTerm: {
+                            conceptSource: {
+                                name: 'AMPATH'
+                            },
+                            code: '1915'
+                        }
+                    },
+                    {
+                        conceptReferenceTerm: {
+                            conceptSource: {
+                                name: 'LOINC'
+                            },
+                            code: '48767-8'
+                        }
+                    }
+                ]
+            }
+        },
+        validators: [
+            {
+                type: 'form_field'
+            },
+            {
+                type: 'default_value'
+            }
+        ],
+        isHidden: false,
+        isRequired: false,
+        isDisabled: false
+    },
+    value: null,
+    errors: [],
+    warnings: [],
+    setFieldValue: mockSetFieldValue
+};
+const renderForm = async (props)=>{
+    await act(()=>render(/*#__PURE__*/ React.createElement(TextField, props)));
+};
+let formProcessor;
+const mockProviderValues = {
+    layoutType: 'small-desktop',
+    sessionMode: 'enter',
+    workspaceLayout: 'minimized',
+    formFieldAdapters: {},
+    patient: mockPatient,
+    methods: undefined,
+    formJson: sampleFieldsForm,
+    visit: mockVisit,
+    sessionDate: new Date(),
+    location: mockVisit.location,
+    currentProvider: mockVisit.encounters[0]?.encounterProvider,
+    processor: formProcessor
+};
+describe('Text field input', ()=>{
+    const user = userEvent.setup();
+    beforeEach(()=>{
+        formProcessor = {
+            getInitialValues: jest.fn()
+        };
+        mockOpenmrsFetch.mockResolvedValue({
+            data: {
+                results: [
+                    {
+                        ...sampleFieldsForm
+                    }
+                ]
+            }
+        });
+        mockUseSession.mockReturnValue(mockSessionDataResponse.data);
+        mockUsePatient.mockReturnValue({
+            isLoading: false,
+            patient: mockPatient,
+            patientUuid: mockPatient.id,
+            error: null
+        });
+        mockUseFormProviderContext.mockReturnValue({
+            ...mockProviderValues,
+            setFieldValue: mockSetFieldValue
+        });
+    });
+    it('should record new obs', async ()=>{
+        await renderForm(textValues);
+        const inputField = screen.getByLabelText('Indicate your notes');
+        await user.click(inputField);
+        await user.paste('Updated patient notes');
+        await act(async ()=>{
+            expect(mockSetFieldValue).toHaveBeenCalledWith('Updated patient notes');
+        });
+    });
+    it('should have value passed in as prop', async ()=>{
+        await renderForm({
+            ...textValues,
+            value: 'Initial patient notes'
+        });
+        const inputField = screen.getByLabelText('Indicate your notes');
+        expect(inputField).toHaveValue('Initial patient notes');
+    });
+    it('should disable field', async ()=>{
+        await renderForm({
+            ...textValues,
+            field: {
+                ...textValues.field,
+                isDisabled: true
+            }
+        });
+        const inputField = screen.getByLabelText('Indicate your notes');
+        expect(inputField).toBeDisabled();
+    });
+});

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

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

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

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

package/dist/components/inputs/text-area/text-area.component.js

@@ -0,0 +1,60 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Layer, TextArea as TextAreaInput } from "@carbon/react";
+import { shouldUseInlineLayout } from "../../../utils/form-helper.js";
+import { isTrue } from "../../../utils/boolean-utils.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 "./text-area.scss";
+const TextArea = ({ field, value, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const [lastBlurredValue, setLastBlurredValue] = useState(value);
+    const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+    const onBlur = (event)=>{
+        event.preventDefault();
+        if (lastBlurredValue !== value) {
+            setLastBlurredValue(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' ? /*#__PURE__*/ React.createElement(FieldValueView, {
+        label: t(field.label),
+        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(TextAreaInput, {
+        id: field.id,
+        labelText: /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        }),
+        name: field.id,
+        onChange: setFieldValue,
+        onBlur: onBlur,
+        value: value || '',
+        rows: field.questionOptions.rows || 4,
+        disabled: field.isDisabled,
+        readOnly: isTrue(field.readonly),
+        invalid: errors.length > 0,
+        invalidText: errors[0]?.message,
+        warn: warnings.length > 0,
+        warnText: warnings[0]?.message
+    })));
+};
+export default TextArea;

package/dist/components/inputs/text-area/text-area.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/toggle/toggle.component.d.ts

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

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

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

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

@@ -0,0 +1,57 @@
+import React, { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Toggle as ToggleInput } from "@carbon/react";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { shouldUseInlineLayout } from "../../../utils/form-helper.js";
+import { isEmpty } from "../../../validators/form-validator.js";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import FieldValueView from "../../value/view/field-value-view.component.js";
+import styles from "./toggle.scss";
+const Toggle = ({ field, value, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const context = useFormProviderContext();
+    const handleChange = (value)=>{
+        setFieldValue(value);
+    };
+    useEffect(()=>{
+        // The toggle input doesn't support blank values
+        // by default, the value should be false
+        if (!field.meta?.initialValue?.omrsObject && context.sessionMode == 'enter') {
+            context.formFieldAdapters[field.type].transformFieldValue(field, value ?? false, context);
+        }
+    }, []);
+    const isInline = useMemo(()=>{
+        if ([
+            'view',
+            'embedded-view'
+        ].includes(context.sessionMode) || isTrue(field.readonly)) {
+            return shouldUseInlineLayout(field.inlineRendering, context.layoutType, context.workspaceLayout, context.sessionMode);
+        }
+        return false;
+    }, [
+        context.sessionMode,
+        field.readonly,
+        field.inlineRendering,
+        context.layoutType,
+        context.workspaceLayout
+    ]);
+    return context.sessionMode == 'view' || context.sessionMode == 'embedded-view' ? /*#__PURE__*/ React.createElement(FieldValueView, {
+        label: t(field.label),
+        value: !isEmpty(value) ? context.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(ToggleInput, {
+        labelText: t(field.label),
+        className: styles.boldedLabel,
+        id: field.id,
+        labelA: field.questionOptions.toggleOptions.labelFalse,
+        labelB: field.questionOptions.toggleOptions.labelTrue,
+        onToggle: handleChange,
+        toggled: !!value,
+        disabled: field.isDisabled,
+        readOnly: isTrue(field.readonly)
+    }));
+};
+export default Toggle;

package/dist/components/inputs/toggle/toggle.scss

@@ -0,0 +1,12 @@
+@use '@carbon/colors';
+
+.boldedLabel label {
+  font-weight: 600;
+  color: colors.$black-100;
+
+  :global(.cds--toggle__label-text) {
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: colors.$black-100;
+  }
+}

package/dist/components/inputs/ui-select-extended/ui-select-extended.component.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui-select-extended.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/ui-select-extended/ui-select-extended.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAYjF,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAO3E,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0LnD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/inputs/ui-select-extended/ui-select-extended.component.js

@@ -0,0 +1,203 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { debounce } from "lodash-es";
+import { ComboBox, DropdownSkeleton, Layer, InlineLoading } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { useWatch } from "react-hook-form";
+import { getControlTemplate } from "../../../registry/inbuilt-components/control-templates.js";
+import { getRegisteredDataSource } from "../../../registry/registry.js";
+import { isEmpty } from "../../../validators/form-validator.js";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { isViewMode } from "../../../utils/common-utils.js";
+import { shouldUseInlineLayout } from "../../../utils/form-helper.js";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import useDataSourceDependentValue from "../../../hooks/useDataSourceDependentValue.js";
+import FieldLabel from "../../field-label/field-label.component.js";
+import FieldValueView from "../../value/view/field-value-view.component.js";
+import styles from "./ui-select-extended.scss";
+const UiSelectExtended = ({ field, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const [items, setItems] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSearching, setIsSearching] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const isProcessingSelection = useRef(false);
+    const [dataSource, setDataSource] = useState(null);
+    const [config, setConfig] = useState({});
+    const dataSourceDependentValue = useDataSourceDependentValue(field);
+    const isSearchable = isTrue(field.questionOptions.isSearchable);
+    const { layoutType, sessionMode, workspaceLayout, methods: { control, getFieldState } } = useFormProviderContext();
+    const value = useWatch({
+        control,
+        name: field.id,
+        exact: true
+    });
+    const { isDirty } = getFieldState(field.id);
+    const isInline = useMemo(()=>{
+        if (isViewMode(sessionMode) || isTrue(field.readonly)) {
+            return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+        }
+        return false;
+    }, [
+        sessionMode,
+        field.readonly,
+        field.inlineRendering,
+        layoutType,
+        workspaceLayout
+    ]);
+    const selectedItem = useMemo(()=>items.find((item)=>item.uuid == value) || null, [
+        items,
+        value
+    ]);
+    const debouncedSearch = debounce((searchTerm, dataSource)=>{
+        setIsSearching(true);
+        dataSource.fetchData(searchTerm, config).then((dataItems)=>{
+            if (dataItems.length) {
+                const currentSelectedItem = items.find((item)=>item.uuid == value);
+                const newItems = dataItems.map(dataSource.toUuidAndDisplay);
+                if (currentSelectedItem && !newItems.some((item)=>item.uuid == currentSelectedItem.uuid)) {
+                    newItems.unshift(currentSelectedItem);
+                }
+                setItems(newItems);
+            }
+            setIsSearching(false);
+        }).catch((err)=>{
+            console.error(err);
+            setIsSearching(false);
+        });
+    }, 300);
+    const searchTermHasMatchingItem = useCallback((searchTerm)=>{
+        return items.some((item)=>item.display?.toLowerCase().includes(searchTerm.toLowerCase()));
+    }, [
+        items
+    ]);
+    useEffect(()=>{
+        const dataSource = field.questionOptions?.datasource?.name;
+        setConfig(dataSource ? field.questionOptions.datasource?.config : getControlTemplate(field.questionOptions.rendering)?.datasource?.config);
+        getRegisteredDataSource(dataSource ? dataSource : field.questionOptions.rendering).then((ds)=>setDataSource(ds));
+    }, [
+        field.questionOptions?.datasource
+    ]);
+    useEffect(()=>{
+        let ignore = false;
+        // If not searchable, preload the items
+        if (dataSource && !isTrue(field.questionOptions.isSearchable)) {
+            setItems([]);
+            setIsLoading(true);
+            dataSource.fetchData(null, {
+                ...config,
+                referencedValue: dataSourceDependentValue
+            }).then((dataItems)=>{
+                if (!ignore) {
+                    setItems(dataItems.map(dataSource.toUuidAndDisplay));
+                    setIsLoading(false);
+                }
+            }).catch((err)=>{
+                if (!ignore) {
+                    console.error(err);
+                    setIsLoading(false);
+                    setItems([]);
+                }
+            });
+        }
+        return ()=>{
+            ignore = true;
+        };
+    }, [
+        dataSource,
+        config,
+        dataSourceDependentValue
+    ]);
+    useEffect(()=>{
+        if (dataSource && isSearchable && !isEmpty(searchTerm) && !searchTermHasMatchingItem(searchTerm)) {
+            debouncedSearch(searchTerm, dataSource);
+        }
+    }, [
+        dataSource,
+        searchTerm,
+        config
+    ]);
+    useEffect(()=>{
+        let ignore = false;
+        if (value && !isDirty && dataSource && isSearchable && sessionMode !== 'enter' && !items.length) {
+            // While in edit mode, search-based instances should fetch the initial item (previously selected value) to resolve its display property
+            setIsLoading(true);
+            try {
+                dataSource.fetchSingleItem(value).then((item)=>{
+                    if (!ignore) {
+                        setItems([
+                            dataSource.toUuidAndDisplay(item)
+                        ]);
+                        setIsLoading(false);
+                    }
+                });
+            } catch (error) {
+                if (!ignore) {
+                    console.error(error);
+                    setIsLoading(false);
+                }
+            }
+        }
+        return ()=>{
+            ignore = true;
+        };
+    }, [
+        value,
+        isDirty,
+        sessionMode,
+        dataSource,
+        isSearchable,
+        items
+    ]);
+    if (isLoading) {
+        return /*#__PURE__*/ React.createElement(DropdownSkeleton, null);
+    }
+    return isViewMode(sessionMode) || isTrue(field.readonly) ? /*#__PURE__*/ React.createElement(FieldValueView, {
+        label: t(field.label),
+        value: value ? items.find((item)=>item.uuid == value)?.display : 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(ComboBox, {
+        id: field.id,
+        titleText: /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        }),
+        items: items,
+        itemToString: (item)=>item?.display,
+        selectedItem: selectedItem,
+        placeholder: isSearchable ? t('search', 'Search') + '...' : null,
+        onChange: ({ selectedItem })=>{
+            isProcessingSelection.current = true;
+            setFieldValue(selectedItem?.uuid);
+        },
+        disabled: field.isDisabled,
+        readOnly: isTrue(field.readonly),
+        invalid: errors.length > 0,
+        invalidText: errors.length && errors[0].message,
+        onInputChange: (value)=>{
+            if (isProcessingSelection.current) {
+                // Notes:
+                // When the user selects a value, both the onChange and onInputChange functions are invoked sequentially.
+                // Issue: onInputChange modifies the search term, unnecessarily triggering a search.
+                isProcessingSelection.current = false;
+                return;
+            }
+            if (field.questionOptions.isSearchable) {
+                setSearchTerm(value);
+            }
+        },
+        onBlur: (event)=>{
+            // Notes:
+            // There is an issue with the onBlur event where the value is not persistently set to null when the user clears the input field.
+            // This is a workaround to ensure that the value is set to null when the user clears the input field.
+            if (!event.target.value) {
+                setFieldValue(null);
+            }
+        }
+    }), isSearching && /*#__PURE__*/ React.createElement(InlineLoading, {
+        className: styles.loader,
+        description: t('searching', 'Searching') + '...'
+    })));
+};
+export default UiSelectExtended;

package/dist/components/inputs/ui-select-extended/ui-select-extended.scss

@@ -0,0 +1,19 @@
+@use '@carbon/colors';
+
+.boldedLabel {
+  flex: 95%;
+
+  label {
+    font-weight: 600;
+    color: colors.$black-100;
+  }
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.loader {
+  padding: 0.25rem 0.5rem;
+}