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

package/package.json

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

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

@@ -57,7 +57,6 @@ var DatePickerRange = function (props) {
     var _e = useState((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
     var _f = useState((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
     var timeFormat = filterTime ? 'HH:mm' : false;
-    var placeholder = i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
     var cleanValue = React.useMemo(function () { return getCleanValues(value); }, [value]);
     var initialViewDate = useMemo(function () {
         if (cleanValue[0] && cleanValue[1]) {
@@ -106,7 +105,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, others), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { "$compact": compact, 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, others: others === null || others === void 0 ? void 0 : others[0], onChangeOthers: handleOthersChangeFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: !compact, open: true })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, others: others === null || others === void 0 ? void 0 : others[1], onChangeOthers: handleOthersChangeTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: !compact, open: true, isSecondDatePicker: true }))] })) }) })] }));
+    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue, others), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { "$compact": compact, 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, others: others === null || others === void 0 ? void 0 : others[0], onChangeOthers: handleOthersChangeFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: !compact, open: true })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, others: others === null || others === void 0 ? void 0 : others[1], onChangeOthers: handleOthersChangeTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: !compact, open: true, isSecondDatePicker: true }))] })) }) })] }));
 };
 export default DatePickerRange;
 var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js

@@ -63,6 +63,7 @@ import isArray from 'lodash/isArray';
 import uniqBy from 'lodash/uniqBy';
 import { isOptionArray } from './guards';
 var minColumnWidth = 120;
+var noOptionsMessage = function () { return null; };
 var SelectFilter = function (_a) {
     var onChange = _a.onChange, _b = _a.isClearable, isClearable = _b === void 0 ? true : _b, disabled = _a.disabled, placeholder = _a.placeholder, _c = _a.showValue, showValue = _c === void 0 ? true : _c, columnWidth = _a.columnWidth, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton, asyncLoadKey = _a.asyncLoadKey, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions, _d = _a.withNotEqComparator, withNotEqComparator = _d === void 0 ? true : _d;
     var _e = useState([]), loadedOptions = _e[0], setLoadedOptions = _e[1];
@@ -104,9 +105,9 @@ var SelectFilter = function (_a) {
     var isSelectClearable = isWide ? isClearable : false;
     var placeholderValue = placeholder || (isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined);
     if (isMulti) {
-        var placeholderIcon = isWide && isAsync ? (isNotEq ? 'notEqual' : 'equals') : null;
+        var placeholderIcon = isWide && withNotEqComparator ? (isNotEq ? 'notEqual' : 'equals') : null;
         var selectValue = showValue ? (isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value) : undefined;
-        return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: selectValue, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: placeholderValue, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, placeholderIcon: placeholderIcon, onIconClick: withNotEqComparator ? handleIconClick : undefined, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true, disabled: disabled, isClearable: isSelectClearable }));
+        return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: selectValue, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: placeholderValue, noOptionsMessage: noOptionsMessage, containerVariant: isAsync ? 'search' : undefined, placeholderIcon: placeholderIcon, onIconClick: withNotEqComparator ? handleIconClick : undefined, optionVariant: "checkbox", multiLabelVariant: "count", shortVariant: "join", isMulti: true, disabled: disabled, isClearable: isSelectClearable }));
     }
     return (_jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: showValue ? value : undefined, options: options, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: placeholderValue, placeholderIcon: isWide ? undefined : null, isClearable: isSelectClearable, disabled: disabled }));
 };

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

@@ -6,12 +6,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Button from '../../../../Elements/Button';
 import Input from '../../../../Forms/Input';
 import styled, { x } from '@xstyled/styled-components';
-var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: ", ";\n  z-index: ", ";\n  width: auto;\n"], ["\n  position: ", ";\n  z-index: ", ";\n  width: auto;\n"])), function (_a) {
+var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: ", ";\n  z-index: ", ";\n  width: ", ";\n"], ["\n  position: ", ";\n  z-index: ", ";\n  width: ", ";\n"])), function (_a) {
     var isMobileInputView = _a.isMobileInputView;
     return (isMobileInputView ? 'absolute' : 'relative');
 }, function (_a) {
     var isMobileInputView = _a.isMobileInputView;
     return (isMobileInputView ? '3' : '1');
+}, function (_a) {
+    var isMobileInputView = _a.isMobileInputView;
+    return (isMobileInputView ? 'auto' : 'auto');
 });
 var QuickFilter = function (_a) {
     var searchedValue = _a.searchedValue, placeholderText = _a.placeholderText, onChange = _a.onChange, onClick = _a.onClick, displayInput = _a.displayInput, onClear = _a.onClear, isMobileInputView = _a.isMobileInputView, alwaysShowClear = _a.alwaysShowClear;

package/ui/Blocks/CommonGrid/styles.js

@@ -22,7 +22,7 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
     return (withPagination ? gridFooterHeight : 0);
 });
 export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: auto;\n  padding: 10px;\n  flex-wrap: wrap;\n  z-index: 3;\n\n  @media (min-width: 768px) {\n    min-height: ", "px;\n    padding: 18px 20px;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: auto;\n  padding: 10px;\n  flex-wrap: wrap;\n  z-index: 3;\n\n  @media (min-width: 768px) {\n    min-height: ", "px;\n    padding: 18px 20px;\n  }\n"])), gridButtonStripHeight);
-export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), function (_a) {
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), function (_a) {
     var withButtonStrip = _a.withButtonStrip;
     return (withButtonStrip ? gridButtonStripHeight : 0);
 }, th('fonts.primary'), gridRowHeight, function (_a) {

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from '@xstyled/styled-components';
-export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n"], ["\n  display: flex;\n  gap: 10px;\n"])));
+export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"], ["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"])));
 export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"], ["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"])), function (_a) {
     var pointer = _a.pointer;
     return pointer && 'cursor: pointer;';

package/ui/Blocks/Header/styles.js

@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { headerHeight } from './utils/constants';
 import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"])), headerHeight, th.color('lightGray7'));
+export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 20px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 20px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n"])), headerHeight, th.color('lightGray7'));
 export var LeftSide = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 export var LanguageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n"])));
-export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"], ["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"])));
+export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 20px;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: 20px;\n  align-items: center;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -1,20 +1,15 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from 'react';
-import DropdownMenu from '../../Elements/DropdownMenu';
+import { useCallback, useMemo, useState } from 'react';
 import Icon from '../../Elements/Icon/Icon';
-import Popover from '../Popover';
-import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap } from './styles';
-var placementMap = {
-    left: 'bottom-start',
-    right: 'bottom-end'
-};
+import { useClickOutside } from '../Modal/hooks/useClickOutside';
+import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap, StyledDropdownMenu } from './styles';
 var LanguageSwitch = function (_a) {
     var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b, withTitle = _a.withTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor;
     var _c = useState(false), flagDropdownVisible = _c[0], setFlagDropdownVisible = _c[1];
-    var flagWrapRef = useRef(null);
     var onClose = useCallback(function () {
         setFlagDropdownVisible(false);
     }, []);
+    var flagMenuRef = useClickOutside({ onClose: onClose });
     var handleFlagClick = useCallback(function () {
         setFlagDropdownVisible(!flagDropdownVisible);
     }, [flagDropdownVisible]);
@@ -35,6 +30,6 @@ var LanguageSwitch = function (_a) {
     }, [filteredLanguages, languageToggle]);
     if (!activeLanguageObj || !languageItems)
         return null;
-    return (_jsxs(LanguageSwitchWrap, { children: [_jsxs(LanguageFlagWrap, { ref: flagWrapRef, onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), flagDropdownVisible && (_jsx(Popover, { parentRef: flagWrapRef, onClose: onClose, placement: placementMap[placement], children: _jsx(DropdownMenu, { showMenu: true, items: formattedLanguages }) }))] }));
+    return (_jsxs(LanguageSwitchWrap, { ref: flagMenuRef, children: [_jsxs(LanguageFlagWrap, { onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), _jsx(StyledDropdownMenu, { showMenu: flagDropdownVisible, items: formattedLanguages, placement: placement })] }));
 };
 export default LanguageSwitch;

package/ui/Blocks/LanguageSwitch/styles.d.ts

@@ -1,4 +1,9 @@
+import { Placement } from './types';
+
 export declare const StyledFlag: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const StyledDropdownMenu: import('styled-components').StyledComponent<(<T extends import('../../Elements/DropdownMenu/types').Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import('../../Elements/DropdownMenu/types').DropdownMenuProps<T>) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>), import('@xstyled/system').Theme, {
+    placement: Placement;
+}, never>;
 export declare const LanguageSwitchWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const LanguageFlagWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     backgroundColor?: string | undefined;

package/ui/Blocks/LanguageSwitch/styles.js

@@ -2,14 +2,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import DropdownMenu from '../../Elements/DropdownMenu';
 import styled from '@xstyled/styled-components';
 export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"])));
-export var LanguageSwitchWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
-export var LanguageFlagWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"])), function (_a) {
+export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"], ["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"])), function (_a) {
+    var placement = _a.placement;
+    return "".concat(placement, ": -5px");
+}, function (_a) {
+    var placement = _a.placement;
+    return "".concat(placement, ": 15px");
+});
+export var LanguageSwitchWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
+export var LanguageFlagWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"])), function (_a) {
     var withTitle = _a.withTitle;
     return (withTitle ? '16px' : '8px');
 }, function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor || 'white';
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -6,7 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { HamburgerMenu as HamburgerMenuIcon } from '../../../Elements/Icon/icons/HamburgerMenu';
 import { MobileCancel } from '../../../Elements/Icon/icons/MobileCancel';
-import { css, x, useTheme } from '@xstyled/styled-components';
+import { css, x } from '@xstyled/styled-components';
+import { useTheme } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 var HamburgerMenuWrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), th.color('neutral20'), th.shadow('dropShadow'), function (_a) {
     var isLeftMenuOpen = _a.isLeftMenuOpen;
@@ -18,6 +19,6 @@ export var HamburgerMenuButton = function (_a) {
     var theme = useTheme();
     var neutralColor = th.color('neutral20')({ theme: theme });
     var dispalyedIcon = isLeftMenuOpen ? (_jsx(MobileCancel, { fill: neutralColor })) : (_jsx(HamburgerMenuIcon, { fill: neutralColor, stroke: 'none' }));
-    return (_jsx(HamburgerMenuWrapper, { mr: "8px", onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
+    return (_jsx(HamburgerMenuWrapper, { mr: 3, onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from '@xstyled/styled-components';
-var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
+var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
     return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: lightGray2;\n    "], ["\n      border-top: slim;\n      border-color: lightGray2;\n    "])));
 });
 var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));

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,8 @@
-declare const CountMultiValue: (props: any) => any;
+import { MultiValueProps } from 'react-select';
+
+type CountMultiValueProps = MultiValueProps & {
+    data: any;
+    selectProps: any;
+};
+declare const CountMultiValue: (props: CountMultiValueProps) => React.ReactNode;
 export default CountMultiValue;

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

@@ -18,20 +18,28 @@ 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: ", ";\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'));
+var StyledMultiValue = 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 shortValues = props.selectProps.shortValues;
     var selectVal = props.selectProps.value;
     var inputVal = props.selectProps.inputValue;
+    var shortVariant = props.selectProps.shortVariant;
+    var isFirst = ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) === ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.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(StyledMultiValue, { 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

@@ -18,14 +18,14 @@ export var CustomStyles = {
         var colors = theme.colors;
         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,
+                fontFamily: theme.font
             }, '&: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,
+                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 });
+        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;
@@ -38,9 +38,9 @@ export var CustomStyles = {
     multiValue: function (styles, state) {
         var theme = state.theme;
         return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: '#E7EBEF', borderRadius: '4px', '& svg': {
-                color: theme.colors.inputTextColor,
+                color: theme.colors.inputTextColor
             }, ' > div': {
-                fontSize: '12px',
+                fontSize: '12px'
             } });
     },
     multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { fontSize: 'unset', padding: '5px' })); },
@@ -87,8 +87,8 @@ export var CustomStyles = {
                     ? theme.colors.hoverToActiveOptionBackground
                     : !isDisabled
                         ? theme.colors.menuHoverBackgroundColor
-                        : undefined,
-            },
+                        : undefined
+            }
         };
     },
     menu: function (styles, state) {
@@ -103,29 +103,26 @@ export var CustomStyles = {
                 height: '47px',
                 backgroundColor: theme.colors.defaultControlColor,
                 '&:hover': {
-                    backgroundColor: theme.colors.dropdownIndicatorColor,
-                },
+                    backgroundColor: theme.colors.dropdownIndicatorColor
+                }
             }, '::-webkit-scrollbar': {
-                width: '10px',
+                width: '10px'
             }, '::-webkit-scrollbar-track': {
                 backgroundColor: theme.colors.menuHoverBackgroundColor,
-                borderRadius: '6px',
+                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;
+        console.log('containerVariant', selectProps.containerVariant);
+        // containerVariant
+        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',
+        display: 'none'
     }); }
 };
 export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
@@ -139,12 +136,13 @@ 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 }),
         inputBorderHoverColor: th.color('gray5')({ theme: theme }),
         activeOptionBackground: th.color('red20')({ theme: theme }),
-        hoverToActiveOptionBackground: th.color('red30')({ theme: theme }),
+        hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
     };
     return function (reactSelectTheme) {
         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 });

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;