@mmb-digital/ds-lilly 0.6.2-beta.1 → 0.7.0

package/dist/ds-lilly.js

@@ -98469,7 +98469,7 @@ var Autocomplete2_spreadArray = (undefined && undefined.__spreadArray) || functi
 
 
 var Autocomplete2 = function (_a) {
-    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 _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, onItemFocus = _a.onItemFocus, 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];
@@ -98651,15 +98651,17 @@ var Autocomplete2 = function (_a) {
         (_b = document.getElementById(name + "_list-createNew")) === null || _b === void 0 ? void 0 : _b.focus();
     };
     var focusFulltextInput = function () {
-        var _a;
-        try {
-            var inputElement = document.getElementById(name + "_input");
-            inputElement === null || inputElement === void 0 ? void 0 : inputElement.select();
-        }
-        catch (err) {
-            // set focus as failback
-            (_a = document.getElementById(name + "_input")) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        setTimeout(function () {
+            var _a;
+            try {
+                var inputElement = document.getElementById(name + "_input");
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.select();
+            }
+            catch (err) {
+                // set focus as failback
+                (_a = document.getElementById(name + "_input")) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        });
     };
     var resetFulltext = function (clearFulltext) {
         if (clearFulltext === void 0) { clearFulltext = true; }
@@ -98760,6 +98762,12 @@ var Autocomplete2 = function (_a) {
         var position = getItemIndexPosition({ item: item, category: category });
         setCurrentItemPosition(position);
         scrollToItem(item, category);
+        if (onItemFocus && position !== currentItemPosition) {
+            var focusedItem_1 = isCategorised(items)
+                ? items[category].items[item]
+                : items[item];
+            onItemFocus(focusedItem_1);
+        }
     };
     var handleCreateNewOption = function () {
         setButtonValue({ label: fulltextValue, value: fulltextValue });
@@ -99002,10 +99010,14 @@ var Autocomplete2 = function (_a) {
     }); };
     var handleDropdownVisibilityChange = function (isVisible) {
         if (!isVisible) {
+            var trimmedFulltextValue = fulltextValue.trim();
             setIsDropdownVisible(isVisible);
             setTypingMode(isVisible);
+            if (!trimmedFulltextValue) {
+                propagateChange();
+            }
             resetFulltext();
-            handleBlur(buttonValue);
+            handleBlur(trimmedFulltextValue ? buttonValue : undefined);
         }
     };
     var renderDropdownContent = function () {
@@ -107275,7 +107287,7 @@ var Select2_spreadArray = (undefined && undefined.__spreadArray) || function (to
 
 var Select2 = function (_a) {
     var _b;
-    var disabledTooltip = _a.disabledTooltip, _c = _a.displayDetails, displayDetails = _c === void 0 ? false : _c, dropdownTheme = _a.dropdownTheme, emptyValueLabel = _a.emptyValueLabel, error = _a.error, _d = _a.hasFullWidthOptions, hasFullWidthOptions = _d === void 0 ? true : _d, help = _a.help, isDisabled = _a.isDisabled, items = _a.items, label = _a.label, labelTooltip = _a.labelTooltip, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, placeholder = _a.placeholder, testId = _a.testId, theme = _a.theme, value = _a.value;
+    var disabledTooltip = _a.disabledTooltip, _c = _a.displayDetails, displayDetails = _c === void 0 ? false : _c, dropdownTheme = _a.dropdownTheme, emptyValueLabel = _a.emptyValueLabel, error = _a.error, _d = _a.hasFullWidthOptions, hasFullWidthOptions = _d === void 0 ? true : _d, help = _a.help, isDisabled = _a.isDisabled, items = _a.items, label = _a.label, labelTooltip = _a.labelTooltip, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onItemFocus = _a.onItemFocus, placeholder = _a.placeholder, testId = _a.testId, theme = _a.theme, value = _a.value;
     var _e = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), isDropdownVisible = _e[0], setIsDropdownVisible = _e[1];
     var _f = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(null), buttonValue = _f[0], setButtonValue = _f[1];
     var _g = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(-1), currentItemPosition = _g[0], setCurrentItemPosition = _g[1];
@@ -107345,12 +107357,19 @@ var Select2 = function (_a) {
         var itemIndexPosition = getItemIndexPosition(itemIndex);
         setCurrentItemPosition(itemIndexPosition);
     }, [isDropdownVisible, getItemIndexByValue, value, getItemIndexPosition]);
-    var scrollToItem = function (item, category) {
-        var _a;
+    var scrollToItem = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function (item, category) {
+        var _a, _b, _c, _d, _e;
         if (category === void 0) { category = -1; }
         var itemElementId = isCategorised ? name + "_option-" + category + "-" + item : name + "_option-" + item;
-        (_a = document.getElementById(itemElementId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
-    };
+        var dropdownId = name + "_dropdown";
+        var dropdownHalfHeight = (((_a = document.getElementById(dropdownId)) === 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(dropdownId)) === null || _d === void 0 ? void 0 : _d.scrollTo(0, (((_e = document.getElementById(itemElementId)) === null || _e === void 0 ? void 0 : _e.offsetTop) || 0) - dropdownHalfHeight + itemHalfHeight);
+        }
+    }, [isCategorised, name]);
     var handleComboBoxClick = function () {
         if (!isDropdownVisible) {
             setTimeout(function () {
@@ -107419,6 +107438,12 @@ var Select2 = function (_a) {
         var position = getItemIndexPosition({ item: item, category: category });
         setCurrentItemPosition(position);
         scrollToItem(item, category);
+        if (onItemFocus && position !== currentItemPosition) {
+            var focusedItem_1 = isCategorised
+                ? items[category].items[item]
+                : items[item];
+            onItemFocus(focusedItem_1);
+        }
     };
     var handleOptionKeyPress = function (event) {
         var key = event.key;
@@ -107515,7 +107540,7 @@ var Select2 = function (_a) {
     };
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(FormGroup2, Select2_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" },
+            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Dropdown, { dropdownId: name + "_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" },
                     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', { 'f-control2--large': displayDetails }), disabled: isDisabled, id: name + "_button", name: name, type: "button", onClick: handleComboBoxClick, onFocus: onFocus, onKeyDown: handleButtonKeyPress },
                         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: classBinder_cx("f-control2__" + (buttonValue ? 'value' : 'placeholder')) }, buttonValue ? buttonValue : placeholder),
                         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "arrowDown", size: "small", theme: "f-control2__selectIcon" }))), onVisibleChange: function (state) { return setIsDropdownVisible(state); } }, 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)))));

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

@@ -43,6 +43,8 @@ export interface Autocomplete2PropsType extends FormField2PropsType {
     newItemMinimumLength?: number;
     /** A callback to create new item */
     onCreateNewItem?: (value?: string) => void;
+    /** A callback called on highlight dropdown item */
+    onItemFocus?: (item: ItemType | CategorisedItemType) => void;
 }
-export declare const Autocomplete2: ({ asyncDelayMilliseconds, canAlwaysCreateNewItem, disabledTooltip, displayDetails, dropdownTheme, emptyValueLabel, error, filterMinimumLength, hasFullWidthOptions, help, isDisabled, isLazyLoaded, isLoading, 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, isLoading, items: inputItems, label, labelTooltip, loadItems, loadMoreItems, name, messages, newItemMinimumLength, onBlur, onChange, onCreateNewItem, onFocus, onItemFocus, placeholder, testId, theme, value }: Autocomplete2PropsType) => JSX.Element;
 //# sourceMappingURL=Autocomplete2.d.ts.map

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

@@ -11,6 +11,8 @@ export interface Select2PropsType extends FormField2PropsType {
     hasFullWidthOptions?: boolean;
     /** List of options to select. */
     items: ItemType[] | CategorisedItemType[];
+    /** A callback called on highlight dropdown item */
+    onItemFocus?: (item: ItemType | CategorisedItemType) => void;
 }
 export interface ItemType {
     /** Optional value for withAmount variant. */
@@ -32,5 +34,5 @@ export interface CategorisedItemType {
     label: string;
     items: ItemType[];
 }
-export declare const Select2: ({ disabledTooltip, displayDetails, dropdownTheme, emptyValueLabel, error, hasFullWidthOptions, help, isDisabled, items, label, labelTooltip, name, onBlur, onChange, onFocus, placeholder, testId, theme, value }: Select2PropsType) => JSX.Element;
+export declare const Select2: ({ disabledTooltip, displayDetails, dropdownTheme, emptyValueLabel, error, hasFullWidthOptions, help, isDisabled, items, label, labelTooltip, name, onBlur, onChange, onFocus, onItemFocus, placeholder, testId, theme, value }: Select2PropsType) => JSX.Element;
 //# sourceMappingURL=Select2.d.ts.map

package/package.json

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