@mmb-digital/ds-lilly 0.3.5 → 0.3.9

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 &&
@@ -98436,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;
@@ -98501,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);
             }
         }
@@ -98684,11 +98695,12 @@ 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 > 0) {
-                    var _a = itemsIndex[0], category = _a.category, item = _a.item;
+                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];
@@ -98833,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,
@@ -98856,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', {
@@ -104284,20 +104296,15 @@ var Checkbox2_assign = (undefined && undefined.__assign) || function () {
 
 
 var Checkbox2 = function (_a) {
-    var _b = _a.allowEventPropagation, allowEventPropagation = _b === void 0 ? false : _b, disabledTooltip = _a.disabledTooltip, error = _a.error, help = _a.help, isDisabled = _a.isDisabled, label = _a.label, labelTooltip = _a.labelTooltip, name = _a.name, onChange = _a.onChange, testId = _a.testId, theme = _a.theme, _c = _a.value, defaultState = _c === void 0 ? false : _c;
-    var _d = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(defaultState), isChecked = _d[0], setIsChecked = _d[1];
+    var _b = _a.allowEventPropagation, allowEventPropagation = _b === void 0 ? false : _b, disabledTooltip = _a.disabledTooltip, error = _a.error, help = _a.help, isDisabled = _a.isDisabled, label = _a.label, labelTooltip = _a.labelTooltip, name = _a.name, onChange = _a.onChange, testId = _a.testId, theme = _a.theme, value = _a.value;
     var handleOnChange = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (event) {
         if (!isDisabled) {
-            onChange && onChange(!isChecked);
-            setIsChecked(!isChecked);
+            onChange && onChange(!value);
         }
         if (!allowEventPropagation) {
             event.stopPropagation();
         }
-    }, [allowEventPropagation, isChecked, isDisabled, onChange]);
-    Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
-        setIsChecked(defaultState);
-    }, [defaultState]);
+    }, [allowEventPropagation, value, isDisabled, onChange]);
     var handleOnKeyPress = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (event) {
         var key = event.key;
         if (key === KEYS.Space)
@@ -104312,17 +104319,14 @@ var Checkbox2 = function (_a) {
         name: name,
         theme: theme
     };
-    Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
-        setIsChecked(defaultState);
-    }, [defaultState]);
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(FormGroup2, Checkbox2_assign({}, formGroupProps),
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("label", { "aria-checked": isChecked ? 'true' : 'false', className: classBinder_cx('f-checkbox2', {
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("label", { "aria-checked": value ? 'true' : 'false', className: classBinder_cx('f-checkbox2', {
                 'f-checkbox2--disabled': isDisabled
             }, theme), "data-testid": testId, id: name, role: "checkbox", tabIndex: 0, onClick: handleOnChange, onKeyPress: handleOnKeyPress },
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: "f-checkbox2__over" },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: classBinder_cx('f-checkbox2__indicator', {
-                        'f-checkbox2__indicator--checked': isChecked
-                    }) }, isChecked && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "tickFill" }))),
+                        'f-checkbox2__indicator--checked': value
+                    }) }, value && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "tickFill" }))),
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: "f-checkbox2__text" },
                 label,
                 labelTooltip && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Tooltip, { content: labelTooltip },

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/dist/types/src/components/Form/Checkbox2/Checkbox2.d.ts

@@ -2,5 +2,5 @@ import { FormField2PropsType } from '../../../types';
 export declare type Checkbox2PropsType = Omit<FormField2PropsType, 'value'> & {
     value?: boolean;
 };
-export declare const Checkbox2: ({ allowEventPropagation, disabledTooltip, error, help, isDisabled, label, labelTooltip, name, onChange, testId, theme, value: defaultState }: Checkbox2PropsType) => JSX.Element;
+export declare const Checkbox2: ({ allowEventPropagation, disabledTooltip, error, help, isDisabled, label, labelTooltip, name, onChange, testId, theme, value }: Checkbox2PropsType) => JSX.Element;
 //# sourceMappingURL=Checkbox2.d.ts.map

package/package.json

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