@mmb-digital/ds-lilly 0.3.2 → 0.3.3

package/dist/ds-lilly.js

@@ -98277,21 +98277,21 @@ var Autocomplete2_spreadArray = (undefined && undefined.__spreadArray) || functi
 
 var Autocomplete2 = function (_a) {
     var _b;
-    var _c = _a.asyncDelayMilliseconds, asyncDelayMilliseconds = _c === void 0 ? 200 : _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, _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"])({
+    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, _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"])({
         loading: false,
         found: -1
-    }), searchState = _q[0], setSearchState = _q[1];
-    var _r = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])({
+    }), searchState = _r[0], setSearchState = _r[1];
+    var _s = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])({
         loading: false,
         found: -1
-    }), pagingState = _r[0], setPagingState = _r[1];
+    }), pagingState = _s[0], setPagingState = _s[1];
     var loadAsyncItems = function (query) { return Autocomplete2_awaiter(void 0, void 0, void 0, function () {
         var newItems, isCategorised, found;
         var _a;
@@ -98337,10 +98337,10 @@ var Autocomplete2 = function (_a) {
         return map;
     }, [items, isCategorised]);
     var showCreatable = !!onCreateNewItem &&
-        itemsIndex.length === 0 &&
+        (itemsIndex.length === 0 || canAlwaysCreateNewItem) &&
         typingMode &&
         fulltextValue.length >= newItemMinimumLength &&
-        (!loadItems || (!!loadItems && searchState.found === 0));
+        (!loadItems || (!!loadItems && searchState.found === 0) || (!!loadItems && canAlwaysCreateNewItem));
     var getItemIndexByValue = function (val, sourceItems) {
         if (sourceItems === void 0) { sourceItems = items; }
         if (val === '' || val === undefined) {
@@ -98440,9 +98440,10 @@ var Autocomplete2 = function (_a) {
         var itemElementId = isCategorised ? name + "_option-" + category + "-" + item : name + "_option-" + item;
         (_a = document.getElementById(itemElementId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: center ? 'center' : 'nearest' });
     };
-    var scrollToCreatable = function () {
-        var _a;
+    var focusCreatable = function () {
+        var _a, _b;
         (_a = document.getElementById(name + "_option-createNew")) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        (_b = document.getElementById(name + "_list-createNew")) === null || _b === void 0 ? void 0 : _b.focus();
     };
     var focusFulltextInput = function () {
         setTimeout(function () {
@@ -98561,7 +98562,7 @@ var Autocomplete2 = function (_a) {
         onCreateNewItem && onCreateNewItem(fulltextValue);
     };
     var handleOptionKeyPress = function (event) {
-        var ctrlKey = event.ctrlKey, key = event.key, target = event.target;
+        var ctrlKey = event.ctrlKey, key = event.key, metaKey = event.metaKey, target = event.target;
         switch (key) {
             case KEYS.Enter:
             case KEYS.Tab:
@@ -98583,9 +98584,9 @@ var Autocomplete2 = function (_a) {
                         handleFocusedItem(itemIndex.item, itemIndex.category);
                     }
                     else if (showCreatable) {
-                        if (currentItemPosition === -1) {
+                        if (currentItemPosition + 1 === itemsIndex.length) {
                             setCurrentItemPosition(itemsIndex.length);
-                            scrollToCreatable();
+                            focusCreatable();
                         }
                         else {
                             setCurrentItemPosition(-1);
@@ -98640,7 +98641,7 @@ var Autocomplete2 = function (_a) {
                 event.preventDefault();
                 break;
             default:
-                if (!ctrlKey) {
+                if (!(ctrlKey || metaKey)) {
                     setFulltextValue(function (prev) { return "" + prev + key; });
                 }
                 break;
@@ -98665,9 +98666,7 @@ var Autocomplete2 = function (_a) {
             else if (showCreatable) {
                 setCurrentItemPosition(itemsIndex.length);
                 setTimeout(function () {
-                    var _a;
-                    scrollToCreatable();
-                    (_a = document.getElementById(name + "_list-createNew")) === null || _a === void 0 ? void 0 : _a.focus();
+                    focusCreatable();
                 });
             }
             return;
@@ -98690,7 +98689,7 @@ var Autocomplete2 = function (_a) {
         }
         if (key === KEYS.ArrowUp && isDropdownVisible) {
             event.preventDefault();
-            if (itemsIndex.length > 0) {
+            if (itemsIndex.length > 0 && !showCreatable) {
                 if (isLazyLoaded && currentItemPosition === -1)
                     return;
                 var _b = itemsIndex[currentItemPosition > -1 ? currentItemPosition : itemsIndex.length - 1], category_2 = _b.category, item_2 = _b.item;
@@ -98702,12 +98701,10 @@ var Autocomplete2 = function (_a) {
                     (_a = document.getElementById(listElementId)) === null || _a === void 0 ? void 0 : _a.focus();
                 });
             }
-            else if (showCreatable && currentItemPosition === -1) {
+            else if (showCreatable) {
                 setCurrentItemPosition(itemsIndex.length);
                 setTimeout(function () {
-                    var _a;
-                    scrollToCreatable();
-                    (_a = document.getElementById(name + "_list-createNew")) === null || _a === void 0 ? void 0 : _a.focus();
+                    focusCreatable();
                 });
             }
             else {

package/dist/types/src/components/Form/Autocomplete2/Autocomplete2.d.ts

@@ -4,6 +4,8 @@ import { FormField2PropsType, Theme } from '../../../types';
 export interface Autocomplete2PropsType extends FormField2PropsType {
     /** A delay before async loadItems is called after user stops typing */
     asyncDelayMilliseconds?: number;
+    /** A flag whether option to create new item should be rendered always (true) or only on empty result (false, default) */
+    canAlwaysCreateNewItem?: boolean;
     /** Displays additional information for selected option. (perex, amount) */
     displayDetails?: boolean;
     /** Custom theme for dropdown items. */
@@ -40,5 +42,5 @@ export interface Autocomplete2PropsType extends FormField2PropsType {
     /** A callback to create new item */
     onCreateNewItem?: (value?: string) => void;
 }
-export declare const Autocomplete2: ({ asyncDelayMilliseconds, disabledTooltip, displayDetails, dropdownTheme, emptyValueLabel, error, filterMinimumLength, hasFullWidthOptions, help, isDisabled, isLazyLoaded, items: inputItems, label, labelTooltip, loadItems, loadMoreItems, name, messages, newItemMinimumLength, onBlur, onChange, onCreateNewItem, onFocus, placeholder, testId, theme, value }: Autocomplete2PropsType) => JSX.Element;
+export declare const Autocomplete2: ({ asyncDelayMilliseconds, canAlwaysCreateNewItem, disabledTooltip, displayDetails, dropdownTheme, emptyValueLabel, error, filterMinimumLength, hasFullWidthOptions, help, isDisabled, isLazyLoaded, items: inputItems, label, labelTooltip, loadItems, loadMoreItems, name, messages, newItemMinimumLength, onBlur, onChange, onCreateNewItem, onFocus, placeholder, testId, theme, value }: Autocomplete2PropsType) => JSX.Element;
 //# sourceMappingURL=Autocomplete2.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/ds-lilly",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": false,