@mmb-digital/ds-lilly 0.6.1 → 0.6.3

package/dist/ds-lilly.js

@@ -98059,10 +98059,10 @@ var Autocomplete_assign = (undefined && undefined.__assign) || function () {
 
 var Autocomplete = function (_a) {
     var _b, _c, _d;
-    var disabledTooltip = _a.disabledTooltip, dropdownTheme = _a.dropdownTheme, error = _a.error, _e = _a.hasAlwaysValue, hasAlwaysValue = _e === void 0 ? false : _e, _f = _a.hasFullWidthOptions, hasFullWidthOptions = _f === void 0 ? true : _f, help = _a.help, _g = _a.inputAutocomplete, inputAutocomplete = _g === void 0 ? false : _g, isCreatable = _a.isCreatable, isDisabled = _a.isDisabled, items = _a.items, label = _a.label, labelTooltip = _a.labelTooltip, messages = _a.messages, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onCreate = _a.onCreate, placeholder = _a.placeholder, testId = _a.testId, theme = _a.theme, outterValue = _a.value;
+    var disabledTooltip = _a.disabledTooltip, dropdownTheme = _a.dropdownTheme, error = _a.error, _e = _a.hasAlwaysValue, hasAlwaysValue = _e === void 0 ? false : _e, _f = _a.hasFullWidthOptions, hasFullWidthOptions = _f === void 0 ? true : _f, help = _a.help, _g = _a.inputAutocomplete, inputAutocomplete = _g === void 0 ? false : _g, isCreatable = _a.isCreatable, isDisabled = _a.isDisabled, items = _a.items, label = _a.label, labelTooltip = _a.labelTooltip, messages = _a.messages, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onCreate = _a.onCreate, placeholder = _a.placeholder, testId = _a.testId, theme = _a.theme, outerValue = _a.value;
     var isCategorised = !!((_b = items[0]) === null || _b === void 0 ? void 0 : _b.items);
     var _h = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), isDropdownVisible = _h[0], setIsDropdownVisible = _h[1];
-    var _j = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(outterValue || ''), value = _j[0], setValue = _j[1];
+    var _j = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(outerValue || ''), value = _j[0], setValue = _j[1];
     var _k = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(-1), focusedItemIndex = _k[0], setFocusedItemIndex = _k[1];
     var _l = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(0), focusedCategoryIndex = _l[0], setFocusedCategoryIndex = _l[1];
     var _m = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(items), filteredItems = _m[0], setFilteredItems = _m[1];
@@ -98072,15 +98072,15 @@ var Autocomplete = function (_a) {
         var searchedItem;
         if (isCategorised) {
             var categories = items;
-            categories.map(function (category) { return (searchedItem = category.items.filter(function (item) { return item.value === outterValue; })[0]); });
+            categories.map(function (category) { return (searchedItem = category.items.filter(function (item) { return item.value === outerValue; })[0]); });
         }
         else {
-            searchedItem = items.filter(function (item) { return item.value === outterValue; })[0];
+            searchedItem = items.filter(function (item) { return item.value === outerValue; })[0];
         }
         var htmlInput = document.getElementById("" + name);
-        htmlInput.value = searchedItem ? searchedItem.label : outterValue || '';
-        setValue(outterValue || '');
-    }, [outterValue]);
+        htmlInput.value = searchedItem ? searchedItem.label : outerValue || '';
+        setValue(outerValue || '');
+    }, [outerValue]);
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
         if (value && focusedItemIndex === -1) {
             setFocusedItemIndex(0);
@@ -98315,7 +98315,7 @@ var Autocomplete = function (_a) {
         setFilteredItems(newItems);
         setIsDropdownVisible(true);
     };
-    var handleDropdownToogle = function () {
+    var handleDropdownToggle = function () {
         setFilteredItems(getFilteredItems(''));
         setIsDropdownVisible(!isDropdownVisible);
     };
@@ -98381,7 +98381,7 @@ var Autocomplete = function (_a) {
                             messages.create, " \"" + (isSelectedValue ? (_d = getMatchingItem()) === null || _d === void 0 ? void 0 : _d.label : value) + "\"")))),
                 external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("button", { "aria-expanded": isDropdownVisible, "aria-haspopup": "listbox", "aria-labelledby": name + "_label " + name + "_button", className: classBinder_cx('f-controlSuffix f-controlSuffix--button', {
                         'f-controlSuffix--open': isDropdownVisible
-                    }), disabled: isDisabled, id: name + "_button", tabIndex: -1, type: "button", onClick: handleDropdownToogle },
+                    }), disabled: isDisabled, id: name + "_button", tabIndex: -1, type: "button", onClick: handleDropdownToggle },
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "arrowDown", size: "small", theme: "f-control2__selectIcon" }))))));
 };
 
@@ -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; }
@@ -99002,10 +99004,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 () {

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

@@ -30,7 +30,7 @@ export interface AutocompletePropsType extends FormField2PropsType {
     /** Handler for value change. It will return matching item (if exists) as a second parameter. */
     onChange?: (value: string | number | boolean | null, item?: ItemType) => void;
     /** Handler function called when creatable item clicked. */
-    onCreate?: (value: string) => void;
+    onCreate?: (value: string | number) => void;
 }
-export declare const Autocomplete: ({ disabledTooltip, dropdownTheme, error, hasAlwaysValue, hasFullWidthOptions, help, inputAutocomplete, isCreatable, isDisabled, items, label, labelTooltip, messages, name, onBlur, onChange, onCreate, placeholder, testId, theme, value: outterValue }: AutocompletePropsType) => JSX.Element;
+export declare const Autocomplete: ({ disabledTooltip, dropdownTheme, error, hasAlwaysValue, hasFullWidthOptions, help, inputAutocomplete, isCreatable, isDisabled, items, label, labelTooltip, messages, name, onBlur, onChange, onCreate, placeholder, testId, theme, value: outerValue }: AutocompletePropsType) => JSX.Element;
 //# sourceMappingURL=Autocomplete.d.ts.map

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

@@ -25,7 +25,8 @@ export interface ItemType {
     label: string;
     /** Optional perex for two line variant. */
     perex?: ReactNode;
-    value: string;
+    /** Value of list option. */
+    value: string | number;
 }
 export interface CategorisedItemType {
     label: string;

package/dist/types/src/contexts/Select2Context.d.ts

@@ -12,8 +12,8 @@ interface Select2ContextType {
     optionKeyPress?: (event: React.KeyboardEvent<HTMLUListElement>) => void;
     setFocusedCategoryIndex?: (index: number) => void;
     setFocusedItemIndex: (index: number, categoryIndex?: number) => void;
-    setValue?: (value: string) => void;
-    value?: string;
+    setValue?: (value: string | number) => void;
+    value?: string | number;
 }
 declare const Select2Context: import("react").Context<Select2ContextType>;
 export default Select2Context;

package/dist/types/src/types/common.d.ts

@@ -5,6 +5,7 @@ declare type ThemeValue = CSSModule | string;
 export declare type Theme = ThemeValue | Array<Theme>;
 export declare type TargetType = '_blank' | '_parent' | '_self' | '_top';
 export declare type BreakpointsType = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export declare type FormField2Value = string | number | boolean | null;
 export interface FormField2PropsType extends ComponentPropsType, DisabledTooltipPropsType {
     /** Allow click event propagation */
     allowEventPropagation?: boolean;
@@ -23,9 +24,9 @@ export interface FormField2PropsType extends ComponentPropsType, DisabledTooltip
     /** Name of form field. */
     name: string;
     /** Handler for input blur. */
-    onBlur?: (value: string | number | boolean | null) => void;
+    onBlur?: (value: FormField2Value) => void;
     /** Handler for value change. */
-    onChange?: (value: string | number | boolean | null) => void;
+    onChange?: (value: FormField2Value) => void;
     /** Click event handler */
     onClick?: (event: SyntheticEvent) => void;
     /** Function to call when the form control emits a `focus` event. */

package/package.json

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