@mailstep/design-system 0.5.0-beta.13 → 0.5.0-beta.14

package/package.json

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

package/ui/Blocks/CommonGrid/StandardButtons.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
-import { t } from '@lingui/macro';
 import Select from '../../Elements/Select';
 import ButtonMore from './components/ButtonMore/ButtonMore';
 export var getCreateButton = function (onCreate, canCreate, disabled) { return ({
@@ -43,7 +42,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: t({ id: 'products.eshopFilterPlaceholder', message: 'Select eshop...' }) }) })),
+            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' }) })),
         });
     }
     return eshops;

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

@@ -6,7 +6,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import styled from '@xstyled/styled-components';
 import { Trans } from '@lingui/react';
-import { t } from '@lingui/macro';
 import { useGridActionTrigger, useToggleAllCheckbox } from '../../utils/public';
 import { useModal } from '../../../Modal/hooks/useModal';
 import { Button } from '../../../../Elements/Button';
@@ -43,11 +42,7 @@ 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: t({
-                            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: 1 }), _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

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

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

@@ -29,7 +29,6 @@ import React, { useState, useCallback, useMemo } from 'react';
 import { DateTime } from 'luxon';
 import styled from '@xstyled/styled-components';
 import { sameDate } from './utils/sameDate';
-import { t } from '@lingui/macro';
 import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
 import DatePicker from '../../../../Elements/DatePicker';
 import Input from '../../../../Forms/Input';
@@ -64,7 +63,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 = t({ id: 'dataGrid.filterCell', message: 'Type to filter' });
+    var placeholder = '1';
     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 +106,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 && t({ 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 && t({ 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 && '1', 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 && '1', isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null }))] })) }) })] }));
 };
 export default DatePickerRange;
 var templateObject_1;

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { t } from '@lingui/macro';
 import { x } from '@xstyled/styled-components';
 import { ActionRow } from './components/ActionRow';
 import { Input } from '../../../../Forms/Input/Input';
@@ -13,7 +12,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: t({ 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: '1', 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

@@ -16,7 +16,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { x, th } from '@xstyled/styled-components';
-import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import Toggle from '../../../../../Elements/Toggle/Toggle';
 import { Group } from '../../../../../Elements/Icon/icons/Group';
@@ -27,13 +26,10 @@ var RowLayout = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemp
     return ($isVisible ? 'flex' : 'none');
 }, th.color('lightGray6'));
 export var ActionRow = function (_a) {
-    var _b, _c, _d, _e, _f;
+    var _b, _c;
     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) &&
-        t({ 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 _d = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _d[0], setIsSelected = _d[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) && 12;
     var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase());
     var handleToggleChange = useCallback(function () {
         setColumnsConfigOptions(function (prevOptions) {

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

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

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

@@ -22,7 +22,6 @@ 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 { t } from '@lingui/macro';
 import { Trans } from '@lingui/react';
 import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
 import { Input } from '../../../../Forms/Input/Input';
@@ -33,20 +32,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: t({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
-    { label: t({ id: 'dataGrid.comparator.notContains', message: 'Not contains' }), value: 'notLike', icon: 'false' },
-    { label: t({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: t({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
-    { label: t({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
-    { label: t({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' },
+    { label: '1', value: 'like', icon: 'check' },
+    { label: '1', value: 'notLike', icon: 'false' },
+    { label: '1', value: 'eq', icon: 'equals' },
+    { label: '1', value: 'neq', icon: 'notEqual' },
+    { label: '1', value: 'startsWith', icon: 'startsWith' },
+    { label: '1', value: 'endsWith', icon: 'endsWith' },
 ]; };
 var createPresentTextComparators = function () { return [
-    { label: t({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
-    { label: t({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
+    { label: '1', value: 'like', icon: 'check' },
+    { label: '1', value: 'in', icon: 'equals' },
 ]; };
 var createEqualComparators = function () { return [
-    { label: t({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: t({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: '1', value: 'eq', icon: 'equals' },
+    { label: '1', value: 'neq', icon: 'notEqual' },
 ]; };
 var validations = {
     ip: {
@@ -56,7 +55,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 = t({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
+    var eqOnlyTxt = '1';
     var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
     var textComparators = createTextComparators();
     var presentTextComparators = createPresentTextComparators();

package/ui/Elements/Select/Select.js

@@ -25,13 +25,12 @@ import { useCallback, useMemo } from 'react';
 import { Wrapper, StyledReactSelect, StyledAsyncSelect } from './styles';
 import { useStylesAndComponents } from './themes';
 import { useTheme } from '@xstyled/styled-components';
-import { t } from '@lingui/macro';
 import SpaceAroundWrap from '../SpaceAround';
 import { FieldLabel } from '../Label';
 import { ErrorMessage } from '../ErrorMessage';
 var emptyOptions = [];
-var noOptionsMessage = function () { return t({ id: 'select.noOptions', message: 'no options' }); };
-var loadingMessage = function () { return t({ id: 'components.dropdown.loading', message: 'Loading...' }); };
+var noOptionsMessage = function () { return '1'; };
+var loadingMessage = function () { return '1'; };
 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 +63,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 || t({ 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 })] }));
+    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 || '1', 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/SingleSelect/SingleSelect.js

@@ -59,7 +59,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { createFilter } from 'react-select';
 import Select from '../Select';
 import omit from 'lodash/fp/omit';
-import { t } from '@lingui/macro';
 import { nanoid } from 'nanoid';
 var CREATE = "_create_".concat(nanoid(), "_");
 var defaultFilterOption = createFilter();
@@ -80,17 +79,12 @@ var getOptionValue = function (selectedOption) {
     }
 };
 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, _b = props.lockedText, lockedText = _b === void 0 ? t({ id: 'components.dropdown.notReact', message: 'Select related values first...' }) : _b, disabled = props.disabled, _c = props.placeholder, placeholder = _c === void 0 ? t({ id: 'components.dropdown.placeholder', message: 'Select...' }) : _c, preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption;
+    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 ? '1' : _b, disabled = props.disabled, _c = props.placeholder, placeholder = _c === void 0 ? '1' : _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 loadingMessage = useCallback(function () { return t({ id: 'components.dropdown.loading', message: 'Loading...' }); }, []);
+    var loadingMessage = useCallback(function () { return '1'; }, []);
     var noOptionsMessage = useCallback(function (inputValue) {
-        return loadOptions && inputValue.length < asyncLoadMinChars
-            ? t({
-                id: 'components.dropdown.writeMoreChars',
-                message: 'Write at least ${asyncLoadMinChars} characters.',
-            })
-            : t({ id: 'components.dropdown.noOptions', message: 'No options' });
+        return loadOptions && inputValue.length < asyncLoadMinChars ? '1' : '1';
     }, [loadOptions, asyncLoadMinChars]);
     var handleLoadOptions = useCallback(function (inputValue) {
         if (onCreateOption) {
@@ -99,7 +93,7 @@ var SingleSelect = function (props) {
             return Promise.resolve(__spreadArray(__spreadArray([], (options || []), true), [
                 {
                     value: CREATE,
-                    label: "".concat(inputValue, " (").concat(t({ id: 'components.dropdown.newOption', message: 'new value' }), ")"),
+                    label: "".concat(inputValue, " ()"),
                     inputValue: inputValue,
                 },
             ], false));
@@ -138,7 +132,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, t({ id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
+                    props === null || props === void 0 ? void 0 : props.form.setFieldError(name, '');
                     return [2 /*return*/];
                 case 1:
                     setIsCreating(true);