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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.5.0-beta.14",
+  "version": "0.5.0-beta.16",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -21,7 +21,6 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
@@ -54,8 +53,6 @@
     "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.2.1",
     "@xstyled/styled-components": "^3.8.0",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "0.6.15",
     "faker": "^5.1.0",
@@ -88,7 +85,11 @@
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1"
+    "webpack": "^5.82.1",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-typescript": "^7.23.3",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-macros": "^3.1.0"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
@@ -125,7 +126,11 @@
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-typescript": "^7.23.3",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-macros": "^3.1.0"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

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

@@ -42,7 +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: 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" }))] })] }) })) }));
+    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" }))] })] }) })) }));
 };
 export default ActionHead;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -8,7 +8,7 @@ import styled from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 import { Trans } from '@lingui/react';
 import ActionDropdownMenu from './ActionDropdownMenu';
-import { Popover } from '../../../../Popover';
+import Popover from '../../../../Popover';
 import Icon from '../../../../../Elements/Icon/Icon';
 var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 1 2;\n  min-width: 9rem;\n  height: 28px;\n  background-color: ", ";\n  color: ", ";\n  border: slim;\n  border-color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: ", ";\n  transition: 0.2s;\n  &:not(:disabled):hover {\n    color: ", ";\n    border-color: ", ";\n  }\n  p {\n    margin: 0;\n    margin-right: auto;\n    padding-right: 36px;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 1 2;\n  min-width: 9rem;\n  height: 28px;\n  background-color: ", ";\n  color: ", ";\n  border: slim;\n  border-color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: ", ";\n  transition: 0.2s;\n  &:not(:disabled):hover {\n    color: ", ";\n    border-color: ", ";\n  }\n  p {\n    margin: 0;\n    margin-right: auto;\n    padding-right: 36px;\n  }\n"])), th.color('white'), function (_a) {
     var $isDisabled = _a.$isDisabled;

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

@@ -21,14 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import GridSelect from '../GridSelect';
+import { Trans } from '@lingui/react';
 var getFlagOptions = function () { return [
-    { value: '', label: 1 },
-    { value: '1', label: 1 },
-    { value: '0', label: 1 },
+    { 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" }) },
 ]; };
 var SelectFilter = function (_a) {
     var restProps = __rest(_a, []);
-    return _jsx(GridSelect, __assign({ options: getFlagOptions() }, restProps));
+    var options = useMemo(function () { return getFlagOptions(); }, []);
+    return _jsx(GridSelect, __assign({ options: options }, restProps));
 };
 export default SelectFilter;

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

@@ -32,6 +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';
 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.
 ])));
@@ -106,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 && '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 }))] })) }) })] }));
+    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 }))] })) }) })] }));
 };
 export default DatePickerRange;
 var templateObject_1;

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

@@ -8,7 +8,7 @@ import styled from '@xstyled/styled-components';
 import Icon from '../../../../Elements/Icon/Icon';
 import DropdownMenu from '../../../../Elements/DropdownMenu';
 import Button from '../../../../Elements/Button';
-import { Popover } from '../../../Popover';
+import Popover from '../../../Popover';
 var ArrowIcon = styled(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-shrink: 0;\n  margin-left: 2;\n"], ["\n  flex-shrink: 0;\n  margin-left: 2;\n"])));
 var CustomIconWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 1;\n"], ["\n  margin-right: 1;\n"])));
 var StyledDropdownMenu = styled(DropdownMenu)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"], ["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"])), function (_a) {

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
 import styled from '@xstyled/styled-components';
 import DropdownMenu from '../../../../Elements/DropdownMenu';
-import { Popover } from '../../../Popover';
+import Popover from '../../../Popover';
 var StyledDropdownMenu = styled(DropdownMenu)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 160px;\n  width: max-content;\n"], ["\n  min-width: 160px;\n  width: max-content;\n"])));
 export var StyledButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"], ["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
 export var StyledCross = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"], ["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"])), function (_a) {

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

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

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

@@ -12,7 +12,9 @@ var ManageColumnForm = function (_a) {
     var clear = useCallback(function () {
         setSearchedValue('');
     }, [setSearchedValue]);
-    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 (_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 (_jsx(ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index));
                 }) })] }));
 };

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

@@ -21,15 +21,16 @@ 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';
 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');
 }, th.color('lightGray6'));
 export var ActionRow = function (_a) {
-    var _b, _c;
+    var _b, _c, _d, _e, _f;
     var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue;
-    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 _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 isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase());
     var handleToggleChange = useCallback(function () {
         setColumnsConfigOptions(function (prevOptions) {

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

@@ -25,29 +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';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
     return _jsx("div", { children: children });
 };
 var createNumberComparators = function () { return [
-    { label: '1', value: 'eq', icon: 'equals' },
-    { label: '1', value: 'neq', icon: 'notEqual' },
-    { label: '1', value: 'lt', icon: 'lessThen' },
+    { 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: '1',
+        label: _jsx(Trans, { id: "dataGrid.comparator.lessThanOrEquals", message: "Less than or equals" }),
         value: 'lte',
         icon: 'lessThanEqual',
     },
-    { label: '1', value: 'gt', icon: 'greaterThan' },
+    { label: _jsx(Trans, { id: "dataGrid.comparator.greaterThan", message: "Greater than" }), value: 'gt', icon: 'greaterThan' },
     {
-        label: '1',
+        label: _jsx(Trans, { id: "dataGrid.comparator.greaterThanOrEquals", message: "Greater than or equal" }),
         value: 'gte',
         icon: 'greaterThanEqual',
     },
 ]; };
 var createEqualComparators = [
-    { label: '1', value: 'eq', icon: 'equals' },
-    { label: '1', value: 'neq', icon: 'notEqual' },
+    { 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' },
 ];
 var NumberRange = function (props) {
     var numberComparators = createNumberComparators();

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

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

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;
+    label: string | number | JSX.Element;
 };
 type ButtonPublicInterfaceProps = {
     children?: React.ReactNode;

package/ui/Blocks/Popover/index.d.ts

@@ -6,5 +6,5 @@ type DropdownMenuProps = {
     children: React.ReactChild;
     placement?: Placement;
 };
-export declare const Popover: FC<DropdownMenuProps>;
-export {};
+declare const Popover: FC<DropdownMenuProps>;
+export default Popover;

package/ui/Blocks/Popover/index.js

@@ -8,7 +8,7 @@ import { Popper } from 'react-popper';
 import { useClickOutside } from '../Modal/hooks/useClickOutside';
 import Portal from '../../Elements/Portal';
 var PopoverWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n"], ["\n  z-index: 5;\n"])));
-export var Popover = function (_a) {
+var Popover = function (_a) {
     var placement = _a.placement, children = _a.children, onClose = _a.onClose, parentRef = _a.parentRef;
     var popperRef = useClickOutside({ onClose: onClose, parentRef: parentRef });
     return (_jsx(Portal, { children: _jsx("div", { ref: popperRef, children: _jsx(Popper, { innerRef: popperRef, referenceElement: parentRef.current, placement: placement, children: function (_a) {
@@ -16,4 +16,5 @@ export var Popover = function (_a) {
                     return (_jsx(PopoverWrapper, { ref: ref, style: style, children: children }));
                 } }) }) }));
 };
+export default Popover;
 var templateObject_1;

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;
+    label?: string | JSX.Element;
     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;
+    label?: string | JSX.Element;
 }
 export interface DatetimepickerState {
     updateOn: string;

package/ui/Elements/Select/Select.js

@@ -28,9 +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';
 var emptyOptions = [];
-var noOptionsMessage = function () { return '1'; };
-var loadingMessage = function () { return '1'; };
+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 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;
@@ -63,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 || '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 })] }));
+    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 })] }));
 };
 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;
+    label: string | number | JSX.Element;
     isDisabled?: boolean;
     isFixed?: boolean;
     color?: string;

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -54,12 +54,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { t } from '@lingui/macro';
 var CREATE = "_create_".concat(nanoid(), "_");
 var defaultFilterOption = createFilter();
 var creatableFilterOption = function (option, rawInput) {
@@ -78,13 +80,15 @@ var getOptionValue = function (selectedOption) {
         return selectedOption.value;
     }
 };
+var loadingMessage = function () { return _jsx(Trans, { 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, _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 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 asAsync = !!loadOptions || !!onCreateOption;
-    var loadingMessage = useCallback(function () { return '1'; }, []);
     var noOptionsMessage = useCallback(function (inputValue) {
-        return loadOptions && inputValue.length < asyncLoadMinChars ? '1' : '1';
+        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" }));
     }, [loadOptions, asyncLoadMinChars]);
     var handleLoadOptions = useCallback(function (inputValue) {
         if (onCreateOption) {
@@ -93,7 +97,7 @@ var SingleSelect = function (props) {
             return Promise.resolve(__spreadArray(__spreadArray([], (options || []), true), [
                 {
                     value: CREATE,
-                    label: "".concat(inputValue, " ()"),
+                    label: (_jsxs(_Fragment, { children: ["$", inputValue, " ", _jsx(Trans, { id: "components.dropdown.newOption", message: "new value" })] })),
                     inputValue: inputValue,
                 },
             ], false));
@@ -105,13 +109,13 @@ var SingleSelect = function (props) {
             return loadOptions(inputValue, false);
         }
     }, [onCreateOption, loadOptions, asyncLoadMinChars, options]);
-    var _e = useState(options || []), loadedDefaultOptions = _e[0], setLoadedDefaultOptions = _e[1];
+    var _c = useState(options || []), loadedDefaultOptions = _c[0], setLoadedDefaultOptions = _c[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 _f = useState(null), storedSelectedOption = _f[0], setStoredSelectedOption = _f[1];
+    var _d = useState(null), storedSelectedOption = _d[0], setStoredSelectedOption = _d[1];
     useEffect(function () {
         if (initialOptions && initialOptions.length) {
             var selectedOption = initialOptions.find(function (option) { return option.value == props.value; }) || null;
@@ -132,7 +136,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, '');
+                    props === null || props === void 0 ? void 0 : props.form.setFieldError(name, t({ id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
                     return [2 /*return*/];
                 case 1:
                     setIsCreating(true);

package/ui/index.d.ts

@@ -33,7 +33,13 @@ import Input from './Forms/Input';
 import RadioButton from './Forms/RadioButton';
 import ThemeProvider from './ThemeProvider';
 import utils from './utils';
-export { Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils };
+import DatePicker from './Elements/DatePicker';
+import CommonGrid from './Blocks/CommonGrid';
+import Popover from './Blocks/Popover';
+import SingleSelect from './Elements/SingleSelect';
+import MultiSelect from './Elements/MultiSelect';
+import Select from './Elements/Select';
+export { DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, };
 export * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';
 export * from './Blocks/LightBox';
@@ -69,3 +75,9 @@ export * from './Forms/Input';
 export * from './Forms/RadioButton';
 export * from './ThemeProvider';
 export * from './utils';
+export * from './Elements/DatePicker';
+export * from './Blocks/CommonGrid';
+export * from './Blocks/Popover';
+export * from './Elements/SingleSelect';
+export * from './Elements/MultiSelect';
+export * from './Elements/Select';