@mailstep/design-system 0.6.88 → 0.6.89-beta.0

package/package.json

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

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

@@ -5,5 +5,5 @@ type Props = CommonGridProps & {
     handleDragEnd: (item: DropResult) => void;
     displayColumnsDefinitions: ColumnDefinition[];
 };
-declare const CommonGrid: ({ filters, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: Props) => JSX.Element;
+declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: Props) => JSX.Element;
 export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -36,7 +36,7 @@ var defaultVoidFunction = function () {
 var defaultUxState = initialState.uxState;
 var defaultColumnsWidth = {};
 var CommonGrid = function (_a) {
-    var filters = _a.filters, handleDragEnd = _a.handleDragEnd, 
+    var filters = _a.filters, comparators = _a.comparators, handleDragEnd = _a.handleDragEnd, 
     // redux props
     gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, 
     // input props
@@ -63,7 +63,7 @@ var CommonGrid = function (_a) {
         gridBoxRef.current = node;
         !!gridRef && (gridRef.current = node);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), width: window.innerWidth, children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), width: window.innerWidth, children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, comparators: comparators, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -39,7 +39,7 @@ import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer,
 import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils';
 var CommonGridContainer = function (props) {
     var _a;
-    var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, filters = props.filters, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "filters"]);
+    var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
     var _d = useState(false), displayManageColumnButton = _d[0], setDisplayManageColumnButton = _d[1];
     var _e = useGetGridHeight(), gridHeight = _e.gridHeight, gridRef = _e.gridRef, paginationRef = _e.paginationRef;
@@ -54,7 +54,7 @@ var CommonGridContainer = function (props) {
         }
     }, [gridHeight, gridActions, queryRowsParam]);
     var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
-    var mergedFilters = useMemo(function () { return getFilters(optimizeFilters, filters); }, [optimizeFilters, filters]);
+    var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
     var columns = modifiedPassDownProps.columnsDefinitions;
     var _f = useModal(), openManageColumnForm = _f.onOpen, manageColumnFormVisible = _f.isOpen, onClose = _f.onClose;
     var _g = useManageColumn({
@@ -63,6 +63,6 @@ var CommonGridContainer = function (props) {
         gridSelectors: gridSelectors,
         onClose: onClose
     }), columnsConfigValues = _g.columnsConfigValues, setColumnsConfigOptions = _g.setColumnsConfigOptions, onConfirmForm = _g.onConfirmForm, resetColumnConfig = _g.resetColumnConfig, handleDragEnd = _g.handleDragEnd, onCloseForm = _g.onCloseForm, displayColumnsDefinitions = _g.displayColumnsDefinitions, manageColumnsFormDefinitions = _g.manageColumnsFormDefinitions;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: mergedFilters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: mergedFilters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, 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(true) }) }))] }));
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, 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(true) }) }))] }));
 };
 export default CommonGridContainer;

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

@@ -1,4 +1,4 @@
-import { ColumnDefinition, GridActionsType, FiltersConfig, Group } from '../types';
+import { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, Group } from '../types';
 type Props = {
     onChange: Required<GridActionsType>['addFilter'];
     value?: any;
@@ -6,6 +6,7 @@ type Props = {
     displayColumnWidth: number;
     filters?: FiltersConfig;
     group?: Group;
+    comparators?: CustomComparators;
 };
-declare const ColumnFilterCell: ({ onChange, value, displayColumnWidth, filters, column: columnDefinition, group, }: Props) => JSX.Element;
+declare const ColumnFilterCell: ({ onChange, value, displayColumnWidth, filters, column: columnDefinition, group, comparators, }: Props) => JSX.Element;
 export default ColumnFilterCell;

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

@@ -18,7 +18,7 @@ import { createFilterType, getStickyCollClassNames } from '../utils';
 import { getCellSizeProps, getGroupClassNames } from '../utils';
 import OverlayComponent from './FilterDropdown';
 var ColumnFilterCell = function (_a) {
-    var onChange = _a.onChange, value = _a.value, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group;
+    var onChange = _a.onChange, value = _a.value, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group, comparators = _a.comparators;
     var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
     var handleAddFilter = useAddFilter(onChange);
     var handleChange = React.useCallback(function (event) {
@@ -30,12 +30,12 @@ var ColumnFilterCell = function (_a) {
     }
     var filterType = createFilterType(columnDefinition);
     var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
+    var defaultComparators = comparators === null || comparators === void 0 ? void 0 : comparators[filterType];
     var RenderComponent = filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent;
     if (!RenderComponent) {
         console.error("ERROR, using unknown filter type ".concat(filterType));
         return (_jsx(x.div, { children: _jsx("span", { children: "".concat(filterType, " filter") }) }));
     }
-    var passProps = __assign(__assign(__assign({}, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps), columnDefinition.filterExtraProps), (filterType == 'options' && { options: columnDefinition.filterOptions }));
-    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { className: "test", children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, OverlayComponent: OverlayComponent }, passProps)) }) })));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, OverlayComponent: OverlayComponent, comparators: defaultComparators }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }))) }) })));
 };
 export default ColumnFilterCell;

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

@@ -1,4 +1,4 @@
-import { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, FiltersConfig, UxState, RowProps } from '../types';
+import { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, CustomComparators, FiltersConfig, UxState, RowProps } from '../types';
 type Props = {
     columns: ColumnDefinitionType[];
     actionColumn?: ActionColumn;
@@ -6,10 +6,11 @@ type Props = {
     filterValues?: Settings['filter'];
     displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
     filters?: FiltersConfig;
+    comparators?: CustomComparators;
     groups?: Group[];
     handleUxChange?: GridActionsType['handleUxChange'];
     rowsData: RowProps[];
     uxState: UxState;
 };
-declare const FilterRow: ({ columns, groups, actionColumn, onChange, filterValues, displayColumnsWidth, filters, handleUxChange, rowsData, uxState, }: Props) => JSX.Element;
+declare const FilterRow: ({ columns, groups, actionColumn, onChange, filterValues, displayColumnsWidth, filters, comparators, handleUxChange, rowsData, uxState, }: Props) => JSX.Element;
 export default FilterRow;

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

@@ -20,7 +20,7 @@ import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
 import Checkbox from '../../../Forms/Checkbox';
 var FilterRow = function (_a) {
     var _b, _c;
-    var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _d = _a.filterValues, filterValues = _d === void 0 ? {} : _d, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
+    var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _d = _a.filterValues, filterValues = _d === void 0 ? {} : _d, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, comparators = _a.comparators, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
     var handleOnChange = throttle(onChange, 500);
     var actionColumnStyle = React.useMemo(function () {
         return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
@@ -29,6 +29,6 @@ var FilterRow = function (_a) {
     var displayCheckbox = (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.checkAllPosition) === 'top' && (((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes));
     var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
     var rowsNumberLabel = (_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _c !== void 0 ? _c : '#';
-    return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && (_jsx(Cell, { className: "cell", style: actionColumnStyle }, 'actions')), columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
+    return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && (_jsx(Cell, { className: "cell", style: actionColumnStyle }, 'actions')), columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, comparators: comparators, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
 };
 export default FilterRow;

package/ui/Blocks/CommonGrid/components/{DatePickerRange → Filters/DatePickerRange}/DatePickerRange.d.ts

@@ -1,4 +1,4 @@
-import { FilterComponentProps } from '../../types';
+import { FilterComponentProps } from '../../../types';
 type InitialView = 'past' | 'future';
 type DatePickerRangeProps = FilterComponentProps<Date[]> & {
     filterTime?: number;

package/ui/Blocks/CommonGrid/components/{DatePickerRange → Filters/DatePickerRange}/DatePickerRange.js

@@ -29,9 +29,9 @@ import React, { useState, useCallback, useMemo } from 'react';
 import { DateTime } from 'luxon';
 import styled from '@xstyled/styled-components';
 import { sameDate } from './utils/sameDate';
-import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
-import DatePicker from '../../../../Elements/DatePicker';
-import Input from '../../../../Forms/Input';
+import { useClickOutside } from '../../../../Modal/hooks/useClickOutside';
+import DatePicker from '../../../../../Elements/DatePicker';
+import Input from '../../../../../Forms/Input';
 import { i18n } from '@lingui/core';
 var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"
     // User readable date range.

package/ui/Blocks/CommonGrid/components/{GridSelect → Filters/GridSelect}/GridSelect.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDefinition } from '../../types';
+import { ColumnDefinition } from '../../../types';
 type Props = {
     onChange: (data: any) => void;
     isMulti?: boolean;

package/ui/Blocks/CommonGrid/components/{GridSelect → Filters/GridSelect}/GridSelect.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import MultiSelect from '../../../../Elements/MultiSelect';
-import SingleSelect from '../../../../Elements/SingleSelect';
+import MultiSelect from '../../../../../Elements/MultiSelect';
+import SingleSelect from '../../../../../Elements/SingleSelect';
 import isArray from 'lodash/isArray';
 var emptyValue = [];
 var SelectFilter = function (_a) {

package/ui/Blocks/CommonGrid/components/{NumberRange → Filters/NumberRange}/NumberRange.js

@@ -22,10 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { Input } from '../../../../Forms/Input/Input';
-import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
-import { useEvent } from '../../hooks/useEvent';
-import IconList from '../IconList';
+import { Input } from '../../../../../Forms/Input/Input';
+import { useClickOutside } from '../../../../Modal/hooks/useClickOutside';
+import { useEvent } from '../../../hooks/useEvent';
+import IconList from '../../IconList';
 import { i18n } from '@lingui/core';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;

package/ui/Blocks/CommonGrid/components/{NumberRange → Filters/NumberRange}/types.d.ts

@@ -1,4 +1,4 @@
-import { Comparator, FilterComponentProps } from '../../types';
+import { Comparator, FilterComponentProps } from '../../../types';
 export type ComparatorValue = 'eq' | 'neq' | 'lt' | 'lte' | 'gt' | 'gte';
 export type NumberRangeValue = {
     comparator?: ComparatorValue;

package/ui/Blocks/CommonGrid/components/{TextRange → Filters/TextRange}/TextRange.js

@@ -22,10 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { Input } from '../../../../Forms/Input/Input';
-import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
-import { useEvent } from '../../hooks/useEvent';
-import IconList from '../IconList/IconList';
+import { Input } from '../../../../../Forms/Input/Input';
+import { useClickOutside } from '../../../../Modal/hooks/useClickOutside';
+import { useEvent } from '../../../hooks/useEvent';
+import IconList from '../../IconList/IconList';
 import { i18n } from '@lingui/core';
 import { Trans } from '@lingui/react';
 var OverlayComponentDefault = function (_a) {
@@ -57,7 +57,9 @@ var validations = {
 };
 var TextRange = function (props) {
     var _a;
-    var name = props.name, _b = props.value, value = _b === void 0 ? {} : _b, label = props.label, onChange = props.onChange, className = props.className, _c = props.OverlayComponent, OverlayComponent = _c === void 0 ? OverlayComponentDefault : _c, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, comparators = props.comparators, validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "comparators", "validation"]);
+    var name = props.name, _b = props.value, value = _b === void 0 ? {} : _b, label = props.label, onChange = props.onChange, className = props.className, _c = props.OverlayComponent, OverlayComponent = _c === void 0 ? OverlayComponentDefault : _c, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, // from filterExtraProps
+    comparators = props.comparators, // from filterExtraProps or customComparators
+    validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "comparators", "validation"]);
     var eqOnlyTxt = i18n._({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
     var _d = useState(false), isOpen = _d[0], setOpen = _d[1];
     var textComparators = createTextComparators();

package/ui/Blocks/CommonGrid/components/{TextRange → Filters/TextRange}/types.d.ts

@@ -1,4 +1,4 @@
-import { FilterComponentProps, Comparator } from '../../types';
+import { FilterComponentProps, Comparator } from '../../../types';
 export type TextRangeComparator = 'like' | 'notLike' | 'eq' | 'neq' | 'startsWith' | 'endsWith' | 'contains';
 export type TextRangeValue = {
     comparator?: TextRangeComparator;

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

@@ -30,11 +30,14 @@ var extraControlButtons = [
         onClick: alert
     }
 ];
+var comparators = {
+    text: [{ label: 'yellow', value: 'Yell' }, { label: 'blue', value: 'Blue' }]
+};
 export default {
     title: 'Blocks/CommonGrid',
     decorators: [withRedux]
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, quickFilter: "productSku", extraControlButtons: extraControlButtons, confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, quickFilter: "productSku", extraControlButtons: extraControlButtons, comparators: comparators })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };

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

@@ -5,7 +5,7 @@ export declare const BottomWrapper: import("styled-components").StyledComponent<
 export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
 export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
 export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: import("./types").CommonGridProps & {
+export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: import("./types").CommonGridProps & {
     filters?: import("./types").FiltersConfig | undefined;
     handleDragEnd: (item: import("react-beautiful-dnd").DropResult) => void;
     displayColumnsDefinitions: import("./types").ColumnDefinition[];

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

@@ -57,6 +57,9 @@ export type ComponentsProps = {
     Paginator: React.ComponentType<PaginatorProps>;
     ColumnTitle?: ColumnTitleComponentType;
 };
+export type CustomComparators = {
+    [name: string]: Comparator[];
+};
 export type FiltersConfig = {
     [name: string]: {
         CellComponent: React.ComponentType<FilterComponentProps<any>>;
@@ -252,7 +255,6 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     totalRowsCount?: number;
     allowRowSelect?: boolean;
     allowRowSelectOnAction?: boolean;
-    filters?: FiltersConfig;
     onRowAction?: (id: string, field: string, value: any, rowData?: RowProps) => void;
     onRowEditClick?: (id: string, props: TData) => void;
     onRowReadClick?: (id: string, props: TData) => void;
@@ -269,6 +271,7 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     perPageOptions?: number[];
     floatingButtonProps?: FloatingButtonProps;
     editReadPosition?: EditReadPosition;
+    comparators?: CustomComparators;
 };
 export declare enum EditReadPosition {
     Left = "left",

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

@@ -17,5 +17,5 @@ export declare const getGroupClassNames: (group?: Group) => string;
 export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;
 export declare const GRID_MIN_ROWS = 6;
 export declare const rowHeight = 40;
-export declare const getFilters: (optimizeFilters: boolean, filters?: FiltersConfig) => FiltersConfig;
+export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;
 export declare const checksColumnsOrder: (colsOrder: string[], columnsDefinitions: ColumnDefinition[]) => void;

package/ui/Blocks/CommonGrid/utils/index.js

@@ -1,8 +1,8 @@
-import NumberRange from '../components/NumberRange';
-import TextRange from '../components/TextRange';
-import DatePickerRange from '../components/DatePickerRange';
-import BooleanSelect from '../components/BooleanSelect';
-import GridSelect from '../components/GridSelect';
+import NumberRange from '../components/Filters/NumberRange';
+import TextRange from '../components/Filters/TextRange';
+import DatePickerRange from '../components/Filters/DatePickerRange';
+import BooleanSelect from '../components/Filters/BooleanSelect';
+import GridSelect from '../components/Filters/GridSelect';
 var isDefined = function (val) { return typeof val !== 'undefined'; };
 export var getActionCellSizeProps = function (column) {
     return {
@@ -68,18 +68,18 @@ export var getStickyCollClassNames = function (sticky, stickTo) {
 };
 export var GRID_MIN_ROWS = 6;
 export var rowHeight = 40;
-export var getFilters = function (optimizeFilters, filters) {
-    var mergedFilters = {
-        number: (filters === null || filters === void 0 ? void 0 : filters.number) || { CellComponent: NumberRange },
-        text: (filters === null || filters === void 0 ? void 0 : filters.text) || { CellComponent: TextRange },
-        date: (filters === null || filters === void 0 ? void 0 : filters.date) || { CellComponent: DatePickerRange },
-        flag: (filters === null || filters === void 0 ? void 0 : filters.flag) || { CellComponent: BooleanSelect },
-        options: (filters === null || filters === void 0 ? void 0 : filters.options) || { CellComponent: GridSelect },
+export var getFilters = function (optimizeFilters) {
+    var filters = {
+        number: { CellComponent: NumberRange },
+        text: { CellComponent: TextRange },
+        date: { CellComponent: DatePickerRange },
+        flag: { CellComponent: BooleanSelect },
+        options: { CellComponent: GridSelect },
     };
     if (optimizeFilters) {
-        mergedFilters.text.defaultExtraProps = { defaultComparator: 'eq' };
+        filters.text.defaultExtraProps = { defaultComparator: 'eq' };
     }
-    return mergedFilters;
+    return filters;
 };
 export var checksColumnsOrder = function (colsOrder, columnsDefinitions) {
     var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });