@mailstep/design-system 0.5.0-beta.19 → 0.5.0-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.5.0-beta.19",
+  "version": "0.5.0-beta.20",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -30,8 +30,6 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/cli": "3.17.2",
-    "@lingui/macro": "3.17.2",
     "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-controls": "7.6.8",
@@ -86,14 +84,12 @@
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.0.4",
-    "vite": "^4.4.5",
+    "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "^1.0.0",
     "webpack": "^5.82.1"
   },
   "peerDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-typescript": "^7.23.3",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
@@ -101,12 +97,10 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/cli": "3.17.2",
-    "@lingui/macro": "3.17.2",
     "@lingui/react": "3.17.2",
+    "@lingui/core": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
-    "babel-loader": "^9.1.3",
     "babel-plugin-macros": "^3.1.0",
     "immer": "9.0.7",
     "lodash": "^4.17.21",

package/ui/Blocks/CommonGrid/StandardButtons.js

@@ -3,6 +3,7 @@ import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import Select from '../../Elements/Select';
 import ButtonMore from './components/ButtonMore/ButtonMore';
+import { i18n } from '@lingui/core';
 export var getCreateButton = function (onCreate, canCreate, disabled) { return ({
     label: _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }),
     style: 'primary',
@@ -42,7 +43,7 @@ export var getEshopSelect = function (eshopOptions, selectedEshop, onChange, isC
     if (eshopOptions.length > 1) {
         eshops.push({
             position: 'top-right',
-            node: (_jsx(x.div, { w: "200px", "data-cy": "eshopSelect", children: _jsx(Select, { name: "eshop", options: eshopOptions, value: selectedEshop, onChange: onChange, isSearchable: false, isClearable: isClearable, disabled: !eshopOptions.length, placeholder: '1' }) })),
+            node: (_jsx(x.div, { w: "200px", "data-cy": "eshopSelect", children: _jsx(Select, { name: "eshop", options: eshopOptions, value: selectedEshop, onChange: onChange, isSearchable: false, isClearable: isClearable, disabled: !eshopOptions.length, placeholder: i18n._({ id: 'products.eshopFilterPlaceholder', message: 'Select eshop...' }) }) })),
         });
     }
     return eshops;

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

@@ -10,6 +10,7 @@ import { useGridActionTrigger, useToggleAllCheckbox } from '../../utils/public';
 import { useModal } from '../../../Modal/hooks/useModal';
 import { Button } from '../../../../Elements/Button';
 import ButtonMore from '../ButtonMore/ButtonMore';
+import { i18n } from '@lingui/core';
 var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"])));
 var ActionsWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"], ["\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"])));
 var StyledText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"])));
@@ -42,7 +43,11 @@ var ActionHead = function (_a) {
         return [];
     }, [actionColumn, onSubmit]);
     var canExport = typeof onExport === 'function';
-    return (_jsx(Wrap, { children: checkedRowsCount > 0 && (_jsx(ActionsWrap, { children: _jsxs(ContentWrap, { children: [_jsx(StyledText, { children: _jsx(Trans, { id: "dataGrid.checkedRowsCount", message: "Selected {checkedRowsCount} items", values: { checkedRowsCount: checkedRowsCount } }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondaryLg", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), canExport && (_jsx(Button, { type: "button", onClick: onExportClick, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
+    return (_jsx(Wrap, { children: checkedRowsCount > 0 && (_jsx(ActionsWrap, { children: _jsxs(ContentWrap, { children: [_jsx(StyledText, { children: i18n._({
+                            id: 'dataGrid.checkedRowsCount',
+                            message: "Selected {checkedRowsCount} items",
+                            values: { checkedRowsCount: checkedRowsCount },
+                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondaryLg", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), canExport && (_jsx(Button, { type: "button", onClick: onExportClick, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
 };
 export default ActionHead;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -23,11 +23,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import GridSelect from '../GridSelect';
-import { Trans } from '@lingui/react';
+import { i18n } from '@lingui/core';
 var getFlagOptions = function () { return [
-    { value: '', label: _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.all", message: "All" }) },
-    { value: '1', label: _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.yes", message: "Yes" }) },
-    { value: '0', label: _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.no", message: "No" }) },
+    { value: '', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.all', message: 'All' }) },
+    { value: '1', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.yes', message: 'Yes' }) },
+    { value: '0', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.no', message: 'No' }) },
 ]; };
 var SelectFilter = function (_a) {
     var restProps = __rest(_a, []);

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="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, {
@@ -8,7 +7,7 @@ export declare const ListItemIcon: import("styled-components").StyledComponent<"
 type Item = {
     value: string;
     icon: string;
-    label: string | JSX.Element;
+    label: string;
 };
 type IconListProps = {
     list: Item[];

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

@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react';
 import { x } from '@xstyled/styled-components';
 import { ActionRow } from './components/ActionRow';
 import { Input } from '../../../../Forms/Input/Input';
+import { i18n } from '@lingui/core';
 var ManageColumnForm = function (_a) {
     var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions;
     var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
@@ -12,9 +13,7 @@ var ManageColumnForm = function (_a) {
     var clear = useCallback(function () {
         setSearchedValue('');
     }, [setSearchedValue]);
-    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, 
-                // placeholder={<Trans id="manageColumn.searchPlaceholder" message="Find column..." />}
-                onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
+    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
                     return (_jsx(ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index));
                 }) })] }));
 };

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.js

@@ -21,7 +21,7 @@ import Toggle from '../../../../../Elements/Toggle/Toggle';
 import { Group } from '../../../../../Elements/Icon/icons/Group';
 import { isObject } from 'lodash';
 import { H6 } from '../../../../../Elements/Typography/Typography';
-import { Trans } from '@lingui/react';
+import { i18n } from '@lingui/core';
 var RowLayout = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
     var $isVisible = _a.$isVisible;
     return ($isVisible ? 'flex' : 'none');
@@ -30,7 +30,10 @@ export var ActionRow = function (_a) {
     var _b, _c, _d, _e, _f;
     var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue;
     var _g = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _g[0], setIsSelected = _g[1];
-    var translatedValue = isObject(column === null || column === void 0 ? void 0 : column.title) && 'props' in column.title && ((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) && (_jsx(Trans, { id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, values: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message }));
+    var translatedValue = isObject(column === null || column === void 0 ? void 0 : column.title) &&
+        'props' in column.title &&
+        ((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) &&
+        i18n._({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message });
     var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase());
     var handleToggleChange = useCallback(function () {
         setColumnsConfigOptions(function (prevOptions) {

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

@@ -25,30 +25,30 @@ import { useCallback, useState } from 'react';
 import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
 import { Input } from '../../../../Forms/Input/Input';
 import IconList from '../IconList';
-import { Trans } from '@lingui/react';
+import { i18n } from '@lingui/core';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
     return _jsx("div", { children: children });
 };
 var createNumberComparators = function () { return [
-    { label: _jsx(Trans, { id: "dataGrid.comparator.equals", message: "Equals" }), value: 'eq', icon: 'equals' },
-    { label: _jsx(Trans, { id: "dataGrid.comparator.notEquals", message: "Not equal" }), value: 'neq', icon: 'notEqual' },
-    { label: _jsx(Trans, { id: "dataGrid.comparator.lessThan", message: "Less than" }), value: 'lt', icon: 'lessThen' },
+    { 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' },
+    { label: i18n._({ id: 'dataGrid.comparator.lessThan', message: 'Less than' }), value: 'lt', icon: 'lessThen' },
     {
-        label: _jsx(Trans, { id: "dataGrid.comparator.lessThanOrEquals", message: "Less than or equals" }),
+        label: i18n._({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
         value: 'lte',
         icon: 'lessThanEqual',
     },
-    { label: _jsx(Trans, { id: "dataGrid.comparator.greaterThan", message: "Greater than" }), value: 'gt', icon: 'greaterThan' },
+    { label: i18n._({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
     {
-        label: _jsx(Trans, { id: "dataGrid.comparator.greaterThanOrEquals", message: "Greater than or equal" }),
+        label: i18n._({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
         value: 'gte',
         icon: 'greaterThanEqual',
     },
 ]; };
 var createEqualComparators = [
-    { label: _jsx(Trans, { id: "dataGrid.comparator.equals", message: "Equals" }), value: 'eq', icon: 'equals' },
-    { label: _jsx(Trans, { id: "dataGrid.comparator.notEquals", message: "Not equal" }), value: 'neq', icon: 'notEqual' },
+    { 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 NumberRange = function (props) {
     var numberComparators = createNumberComparators();

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FilterComponentProps } from '../../types';
 export type ComparatorValue = 'eq' | 'neq' | 'lt' | 'lte' | 'gt' | 'gte';
 export type NumberRangeValue = {
@@ -6,7 +5,7 @@ export type NumberRangeValue = {
     value?: string | number;
 };
 export type Comparator = {
-    label: string | JSX.Element;
+    label: string;
     value: string;
     icon: string;
 };

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

@@ -33,60 +33,20 @@ var OverlayComponentDefault = function (_a) {
 };
 export var ipv4 = /^([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$/;
 var createTextComparators = function () { return [
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'like',
-        icon: 'check',
-    },
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'notLike',
-        icon: 'false',
-    },
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'eq',
-        icon: 'equals',
-    },
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'neq',
-        icon: 'notEqual',
-    },
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'startsWith',
-        icon: 'startsWith',
-    },
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'endsWith',
-        icon: 'endsWith',
-    },
+    { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: i18n._({ id: 'dataGrid.comparator.notContains', message: 'Not contains' }), value: 'notLike', icon: 'false' },
+    { 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' },
+    { label: i18n._({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
+    { label: i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' },
 ]; };
 var createPresentTextComparators = function () { return [
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'like',
-        icon: 'check',
-    },
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'in',
-        icon: 'equals',
-    },
+    { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
 ]; };
 var createEqualComparators = function () { return [
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'eq',
-        icon: 'equals',
-    },
-    {
-        label: i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }),
-        value: 'neq',
-        icon: 'notEqual',
-    },
+    { 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 validations = {
     ip: {
@@ -96,7 +56,7 @@ var validations = {
 };
 var TextRange = function (props) {
     var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "validation"]);
-    var eqOnlyTxt = '1';
+    var eqOnlyTxt = i18n._({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
     var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
     var textComparators = createTextComparators();
     var presentTextComparators = createPresentTextComparators();

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

@@ -2,7 +2,7 @@ import React from 'react';
 export declare const rowClassSymbol: unique symbol;
 type Option = {
     value: string | number;
-    label: string | number | JSX.Element;
+    label: string | number;
 };
 type ButtonPublicInterfaceProps = {
     children?: React.ReactNode;

package/ui/Elements/DatePicker/DatePicker.d.ts

@@ -4,7 +4,7 @@ import { DatetimepickerProps } from './Datetime/types';
 export type DatePickerType = DatetimepickerProps & {
     onChange: (value: string | Date) => void;
     disabled?: boolean;
-    label?: string | JSX.Element;
+    label?: string;
     name?: string;
     initialViewDate?: Date | null;
     secondValue?: Date | null;

package/ui/Elements/DatePicker/Datetime/types.d.ts

@@ -46,7 +46,7 @@ export interface DatetimepickerProps {
     timeConstraints?: TimeConstraints;
     closeOnClickOutside?: boolean;
     secondValue?: Date | null;
-    label?: string | JSX.Element;
+    label?: string;
 }
 export interface DatetimepickerState {
     updateOn: string;

package/ui/Elements/Select/Select.js

@@ -28,10 +28,10 @@ import { useTheme } from '@xstyled/styled-components';
 import SpaceAroundWrap from '../SpaceAround';
 import { FieldLabel } from '../Label';
 import { ErrorMessage } from '../ErrorMessage';
-import { Trans } from '@lingui/react';
+import { i18n } from '@lingui/core';
 var emptyOptions = [];
-var noOptionsMessage = function () { return _jsx(Trans, { id: "select.noOptions", message: "no options" }); };
-var loadingMessage = function () { return _jsx(Trans, { id: "components.dropdown.loading", message: "Loading..." }); };
+var noOptionsMessage = function () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };
+var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
 var Select = function (_a) {
     var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.showResetGridButton, showResetGridButton = _g === void 0 ? false : _g, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, resetGrid = _a.resetGrid, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "showResetGridButton", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid"]);
     var isAsync = !!loadOptions;
@@ -64,6 +64,6 @@ var Select = function (_a) {
     var handleLoadOptions = useMemo(function () {
         return loadOptions ? function (fulltext) { return loadOptions(fulltext); } : undefined;
     }, [loadOptions]);
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder, styles: customStyles, theme: customTheme, icon: icon, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage }))] }), error && _jsx(ErrorMessage, { children: error })] }));
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage }))] }), error && _jsx(ErrorMessage, { children: error })] }));
 };
 export default Select;

package/ui/Elements/Select/types.d.ts

@@ -3,7 +3,7 @@ import { SpaceAround } from '../SpaceAround/types';
 import { Theme } from 'react-select';
 export type Option<Value = string | number> = {
     value: Value;
-    label: string | number | JSX.Element;
+    label: string | number;
     isDisabled?: boolean;
     isFixed?: boolean;
     color?: string;

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -54,13 +54,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { createFilter } from 'react-select';
 import Select from '../Select';
 import omit from 'lodash/fp/omit';
 import { nanoid } from 'nanoid';
-import { Trans } from '@lingui/react';
 import { i18n } from '@lingui/core';
 var CREATE = "_create_".concat(nanoid(), "_");
 var defaultFilterOption = createFilter();
@@ -80,15 +79,18 @@ var getOptionValue = function (selectedOption) {
         return selectedOption.value;
     }
 };
-var loadingMessage = function () { return _jsx(Trans, { id: "components.dropdown.loading", message: "Loading..." }); };
+var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
 var SingleSelect = function (props) {
-    var name = props.name, onChange = props.onChange, onBlur = props.onBlur, onValueChange = props.onValueChange, loadOptions = props.loadOptions, _a = props.asyncLoadMinChars, asyncLoadMinChars = _a === void 0 ? 0 : _a, isLocked = props.isLocked, lockedText = props.lockedText, //= <Trans id="components.dropdown.notReact" message="Select related values first..." />,
-    disabled = props.disabled, placeholder = props.placeholder, // = <Trans id="components.dropdown.placeholder" message="Select..." />,
-    preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption;
-    var _b = useState(false), isCreating = _b[0], setIsCreating = _b[1];
+    var name = props.name, onChange = props.onChange, onBlur = props.onBlur, onValueChange = props.onValueChange, loadOptions = props.loadOptions, _a = props.asyncLoadMinChars, asyncLoadMinChars = _a === void 0 ? 0 : _a, isLocked = props.isLocked, _b = props.lockedText, lockedText = _b === void 0 ? i18n._({ id: 'components.dropdown.notReact', message: 'Select related values first...' }) : _b, disabled = props.disabled, _c = props.placeholder, placeholder = _c === void 0 ? i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }) : _c, preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption;
+    var _d = useState(false), isCreating = _d[0], setIsCreating = _d[1];
     var asAsync = !!loadOptions || !!onCreateOption;
     var noOptionsMessage = useCallback(function (inputValue) {
-        return loadOptions && inputValue.length < asyncLoadMinChars ? (_jsx(Trans, { id: "components.dropdown.writeMoreChars", message: "Write at least ${asyncLoadMinChars} characters." })) : (_jsx(Trans, { id: "components.dropdown.noOptions", message: "No options" }));
+        return loadOptions && inputValue.length < asyncLoadMinChars
+            ? i18n._({
+                id: 'components.dropdown.writeMoreChars',
+                message: 'Write at least ${asyncLoadMinChars} characters.',
+            })
+            : i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
     }, [loadOptions, asyncLoadMinChars]);
     var handleLoadOptions = useCallback(function (inputValue) {
         if (onCreateOption) {
@@ -97,7 +99,7 @@ var SingleSelect = function (props) {
             return Promise.resolve(__spreadArray(__spreadArray([], (options || []), true), [
                 {
                     value: CREATE,
-                    label: (_jsxs(_Fragment, { children: ["$", inputValue, " ", _jsx(Trans, { id: "components.dropdown.newOption", message: "new value" })] })),
+                    label: "".concat(inputValue, " (").concat(i18n._({ id: 'components.dropdown.newOption', message: 'new value' }), ")"),
                     inputValue: inputValue,
                 },
             ], false));
@@ -109,13 +111,13 @@ var SingleSelect = function (props) {
             return loadOptions(inputValue, false);
         }
     }, [onCreateOption, loadOptions, asyncLoadMinChars, options]);
-    var _c = useState(options || []), loadedDefaultOptions = _c[0], setLoadedDefaultOptions = _c[1];
+    var _e = useState(options || []), loadedDefaultOptions = _e[0], setLoadedDefaultOptions = _e[1];
     useEffect(function () {
         if (loadOptions && preload && !props.value)
             loadOptions('', false).then(setLoadedDefaultOptions);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [loadOptions]); // this is intentional
-    var _d = useState(null), storedSelectedOption = _d[0], setStoredSelectedOption = _d[1];
+    var _f = useState(null), storedSelectedOption = _f[0], setStoredSelectedOption = _f[1];
     useEffect(function () {
         if (initialOptions && initialOptions.length) {
             var selectedOption = initialOptions.find(function (option) { return option.value == props.value; }) || null;
@@ -136,7 +138,7 @@ var SingleSelect = function (props) {
                     if (!(onCreateOption && (option === null || option === void 0 ? void 0 : option.value) == CREATE)) return [3 /*break*/, 4];
                     if (!((option === null || option === void 0 ? void 0 : option.inputValue) && ((_b = (_a = option === null || option === void 0 ? void 0 : option.inputValue) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) < 2)) return [3 /*break*/, 1];
                     props === null || props === void 0 ? void 0 : props.form.setFieldTouched(name, true, true);
-                    props === null || props === void 0 ? void 0 : props.form.setFieldError(name, i18n._(/*i18n*/ { id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
+                    props === null || props === void 0 ? void 0 : props.form.setFieldError(name, i18n._({ id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
                     return [2 /*return*/];
                 case 1:
                     setIsCreating(true);