@mmb-digital/ds-lilly 0.3.4 → 0.3.8

package/dist/ds-lilly.js

@@ -96310,7 +96310,7 @@ var Dropdown_assign = (undefined && undefined.__assign) || function () {
 
 var SCROLL_DEVIATION = 16;
 var Dropdown = function (_a) {
-    var children = _a.children, closeOnOutsideClick = _a.closeOnOutsideClick, closeOnTriggerHidden = _a.closeOnTriggerHidden, _b = _a.delayHide, delayHide = _b === void 0 ? 200 : _b, delayShow = _a.delayShow, forceVisibility = _a.forceVisibility, _c = _a.hasSameWidthAsTrigger, hasSameWidthAsTrigger = _c === void 0 ? false : _c, interactive = _a.interactive, _d = _a.isOpenByDefault, isOpenByDefault = _d === void 0 ? false : _d, onOutsideClick = _a.onOutsideClick, onScrollToEnd = _a.onScrollToEnd, onVisibleChange = _a.onVisibleChange, _e = _a.placement, placement = _e === void 0 ? 'auto' : _e, testId = _a.testId, theme = _a.theme, _f = _a.trigger, trigger = _f === void 0 ? 'focus' : _f, triggerComponent = _a.triggerComponent;
+    var children = _a.children, closeOnOutsideClick = _a.closeOnOutsideClick, closeOnTriggerHidden = _a.closeOnTriggerHidden, _b = _a.delayHide, delayHide = _b === void 0 ? 200 : _b, delayShow = _a.delayShow, dropdownId = _a.dropdownId, forceVisibility = _a.forceVisibility, _c = _a.hasSameWidthAsTrigger, hasSameWidthAsTrigger = _c === void 0 ? false : _c, interactive = _a.interactive, _d = _a.isOpenByDefault, isOpenByDefault = _d === void 0 ? false : _d, onOutsideClick = _a.onOutsideClick, onScrollToEnd = _a.onScrollToEnd, onVisibleChange = _a.onVisibleChange, _e = _a.placement, placement = _e === void 0 ? 'auto' : _e, testId = _a.testId, theme = _a.theme, _f = _a.trigger, trigger = _f === void 0 ? 'focus' : _f, triggerComponent = _a.triggerComponent;
     var tooltipRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])();
     var _g = usePopperTooltip({
         closeOnOutsideClick: closeOnOutsideClick,
@@ -96342,7 +96342,7 @@ var Dropdown = function (_a) {
         visible && (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", Dropdown_assign({ ref: setRef, "data-testid": testId }, getTooltipProps({
                 className: classBinder_cx('c-dropdown', { 'c-dropdown--fullWidth': hasSameWidthAsTrigger }, theme)
-            }), { onScroll: handleScroll }), children),
+            }), { id: dropdownId, onScroll: handleScroll }), children),
             onOutsideClick && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "c-dropdown__outside", onClick: onOutsideClick })))));
 };
 
@@ -98331,11 +98331,11 @@ var Autocomplete2 = function (_a) {
                 .map(function (item, index) { return (!item.isDisabled ? { category: -1, item: index } : undefined); })
                 .filter(Boolean);
         }
-        if (emptyValueLabel) {
+        if (emptyValueLabel && map.length > 0 && (fulltextValue === (buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.label) || !value)) {
             return Autocomplete2_spreadArray([{ item: -1, category: -1 }], map);
         }
         return map;
-    }, [items, isCategorised]);
+    }, [items, isCategorised, fulltextValue, value, buttonValue]);
     var showCreatable = !!onCreateNewItem &&
         (itemsIndex.length === 0 || canAlwaysCreateNewItem) &&
         typingMode &&
@@ -98424,9 +98424,11 @@ var Autocomplete2 = function (_a) {
         }
     }, [value]);
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
-        var itemIndex = getItemIndexByValue(value);
-        var itemIndexPosition = getItemIndexPosition(itemIndex);
-        setCurrentItemPosition(itemIndexPosition);
+        if (isDropdownVisible) {
+            var itemIndex = getItemIndexByValue(value);
+            var itemIndexPosition = getItemIndexPosition(itemIndex);
+            setCurrentItemPosition(itemIndexPosition);
+        }
     }, [isDropdownVisible]);
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
         if (pagingState.loading) {
@@ -98434,11 +98436,22 @@ var Autocomplete2 = function (_a) {
         }
     }, [pagingState.loading]);
     var scrollToItem = function (item, category, center) {
-        var _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;
-        (_a = document.getElementById(itemElementId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: center ? 'center' : 'nearest' });
+        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;
+            var itemOffset = ((_c = document.getElementById(itemElementId)) === null || _c === void 0 ? void 0 : _c.offsetTop) || 0;
+            if (itemOffset > dropdownHalfHeight) {
+                (_d = document
+                    .getElementById('autocomplete_dropdown')) === null || _d === void 0 ? void 0 : _d.scrollTo(0, (((_e = document.getElementById(itemElementId)) === null || _e === void 0 ? void 0 : _e.offsetTop) || 0) - dropdownHalfHeight + itemHalfHeight);
+            }
+        }
+        else {
+            (_f = document.getElementById(itemElementId)) === null || _f === void 0 ? void 0 : _f.scrollIntoView({ block: 'nearest' });
+        }
     };
     var focusCreatable = function () {
         var _a, _b;
@@ -98473,7 +98486,7 @@ var Autocomplete2 = function (_a) {
         }
     };
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
-        if (fulltextValue && !isDropdownVisible) {
+        if (typingMode && fulltextValue && !isDropdownVisible) {
             setIsDropdownVisible(true);
         }
         if (loadItems) {
@@ -98499,7 +98512,7 @@ var Autocomplete2 = function (_a) {
                 loadAsyncItems();
             }
             var selectedItem_1 = itemsIndex[currentItemPosition];
-            if (selectedItem_1) {
+            if (selectedItem_1 && selectedItem_1.item !== -1) {
                 setTimeout(function () { return scrollToItem(selectedItem_1.item, selectedItem_1.category, true); }, 100);
             }
         }
@@ -98562,6 +98575,12 @@ var Autocomplete2 = function (_a) {
     var handleCreateNewOption = function () {
         setButtonValue({ label: fulltextValue, value: fulltextValue });
         onCreateNewItem && onCreateNewItem(fulltextValue);
+        setTypingMode(false);
+    };
+    var handleBlur = function (item) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onBlur && onBlur((item === null || item === void 0 ? void 0 : item.value) || undefined);
     };
     var handleOptionKeyPress = function (event) {
         var ctrlKey = event.ctrlKey, key = event.key, metaKey = event.metaKey, target = event.target;
@@ -98675,18 +98694,30 @@ var Autocomplete2 = function (_a) {
         }
         if (key === KEYS.Enter) {
             event.preventDefault();
-            if (isDropdownVisible && showCreatable && itemsIndex.length === 0) {
-                handleCreateNewOption();
+            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
+                        ? items[category].items[item]
+                        : items[item];
+                    setFulltextValue(selectedItem.label);
+                    propagateChange(selectedItem);
+                    setTypingMode(false);
+                }
+                else if (fulltextValue !== (buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.label)) {
+                    resetFulltext(false);
+                    setCurrentItemPosition(-1);
+                    propagateChange();
+                }
+                setIsDropdownVisible(false);
             }
-            else if (isDropdownVisible && 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[category].items[item]
-                    : items[item];
-                setFulltextValue(selectedItem.label);
-                propagateChange(selectedItem);
+            else {
+                setIsDropdownVisible(function (prev) { return !prev; });
             }
-            setIsDropdownVisible(function (prev) { return !prev; });
             return;
         }
         if (key === KEYS.ArrowUp && isDropdownVisible) {
@@ -98721,30 +98752,36 @@ var Autocomplete2 = function (_a) {
             return;
         }
         if (key === KEYS.Tab) {
-            setIsDropdownVisible(false);
-            if (isDropdownVisible && showCreatable && itemsIndex.length === 0) {
-                handleCreateNewOption();
-            }
-            else if (fulltextValue && itemsIndex.length === 1) {
-                var _c = itemsIndex[0], category = _c.category, item = _c.item;
-                var selectedItem = isCategorised
-                    ? items[category].items[item]
-                    : items[item];
-                setButtonValue(selectedItem);
-            }
-            else if (fulltextValue) {
-                resetFulltext();
+            if (!isDropdownVisible) {
+                handleBlur(buttonValue);
             }
             else {
-                propagateChange();
+                if (showCreatable && itemsIndex.length === 0) {
+                    handleCreateNewOption();
+                }
+                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
+                        ? items[category].items[item]
+                        : items[item];
+                    setButtonValue(selectedItem);
+                    propagateChange(selectedItem);
+                    handleBlur(selectedItem);
+                }
+                else if (fulltextValue) {
+                    handleBlur(buttonValue);
+                }
+                else {
+                    setCurrentItemPosition(-1);
+                    resetFulltext(false);
+                    propagateChange();
+                    handleBlur();
+                }
             }
             setTimeout(function () {
+                setIsDropdownVisible(false);
                 setTypingMode(false);
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                onBlur && onBlur(buttonValue === null || buttonValue === void 0 ? void 0 : buttonValue.value);
             });
-            return;
         }
     };
     var handleFulltextChange = function (_a) {
@@ -98780,6 +98817,7 @@ var Autocomplete2 = function (_a) {
             setIsDropdownVisible(isVisible);
             setTypingMode(isVisible);
             resetFulltext();
+            handleBlur(buttonValue);
         }
     };
     var renderDropdownContent = function () {
@@ -98807,7 +98845,7 @@ var Autocomplete2 = function (_a) {
     };
     var focusedItem = itemsIndex[currentItemPosition];
     var select2context = {
-        emptyValueLabel: emptyValueLabel,
+        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,
         items: items,
@@ -98830,7 +98868,7 @@ 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, { 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(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("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', {

package/dist/types/src/components/Components/Dropdown/Dropdown.d.ts

@@ -13,6 +13,8 @@ export interface DropdownPropsType extends ComponentPropsType {
     delayHide?: number;
     /** Delay in showing the tooltip (ms). */
     delayShow?: number;
+    /** Dropdown menu element ID */
+    dropdownId?: string;
     /** Set to use same width as triggerComponent. */
     hasSameWidthAsTrigger?: boolean;
     /** If true, hovering the tooltip will keep it open. */
@@ -33,5 +35,5 @@ export interface DropdownPropsType extends ComponentPropsType {
     triggerComponent: ReactElement;
     forceVisibility?: boolean;
 }
-export declare const Dropdown: ({ children, closeOnOutsideClick, closeOnTriggerHidden, delayHide, delayShow, forceVisibility, hasSameWidthAsTrigger, interactive, isOpenByDefault, onOutsideClick, onScrollToEnd, onVisibleChange, placement, testId, theme, trigger, triggerComponent }: DropdownPropsType) => JSX.Element;
+export declare const Dropdown: ({ children, closeOnOutsideClick, closeOnTriggerHidden, delayHide, delayShow, dropdownId, forceVisibility, hasSameWidthAsTrigger, interactive, isOpenByDefault, onOutsideClick, onScrollToEnd, onVisibleChange, placement, testId, theme, trigger, triggerComponent }: DropdownPropsType) => JSX.Element;
 //# sourceMappingURL=Dropdown.d.ts.map

package/package.json

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