@mailstep/design-system 0.8.16-beta.10 → 0.8.16-beta.12

package/ui/Elements/Select/Select.js

@@ -69,7 +69,7 @@ var emptyOptions = [];
 var noOptionsMessage = function () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };
 var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
 var Select = function (_a) {
-    var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.showResetGridButton, showResetGridButton = _g === void 0 ? false : _g, _h = _a.shortValues, shortValues = _h === void 0 ? true : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, resetGrid = _a.resetGrid, onIconClick = _a.onIconClick, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "showResetGridButton", "shortValues", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid", "onIconClick"]);
+    var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.shortValues, shortValues = _g === void 0 ? true : _g, _h = _a.shortVariant, shortVariant = _h === void 0 ? 'block' : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, onIconClick = _a.onIconClick, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "shortValues", "shortVariant", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "onIconClick"]);
     var isAsync = !!loadOptions;
     if (showSelectAllButton && !isMulti) {
         console.error('CheckboxSelect incompatible props');
@@ -84,8 +84,8 @@ var Select = function (_a) {
         }
     }, [onChange]);
     var icon = containerVariant === 'search' && !placeholderIcon && placeholderIcon !== null ? 'search' : placeholderIcon || undefined;
-    var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
-    var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
+    var modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
+    var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
     var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
     var selectedOption;
     var localGetOptionValue = useMemo(function () { return getOptionValue || (function (option) { return option === null || option === void 0 ? void 0 : option.value; }); }, [getOptionValue]);
@@ -106,6 +106,6 @@ var Select = function (_a) {
             }
         }); }); } : undefined;
     }, [loadOptions]);
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, onIconClick: onIconClick, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined, noOptionsMessage: noOptionsMessage }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues }))] }), error && _jsx(ErrorMessage, { children: error })] }));
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, onIconClick: onIconClick, hideSelectedOptions: !!(isMulti && multiLabelVariant !== 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined, noOptionsMessage: noOptionsMessage }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues, shortVariant: shortVariant, containerVariant: containerVariant }))] }), error && _jsx(ErrorMessage, { children: error })] }));
 };
 export default Select;

package/ui/Elements/Select/components/ConnectedMenu.js

@@ -12,17 +12,16 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { components as selectComponents } from 'react-select';
-import ResetAll from '../components/ResetAll';
 import SelectAll from '../components/SelectAll';
 var ConnectedMenu = function (props) {
     var theme = props.theme;
-    var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
+    var _a = props.selectProps, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
     // because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
     // we need to specify them here by children
     var filteredOptions = useMemo(function () { var _a, _b; return (_b = (_a = props.children) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
         var _b = _a.props, value = _b.value, label = _b.label;
         return ({ label: label, value: value });
     }); }, [props.children]);
-    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
+    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children] })));
 };
 export default ConnectedMenu;

package/ui/Elements/Select/components/CountMultiValue.d.ts

@@ -1,2 +1,11 @@
-declare const CountMultiValue: (props: any) => any;
+import { MultiValueProps } from 'react-select';
+
+type CountMultiValueProps = MultiValueProps & {
+    data: unknown;
+    selectProps: MultiValueProps<unknown, boolean, any>['selectProps'] & {
+        shortValues?: boolean;
+        shortVariant?: 'block' | 'join';
+    };
+};
+declare const CountMultiValue: (props: CountMultiValueProps) => React.ReactNode;
 export default CountMultiValue;

package/ui/Elements/Select/components/CountMultiValue.js

@@ -18,20 +18,29 @@ import { components as selectComponents } from 'react-select';
 import styled, { th } from '@xstyled/styled-components';
 // MultiValue container with count of selected options
 var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
+var JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  position: absolute;\n  color: gray3;\n  padding-left: ", ";\n"], ["\n  white-space: nowrap;\n  position: absolute;\n  color: gray3;\n  padding-left: ", ";\n"])), function (_a) {
+    var isFocused = _a.isFocused;
+    return (isFocused ? '8px' : '0');
+});
 var CountMultiValue = function (props) {
-    var _a, _b;
+    var _a;
     var shortValues = props.selectProps.shortValues;
     var selectVal = props.selectProps.value;
     var inputVal = props.selectProps.inputValue;
+    var shortVariant = props.selectProps.shortVariant;
+    var data = props.data;
+    var isFirst = (data === null || data === void 0 ? void 0 : data.value) === ((_a = selectVal[0]) === null || _a === void 0 ? void 0 : _a.value);
+    var menuIsOpen = props.selectProps.menuIsOpen;
     if (!shortValues) {
         return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
     }
-    if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) === ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
-        return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
-    }
-    else {
+    if (!isFirst || inputVal) {
         return null;
     }
+    if (shortVariant === 'join') {
+        return (_jsxs(JoinedMultiValue, { isFocused: menuIsOpen, children: [selectVal.length > 1 ? "(".concat(Number(selectVal.length), ") ") : '', selectVal.map(function (option) { return option.label; }).join(', ')] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
 };
 export default CountMultiValue;
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/ui/Elements/Select/components/DropdownIndicator.d.ts

@@ -1,2 +1,7 @@
-export declare const DropdownIndicator: (props: any) => any;
+import { DropdownIndicatorProps } from 'react-select';
+
+type DropdownIndicatorCustomProps = DropdownIndicatorProps & {
+    theme: any;
+};
+export declare const DropdownIndicator: (props: DropdownIndicatorCustomProps) => any;
 export default DropdownIndicator;

package/ui/Elements/Select/components/DropdownIndicator.js

@@ -15,14 +15,15 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { components as selectComponents } from 'react-select';
-import styled from '@xstyled/styled-components';
 import { ArrowDown } from '../../Icon/icons/ArrowDown';
 import { ArrowUp } from '../../Icon/icons/ArrowUp';
+import styled from '@xstyled/styled-components';
 // Option with chevron form new design
 var ChevronDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
 export var DropdownIndicator = function (props) {
     var _a = props.selectProps, menuIsOpen = _a.menuIsOpen, name = _a.name;
-    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name, "ChevronBtn"), children: menuIsOpen ? _jsx(ArrowUp, { width: "16px" }) : _jsx(ArrowDown, { width: "16px" }) }) })));
+    var iconColor = props.theme.colors.placeholderTextColor;
+    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name || '', "ChevronBtn"), children: menuIsOpen ? _jsx(ArrowUp, { width: "16px", stroke: iconColor }) : _jsx(ArrowDown, { width: "16px", stroke: iconColor }) }) })));
 };
 export default DropdownIndicator;
 var templateObject_1;

package/ui/Elements/Select/components/IconValueContainer.js

@@ -29,7 +29,7 @@ import { components } from 'react-select';
 import Icon from '../../Icon/Icon';
 import styled from '@xstyled/styled-components';
 // Value container with icon
-var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 12px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"], ["\n  padding-left: 12px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"])), function (_a) {
+var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 7px;\n  margin-right: -3px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"], ["\n  padding-left: 7px;\n  margin-right: -3px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"])), function (_a) {
     var hasValue = _a.hasValue;
     return (hasValue ? 'black' : '#a3b3c1');
 });

package/ui/Elements/Select/themes/index.d.ts

@@ -1,4 +1,4 @@
 import { StylesConfig, SelectComponentsConfig } from 'react-select';
 import { SelectProps } from '../types';
 
-export declare const useStylesAndComponents: (style?: SelectProps['style'], optionVariant?: SelectProps['optionVariant'], multiLabelVariant?: SelectProps['multiLabelVariant'], containerVariant?: SelectProps['containerVariant'], useSimplifiedOptions?: SelectProps['useSimplifiedOptions'], showSelectAllButton?: SelectProps['showSelectAllButton'], showResetGridButton?: SelectProps['showResetGridButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];
+export declare const useStylesAndComponents: (style?: SelectProps['style'], optionVariant?: SelectProps['optionVariant'], multiLabelVariant?: SelectProps['multiLabelVariant'], containerVariant?: SelectProps['containerVariant'], useSimplifiedOptions?: SelectProps['useSimplifiedOptions'], showSelectAllButton?: SelectProps['showSelectAllButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];

package/ui/Elements/Select/themes/index.js

@@ -8,14 +8,13 @@ import IconValueContainer from '../components/IconValueContainer';
 import SimplifiedOption from '../components/SimplifiedOption';
 import { useTheme } from '@xstyled/styled-components';
 import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from './selectStyles';
-export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton) {
+export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton) {
     if (style === void 0) { style = 'form'; }
     if (optionVariant === void 0) { optionVariant = 'default'; }
     if (multiLabelVariant === void 0) { multiLabelVariant = 'default'; }
     if (containerVariant === void 0) { containerVariant = 'default'; }
     if (useSimplifiedOptions === void 0) { useSimplifiedOptions = false; }
     if (showSelectAllButton === void 0) { showSelectAllButton = false; }
-    if (showResetGridButton === void 0) { showResetGridButton = false; }
     var systemTheme = useTheme();
     return useMemo(function () {
         var components = {
@@ -28,25 +27,16 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
         if (containerVariant === 'search') {
             components.DropdownIndicator = null;
         }
-        if (showResetGridButton || showSelectAllButton) {
+        if (showSelectAllButton) {
             components.MenuList = ConnectedMenu;
         }
         components.Input = CustomInput;
-        var themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');
+        var themes = getFormCustomTheme(systemTheme, optionVariant, style === 'gridFilter');
         var styles = SelectCustomStyles;
         components.Option = ChevronOption;
         // performance reasons
         if (useSimplifiedOptions)
             components.Option = SimplifiedOption;
         return [components, themes, styles];
-    }, [
-        multiLabelVariant,
-        containerVariant,
-        showResetGridButton,
-        showSelectAllButton,
-        style,
-        useSimplifiedOptions,
-        systemTheme,
-        optionVariant
-    ]);
+    }, [multiLabelVariant, containerVariant, showSelectAllButton, style, useSimplifiedOptions, systemTheme, optionVariant]);
 };

package/ui/Elements/Select/themes/selectStyles.js

@@ -25,7 +25,7 @@ export var CustomStyles = {
     },
     valueContainer: function (styles, _a) {
         var theme = _a.theme;
-        return __assign(__assign({}, styles), { width: '50px', flexWrap: theme.flexWrap });
+        return __assign(__assign({}, styles), { width: '50px', paddingLeft: '7px', flexWrap: theme.flexWrap });
     },
     singleValue: function (styles, _a) {
         var selectProps = _a.selectProps, theme = _a.theme, isDisabled = _a.isDisabled;
@@ -112,17 +112,12 @@ export var CustomStyles = {
                 borderRadius: '6px'
             } });
     },
-    dropdownIndicator: function (styles, state) {
-        var theme = state.theme, isDisabled = state.isDisabled;
-        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', '& svg': {
-                stroke: isDisabled ? theme.colors.dropdownIndicatorColor : theme.colors.inputTextColor
-            }, padding: '0px 5px 0px 0px', '@media (min-width: 1024px)': {
-                padding: '0px 10px 0px 1px'
-            } });
+    dropdownIndicator: function (styles) {
+        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0px 7px 0px 0px' });
     },
     clearIndicator: function (styles, state) {
-        var theme = state.theme;
-        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators ? '0px 4px 0px 0px' : '0px 4px', color: theme.colors.dropdownIndicatorColor });
+        var theme = state.theme, selectProps = state.selectProps;
+        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators && selectProps.containerVariant !== 'search' ? '0px' : '0px 4px', color: theme.colors.clearIndicatorColor, cursor: 'pointer' });
     },
     indicatorSeparator: function () { return ({
         display: 'none'
@@ -139,6 +134,7 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
         inputDisabledColor: th.color('lightGray1')({ theme: theme }),
         inputBorderColor: th.color('lightGray3')({ theme: theme }),
         placeholderTextColor: th.color('lightGray3')({ theme: theme }),
+        clearIndicatorColor: th.color('lightGray4')({ theme: theme }),
         defaultControlColor: th.color('lightGray5')({ theme: theme }),
         disabledTextColor: th.color('lightGray6')({ theme: theme }),
         dropdownIndicatorColor: th.color('gray1')({ theme: theme }),

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

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

@@ -1,12 +1,12 @@
 import { default as React } from 'react';
 import { SelectProps, Option } from '../Select/types';
 
-type FieldValueType = string | number | Array<string | number> | null;
+export type FieldValueType = string | number | Array<string | number> | null;
 export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
     onChange?: (event: {
         target: Record<string, FieldValueType>;
     }) => void;
-    onValueChange?: Function;
+    onValueChange?: (value: FieldValueType) => void;
     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 ${asyncLoadMinChars} characters.' });
+            return i18n._({ id: 'components.dropdown.writeMoreChars', message: "Write at least ".concat(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,19 +119,21 @@ 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);
+            loadOptions('', false).then(setLoadedDefaultOptions).catch(console.error);
         // 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 && initialOptions.length) {
-            var selectedOption = initialOptions.find(function (option) { return option.value == props.value; }) || null;
+        if (initialOptions === null || initialOptions === void 0 ? void 0 : 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
@@ -147,7 +149,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.' }));
@@ -182,17 +184,6 @@ 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;
@@ -204,6 +195,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: 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 })));
+    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 })));
 };
 export default SingleSelect;

package/ui/ThemeProvider/themes/default.js

@@ -91,11 +91,11 @@ var defaultTheme = {
         magenta60: '#EE5396',
         magenta70: '#D12771',
         magenta80: '#9F1853',
-        magenta90: '#7B1340',
+        magenta90: '#7B1340'
     },
     fonts: {
         primary: 'Inter, sans-serif',
-        heading: 'Inter, sans-serif',
+        heading: 'Inter, sans-serif'
     },
     fontLinks: ['https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'],
     fontSizes: ['10px', '12px', '14px', '16px', '18px', '21px', '24px', '32px'],
@@ -105,20 +105,20 @@ var defaultTheme = {
         normal: 400,
         medium: 500,
         semiBold: 600,
-        bold: 700,
+        bold: 700
     },
     letterSpacings: {
         default: null,
         sm: '2px',
         md: '4px',
-        lg: '8px',
+        lg: '8px'
     },
     borders: {
         slim: '1px solid',
         mediumSlim: '2px solid',
         medium: '3px solid',
         mediumThick: '6px solid',
-        thick: '10px solid',
+        thick: '10px solid'
     },
     // ...........................
     radii: {
@@ -126,7 +126,7 @@ var defaultTheme = {
         md: '4px',
         ml: '6px',
         lg: '8px',
-        xl: '16px',
+        xl: '16px'
     },
     shadows: {
         boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.1)',
@@ -143,13 +143,13 @@ var defaultTheme = {
         headerShadowNotifications: '1px 1px 2px #00000029',
         cornerDialogShadow: '1px 1px 3px 1px #00000029',
         gridShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.12)',
-        tooltipShadow: '0px 2px 20px 0px rgba(0, 0, 0, 0.10)',
+        tooltipShadow: '0px 2px 20px 0px rgba(0, 0, 0, 0.10)'
     },
     space: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
     transitions: {
         simpleLong: 'all 2s',
-        inputTransition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
+        inputTransition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out'
     },
-    zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999],
+    zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999]
 };
 export default defaultTheme;