@mailstep/design-system 0.8.16-beta.2 → 0.8.16-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.16-beta.2",
+  "version": "0.8.16-beta.21",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -19,7 +19,11 @@
     "deploy:win": "npm run build:win && npm publish ./build",
     "dev": "yarn storybook",
     "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
-    "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
+    "lint": "eslint ./packages/ui/**/*.{ts,tsx}",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": "yarn eslint --fix"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -40,6 +44,7 @@
     "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-designs": "^11.1.2",
+    "@storybook/addon-docs": "10.2.8",
     "@storybook/addon-links": "10.2.8",
     "@storybook/react-webpack5": "10.2.8",
     "@svgr/rollup": "^8.0.1",
@@ -74,7 +79,9 @@
     "eslint-plugin-react-perf": "^3.3.2",
     "eslint-plugin-storybook": "10.2.8",
     "faker": "^5.1.0",
+    "husky": "^9.1.7",
     "immer": "9.0.7",
+    "lint-staged": "^16.4.0",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "moment": "^2.30.1",
@@ -98,12 +105,11 @@
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.0.4",
+    "typescript": "5.1.3",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1",
-    "@storybook/addon-docs": "10.2.8"
+    "webpack": "^5.82.1"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -141,7 +147,7 @@
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.0.4"
+    "typescript": "5.1.3"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

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

@@ -5,11 +5,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { SortingUp, SortingDown } from './icons/Sorting';
-import styled from '@xstyled/styled-components';
+import styled, { useTheme, th } from '@xstyled/styled-components';
 var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & + * {\n    margin-left: 1em;\n  }\n"], ["\n  & + * {\n    margin-left: 1em;\n  }\n"])));
 var ColumnTitle = function (_a) {
     var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
     var _b = React.useState(0), mouseDownTimestamp = _b[0], setMouseDownTimestamp = _b[1];
+    var theme = useTheme();
+    var typoPrimaryColor = th.color('typoPrimary')({ theme: theme });
     var handleMouseDown = React.useCallback(function () {
         setMouseDownTimestamp(Date.now());
     }, []);
@@ -23,7 +25,7 @@ var ColumnTitle = function (_a) {
         }
         setMouseDownTimestamp(0);
     }, [mouseDownTimestamp, onSetSort, sortValue]);
-    return (_jsxs("div", { onMouseDown: isSortable ? handleMouseDown : undefined, onMouseUp: isSortable ? handleMouseUp : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16" }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16" })] }));
+    return (_jsxs("div", { onMouseDown: isSortable ? handleMouseDown : undefined, onMouseUp: isSortable ? handleMouseUp : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16", fill: typoPrimaryColor }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16", fill: typoPrimaryColor })] }));
 };
 export default React.memo(ColumnTitle);
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const ControlButtonsContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const Left: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const Right: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

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

@@ -15,7 +15,7 @@ var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObjec
 var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 0;\n"], ["\n  padding-right: 0;\n"])));
 var StyledIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  margin: 9px;\n  & > svg {\n    stroke: ", ";\n  }\n"], ["\n  width: 20px;\n  height: 20px;\n  margin: 9px;\n  & > svg {\n    stroke: ", ";\n  }\n"])), function (_a) {
     var appearance = _a.appearance;
-    return appearance === 'secondary' ? th.color('blue2') : appearance === 'tertiary' ? th.color('red1') : 'white';
+    return appearance === 'secondary' ? th.color('blue2') : appearance === 'tertiary' ? th.color('red1') : th.color('white');
 });
 var Separator = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 38px;\n  width: 1px;\n  background-color: white;\n  margin-left: 18px;\n"], ["\n  height: 38px;\n  width: 1px;\n  background-color: white;\n  margin-left: 18px;\n"])));
 var DropdownButton = function (_a) {

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

@@ -16,7 +16,6 @@ var __assign = (this && this.__assign) || function () {
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import Button from '../../../../Elements/Button/Button';
 import DropdownSelect from '../../../../Elements/DropdownSelect';
-import { ExtraControlButtonPosition } from '../../types';
 import ButtonMore from '../ButtonMore/ButtonMore';
 import styled, { x } from '@xstyled/styled-components';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
@@ -35,12 +34,14 @@ var ControlButton = function (_a) {
     }
 };
 var ExtraControlButtons = function (_a) {
-    var extraControlButtons = _a.extraControlButtons, isMobile = _a.isMobile, _b = _a.targetPosition, targetPosition = _b === void 0 ? ExtraControlButtonPosition.TopRight : _b;
-    var buttons = (extraControlButtons || []).filter(function (_a) {
-        var position = _a.position, hide = _a.hide;
-        return position === targetPosition && !hide;
-    });
-    if (isMobile && buttons.length > 0) {
+    var extraControlButtons = _a.extraControlButtons, isMobile = _a.isMobile, targetPosition = _a.targetPosition;
+    var buttons = targetPosition
+        ? (extraControlButtons || []).filter(function (_a) {
+            var position = _a.position, hide = _a.hide;
+            return position === targetPosition && !hide;
+        })
+        : extraControlButtons !== null && extraControlButtons !== void 0 ? extraControlButtons : [];
+    if (isMobile && (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0) {
         var items = buttons.flatMap(function (_a) {
             var onSelect = _a.onSelect, onClick = _a.onClick, options = _a.options, label = _a.label;
             if (options && onSelect) {
@@ -60,7 +61,7 @@ var ExtraControlButtons = function (_a) {
             return null;
         return _jsx(ButtonMore, { items: items });
     }
-    return (_jsx(Row, { children: buttons.map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
+    return (_jsx(Row, { children: buttons === null || buttons === void 0 ? void 0 : buttons.map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
 };
 export default ExtraControlButtons;
 var templateObject_1;

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

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -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/Filters/TextRange/TextRange.js

@@ -91,6 +91,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, 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: comparatorOptions, 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: comparatorOptions, selected: comparator, onClick: onChangeComparator }) }))] }));
 };
 export default TextRange;

package/ui/Blocks/CommonGrid/components/IconList/IconList.d.ts

@@ -3,7 +3,7 @@ import { FC } from 'react';
 export declare const List: import('styled-components').StyledComponent<"ul", import('@xstyled/system').Theme, {}, never>;
 export declare const ListItem: import('styled-components').StyledComponent<"li", import('@xstyled/system').Theme, {}, never>;
 export declare const ListItemContent: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
-    selected?: boolean;
+    selected?: boolean | undefined;
 }, never>;
 export declare const ListItemIcon: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
 type Item = {

package/ui/Blocks/CommonGrid/components/ManageColumnForm/styles.d.ts

@@ -1,5 +1,5 @@
 export declare const RowLayout: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     $isVisible: boolean;
-    transition?: string;
-    transform?: string;
+    transition?: string | undefined;
+    transform?: string | undefined;
 }, never>;

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

@@ -54,7 +54,7 @@ var MobileFilterModal = function (_a) {
         setLocalFilterValues({});
         onClearSettings === null || onClearSettings === void 0 ? void 0 : onClearSettings();
     }, [onClearSettings]);
-    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
+    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", ignoreClickOutside: true, children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
                 var filterType = createFilterType(column);
                 var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
                 var defaultComparators = comparators === null || comparators === void 0 ? void 0 : comparators[filterType];
@@ -63,7 +63,7 @@ var MobileFilterModal = function (_a) {
                 if (!(filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent))
                     return null;
                 var RenderComponent = filterConfig.CellComponent;
-                return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: MobileOverlayWrapper, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
+                return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: MobileOverlayWrapper, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions, columnWidth: column === null || column === void 0 ? void 0 : column.flexBasis }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
             }) }) }));
 };
 export default MobileFilterModal;

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

@@ -29,6 +29,6 @@ var MobileSortModal = function (_a) {
     var handleClearSort = useCallback(function () {
         onResetSorting === null || onResetSorting === void 0 ? void 0 : onResetSorting();
     }, [onResetSorting]);
-    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), onConfirm: activeSortedColumn ? handleClearSort : undefined, confirmLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "8px", p: "8px 4px", children: sortableColumns.map(function (column) { return (_jsx(SortRow, { column: column, currentDirection: getCurrentDirection(column), onCycle: handleCycle }, column.name)); }) }) }));
+    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), onConfirm: activeSortedColumn ? handleClearSort : undefined, confirmLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), width: "narrow", ignoreClickOutside: true, children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "8px", p: "8px 4px", children: sortableColumns.map(function (column) { return (_jsx(SortRow, { column: column, currentDirection: getCurrentDirection(column), onCycle: handleCycle }, column.name)); }) }) }));
 };
 export default MobileSortModal;

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

@@ -6,15 +6,12 @@ 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: ", ";\n"], ["\n  position: ", ";\n  z-index: ", ";\n  width: ", ";\n"])), function (_a) {
+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 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/components/Table.d.ts

@@ -1,48 +1,48 @@
 export declare const Row: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    hasRowClick?: boolean;
-    align?: string;
+    hasRowClick?: boolean | undefined;
+    align?: string | undefined;
 }, never>;
 export declare const Cell: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    align?: string;
-    flexBasis?: number;
-    flexGrow?: number;
-    flexShrink?: number;
-    transition?: string;
-    transform?: string;
+    align?: string | undefined;
+    flexBasis?: number | undefined;
+    flexGrow?: number | undefined;
+    flexShrink?: number | undefined;
+    transition?: string | undefined;
+    transform?: string | undefined;
 }, never>;
 export declare const StyledDataRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    hasRowClick?: boolean;
-    align?: string;
+    hasRowClick?: boolean | undefined;
+    align?: string | undefined;
 } & {
     isEven: boolean;
 }, never>;
 export declare const TextCell: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    align?: string;
-    flexBasis?: number;
-    flexGrow?: number;
-    flexShrink?: number;
-    transition?: string;
-    transform?: string;
+    align?: string | undefined;
+    flexBasis?: number | undefined;
+    flexGrow?: number | undefined;
+    flexShrink?: number | undefined;
+    transition?: string | undefined;
+    transform?: string | undefined;
 }, never>;
 export declare const MessageCell: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    align?: string;
-    flexBasis?: number;
-    flexGrow?: number;
-    flexShrink?: number;
-    transition?: string;
-    transform?: string;
+    align?: string | undefined;
+    flexBasis?: number | undefined;
+    flexGrow?: number | undefined;
+    flexShrink?: number | undefined;
+    transition?: string | undefined;
+    transform?: string | undefined;
 }, never>;
 declare const variantColors: {
     error: (props: import('@xstyled/util').Props<import('@xstyled/system').Theme>) => import('@xstyled/system').CSSScalar;
     info: (props: import('@xstyled/util').Props<import('@xstyled/system').Theme>) => import('@xstyled/system').CSSScalar;
 };
 export declare const MessageCellBody: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    align?: string;
-    flexBasis?: number;
-    flexGrow?: number;
-    flexShrink?: number;
-    transition?: string;
-    transform?: string;
+    align?: string | undefined;
+    flexBasis?: number | undefined;
+    flexGrow?: number | undefined;
+    flexShrink?: number | undefined;
+    transition?: string | undefined;
+    transform?: string | undefined;
 } & {
     variant: keyof typeof variantColors;
 }, never>;

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

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import styled, { system, th } from '@xstyled/styled-components';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"], ["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"])), system, function (props) { return (props.hasRowClick ? 'pointer' : 'auto'); });
 export var Cell = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n  transition: ", ";\n  transform: ", ";\n"], ["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n  transition: ", ";\n  transform: ", ";\n"])), system, function (props) { return props.align; }, function (props) { return props.transition; }, function (props) { return props.transform; });
-export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
+export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : th('colors.white')); });
 export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100vw;\n  position: sticky;\n  left: 0;\n  justify-content: center;\n"], ["\n  width: 100vw;\n  position: sticky;\n  left: 0;\n  justify-content: center;\n"])));
 var variantColors = {

package/ui/Blocks/CommonGrid/hooks/useAddFilter.d.ts

@@ -1,5 +1,5 @@
 import { GridActionsType, ColumnDefinition } from '../types';
 
 type AddFilterRet = (value: any, column: ColumnDefinition, others?: any) => void;
-export declare const useAddFilter: (onChange: Required<GridActionsType>["addFilter"]) => AddFilterRet;
+export declare const useAddFilter: (onChange: Required<GridActionsType>['addFilter']) => AddFilterRet;
 export {};

package/ui/Blocks/CommonGrid/hooks/useColumnSizes.d.ts

@@ -9,5 +9,5 @@ type ReturnProps = {
     gridBoxRef: React.MutableRefObject<HTMLElement>;
     handleResizeDrag: (column: string, width: number) => void;
 };
-declare const useColumnSizes: (displayColumnsDefinitions: CommonGridProps["columnsDefinitions"], storeColumnsWidth: Required<GridSelectorsType>["columnsWidth"], storeColumnsWidthVariant: GridSelectorsType["columnsWidthVariant"], setColumnWidth: Required<GridActionsType>["setColumnWidth"], columnLayout: Required<CommonGridProps>["columnLayout"], minColumnWidth?: number) => ReturnProps;
+declare const useColumnSizes: (displayColumnsDefinitions: CommonGridProps['columnsDefinitions'], storeColumnsWidth: Required<GridSelectorsType>['columnsWidth'], storeColumnsWidthVariant: GridSelectorsType['columnsWidthVariant'], setColumnWidth: Required<GridActionsType>['setColumnWidth'], columnLayout: Required<CommonGridProps>['columnLayout'], minColumnWidth?: number) => ReturnProps;
 export default useColumnSizes;

package/ui/Blocks/CommonGrid/hooks/useEvent.d.ts

@@ -1,3 +1,3 @@
 type AnyFunction = (...args: any[]) => any;
-export declare const useEvent: <T extends AnyFunction>(callback?: T) => T;
+export declare const useEvent: <T extends AnyFunction>(callback?: T | undefined) => T;
 export {};

package/ui/Blocks/CommonGrid/hooks/useGridActionTrigger.d.ts

@@ -5,5 +5,5 @@ import { RowProps, UxState, ActionColumn, OnBatchActionFn } from '../types';
  * returns [subset of actions that are enabled, onSelect(value) - param1: selected action value]
  */
 type GridActionTriggerRet = [Required<ActionColumn>['actionOptions'], (value: any) => void];
-export declare const useGridActionTrigger: (rowsData: RowProps[], uxState: UxState, actionOptions?: ActionColumn["actionOptions"], onBatchAction?: OnBatchActionFn) => GridActionTriggerRet;
+export declare const useGridActionTrigger: (rowsData: RowProps[], uxState: UxState, actionOptions?: ActionColumn['actionOptions'], onBatchAction?: OnBatchActionFn) => GridActionTriggerRet;
 export {};

package/ui/Blocks/CommonGrid/hooks/useManageColumn.d.ts

@@ -11,7 +11,7 @@ declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }
     columnsConfigValues: string[];
     setColumnsConfigOptions: import('react').Dispatch<import('react').SetStateAction<{
         [x: string]: {
-            isHidden?: boolean;
+            isHidden?: boolean | undefined;
         };
     }>>;
     onConfirmForm: () => void;

package/ui/Blocks/CommonGrid/hooks/useRowsKeyControls.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 import { RowProps, UxState } from '../types';
 
-declare const useRowsKeyControls: (rowsData: RowProps[], uxState: UxState, onUxChange?: (uxKey: keyof UxState, uxValue: any) => void) => (e: React.KeyboardEvent<HTMLDivElement>) => void;
+declare const useRowsKeyControls: (rowsData: RowProps[], uxState: UxState, onUxChange?: ((uxKey: keyof UxState, uxValue: any) => void) | undefined) => (e: React.KeyboardEvent<HTMLDivElement>) => void;
 export default useRowsKeyControls;

package/ui/Blocks/CommonGrid/hooks/useToggleAllCheckbox.d.ts

@@ -5,5 +5,5 @@ import { RowProps, GridActionsType, UxState } from '../types';
  * returns [checked state, toggleAllHandler()] for checkbox
  */
 type ToggleAllCheckboxRet = [boolean, () => void];
-export declare const useToggleAllCheckbox: (rowsData?: RowProps[], uxState?: UxState, handleUxChange?: GridActionsType["handleUxChange"]) => ToggleAllCheckboxRet;
+export declare const useToggleAllCheckbox: (rowsData?: RowProps[], uxState?: UxState, handleUxChange?: GridActionsType['handleUxChange']) => ToggleAllCheckboxRet;
 export {};

package/ui/Blocks/CommonGrid/hooks/useUxReset.d.ts

@@ -1,4 +1,4 @@
 import { RowProps, GridActionsType, UxState } from '../types';
 
-declare const useUxReset: (rowsData: RowProps[], uxState: UxState, clearUxState: GridActionsType["clearUxState"]) => any;
+declare const useUxReset: (rowsData: RowProps[], uxState: UxState, clearUxState: GridActionsType['clearUxState']) => any;
 export default useUxReset;

package/ui/Blocks/CommonGrid/store/index.d.ts

@@ -31,7 +31,7 @@ export default _default;
 export declare const createActions: (gridName: string) => {
     init: (initProps?: InitProps) => Action;
     clearUxState: () => Action;
-    handleUxChange: (uxKey: keyof GridState["uxState"], uxValue: any) => Action;
+    handleUxChange: (uxKey: keyof GridState['uxState'], uxValue: any) => Action;
     openConfigForm: () => Action;
     closeConfigForm: () => Action;
     setColumnConfig: (columnConfig: ColumnConfig) => Action;
@@ -39,7 +39,7 @@ export declare const createActions: (gridName: string) => {
     setPresets: (presets: GridPresets) => Action;
     createPreset: (presetName: string, filters: Filtering) => Action;
     deletePreset: (presetName: string) => Action;
-    setColumnWidth: (columnsWidth: null | Record<string, number>, columnLayout: "normal" | "no-scroll" | "sticky") => Action;
+    setColumnWidth: (columnsWidth: null | Record<string, number>, columnLayout: 'normal' | 'no-scroll' | 'sticky') => Action;
     resetGrid: () => Action;
     setColumnsOrder: (columnsOrder: string[]) => Action;
     setRowsPerPage: (rowsPerPage: number) => Action;
@@ -51,16 +51,16 @@ export declare const createActions: (gridName: string) => {
     clearSettings: () => Action;
 };
 export declare const createSelectors: (gridName: string) => {
-    getUxState: (state: DefaultRootState) => GridState["uxState"];
-    isConfigFormOpen: (state: DefaultRootState) => GridState["isConfigFormOpen"];
-    getColumnConfig: (state: DefaultRootState) => GridState["columnConfig"];
-    getPage: (state: DefaultRootState) => GridState["page"];
-    getPresets: (state: DefaultRootState) => GridState["presets"];
-    getRowsPerPage: (state: DefaultRootState) => GridState["rowsPerPage"];
-    getFilter: (state: DefaultRootState) => GridState["filter"];
-    getSorting: (state: DefaultRootState) => GridState["sorting"];
-    getColumnsWidth: (state: DefaultRootState) => GridState["columnsWidth"];
-    getColumnsWidthVariant: (state: DefaultRootState) => GridState["columnsWidthVariant"];
-    getColumnsOrder: (state: DefaultRootState) => GridState["columnsOrder"];
+    getUxState: (state: DefaultRootState) => GridState['uxState'];
+    isConfigFormOpen: (state: DefaultRootState) => GridState['isConfigFormOpen'];
+    getColumnConfig: (state: DefaultRootState) => GridState['columnConfig'];
+    getPage: (state: DefaultRootState) => GridState['page'];
+    getPresets: (state: DefaultRootState) => GridState['presets'];
+    getRowsPerPage: (state: DefaultRootState) => GridState['rowsPerPage'];
+    getFilter: (state: DefaultRootState) => GridState['filter'];
+    getSorting: (state: DefaultRootState) => GridState['sorting'];
+    getColumnsWidth: (state: DefaultRootState) => GridState['columnsWidth'];
+    getColumnsWidthVariant: (state: DefaultRootState) => GridState['columnsWidthVariant'];
+    getColumnsOrder: (state: DefaultRootState) => GridState['columnsOrder'];
 };
-export declare const createFullSelector: (gridName: string) => ((state: DefaultRootState) => GridSelectorsType);
+export declare const createFullSelector: (gridName: string) => (state: DefaultRootState) => GridSelectorsType;

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

@@ -1,13 +1,14 @@
-export declare const BottomWrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+/// <reference types="react" />
+export declare const BottomWrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
     withPagination: boolean;
 }, "color">;
-export declare const ContentContainer: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
-export declare const CommonGridWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+export declare const ContentContainer: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const CommonGridWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
     withPagination: boolean;
 }, "color">;
-export declare const StyledButtonStrip: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const StyledButtonStrip: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
 export declare const CommonGridWithStyles: import('styled-components').StyledComponent<import('react').FC<import('./types').CommonGridProps & {
-    filters?: import('./types').FiltersConfig;
+    filters?: import('./types').FiltersConfig | undefined;
     handleDragEnd: (item: import('@dnd-kit/core').DragEndEvent) => void;
     displayColumnsDefinitions: import('./types').ColumnDefinition[];
     hasGroups: boolean;

package/ui/Blocks/CommonGrid/styles.js

@@ -6,7 +6,7 @@ import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight,
 import styled, { x } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 import CommonGrid from './CommonGrid';
-export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  bottom: 0px;\n  padding: ", ";\n  left: 0;\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"], ["\n  position: fixed;\n  z-index: 2;\n  bottom: 0px;\n  padding: ", ";\n  left: 0;\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"])), function (_a) {
+export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  padding: ", ";\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"], ["\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  padding: ", ";\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"])), function (_a) {
     var withPagination = _a.withPagination;
     return (withPagination ? '10px 0' : '0px');
 }, function (_a) {
@@ -14,24 +14,21 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
     return (withPagination ? gridFooterHeight : 0);
 });
 export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n  flex-grow: 1;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n  flex-grow: 1;\n  height: 100%;\n"])));
-export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  @media (min-width: 1024px) {\n    height: calc(100% - ", "px);\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  @media (min-width: 1024px) {\n    height: calc(100% - ", "px);\n  }\n"])), function (_a) {
-    var withPagination = _a.withPagination;
-    return (withPagination ? gridFooterHeight : 0);
-}, function (_a) {
+export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    display: block;\n    height: calc(100% - ", "px);\n    flex: unset;\n    min-height: unset;\n    overflow: visible;\n  }\n"], ["\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    display: block;\n    height: calc(100% - ", "px);\n    flex: unset;\n    min-height: unset;\n    overflow: visible;\n  }\n"])), function (_a) {
     var withPagination = _a.withPagination;
     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    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) {
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\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: neutral20;\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: neutral20;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  flex: 1;\n  min-height: 0;\n\n  @media (min-width: 1024px) {\n    flex: unset;\n    min-height: unset;\n    height: calc(100% - ", "px);\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    height: 100%;\n    overflow-y: 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-color: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid;\n      border-left-color: lightGray6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid;\n      border-right-color: lightGray6;\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  & .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: neutral20;\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: neutral20;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  flex: 1;\n  min-height: 0;\n\n  @media (min-width: 1024px) {\n    flex: unset;\n    min-height: unset;\n    height: calc(100% - ", "px);\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    height: 100%;\n    overflow-y: 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-color: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid;\n      border-left-color: lightGray6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid;\n      border-right-color: lightGray6;\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"])), th('fonts.primary'), gridRowHeight, function (_a) {
     var hasGroups = _a.hasGroups;
     return gridHeadHeight + (hasGroups ? gridFilterHeight : 0);
 }, th('colors.lightGray6'), function (_a) {
     var hasGroupsOrFilters = _a.hasGroupsOrFilters;
     return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
 }, th('fonts.primary'), function (_a) {
+    var withButtonStrip = _a.withButtonStrip;
+    return (withButtonStrip ? gridButtonStripHeight : 0);
+}, function (_a) {
     var theme = _a.theme;
     return theme.colors.white;
 });