@mmb-digital/ds-lilly 0.3.13 → 0.3.16-beta.1

package/dist/ds-lilly.js

@@ -84159,6 +84159,9 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_ = __
 var external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_);
 
 // CONCATENATED MODULE: ./src/utils/hooks.ts
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
+// TODO: enable eslint @typescript-eslint/ban-ts-comment
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -96390,6 +96393,8 @@ var DropdownItem = function (_a) {
 };
 
 // CONCATENATED MODULE: ./src/components/Components/CompactButtons/CompactButtons.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var CompactButtons_assign = (undefined && undefined.__assign) || function () {
     CompactButtons_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -96648,6 +96653,8 @@ var ModalContent = function (_a) {
 };
 
 // CONCATENATED MODULE: ./src/components/Components/Modal/ModalDialog.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 
 
 
@@ -96728,6 +96735,8 @@ var Modal = function (_a) {
 };
 
 // CONCATENATED MODULE: ./src/components/Components/Modal/Modal.hook.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 
 
 
@@ -96958,6 +96967,8 @@ var useToast = function () { return ({
 }); };
 
 // CONCATENATED MODULE: ./src/components/Components/Toast/Toast.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var Toast_assign = (undefined && undefined.__assign) || function () {
     Toast_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -97393,6 +97404,8 @@ var FormField = Object(external_root_React_commonjs2_react_commonjs_react_amd_re
 FormField.displayName = 'forwardRef(FormField)';
 
 // CONCATENATED MODULE: ./src/components/Form/FormControl/FormControl.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var FormControl_assign = (undefined && undefined.__assign) || function () {
     FormControl_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -97495,6 +97508,8 @@ var TextInputControl = Object(external_root_React_commonjs2_react_commonjs_react
 TextInputControl.displayName = 'TextInputControl';
 
 // CONCATENATED MODULE: ./src/components/Form/IntegerInput/IntegerInput.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var IntegerInput_assign = (undefined && undefined.__assign) || function () {
     IntegerInput_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -97591,6 +97606,12 @@ var IntegerInput = function (_a) {
 
 
 
+var renderTime = function (timeLeft) {
+    var minutes = Math.floor(timeLeft / 60);
+    var secondsLeft = timeLeft % 60;
+    var seconds = secondsLeft < 10 ? "0" + secondsLeft : secondsLeft;
+    return minutes + ":" + seconds;
+};
 var UserAuth = function (_a) {
     var _b;
     var children = _a.children, mobileKey = _a.mobileKey, resetTimer = _a.resetTimer, state = _a.state, testId = _a.testId, theme = _a.theme, timer = _a.timer, title = _a.title;
@@ -97600,7 +97621,7 @@ var UserAuth = function (_a) {
     var _d = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(''), mobileKeyValue = _d[0], setMobileKeyValue = _d[1];
     var timerAriaRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])(null);
     var isTimerAriaInDOM = useOnScreen(timerAriaRef);
-    var setAriaText = function (time, addSeconds) {
+    var setAriaText = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (time, addSeconds) {
         var minutes = Math.floor(time / 60);
         var seconds = time % 60;
         var minutesText = undefined;
@@ -97619,9 +97640,9 @@ var UserAuth = function (_a) {
             }
             return (timer === null || timer === void 0 ? void 0 : timer.aria.timeLeft) + " " + seconds + " " + (timer === null || timer === void 0 ? void 0 : timer.aria.seconds);
         }
-    };
+    }, [timer]);
     var _e = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(setAriaText(timeLeft, true)), ariaMessage = _e[0], setAriaMessage = _e[1];
-    var isInputVisible = (mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.message) && (mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.placeholder) && timeLeft > 0;
+    var isInputVisible = state === 'waiting' && (timeLeft > 0 || !timer);
     var timeoutRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])();
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
         setTimeLeft((timer === null || timer === void 0 ? void 0 : timer.time) ? timer.time : 0);
@@ -97631,18 +97652,17 @@ var UserAuth = function (_a) {
             setTimeLeft((timer === null || timer === void 0 ? void 0 : timer.time) ? timer.time : 0);
             setMobileKeyValue('');
         }
-    }, [resetTimer]);
+    }, [resetTimer, timer]);
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
         if (mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.error) {
             setMobileKeyValue('');
         }
     }, [mobileKey]);
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         timeoutRef.current = setTimeout(function () {
-            if (ariaMessage === '')
+            if (ariaMessage === '') {
                 setAriaMessage(setAriaText(timeLeft, true));
+            }
             var newTime = timeLeft - 1;
             if (timeLeft > 0) {
                 var minutes = Math.floor(newTime / 60);
@@ -97660,22 +97680,18 @@ var UserAuth = function (_a) {
             }
         }, 1000);
         return function () {
-            clearTimeout(timeoutRef.current);
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
         };
-    }, [timeLeft]);
-    var renderTime = function () {
-        var minutes = Math.floor(timeLeft / 60);
-        var secondsLeft = timeLeft % 60;
-        var seconds = secondsLeft < 10 ? "0" + secondsLeft : secondsLeft;
-        return minutes + ":" + seconds;
-    };
+    }, [timeLeft, timer, setAriaText, ariaMessage]);
     var renderLoader = function () { return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Loader, null, timer && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null,
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { role: "timer" }, renderTime()),
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { role: "timer" }, renderTime(timeLeft)),
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { ref: timerAriaRef, "aria-atomic": "true", "aria-live": "assertive", className: classBinder_cx('u-vHide') }, isTimerAriaInDOM && ariaMessage))))); };
-    var handleOnChange = function (val) {
+    var handleOnChange = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (val) {
         mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.onChange(mobileKeyValue, val);
         setMobileKeyValue(val);
-    };
+    }, [mobileKey, mobileKeyValue]);
     var renderInfoGraphic = function () {
         switch (state) {
             case 'error':
@@ -97702,7 +97718,9 @@ var UserAuth = function (_a) {
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { "aria-live": "polite", className: classBinder_cx('c-alert__content') },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Flex, { direction: "column", justifyContent: isSmall ? 'center' : 'flex-start' },
                     title && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-alert__title'), id: identification + "__title" }, title)),
-                    isInputVisible && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(IntegerInput, { allowLeadingZeros: true, hasAutoFocus: true, "aria-live": "off", error: mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.error, label: mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.message, maxLength: 8, name: (mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.name) || 'mobileKey', placeholder: mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.placeholder, theme: classBinder_cx('c-userAuth__mobileKey'), value: mobileKeyValue, onChange: handleOnChange })),
+                    isInputVisible && (
+                    //TODO: change it with Input2
+                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(IntegerInput, { allowLeadingZeros: true, hasAutoFocus: true, "aria-live": "off", error: mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.error, label: mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.message, maxLength: 8, name: (mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.name) || 'mobileKey', placeholder: mobileKey === null || mobileKey === void 0 ? void 0 : mobileKey.placeholder, theme: classBinder_cx('c-userAuth__mobileKey'), value: mobileKeyValue, onChange: handleOnChange })),
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-alert__text') }, children))))));
 };
 
@@ -97844,6 +97862,8 @@ var Select2Options = function (_a) {
 };
 
 // CONCATENATED MODULE: ./src/components/Form/Autocomplete/Autocomplete.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var Autocomplete_assign = (undefined && undefined.__assign) || function () {
     Autocomplete_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -98212,6 +98232,8 @@ var SelectedOption = function (_a) {
 };
 
 // CONCATENATED MODULE: ./src/components/Form/Autocomplete2/Autocomplete2.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var Autocomplete2_assign = (undefined && undefined.__assign) || function () {
     Autocomplete2_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -98271,27 +98293,28 @@ var Autocomplete2_spreadArray = (undefined && undefined.__spreadArray) || functi
 
 
 var Autocomplete2 = function (_a) {
-    var _b;
-    var _c = _a.asyncDelayMilliseconds, asyncDelayMilliseconds = _c === void 0 ? 200 : _c, _d = _a.canAlwaysCreateNewItem, canAlwaysCreateNewItem = _d === void 0 ? false : _d, disabledTooltip = _a.disabledTooltip, _e = _a.displayDetails, displayDetails = _e === void 0 ? false : _e, dropdownTheme = _a.dropdownTheme, emptyValueLabel = _a.emptyValueLabel, error = _a.error, _f = _a.filterMinimumLength, filterMinimumLength = _f === void 0 ? 2 : _f, _g = _a.hasFullWidthOptions, hasFullWidthOptions = _g === void 0 ? true : _g, help = _a.help, isDisabled = _a.isDisabled, isLazyLoaded = _a.isLazyLoaded, isLoading = _a.isLoading, _h = _a.items, inputItems = _h === void 0 ? [] : _h, label = _a.label, labelTooltip = _a.labelTooltip, loadItems = _a.loadItems, loadMoreItems = _a.loadMoreItems, name = _a.name, messages = _a.messages, _j = _a.newItemMinimumLength, newItemMinimumLength = _j === void 0 ? 2 : _j, onBlur = _a.onBlur, onChange = _a.onChange, onCreateNewItem = _a.onCreateNewItem, onFocus = _a.onFocus, placeholder = _a.placeholder, testId = _a.testId, theme = _a.theme, value = _a.value;
-    var _k = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), isDropdownVisible = _k[0], setIsDropdownVisible = _k[1];
-    var _l = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(null), buttonValue = _l[0], setButtonValue = _l[1];
-    var _m = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), typingMode = _m[0], setTypingMode = _m[1];
-    var _o = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(''), fulltextValue = _o[0], setFulltextValue = _o[1];
-    var _p = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(-1), currentItemPosition = _p[0], setCurrentItemPosition = _p[1];
-    var _q = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])([]), items = _q[0], setItems = _q[1];
-    var _r = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])({
+    var _b = _a.asyncDelayMilliseconds, asyncDelayMilliseconds = _b === void 0 ? 200 : _b, _c = _a.canAlwaysCreateNewItem, canAlwaysCreateNewItem = _c === void 0 ? false : _c, disabledTooltip = _a.disabledTooltip, _d = _a.displayDetails, displayDetails = _d === void 0 ? false : _d, dropdownTheme = _a.dropdownTheme, emptyValueLabel = _a.emptyValueLabel, error = _a.error, _e = _a.filterMinimumLength, filterMinimumLength = _e === void 0 ? 2 : _e, _f = _a.hasFullWidthOptions, hasFullWidthOptions = _f === void 0 ? true : _f, help = _a.help, isDisabled = _a.isDisabled, isLazyLoaded = _a.isLazyLoaded, isLoading = _a.isLoading, _g = _a.items, inputItems = _g === void 0 ? [] : _g, label = _a.label, labelTooltip = _a.labelTooltip, loadItems = _a.loadItems, loadMoreItems = _a.loadMoreItems, name = _a.name, messages = _a.messages, _h = _a.newItemMinimumLength, newItemMinimumLength = _h === void 0 ? 2 : _h, onBlur = _a.onBlur, onChange = _a.onChange, onCreateNewItem = _a.onCreateNewItem, onFocus = _a.onFocus, placeholder = _a.placeholder, testId = _a.testId, theme = _a.theme, value = _a.value;
+    var _j = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), isDropdownVisible = _j[0], setIsDropdownVisible = _j[1];
+    var _k = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(null), buttonValue = _k[0], setButtonValue = _k[1];
+    var _l = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), typingMode = _l[0], setTypingMode = _l[1];
+    var _m = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(''), fulltextValue = _m[0], setFulltextValue = _m[1];
+    var _o = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(-1), currentItemPosition = _o[0], setCurrentItemPosition = _o[1];
+    var _p = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])([]), items = _p[0], setItems = _p[1];
+    var _q = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])({
         loading: false,
         found: -1
-    }), searchState = _r[0], setSearchState = _r[1];
-    var _s = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])({
+    }), searchState = _q[0], setSearchState = _q[1];
+    var _r = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])({
         loading: false,
         found: -1
-    }), pagingState = _s[0], setPagingState = _s[1];
+    }), pagingState = _r[0], setPagingState = _r[1];
+    var getSearchString = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (str) { return stripDiacritics(str).toLowerCase(); }, []);
+    var emptyValueLabelPattern = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () { return getSearchString(emptyValueLabel || ''); }, [emptyValueLabel]);
+    var isCategorised = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (itemList) { var _a; return !!(itemList && ((_a = itemList[0]) === null || _a === void 0 ? void 0 : _a.items)); }, []);
     var loadAsyncItems = function (query) { return Autocomplete2_awaiter(void 0, void 0, void 0, function () {
-        var newItems, isCategorised, found;
-        var _a;
-        return Autocomplete2_generator(this, function (_b) {
-            switch (_b.label) {
+        var newItems, categorised, found;
+        return Autocomplete2_generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     if (!loadItems)
                         return [2 /*return*/];
@@ -98299,9 +98322,9 @@ var Autocomplete2 = function (_a) {
                     setItems([]);
                     return [4 /*yield*/, loadItems(query)];
                 case 1:
-                    newItems = _b.sent();
-                    isCategorised = !!(newItems && ((_a = newItems[0]) === null || _a === void 0 ? void 0 : _a.items));
-                    found = isCategorised
+                    newItems = _a.sent();
+                    categorised = isCategorised(newItems);
+                    found = categorised
                         ? newItems.reduce(function (acc, curr) { return acc + curr.items.length; }, 0)
                         : newItems.length;
                     setSearchState({ loading: false, found: found });
@@ -98310,11 +98333,11 @@ var Autocomplete2 = function (_a) {
             }
         });
     }); };
+    var fulltextMatchesEmptyValue = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () { return emptyValueLabelPattern.includes(fulltextValue); }, [fulltextValue]);
     var debouncedCallApi = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(function () { return (loadItems ? lodash_debounce_default()(loadAsyncItems, asyncDelayMilliseconds) : noop); })[0];
-    var isCategorised = !!(items && ((_b = items[0]) === null || _b === void 0 ? void 0 : _b.items));
     var itemsIndex = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () {
         var map;
-        if (isCategorised) {
+        if (isCategorised(items)) {
             map = items.reduce(function (acc, category, categoryIndex) {
                 return acc.concat(category.items
                     .map(function (item, index) { return (!item.isDisabled ? { category: categoryIndex, item: index } : undefined); })
@@ -98326,11 +98349,11 @@ var Autocomplete2 = function (_a) {
                 .map(function (item, index) { return (!item.isDisabled ? { category: -1, item: index } : undefined); })
                 .filter(Boolean);
         }
-        if (emptyValueLabel && map.length > 0 && (fulltextValue === (buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.label) || !value)) {
+        if (emptyValueLabel && (!fulltextValue || fulltextValue === (buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.label) || fulltextMatchesEmptyValue)) {
             return Autocomplete2_spreadArray([{ item: -1, category: -1 }], map);
         }
         return map;
-    }, [items, isCategorised, fulltextValue, value, buttonValue]);
+    }, [items, fulltextValue, value, buttonValue]);
     var showCreatable = !!onCreateNewItem &&
         (itemsIndex.length === 0 || canAlwaysCreateNewItem) &&
         typingMode &&
@@ -98341,7 +98364,7 @@ var Autocomplete2 = function (_a) {
         if (val === '' || val === undefined) {
             return { item: -1, category: -1 };
         }
-        if (isCategorised) {
+        if (isCategorised(sourceItems)) {
             var index = sourceItems
                 .map(function (category, categoryIndex) {
                 var item = category.items.findIndex(function (item) { return item.value === val && !item.isDisabled; });
@@ -98363,16 +98386,14 @@ var Autocomplete2 = function (_a) {
         });
     };
     var getFilteredItems = function (filter) {
-        var newFilter = stripDiacritics(typeof filter === 'string' ? filter : filter.toString())
-            .toLowerCase()
-            .trim();
-        if (isCategorised) {
+        var newFilter = getSearchString(typeof filter === 'string' ? filter : filter.toString()).trim();
+        if (isCategorised(inputItems)) {
             var filteredCategories_1 = [];
             var unfilteredItems = inputItems;
             unfilteredItems.map(function (category) {
                 var filteredCategory = category.items.filter(function (_a) {
                     var amount = _a.amount, label = _a.label, perex = _a.perex;
-                    var text = stripDiacritics(label + " " + (perex || '') + " " + (amount || '')).toLowerCase();
+                    var text = getSearchString(label + " " + (perex || '') + " " + (amount || ''));
                     return text.includes(newFilter);
                 });
                 if (filteredCategory.length > 0) {
@@ -98384,7 +98405,7 @@ var Autocomplete2 = function (_a) {
         else {
             var filteredOptions = inputItems.filter(function (_a) {
                 var amount = _a.amount, label = _a.label, perex = _a.perex;
-                var text = stripDiacritics(label + " " + (perex || '') + " " + (amount || '')).toLowerCase();
+                var text = getSearchString(label + " " + (perex || '') + " " + (amount || ''));
                 return text.includes(newFilter);
             });
             return filteredOptions;
@@ -98395,7 +98416,7 @@ var Autocomplete2 = function (_a) {
             setItems(inputItems);
             var _a = getItemIndexByValue(value, inputItems), category = _a.category, item = _a.item;
             if (item > -1) {
-                var selectedItem = isCategorised
+                var selectedItem = isCategorised(inputItems)
                     ? inputItems[category].items[item]
                     : inputItems[item];
                 if (selectedItem) {
@@ -98410,7 +98431,7 @@ var Autocomplete2 = function (_a) {
         setCurrentItemPosition(itemIndexPosition);
         var category = itemIndex.category, item = itemIndex.item;
         if (item > -1) {
-            var selectedItem = isCategorised
+            var selectedItem = isCategorised(items)
                 ? items[category].items[item]
                 : items[item];
             if (selectedItem) {
@@ -98434,7 +98455,7 @@ var Autocomplete2 = function (_a) {
         var _a, _b, _c, _d, _e, _f;
         if (category === void 0) { category = -1; }
         if (center === void 0) { center = false; }
-        var itemElementId = isCategorised ? name + "_option-" + category + "-" + item : name + "_option-" + item;
+        var itemElementId = isCategorised(items) ? name + "_option-" + category + "-" + item : name + "_option-" + item;
         if (center) {
             var dropdownHalfHeight = (((_a = document.getElementById('autocomplete_dropdown')) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0) / 2;
             var itemHalfHeight = (((_b = document.getElementById(itemElementId)) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0) / 2;
@@ -98550,7 +98571,7 @@ var Autocomplete2 = function (_a) {
             propagateChange();
             return undefined;
         }
-        var selectedItem = isCategorised
+        var selectedItem = isCategorised(items)
             ? items[category].items[item]
             : items[item];
         if (selectedItem) {
@@ -98675,7 +98696,7 @@ var Autocomplete2 = function (_a) {
                 setTimeout(function () {
                     var _a;
                     scrollToItem(item_1, category_1);
-                    var listElementId = isCategorised ? name + "_list-" + category_1 : name + "_list";
+                    var listElementId = isCategorised(items) ? name + "_list-" + category_1 : name + "_list";
                     (_a = document.getElementById(listElementId)) === null || _a === void 0 ? void 0 : _a.focus();
                 });
             }
@@ -98690,16 +98711,15 @@ var Autocomplete2 = function (_a) {
         if (key === KEYS.Enter) {
             event.preventDefault();
             if (isDropdownVisible) {
-                var minItemsToAutoselect = emptyValueLabel && !value ? 2 : 1;
                 if (showCreatable && itemsIndex.length === 0) {
                     handleCreateNewOption();
                 }
-                else if (fulltextValue && fulltextValue !== (buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.label) && itemsIndex.length >= minItemsToAutoselect) {
-                    var _a = itemsIndex[minItemsToAutoselect - 1], category = _a.category, item = _a.item;
-                    var selectedItem = isCategorised
+                else if (fulltextValue && fulltextValue !== (buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.label) && itemsIndex.length > 0) {
+                    var _a = itemsIndex[0], category = _a.category, item = _a.item;
+                    var selectedItem = isCategorised(items)
                         ? items[category].items[item]
                         : items[item];
-                    setFulltextValue(selectedItem.label);
+                    setFulltextValue((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) || '');
                     propagateChange(selectedItem);
                     setTypingMode(false);
                 }
@@ -98725,7 +98745,7 @@ var Autocomplete2 = function (_a) {
                 setTimeout(function () {
                     var _a;
                     scrollToItem(item_2, category_2);
-                    var listElementId = isCategorised ? name + "_list-" + category_2 : name + "_list";
+                    var listElementId = isCategorised(items) ? name + "_list-" + category_2 : name + "_list";
                     (_a = document.getElementById(listElementId)) === null || _a === void 0 ? void 0 : _a.focus();
                 });
             }
@@ -98756,7 +98776,7 @@ var Autocomplete2 = function (_a) {
                 }
                 else if (fulltextValue && fulltextValue !== (buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.label) && itemsIndex.length > 0) {
                     var _c = itemsIndex[0], category = _c.category, item = _c.item;
-                    var selectedItem = isCategorised
+                    var selectedItem = isCategorised(items)
                         ? items[category].items[item]
                         : items[item];
                     setButtonValue(selectedItem);
@@ -98825,7 +98845,7 @@ var Autocomplete2 = function (_a) {
                 messages.loadingItems));
         }
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null,
-            isCategorised ? external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Select2CategorisedOptions, null) : external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Select2Options, null),
+            isCategorised(items) ? external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Select2CategorisedOptions, null) : external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Select2Options, null),
             pagingState.loading && messages.loadingItems && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-autocomplete__message", id: "autocomplete_loading-more-items" },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "loading", size: "large" }),
                 messages.loadingMoreItems)),
@@ -98839,10 +98859,12 @@ var Autocomplete2 = function (_a) {
                         messages.createItem, " \"" + fulltextValue + "\""))))));
     };
     var focusedItem = itemsIndex[currentItemPosition];
+    var focusedCategoryIndex = focusedItem ? focusedItem.category : -1;
+    var focusedItemIndex = focusedItem ? focusedItem.item : -1;
     var select2context = {
-        emptyValueLabel: itemsIndex.length > 0 && (fulltextValue === (buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.label) || !value) ? emptyValueLabel : undefined,
-        focusedCategoryIndex: focusedItem ? focusedItem.category : -1,
-        focusedItemIndex: focusedItem ? focusedItem.item : -1,
+        emptyValueLabel: !fulltextValue || fulltextValue === (buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.label) || fulltextMatchesEmptyValue ? emptyValueLabel : undefined,
+        focusedCategoryIndex: focusedCategoryIndex,
+        focusedItemIndex: focusedItemIndex,
         items: items,
         name: name,
         optionClick: handleOptionClick,
@@ -98864,9 +98886,13 @@ var Autocomplete2 = function (_a) {
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(FormGroup2, Autocomplete2_assign({ theme: classBinder_cx({ 'f-group2--open': isDropdownVisible }, theme) }, fromGroupProps),
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(contexts_Select2Context.Provider, { value: select2context },
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Dropdown, { dropdownId: "autocomplete_dropdown", forceVisibility: isDropdownVisible, hasSameWidthAsTrigger: hasFullWidthOptions, placement: "bottom-start", theme: dropdownTheme, trigger: null, triggerComponent: external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-controlWrap", "data-testid": testId, role: "combobox" }, typingMode ? (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-control2 f-control2--select', { 'f-control2--large': displayDetails }) },
-                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("input", { autoComplete: "off", className: classBinder_cx('f-autocomplete__input'), disabled: isDisabled, id: name + "_input", name: name, placeholder: placeholder, type: "text", value: fulltextValue, onChange: handleFulltextChange, onKeyDown: handleFulltextKeyPress }),
+                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("input", { "aria-activedescendant": isDropdownVisible && (itemsIndex.length > 0 || showCreatable)
+                            ? isCategorised(items)
+                                ? name + "_option-" + focusedCategoryIndex + "-" + focusedItemIndex
+                                : name + "_option-" + focusedItemIndex
+                            : undefined, "aria-autocomplete": "list", "aria-controls": name + "_list", "aria-labelledby": name + "_label", autoComplete: "off", className: classBinder_cx('f-autocomplete__input'), disabled: isDisabled, id: name + "_input", name: name, placeholder: placeholder, type: "text", value: fulltextValue, onChange: handleFulltextChange, onKeyDown: handleFulltextKeyPress }),
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", { "aria-invalid": !!error, className: classBinder_cx('f-autocomplete__button'), disabled: isDisabled, id: name + "_toggle_button", name: name, tabIndex: -1, type: "button", onClick: toggleDropdown },
-                        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "arrowDown", size: "small", theme: "f-control2__selectIcon" })))) : (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", { "aria-expanded": isDropdownVisible, "aria-haspopup": "listbox", "aria-invalid": !!error, "aria-labelledby": name + "_label " + name, className: classBinder_cx('f-control2 f-control2--select', {
+                        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "arrowDown", size: "small", theme: "f-control2__selectIcon" })))) : (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", { "aria-expanded": isDropdownVisible, "aria-haspopup": "listbox", "aria-invalid": !!error, "aria-labelledby": name + "_label", className: classBinder_cx('f-control2 f-control2--select', {
                         'f-control2--large': displayDetails,
                         'f-autocomplete__trigger--loading': isLoading
                     }), disabled: isDisabled, id: name + "_button", name: name, type: "button", onClick: handleComboBoxClick, onFocus: handleFocus },
@@ -103795,6 +103821,8 @@ var SelectMenu = function (_a) {
 };
 
 // CONCATENATED MODULE: ./src/components/Form/SelectControlAutocomplete/SelectControlAutocomplete.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var SelectControlAutocomplete_assign = (undefined && undefined.__assign) || function () {
     SelectControlAutocomplete_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -104349,6 +104377,8 @@ var react_flatpickr_build = __webpack_require__(61);
 var build_default = /*#__PURE__*/__webpack_require__.n(react_flatpickr_build);
 
 // CONCATENATED MODULE: ./src/components/Form/DatePicker/DatePicker.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var DatePicker_assign = (undefined && undefined.__assign) || function () {
     DatePicker_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -104466,6 +104496,8 @@ var ShowPasswordIcon = function (_a) {
 };
 
 // CONCATENATED MODULE: ./src/components/Form/Input2/Input2.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var Input2_assign = (undefined && undefined.__assign) || function () {
     Input2_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -104719,6 +104751,8 @@ var DatePicker2 = function (_a) {
 
 
 // CONCATENATED MODULE: ./src/components/Form/DecimalInput/DecimalInput.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var DecimalInput_assign = (undefined && undefined.__assign) || function () {
     DecimalInput_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -106582,6 +106616,8 @@ function monthSelectPlugin(pluginConfig) {
   };
 }
 // CONCATENATED MODULE: ./src/components/Form/MonthInput/MonthInput.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var MonthInput_assign = (undefined && undefined.__assign) || function () {
     MonthInput_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -107038,6 +107074,8 @@ var RadioGroup = function (_a) {
 
 
 // CONCATENATED MODULE: ./src/components/Form/Select2/Select2.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 var Select2_assign = (undefined && undefined.__assign) || function () {
     Select2_assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -111067,6 +111105,8 @@ var AreaChart_assign = (undefined && undefined.__assign) || function () {
     };
     return AreaChart_assign.apply(this, arguments);
 };
+// TODO: enable react-hooks/rules-of-hooks
+/* eslint-disable react-hooks/rules-of-hooks */
 
 
 
@@ -112546,6 +112586,8 @@ var AppMain = function (_a) {
 
 
 // CONCATENATED MODULE: ./src/components/Layout/Box/Box.tsx
+// TODO: enable eslint react-hooks/exhaustive-deps
+/* eslint-disable react-hooks/exhaustive-deps */
 
 
 var Box = function (_a) {