@mmb-digital/ds-lilly 0.3.5 → 0.3.6

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 && !fulltextValue) {
             return Autocomplete2_spreadArray([{ item: -1, category: -1 }], map);
         }
         return map;
-    }, [items, isCategorised]);
+    }, [items, isCategorised, fulltextValue]);
     var showCreatable = !!onCreateNewItem &&
         (itemsIndex.length === 0 || canAlwaysCreateNewItem) &&
         typingMode &&
@@ -98436,11 +98436,17 @@ var Autocomplete2 = function (_a) {
         }
     }, [pagingState.loading]);
     var scrollToItem = function (item, category, center) {
-        var _a;
+        var _a, _b, _c;
         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) {
+            (_a = document
+                .getElementById('autocomplete_dropdown')) === null || _a === void 0 ? void 0 : _a.scrollTo(0, ((_b = document.getElementById(itemElementId)) === null || _b === void 0 ? void 0 : _b.offsetTop) || 0);
+        }
+        else {
+            (_c = document.getElementById(itemElementId)) === null || _c === void 0 ? void 0 : _c.scrollIntoView({ block: center ? 'center' : 'nearest' });
+        }
     };
     var focusCreatable = function () {
         var _a, _b;
@@ -98501,7 +98507,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);
             }
         }
@@ -98833,7 +98839,7 @@ var Autocomplete2 = function (_a) {
     };
     var focusedItem = itemsIndex[currentItemPosition];
     var select2context = {
-        emptyValueLabel: emptyValueLabel,
+        emptyValueLabel: !fulltextValue ? emptyValueLabel : undefined,
         focusedCategoryIndex: focusedItem ? focusedItem.category : -1,
         focusedItemIndex: focusedItem ? focusedItem.item : -1,
         items: items,
@@ -98856,7 +98862,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.5",
+  "version": "0.3.6",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": false,