@mailstep/design-system 0.6.20 → 0.6.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.20",
+  "version": "0.6.21",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/DatePickerRange/DatePickerRange.js

@@ -107,7 +107,7 @@ var DatePickerRange = function (props) {
     // Check if the second value is not selected and the first value is the same as the initial value
     var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
     var ref = useClickOutside({ onClose: onClose });
-    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, appearance: "grid", onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null }))] })) }) })] }));
+    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null }))] })) }) })] }));
 };
 export default DatePickerRange;
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/NumberRange/NumberRange.js

@@ -70,6 +70,6 @@ var NumberRange = function (props) {
     var onChangeComparator = useEvent(function (option) {
         onChange({ comparator: option.value, value: fieldValue });
     });
-    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, value: fieldValue, label: label, "data-cy": "".concat(name, "Inp"), onChange: onChangeTextInput, iconOnClick: togglePicker, appearance: "grid", icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: className, autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
+    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, value: fieldValue, label: label, "data-cy": "".concat(name, "Inp"), onChange: onChangeTextInput, iconOnClick: togglePicker, icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: className, autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
 };
 export default NumberRange;

package/ui/Blocks/CommonGrid/components/TextRange/TextRange.js

@@ -85,6 +85,6 @@ var TextRange = function (props) {
     var onChangeComparator = useEvent(function (option) {
         onChange({ comparator: option.value, value: fieldValue, isInvalid: isInvalid });
     });
-    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, appearance: "grid", icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: 'tooltip', autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
+    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: 'tooltip', autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
 };
 export default TextRange;

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

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, memo, useState, useEffect, useRef } from 'react';
+import { useCallback, memo, useState, useEffect, useRef } from 'react';
 import { components } from 'react-select';
 import styled, { th } from '@xstyled/styled-components';
 import { components as selectComponents } from 'react-select';
@@ -57,22 +57,22 @@ export var IconValueContainer = function (props) {
     var hasValue = rest.hasValue;
     return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
 };
-// MultiValue container replacement with count of selected options
+// MultiValue container with count of selected options
+var StyledNumber = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\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: ", ";\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'));
 export var CountMultiValue = function (props) {
     var _a, _b;
     var selectVal = props.selectProps.value;
     var inputVal = props.selectProps.inputValue;
-    var transValues = useMemo(function () { return ({ count: selectVal.length }); }, [selectVal.length]);
     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 (_jsx(selectComponents.SingleValue, __assign({}, props, { children: selectVal.length > 1 ? (_jsx(Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options', values: transValues })) : (props.children) })));
+        return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
     }
     else {
         return null;
     }
 };
 // Option with chevron form new design
-var ChevronDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
-var SelectedIndicator = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 12px;\n"], ["\n  padding-right: 12px;\n"])));
+var ChevronDiv = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
+var SelectedIndicator = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-right: 12px;\n"], ["\n  padding-right: 12px;\n"])));
 export var ChevronOption = function (props) {
     var theme = props.theme, isSelected = props.isSelected, selectOption = props.selectOption, children = props.children, data = props.data;
     var showCheckbox = !!(theme.optionVariant == 'checkbox');
@@ -80,7 +80,7 @@ export var ChevronOption = function (props) {
     return (_jsxs(selectComponents.Option, __assign({}, props, { children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", onChange: selectOption, checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx("span", { className: "label", "data-cy": "dropdownModalOption".concat(data.index), children: children })] })));
 };
 // menu with check all and reset config button
-var SelectAll = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), function (_a) {
+var SelectAll = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), function (_a) {
     var additionalPadding = _a.additionalPadding;
     return (additionalPadding ? '8px 27px 8px 10px' : '8px 10px');
 }, function (_a) {
@@ -93,7 +93,7 @@ var SelectAll = styled.div(templateObject_4 || (templateObject_4 = __makeTemplat
     var isSelected = _a.isSelected;
     return (isSelected ? th.color('red30') : th.color('bgLightGray1'));
 });
-var ConfigWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"], ["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"])));
+var ConfigWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"], ["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"])));
 export var ConnectedMenu = function (props) {
     var theme = props.theme;
     var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, options = _a.options, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight;
@@ -134,4 +134,4 @@ 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 templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -34,6 +34,7 @@ type CustomTheme = {
     borderRadius: string;
     font: string;
     narrowIndicators: boolean;
+    flexWrap: 'wrap' | 'nowrap';
 };
 type State = BaseState<CustomTheme>;
 export declare const CustomStyles: StylesConfig<State>;

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

@@ -19,10 +19,14 @@ export var CustomStyles = {
         return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.menuHoverBackgroundColor : colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
                 fontWeight: theme.textWeightNormal,
                 fontFamily: theme.font,
-            }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minHeight: theme.height, minWidth: 'min-content', '.inputIcon': {
+            }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minWidth: 'min-content', '.inputIcon': {
                 color: isDisabled ? colors.defaultControlColor : !!selectProps.value ? colors.inputTextColor : colors.defaultControlColor,
             } });
     },
+    valueContainer: function (styles, _a) {
+        var theme = _a.theme;
+        return __assign(__assign({}, styles), { width: '50px', flexWrap: theme.flexWrap });
+    },
     singleValue: function (styles, _a) {
         var selectProps = _a.selectProps, theme = _a.theme, isDisabled = _a.isDisabled;
         return __assign(__assign({}, styles), { position: 'absolute', top: '50%', transform: 'translateY(-50%)', color: selectProps.isInvalid
@@ -140,6 +144,6 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
         hoverToActiveOptionBackground: th.color('red30')({ theme: theme }),
     };
     return function (reactSelectTheme) {
-        return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: useFilterSubvariant ? '32px' : '38px', textWeightNormal: th.fontWeight('normal')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
+        return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: '38px', flexWrap: useFilterSubvariant ? 'nowrap' : 'wrap', textWeightNormal: th.fontWeight('normal')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
     };
 };