@mailstep/design-system 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -62,7 +62,6 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
-    "chromatic": "^11.3.5",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-standard-with-typescript": "^34.0.1",

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.js

@@ -8,5 +8,5 @@ import { th } from '@xstyled/system';
 export var ControlButtonsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"])));
 export var Left = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-right: 10px;\n"], ["\n  display: flex;\n  margin-right: 10px;\n"])));
 export var Right = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var StyledColumnButton = styled(Button)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  right: 20px;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"], ["\n  position: sticky;\n  right: 20px;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"])), th('colors.blue2'));
+export var StyledColumnButton = styled(Button)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  right: 20px;\n  z-index: 3;\n  margin-left: 8px;\n\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"], ["\n  position: sticky;\n  right: 20px;\n  z-index: 3;\n  margin-left: 8px;\n\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"])), th('colors.blue2'));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -51,19 +51,17 @@ var createEqualComparators = [
     { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
     { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' }
 ];
-var normalizeValue = function (number, decimals) {
-    var normalized = String(number)
-        .replace(',', '.')
-        .replace(/[^0-9.]/g, '');
-    if (!normalized) {
-        return number;
+var normalizeValue = function (number, isFloat, decimals) {
+    var normalized = String(number).replace(',', '.').replace(/[^0-9.]/g, '');
+    if (isFloat || !normalized) {
+        return normalized;
     }
     return !decimals ? parseInt(normalized, 10) : (parseFloat(normalized) || 0).toFixed(decimals).substr(0, String(number).length);
 };
 var NumberRange = function (props) {
     var _a;
     var numberComparators = createNumberComparators();
-    var name = props.name, _b = props.value, value = _b === void 0 ? {} : _b, label = props.label, onChange = props.onChange, decimals = props.decimals, className = props.className, _c = props.OverlayComponent, OverlayComponent = _c === void 0 ? OverlayComponentDefault : _c, comparators = props.comparators, defaultComparator = props.defaultComparator, isEqual = props.isEqual, rest = __rest(props, ["name", "value", "label", "onChange", "decimals", "className", "OverlayComponent", "comparators", "defaultComparator", "isEqual"]);
+    var name = props.name, _b = props.value, value = _b === void 0 ? {} : _b, label = props.label, onChange = props.onChange, decimals = props.decimals, isFloat = props.isFloat, className = props.className, _c = props.OverlayComponent, OverlayComponent = _c === void 0 ? OverlayComponentDefault : _c, comparators = props.comparators, defaultComparator = props.defaultComparator, isEqual = props.isEqual, rest = __rest(props, ["name", "value", "label", "onChange", "decimals", "isFloat", "className", "OverlayComponent", "comparators", "defaultComparator", "isEqual"]);
     var _d = useState(false), isOpen = _d[0], setOpen = _d[1];
     var comparator = (value === null || value === void 0 ? void 0 : value.comparator) ||
         defaultComparator ||
@@ -86,12 +84,12 @@ var NumberRange = function (props) {
             }
             // two values for between comparation
             if (values.length === 2) {
-                var normalizedValues = values.map(function (value) { return normalizeValue(value, 0); });
+                var normalizedValues = values.map(function (value) { return normalizeValue(value, false, 0); });
                 onChange({ comparator: comparator, value: normalizedValues.join(',') });
                 return;
             }
         }
-        var number = normalizeValue(event.target.value, decimals);
+        var number = normalizeValue(event.target.value, isFloat, decimals);
         var isValid = number || number === 0;
         onChange({ comparator: comparator, value: isValid ? number : '' });
     });

package/ui/Blocks/CommonGrid/components/GridModals/index.js

@@ -23,5 +23,5 @@ export var GridModals = function (_a) {
         gridName: gridName,
         setGridPresets: setGridPresets
     }), fileInputRef = _e.fileInputRef, handleImportPresets = _e.handleImportPresets, handleExportPresets = _e.handleExportPresets, handleImportButtonClick = _e.handleImportButtonClick;
-    return (_jsxs(_Fragment, { children: [_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, isShown: manageColumnFormVisible, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd }) }), _jsx(Modal, { isShown: isPresetsModalOpen, title: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }), onClose: onClosePresetsModal, width: "narrow", children: _jsx(PresetsModalBody, { onOpenCreatePresetModal: onOpenCreatePresetModal, gridPresets: gridPresets, handleSelectPreset: handleSelectPreset, handleOpenDeletePresetModal: handleOpenDeletePresetModal, selectedPresetName: selectedPresetName, handleExportPresets: handleExportPresets, handleImportPresets: handleImportPresets, handleImportButtonClick: handleImportButtonClick, fileInputRef: fileInputRef, filters: gridSelectors.filter }) }), _jsx(Modal, { isShown: isCreatePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Create preset" }), onCancel: handleCloseCreatePresetModal, onConfirm: handleCreatePreset, isConfirmDisabled: !presetName, width: "narrow", children: _jsx(Input, { type: "text", onChange: handleChangePresetName, value: presetName, label: _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Preset name" }) }) }), _jsx(Modal, { isShown: isDeletePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), onCancel: onCloseDeletePresetModal, onConfirm: handleDeletePreset, isConfirmDisabled: !presetNameToDelete, width: "narrow", children: _jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }), " \"", presetNameToDelete, "\" ?"] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, isShown: manageColumnFormVisible, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd }) }), _jsx(Modal, { isShown: isPresetsModalOpen, title: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }), onClose: onClosePresetsModal, width: "narrow", children: _jsx(PresetsModalBody, { onOpenCreatePresetModal: onOpenCreatePresetModal, gridPresets: gridPresets, handleSelectPreset: handleSelectPreset, handleOpenDeletePresetModal: handleOpenDeletePresetModal, selectedPresetName: selectedPresetName, handleExportPresets: handleExportPresets, handleImportPresets: handleImportPresets, handleImportButtonClick: handleImportButtonClick, fileInputRef: fileInputRef, filters: gridSelectors.filter }) }), _jsx(Modal, { isShown: isCreatePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.createNewPreset.title", message: "Create new preset" }), onCancel: handleCloseCreatePresetModal, onConfirm: handleCreatePreset, isConfirmDisabled: !presetName, width: "narrow", children: _jsx(Input, { type: "text", onChange: handleChangePresetName, value: presetName, label: _jsx(Trans, { id: "dataGrid.presetName.title", message: "Preset name" }) }) }), _jsx(Modal, { isShown: isDeletePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), onCancel: onCloseDeletePresetModal, onConfirm: handleDeletePreset, isConfirmDisabled: !presetNameToDelete, width: "narrow", children: _jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }), " \"", presetNameToDelete, "\" ?"] }) })] }));
 };

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -35,7 +35,11 @@ var comparators = {
         { label: 'yellow', value: 'Yell' },
         { label: 'blue', value: 'Blue' }
     ],
-    number: [{ label: 'between', value: 'between' }, { label: 'gt', value: 'greater' }]
+    number: [
+        { label: 'eq', value: 'equal' },
+        { label: 'gt', value: 'greater' },
+        { label: 'between', value: 'between' }
+    ]
 };
 export default {
     title: 'Blocks/CommonGrid',

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -41,6 +41,17 @@ export var columnDefinitions = [
         filteringType: 'number',
         sorting: true,
     },
+    {
+        name: 'numberFloatColumn',
+        title: 'Number Float Column',
+        flexBasis: 160,
+        filtering: true,
+        filteringType: 'number',
+        sorting: true,
+        filterExtraProps: {
+            isFloat: true,
+        },
+    },
     {
         name: 'dateColumn',
         group: 'group1',

package/ui/Blocks/CommonGrid/styles.js

@@ -15,7 +15,7 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
 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"], ["\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"])));
 export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
 export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: 75px;\n  flex-wrap: wrap;\n  z-index: 2;\n"], ["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: 75px;\n  flex-wrap: wrap;\n  z-index: 2;\n"])));
-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: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\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      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      overflow-y: auto;\n      width: 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: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\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    max-width: 88px;\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: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\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      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      overflow-y: auto;\n      width: 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: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\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    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), th('fonts.primary'), th('colors.lightGray6'), th('fonts.primary'), 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: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\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      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      overflow-y: auto;\n      width: 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: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\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    max-width: 88px;\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: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\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      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      overflow-y: auto;\n      width: 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: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\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    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), th('fonts.primary'), th('colors.lightGray6'), th('fonts.primary'), function (_a) {
     var theme = _a.theme;
     return theme.colors.white;
 }, function (_a) {

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

@@ -105,7 +105,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
     systemFilter?: string;
     title?: string | JSX.Element;
     filtering?: boolean;
-    filteringType?: 'number' | 'text' | 'date' | 'flag';
+    filteringType?: 'number' | 'text' | 'date' | 'flag' | 'options';
     disableRowTouch?: boolean;
     filterExtraProps?: {
         isMulti?: boolean;

package/ui/index.es.js

@@ -15020,58 +15020,59 @@ const Mse = G.div`
   }),
   value: "neq",
   icon: "notEqual"
-}], $y = (e, t) => {
-  const r = String(e).replace(",", ".").replace(/[^0-9.]/g, "");
-  return r ? t ? (parseFloat(r) || 0).toFixed(t).substr(0, String(e).length) : parseInt(r, 10) : e;
+}], $y = (e, t, r) => {
+  const n = String(e).replace(",", ".").replace(/[^0-9.]/g, "");
+  return t || !n ? n : r ? (parseFloat(n) || 0).toFixed(r).substr(0, String(e).length) : parseInt(n, 10);
 }, ple = (e) => {
-  var B;
+  var R;
   const t = fle(), {
     name: r,
     value: n = {},
     label: i,
     onChange: a,
     decimals: o,
-    className: s,
-    OverlayComponent: l = dle,
-    comparators: u,
-    defaultComparator: f,
-    isEqual: A,
-    ...h
-  } = e, [g, m] = Ee(!1), b = (n == null ? void 0 : n.comparator) || f || ((B = u == null ? void 0 : u[0]) == null ? void 0 : B.value) || t[0].value, y = u || (A ? Ale : t), x = n != null && n.value || (n == null ? void 0 : n.value) === 0 ? n.value : "", I = pe(() => m(!1), []), E = po({
-    onClose: I
-  }), O = pe(() => m(!g), [g, m]), T = Nc((R) => {
-    if (b === "between") {
-      const N = String(R.target.value).split(",");
-      if (N.length > 2) {
+    isFloat: s,
+    className: l,
+    OverlayComponent: u = dle,
+    comparators: f,
+    defaultComparator: A,
+    isEqual: h,
+    ...g
+  } = e, [m, b] = Ee(!1), w = (n == null ? void 0 : n.comparator) || A || ((R = f == null ? void 0 : f[0]) == null ? void 0 : R.value) || t[0].value, x = f || (h ? Ale : t), I = n != null && n.value || (n == null ? void 0 : n.value) === 0 ? n.value : "", E = pe(() => b(!1), []), O = po({
+    onClose: E
+  }), T = pe(() => b(!m), [m, b]), M = Nc((F) => {
+    if (w === "between") {
+      const L = String(F.target.value).split(",");
+      if (L.length > 2) {
         a({
-          comparator: b,
+          comparator: w,
           value: ""
         });
         return;
       }
-      if (N.length === 2) {
-        const L = N.map((J) => $y(J, 0));
+      if (L.length === 2) {
+        const J = L.map((_) => $y(_, !1, 0));
         a({
-          comparator: b,
-          value: L.join(",")
+          comparator: w,
+          value: J.join(",")
         });
         return;
       }
     }
-    const F = $y(R.target.value, o);
+    const P = $y(F.target.value, s, o);
     a({
-      comparator: b,
-      value: F || F === 0 ? F : ""
+      comparator: w,
+      value: P || P === 0 ? P : ""
     });
-  }), M = Nc((R) => {
+  }), B = Nc((F) => {
     a({
-      comparator: R.value,
-      value: x
+      comparator: F.value,
+      value: I
     });
   });
-  return /* @__PURE__ */ p.jsxs("div", { ref: E, children: [
-    /* @__PURE__ */ p.jsx(wa, { name: r, value: x, label: i, "data-cy": `${r}Inp`, onChange: T, iconOnClick: O, icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: s, autoComplete: "off", ...h }),
-    g && /* @__PURE__ */ p.jsx(l, { children: /* @__PURE__ */ p.jsx(zO, { list: y, selected: b, onClick: M }) })
+  return /* @__PURE__ */ p.jsxs("div", { ref: O, children: [
+    /* @__PURE__ */ p.jsx(wa, { name: r, value: I, label: i, "data-cy": `${r}Inp`, onChange: M, iconOnClick: T, icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: l, autoComplete: "off", ...g }),
+    m && /* @__PURE__ */ p.jsx(u, { children: /* @__PURE__ */ p.jsx(zO, { list: x, selected: w, onClick: B }) })
   ] });
 }, hle = ({
   children: e
@@ -31282,6 +31283,9 @@ const z2 = ({
 `, Q4e = G(gr)`
   position: sticky;
   right: 20px;
+  z-index: 3;
+  margin-left: 8px;
+
   > span > svg {
     stroke: ${V("colors.blue2")};
     width: 18px;
@@ -38130,7 +38134,7 @@ const d9e = ({
   return /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
     /* @__PURE__ */ p.jsx(pc, { title: /* @__PURE__ */ p.jsx(wt, { id: "manageColumn.title", message: "Manage columns" }), onClose: t, onCancel: t, onExtraAction: r, onConfirm: n, isShown: e, width: "auto", minWidth: "350px", hasFooter: !0, extraActionLabel: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: /* @__PURE__ */ p.jsx(wt, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: /* @__PURE__ */ p.jsx(wt, { id: "form.buttonConfirm", message: "Confirm" }), children: /* @__PURE__ */ p.jsx(A9e, { columns: i, columnsConfigValues: a, setColumnsConfigOptions: o, handleDragEnd: s }) }),
     /* @__PURE__ */ p.jsx(pc, { isShown: A, title: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.presets.title", message: "Presets" }), onClose: h, width: "narrow", children: /* @__PURE__ */ p.jsx(p9e, { onOpenCreatePresetModal: E, gridPresets: b, handleSelectPreset: y, handleOpenDeletePresetModal: B, selectedPresetName: g, handleExportPresets: _, handleImportPresets: J, handleImportButtonClick: Z, fileInputRef: L, filters: u.filter }) }),
-    /* @__PURE__ */ p.jsx(pc, { isShown: x, title: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.createPreset.title", message: "Create preset" }), onCancel: I, onConfirm: O, isConfirmDisabled: !T, width: "narrow", children: /* @__PURE__ */ p.jsx(wa, { type: "text", onChange: M, value: T, label: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.createPreset.title", message: "Preset name" }) }) }),
+    /* @__PURE__ */ p.jsx(pc, { isShown: x, title: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.createNewPreset.title", message: "Create new preset" }), onCancel: I, onConfirm: O, isConfirmDisabled: !T, width: "narrow", children: /* @__PURE__ */ p.jsx(wa, { type: "text", onChange: M, value: T, label: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.presetName.title", message: "Preset name" }) }) }),
     /* @__PURE__ */ p.jsx(pc, { isShown: N, title: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), onCancel: F, onConfirm: R, isConfirmDisabled: !P, width: "narrow", children: /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
       /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }),
       ' "',
@@ -43666,15 +43670,6 @@ const Kke = (e = {}, t) => xye(e, (r) => {
     .sticky-left {
       border-right: 1px solid #dfe1e6;
     }
-
-    &.selected,
-    &.selected > .sticky {
-      background-color: #fdf4f3;
-    }
-
-    :hover {
-      background-color: #fdf4f3;
-    }
   }
 
   @media print {