@mailstep/design-system 0.8.22-beta.3 → 0.8.22

package/ui/Elements/Select/types.d.ts

@@ -25,21 +25,21 @@ export type SelectProps = {
     loadOptions?: (text: string) => Promise<Option[]>;
     defaultOptions?: Option[];
     onChange: (value: ValueType) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: Function;
     error?: string;
     index?: [];
     isInvalid?: boolean;
     isLoading?: boolean;
     spaceAround?: SpaceAround;
     disabled?: boolean;
-    onInputChange?: (value: string) => void;
+    onInputChange?: Function;
     useSimplifiedOptions?: boolean;
     showSelectAllButton?: boolean;
+    showResetGridButton?: boolean;
     isClearable?: boolean;
     isSearchable?: boolean;
     isMulti?: boolean;
     shortValues?: boolean;
-    shortVariant?: 'block' | 'join';
     menuIsOpen?: boolean;
     defaultMenuIsOpen?: boolean;
     isDarkPlaceholderText?: boolean;
@@ -51,10 +51,11 @@ export type SelectProps = {
     innerRef?: RefObject<HTMLElement>;
     className?: string;
     maxMenuHeight?: number;
-    getOptionValue?: (selectedOption: ValueType) => any;
+    resetGrid?: Function;
+    getOptionValue?: Function;
     systemTheme?: Theme;
     menuPlacement?: string;
-    onIconClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onIconClick?: Function;
 };
 export type BaseColors = {
     primary: string;
@@ -71,7 +72,6 @@ export type BaseColors = {
     dropdownIndicatorColor: string;
     hoverToActiveOptionBackground: string;
     defaultControlColor: string;
-    clearIndicatorColor: string;
 };
 type BaseState<ThemeType = BaseColors> = {
     theme: ThemeType;

package/ui/Elements/SingleSelect/SingleSelect.d.ts

@@ -6,7 +6,7 @@ export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
     onChange?: (event: {
         target: Record<string, FieldValueType>;
     }) => void;
-    onValueChange?: (value: FieldValueType) => void;
+    onValueChange?: Function;
     asyncLoadMinChars?: number;
     preload?: boolean;
     isLocked?: boolean;

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -64,7 +64,7 @@ import omit from 'lodash/fp/omit';
 var CREATE = "_create_".concat(nanoid(), "_");
 var defaultFilterOption = createFilter();
 var creatableFilterOption = function (option, rawInput) {
-    if ((option === null || option === void 0 ? void 0 : option.value) === CREATE)
+    if ((option === null || option === void 0 ? void 0 : option.value) == CREATE)
         return true;
     return defaultFilterOption(option, rawInput);
 };
@@ -88,7 +88,7 @@ var SingleSelect = function (props) {
         if (!loadOptions)
             return i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
         if (inputValue.length < asyncLoadMinChars)
-            return i18n._({ id: 'components.dropdown.writeMoreChars', message: "Write at least ".concat(asyncLoadMinChars, " characters.") });
+            return i18n._({ id: 'components.dropdown.writeMoreChars', message: 'Write at least ${asyncLoadMinChars} characters.' });
         return i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
     }, [loadOptions, asyncLoadMinChars]);
     var handleLoadOptions = useCallback(function (inputValue) { return __awaiter(void 0, void 0, void 0, function () {
@@ -119,21 +119,19 @@ var SingleSelect = function (props) {
     var _f = useState(options || []), loadedDefaultOptions = _f[0], setLoadedDefaultOptions = _f[1];
     useEffect(function () {
         if (loadOptions && preload && !props.value)
-            loadOptions('', false).then(setLoadedDefaultOptions).catch(console.error);
+            loadOptions('', false).then(setLoadedDefaultOptions);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [loadOptions]); // this is intentional
     var _g = useState(null), storedSelectedOption = _g[0], setStoredSelectedOption = _g[1];
     useEffect(function () {
-        if (initialOptions === null || initialOptions === void 0 ? void 0 : initialOptions.length) {
-            var selectedOption = initialOptions.find(function (option) { return option.value === props.value; }) || null;
+        if (initialOptions && initialOptions.length) {
+            var selectedOption = initialOptions.find(function (option) { return option.value == props.value; }) || null;
             setStoredSelectedOption(selectedOption);
         }
         if (loadOptions && !initialOptions && props.value) {
-            loadOptions(String(props.value), true)
-                .then(function (selectedOptions) {
+            loadOptions(String(props.value), true).then(function (selectedOptions) {
                 setStoredSelectedOption((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) || null);
-            })
-                .catch(console.error);
+            });
         }
         // ignored because of props.value, this only finds option for initial value
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -149,7 +147,7 @@ var SingleSelect = function (props) {
         return __generator(this, function (_e) {
             switch (_e.label) {
                 case 0:
-                    if (!(onCreateOption && (option === null || option === void 0 ? void 0 : option.value) === CREATE)) return [3 /*break*/, 4];
+                    if (!(onCreateOption && (option === null || option === void 0 ? void 0 : option.value) == CREATE)) return [3 /*break*/, 4];
                     if (!((option === null || option === void 0 ? void 0 : option.inputValue) && ((_b = (_a = option === null || option === void 0 ? void 0 : option.inputValue) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) < 2)) return [3 /*break*/, 1];
                     props === null || props === void 0 ? void 0 : props.form.setFieldTouched(name, true, true);
                     props === null || props === void 0 ? void 0 : props.form.setFieldError(name, i18n._({ id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
@@ -184,6 +182,17 @@ var SingleSelect = function (props) {
             }
         });
     }); }, [onCreateOption, loadOptions, onChange, onValueChange, props === null || props === void 0 ? void 0 : props.form, name]);
+    var handleBlur = useCallback(function (option) {
+        if (onBlur) {
+            onBlur({
+                target: {
+                    name: name,
+                    type: 'blur',
+                    value: getOptionValue(option)
+                }
+            });
+        }
+    }, [name, onBlur]);
     var omitted = ['onValueChange', 'placeholder', 'options', 'loadOptions', 'asyncLoadMinChars'];
     var displayLockedText = isLocked && !disabled;
     var placeholderValue = displayLockedText ? lockedText : placeholder;
@@ -195,6 +204,6 @@ var SingleSelect = function (props) {
             return staticOptions || undefined;
         return staticOptions ? __spreadArray(__spreadArray([], staticOptions, true), [storedSelectedOption], false) : [storedSelectedOption];
     }, [asAsync, loadedDefaultOptions, onCreateOption, options, storedSelectedOption]);
-    return (_jsx(Select, __assign({}, omit(omitted, props), { filterOption: (filterOption || creatableFilterOption), disabled: disabled || isLocked, onChange: handleChange, onBlur: onBlur, placeholder: placeholderValue, loadingMessage: loadingMessage, noOptionsMessage: noOptionsMessage, loadOptions: asAsync ? handleLoadOptions : undefined, containerVariant: asAsync ? 'search' : undefined, defaultOptions: defaultOptions, options: !asAsync ? options : undefined, isLoading: isCreating || props.isLoading })));
+    return (_jsx(Select, __assign({}, omit(omitted, props), { filterOption: (filterOption || creatableFilterOption), disabled: disabled || isLocked, onChange: handleChange, onBlur: handleBlur, placeholder: placeholderValue, loadingMessage: loadingMessage, noOptionsMessage: noOptionsMessage, loadOptions: asAsync ? handleLoadOptions : undefined, containerVariant: asAsync ? 'search' : undefined, defaultOptions: defaultOptions, options: !asAsync ? options : undefined, isLoading: isCreating || props.isLoading })));
 };
 export default SingleSelect;