@mailstep/design-system 0.7.1 → 0.7.3

package/package.json

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

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

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

package/ui/Elements/BarChartSymbol/BarChartSymbol.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export type BarChartSymbolProps = {
+    selected?: number;
+    total?: number;
+    height?: number;
+    width?: number;
+    gap?: number;
+    color?: string;
+};
+export declare const BarChartSymbol: FC<BarChartSymbolProps>;

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { x } from '@xstyled/styled-components';
+import { Bar } from './styles';
+export var BarChartSymbol = function (_a) {
+    var _b = _a.total, total = _b === void 0 ? 3 : _b, _c = _a.height, height = _c === void 0 ? 14 : _c, _d = _a.selected, selected = _d === void 0 ? 3 : _d, _e = _a.gap, gap = _e === void 0 ? 2 : _e, _f = _a.width, width = _f === void 0 ? 3 : _f, color = _a.color;
+    return (_jsx(x.div, { display: "flex", alignItems: "flex-end", gap: gap, children: Array.from({ length: total }).map(function (_, index) { return (_jsx(Bar, { total: total, index: index + 1, height: height, selected: selected, color: color, width: width }, index)); }) }));
+};

package/ui/Elements/BarChartSymbol/index.d.ts

@@ -0,0 +1 @@
+export { BarChartSymbol } from './BarChartSymbol';

package/ui/Elements/BarChartSymbol/index.js

@@ -0,0 +1 @@
+export { BarChartSymbol } from './BarChartSymbol';

package/ui/Elements/BarChartSymbol/stories/BarChartSymbol.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../BarChartSymbol").BarChartSymbolProps>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const MediumBarchChart: Story;
+export declare const LowBarChart: Story;

package/ui/Elements/BarChartSymbol/stories/BarChartSymbol.stories.js

@@ -0,0 +1,26 @@
+import { BarChartSymbol } from '../';
+var meta = {
+    title: 'Elements/BarChartSymbol',
+    component: BarChartSymbol,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = {
+    args: {
+        selected: 3,
+        color: 'green'
+    }
+};
+export var MediumBarchChart = {
+    args: {
+        selected: 2,
+        color: 'orange',
+    }
+};
+export var LowBarChart = {
+    args: {
+        selected: 1,
+        color: 'red1',
+    }
+};

package/ui/Elements/BarChartSymbol/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const Bar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    height: number;
+    index: number;
+    total: number;
+    selected: number;
+    color?: string | undefined;
+    width?: number | undefined;
+}, never>;

package/ui/Elements/BarChartSymbol/styles.js

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled, th } from '@xstyled/styled-components';
+var minHeight = 7;
+export var Bar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"])), function (_a) {
+    var width = _a.width;
+    return width;
+}, function (_a) {
+    var index = _a.index, height = _a.height, total = _a.total;
+    return minHeight + (index - 1) * ((height - minHeight) / (total - 1));
+}, function (_a) {
+    var selected = _a.selected, index = _a.index, color = _a.color;
+    return (selected >= index ? th.color(color || 'red1') : th.color('lightGray6'));
+});
+var templateObject_1;

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

@@ -12,5 +12,7 @@ export type TextProps = {
     mb?: string | number;
     ml?: string | number;
     color?: string;
+    textDecoration?: string;
+    onClick?: (e: React.MouseEvent<HTMLParagraphElement>) => void;
     as?: string | ComponentType<any>;
 };

package/ui/index.es.js

@@ -38134,7 +38134,7 @@ const d9e = ({
   return /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
     /* @__PURE__ */ p.jsx(pc, { title: /* @__PURE__ */ p.jsx(wt, { id: "manageColumn.title", message: "Manage columns" }), onClose: t, onCancel: t, onExtraAction: r, onConfirm: n, isShown: e, width: "auto", minWidth: "350px", hasFooter: !0, extraActionLabel: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: /* @__PURE__ */ p.jsx(wt, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: /* @__PURE__ */ p.jsx(wt, { id: "form.buttonConfirm", message: "Confirm" }), children: /* @__PURE__ */ p.jsx(A9e, { columns: i, columnsConfigValues: a, setColumnsConfigOptions: o, handleDragEnd: s }) }),
     /* @__PURE__ */ p.jsx(pc, { isShown: A, title: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.presets.title", message: "Presets" }), onClose: h, width: "narrow", children: /* @__PURE__ */ p.jsx(p9e, { onOpenCreatePresetModal: E, gridPresets: b, handleSelectPreset: y, handleOpenDeletePresetModal: B, selectedPresetName: g, handleExportPresets: _, handleImportPresets: J, handleImportButtonClick: Z, fileInputRef: L, filters: u.filter }) }),
-    /* @__PURE__ */ p.jsx(pc, { isShown: x, title: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.createPreset.title", message: "Create preset" }), onCancel: I, onConfirm: O, isConfirmDisabled: !T, width: "narrow", children: /* @__PURE__ */ p.jsx(wa, { type: "text", onChange: M, value: T, label: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.createPreset.title", message: "Preset name" }) }) }),
+    /* @__PURE__ */ p.jsx(pc, { isShown: x, title: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.createNewPreset.title", message: "Create new preset" }), onCancel: I, onConfirm: O, isConfirmDisabled: !T, width: "narrow", children: /* @__PURE__ */ p.jsx(wa, { type: "text", onChange: M, value: T, label: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.presetName.title", message: "Preset name" }) }) }),
     /* @__PURE__ */ p.jsx(pc, { isShown: N, title: /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), onCancel: F, onConfirm: R, isConfirmDisabled: !P, width: "narrow", children: /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
       /* @__PURE__ */ p.jsx(wt, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }),
       ' "',

package/ui/index.umd.js

@@ -2667,7 +2667,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   border: 1px solid ${V.color("lightGray6")};
   border-radius: 8px;
   margin-bottom: 15px;
-`,Y4e=({columns:e,columnsConfigValues:t,setColumnsConfigOptions:r,handleDragEnd:n})=>{const[i,a]=x.useState(""),o=x.useCallback(l=>{a(l.target.value)},[a]),s=x.useCallback(()=>{a("")},[a]);return p.jsxs(He.div,{children:[p.jsx(Ri,{icon:"search",type:"text",value:i,placeholder:_e._({id:"manageColumn.searchPlaceholder",message:"Find column..."}),onChange:o,onClear:s,variant:"gray"}),p.jsx(YP,{onDragEnd:n,children:p.jsx(Av,{droppableId:"droppable",direction:"vertical",isCombineEnabled:!1,ignoreContainerClipping:!1,isDropDisabled:!!i,children:l=>p.jsx(He.div,{h:"400px",overflowY:"scroll",mt:"20px",ref:l.innerRef,...l.droppableProps,children:e==null?void 0:e.map((u,f)=>{const A=dx(u),h=A&&A.toLocaleLowerCase().includes(i.toLocaleLowerCase())&&!u.alwaysOn;return p.jsx(iT,{draggableId:u.name,index:f,isDragDisabled:!!i,children:({innerRef:g,draggableProps:m,dragHandleProps:b})=>p.jsx(Z4e,{$isVisible:h,...m,ref:g,...b,children:p.jsx(U4e,{column:u,columnsConfigValues:t,setColumnsConfigOptions:r,translatedValue:A},f)})},u.name)})})})})]})},_4e=({onOpenCreatePresetModal:e,gridPresets:t,handleSelectPreset:r,handleOpenDeletePresetModal:n,selectedPresetName:i,handleExportPresets:a,handleImportButtonClick:o,handleImportPresets:s,fileInputRef:l,filters:u})=>{const f=x.useMemo(()=>Object.entries(t||{}),[t]),A=!!(f!=null&&f.length);return p.jsxs(He.div,{children:[p.jsx(He.div,{display:"flex",rowGap:"12px",flexWrap:"wrap",children:A?f==null?void 0:f.map(([h,g],m)=>{const b=h===i;return p.jsxs(Qd,{size:"big",onClick:r(h,g),...b?Kd.redWhite:Kd.redRed,pointer:!0,children:[p.jsx(Io,{mt:0,mb:0,variant:"semiBold",children:h}),p.jsx(He.div,{ml:"12px",h:"fit-content",onClick:n(h),children:p.jsx(sA,{fill:b?"white":"#DB2B19"})})]},`${h}_${m}`)}):p.jsx(vt,{id:"dataGrid.noPresets.title",message:"No presets available"})}),p.jsx(He.input,{type:"file",accept:".json",onChange:s,ref:l,display:"none"}),p.jsxs(He.div,{display:"flex",mt:"34px",gap:"12px",justifyContent:"space-between",children:[p.jsxs(He.div,{display:"flex",gap:"12px",children:[A&&p.jsx(ar,{onClick:a,type:"button",appearance:"secondary",children:p.jsx(vt,{id:"dataGrid.exportPreset.title",message:"Export presets"})}),p.jsx(ar,{onClick:o,type:"button",appearance:"secondary",children:p.jsx(vt,{id:"dataGrid.importPreset.title",message:"Import presets"})})]}),p.jsx(ar,{type:"button",onClick:e,disabled:tO(u),children:p.jsx(vt,{id:"dataGrid.createNewPreset.title",message:"Create new preset"})})]})]})},J4e=({manageColumnFormVisible:e,onCloseForm:t,resetColumnConfig:r,onConfirmForm:n,manageColumnsFormDefinitions:i,columnsConfigValues:a,setColumnsConfigOptions:o,handleDragEnd:s,gridName:l,gridSelectors:u,gridActions:f,isPresetsModalOpen:A,onClosePresetsModal:h,selectedPresetName:g,setSelectedPresetName:m})=>{const{gridPresets:b,setGridPresets:w,handleSelectPreset:y}=lAe({gridName:l,gridActions:f,setSelectedPresetName:m,onClosePresetsModal:h,filters:u.filter}),{isCreatePresetModalOpen:S,handleCloseCreatePresetModal:k,onOpenCreatePresetModal:I,handleCreatePreset:P,presetName:M,handleChangePresetName:D}=eAe({gridName:l,setGridPresets:w,onClosePresetsModal:h,setSelectedPresetName:m,filters:u.filter}),{handleOpenDeletePresetModal:j,handleDeletePreset:R,onCloseDeletePresetModal:W,presetNameToDelete:T,isDeletePresetModalOpen:B}=tAe({gridName:l,selectedPresetName:g,setGridPresets:w,setSelectedPresetName:m}),{fileInputRef:N,handleImportPresets:X,handleExportPresets:J,handleImportButtonClick:Y}=rAe({gridName:l,setGridPresets:w});return p.jsxs(p.Fragment,{children:[p.jsx(el,{title:p.jsx(vt,{id:"manageColumn.title",message:"Manage columns"}),onClose:t,onCancel:t,onExtraAction:r,onConfirm:n,isShown:e,width:"auto",minWidth:"350px",hasFooter:!0,extraActionLabel:p.jsx(vt,{id:"dataGrid.buttonClearConfig",message:"Reset config"}),cancelLabel:p.jsx(vt,{id:"form.buttonCancel",message:"Cancel"}),confirmLabel:p.jsx(vt,{id:"form.buttonConfirm",message:"Confirm"}),children:p.jsx(Y4e,{columns:i,columnsConfigValues:a,setColumnsConfigOptions:o,handleDragEnd:s})}),p.jsx(el,{isShown:A,title:p.jsx(vt,{id:"dataGrid.presets.title",message:"Presets"}),onClose:h,width:"narrow",children:p.jsx(_4e,{onOpenCreatePresetModal:I,gridPresets:b,handleSelectPreset:y,handleOpenDeletePresetModal:j,selectedPresetName:g,handleExportPresets:J,handleImportPresets:X,handleImportButtonClick:Y,fileInputRef:N,filters:u.filter})}),p.jsx(el,{isShown:S,title:p.jsx(vt,{id:"dataGrid.createPreset.title",message:"Create preset"}),onCancel:k,onConfirm:P,isConfirmDisabled:!M,width:"narrow",children:p.jsx(Ri,{type:"text",onChange:D,value:M,label:p.jsx(vt,{id:"dataGrid.createPreset.title",message:"Preset name"})})}),p.jsx(el,{isShown:B,title:p.jsx(vt,{id:"dataGrid.deletePreset.title",message:"Delete preset"}),onCancel:W,onConfirm:R,isConfirmDisabled:!T,width:"narrow",children:p.jsxs(p.Fragment,{children:[p.jsx(vt,{id:"dataGrid.deletePreset.confirm",message:"Are you sure you want to delete preset"}),' "',T,'" ?']})})]})},X4e=G.span`
+`,Y4e=({columns:e,columnsConfigValues:t,setColumnsConfigOptions:r,handleDragEnd:n})=>{const[i,a]=x.useState(""),o=x.useCallback(l=>{a(l.target.value)},[a]),s=x.useCallback(()=>{a("")},[a]);return p.jsxs(He.div,{children:[p.jsx(Ri,{icon:"search",type:"text",value:i,placeholder:_e._({id:"manageColumn.searchPlaceholder",message:"Find column..."}),onChange:o,onClear:s,variant:"gray"}),p.jsx(YP,{onDragEnd:n,children:p.jsx(Av,{droppableId:"droppable",direction:"vertical",isCombineEnabled:!1,ignoreContainerClipping:!1,isDropDisabled:!!i,children:l=>p.jsx(He.div,{h:"400px",overflowY:"scroll",mt:"20px",ref:l.innerRef,...l.droppableProps,children:e==null?void 0:e.map((u,f)=>{const A=dx(u),h=A&&A.toLocaleLowerCase().includes(i.toLocaleLowerCase())&&!u.alwaysOn;return p.jsx(iT,{draggableId:u.name,index:f,isDragDisabled:!!i,children:({innerRef:g,draggableProps:m,dragHandleProps:b})=>p.jsx(Z4e,{$isVisible:h,...m,ref:g,...b,children:p.jsx(U4e,{column:u,columnsConfigValues:t,setColumnsConfigOptions:r,translatedValue:A},f)})},u.name)})})})})]})},_4e=({onOpenCreatePresetModal:e,gridPresets:t,handleSelectPreset:r,handleOpenDeletePresetModal:n,selectedPresetName:i,handleExportPresets:a,handleImportButtonClick:o,handleImportPresets:s,fileInputRef:l,filters:u})=>{const f=x.useMemo(()=>Object.entries(t||{}),[t]),A=!!(f!=null&&f.length);return p.jsxs(He.div,{children:[p.jsx(He.div,{display:"flex",rowGap:"12px",flexWrap:"wrap",children:A?f==null?void 0:f.map(([h,g],m)=>{const b=h===i;return p.jsxs(Qd,{size:"big",onClick:r(h,g),...b?Kd.redWhite:Kd.redRed,pointer:!0,children:[p.jsx(Io,{mt:0,mb:0,variant:"semiBold",children:h}),p.jsx(He.div,{ml:"12px",h:"fit-content",onClick:n(h),children:p.jsx(sA,{fill:b?"white":"#DB2B19"})})]},`${h}_${m}`)}):p.jsx(vt,{id:"dataGrid.noPresets.title",message:"No presets available"})}),p.jsx(He.input,{type:"file",accept:".json",onChange:s,ref:l,display:"none"}),p.jsxs(He.div,{display:"flex",mt:"34px",gap:"12px",justifyContent:"space-between",children:[p.jsxs(He.div,{display:"flex",gap:"12px",children:[A&&p.jsx(ar,{onClick:a,type:"button",appearance:"secondary",children:p.jsx(vt,{id:"dataGrid.exportPreset.title",message:"Export presets"})}),p.jsx(ar,{onClick:o,type:"button",appearance:"secondary",children:p.jsx(vt,{id:"dataGrid.importPreset.title",message:"Import presets"})})]}),p.jsx(ar,{type:"button",onClick:e,disabled:tO(u),children:p.jsx(vt,{id:"dataGrid.createNewPreset.title",message:"Create new preset"})})]})]})},J4e=({manageColumnFormVisible:e,onCloseForm:t,resetColumnConfig:r,onConfirmForm:n,manageColumnsFormDefinitions:i,columnsConfigValues:a,setColumnsConfigOptions:o,handleDragEnd:s,gridName:l,gridSelectors:u,gridActions:f,isPresetsModalOpen:A,onClosePresetsModal:h,selectedPresetName:g,setSelectedPresetName:m})=>{const{gridPresets:b,setGridPresets:w,handleSelectPreset:y}=lAe({gridName:l,gridActions:f,setSelectedPresetName:m,onClosePresetsModal:h,filters:u.filter}),{isCreatePresetModalOpen:S,handleCloseCreatePresetModal:k,onOpenCreatePresetModal:I,handleCreatePreset:P,presetName:M,handleChangePresetName:D}=eAe({gridName:l,setGridPresets:w,onClosePresetsModal:h,setSelectedPresetName:m,filters:u.filter}),{handleOpenDeletePresetModal:j,handleDeletePreset:R,onCloseDeletePresetModal:W,presetNameToDelete:T,isDeletePresetModalOpen:B}=tAe({gridName:l,selectedPresetName:g,setGridPresets:w,setSelectedPresetName:m}),{fileInputRef:N,handleImportPresets:X,handleExportPresets:J,handleImportButtonClick:Y}=rAe({gridName:l,setGridPresets:w});return p.jsxs(p.Fragment,{children:[p.jsx(el,{title:p.jsx(vt,{id:"manageColumn.title",message:"Manage columns"}),onClose:t,onCancel:t,onExtraAction:r,onConfirm:n,isShown:e,width:"auto",minWidth:"350px",hasFooter:!0,extraActionLabel:p.jsx(vt,{id:"dataGrid.buttonClearConfig",message:"Reset config"}),cancelLabel:p.jsx(vt,{id:"form.buttonCancel",message:"Cancel"}),confirmLabel:p.jsx(vt,{id:"form.buttonConfirm",message:"Confirm"}),children:p.jsx(Y4e,{columns:i,columnsConfigValues:a,setColumnsConfigOptions:o,handleDragEnd:s})}),p.jsx(el,{isShown:A,title:p.jsx(vt,{id:"dataGrid.presets.title",message:"Presets"}),onClose:h,width:"narrow",children:p.jsx(_4e,{onOpenCreatePresetModal:I,gridPresets:b,handleSelectPreset:y,handleOpenDeletePresetModal:j,selectedPresetName:g,handleExportPresets:J,handleImportPresets:X,handleImportButtonClick:Y,fileInputRef:N,filters:u.filter})}),p.jsx(el,{isShown:S,title:p.jsx(vt,{id:"dataGrid.createNewPreset.title",message:"Create new preset"}),onCancel:k,onConfirm:P,isConfirmDisabled:!M,width:"narrow",children:p.jsx(Ri,{type:"text",onChange:D,value:M,label:p.jsx(vt,{id:"dataGrid.presetName.title",message:"Preset name"})})}),p.jsx(el,{isShown:B,title:p.jsx(vt,{id:"dataGrid.deletePreset.title",message:"Delete preset"}),onCancel:W,onConfirm:R,isConfirmDisabled:!T,width:"narrow",children:p.jsxs(p.Fragment,{children:[p.jsx(vt,{id:"dataGrid.deletePreset.confirm",message:"Are you sure you want to delete preset"}),' "',T,'" ?']})})]})},X4e=G.span`
   display: flex;
   align-items: center;
   & > :nth-child(2) {

package/ui/utils/translations.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Trans } from '@lingui/react';
 /** catalog for lungui to track translations - DO NOT REMOVE */
 var Translations = function () {
-    return (_jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), _jsx(Trans, { id: "dataGrid.buttonGridConfig", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.title", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.buttonReset", message: "Reset all" }), _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }), _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "form.buttonImport", message: "Import" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }), ",", _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }), ",", _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: "select all" }), _jsx(Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options' }), ",", _jsx(Trans, { id: "dataGrid.deleteItem", message: "Delete" }), ",", _jsx(Trans, { id: "dataGrid.columnLot.NA", message: "N/A" }), ",", _jsx(Trans, { id: "dataGrid.buttonActions", message: "Actions" }), ",", _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.all", message: "All" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.yes", message: "Yes" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.no", message: "No" }), _jsx(Trans, { id: "dataGrid.checkedRowsCount", message: "Selected {checkedRowsCount} items" }), ",", _jsx(Trans, { id: "dataGrid.filterCell", message: "Type to filter" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.from", message: "From" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.to", message: "To" }), ",", _jsx(Trans, { id: "manageColumn.searchPlaceholder", message: "Find column..." }), ",", _jsx(Trans, { id: "dataGrid.comparator.equals", message: "Equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notEquals", message: "Not equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThan", message: "Less than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThanOrEquals", message: "Less than or equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThan", message: "Greater than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThanOrEquals", message: "Greater than or equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.contains", message: "Contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notContains", message: "Not contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.startsWith", message: "Starts with'" }), ",", _jsx(Trans, { id: "dataGrid.comparator.endsWith", message: "Ends with" }), ",", _jsx(Trans, { id: "select.noOptions", message: "no options" }), ",", _jsx(Trans, { id: "components.dropdown.loading", message: "Loading..." }), ",", _jsx(Trans, { id: "components.dropdown.placeholder", message: "Select..." }), ",", _jsx(Trans, { id: "components.dropdown.notReact", message: "Select related values first..." }), ",", _jsx(Trans, { id: "components.dropdown.writeMoreChars", message: "Write at least ${asyncLoadMinChars} characters." }), ",", _jsx(Trans, { id: "components.dropdown.noOptions", message: "No options" }), ",", _jsx(Trans, { id: "components.dropdown.newOption", message: "new value" }), ",", _jsx(Trans, { id: "form.general.min2Chars", message: "Minimal length is 2 characters." }), ",", _jsx(Trans, { id: "controlButtons.searchPlaceholder", message: "Search ${translatedValue} ..." }), ",", _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }), _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Create preset" }), _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Preset name" }), _jsx(Trans, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), _jsx(Trans, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }), _jsx(Trans, { id: "dataGrid.noPresets.title", message: "No presets available" }), _jsx(Trans, { id: "dataGrid.exportPreset.title", message: "Export presets" }), _jsx(Trans, { id: "dataGrid.importPreset.title", message: "Import presets" }), _jsx(Trans, { id: "dataGrid.createNewPreset.title", message: "Create new preset" }), _jsx(Trans, { id: "card.entrustLogisticsEshopProfessionals", message: "Entrust the logistics of your e-shop to professionals." }), _jsx(Trans, { id: "form.heading.support", message: "Support:" }), _jsx(Trans, { id: "requiredField", message: "Required field" }), _jsx(Trans, { id: "form.login.label", message: "Login" }), _jsx(Trans, { id: "form.password.label", message: "Password" }), _jsx(Trans, { id: "form.distributionCenter.label", message: "Distribution center" }), _jsx(Trans, { id: "form.buttonSignIn", message: "Sign in" }), _jsx(Trans, { id: "footer.collapse", message: "Collapse" }), _jsx(Trans, { id: "step", message: "Step" }), _jsx(Trans, { id: "logout", message: "Logout" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), _jsx(Trans, { id: "dataGrid.buttonGridConfig", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.title", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.buttonReset", message: "Reset all" }), _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }), _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "form.buttonImport", message: "Import" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }), ",", _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }), ",", _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: "select all" }), _jsx(Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options' }), ",", _jsx(Trans, { id: "dataGrid.deleteItem", message: "Delete" }), ",", _jsx(Trans, { id: "dataGrid.columnLot.NA", message: "N/A" }), ",", _jsx(Trans, { id: "dataGrid.buttonActions", message: "Actions" }), ",", _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.all", message: "All" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.yes", message: "Yes" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.no", message: "No" }), _jsx(Trans, { id: "dataGrid.checkedRowsCount", message: "Selected {checkedRowsCount} items" }), ",", _jsx(Trans, { id: "dataGrid.filterCell", message: "Type to filter" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.from", message: "From" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.to", message: "To" }), ",", _jsx(Trans, { id: "manageColumn.searchPlaceholder", message: "Find column..." }), ",", _jsx(Trans, { id: "dataGrid.comparator.equals", message: "Equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notEquals", message: "Not equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThan", message: "Less than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThanOrEquals", message: "Less than or equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThan", message: "Greater than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThanOrEquals", message: "Greater than or equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.contains", message: "Contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notContains", message: "Not contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.startsWith", message: "Starts with'" }), ",", _jsx(Trans, { id: "dataGrid.comparator.endsWith", message: "Ends with" }), ",", _jsx(Trans, { id: "select.noOptions", message: "no options" }), ",", _jsx(Trans, { id: "components.dropdown.loading", message: "Loading..." }), ",", _jsx(Trans, { id: "components.dropdown.placeholder", message: "Select..." }), ",", _jsx(Trans, { id: "components.dropdown.notReact", message: "Select related values first..." }), ",", _jsx(Trans, { id: "components.dropdown.writeMoreChars", message: "Write at least ${asyncLoadMinChars} characters." }), ",", _jsx(Trans, { id: "components.dropdown.noOptions", message: "No options" }), ",", _jsx(Trans, { id: "components.dropdown.newOption", message: "new value" }), ",", _jsx(Trans, { id: "form.general.min2Chars", message: "Minimal length is 2 characters." }), ",", _jsx(Trans, { id: "controlButtons.searchPlaceholder", message: "Search ${translatedValue} ..." }), ",", _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }), _jsx(Trans, { id: "dataGrid.presetName.title", message: "Preset name" }), _jsx(Trans, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), _jsx(Trans, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }), _jsx(Trans, { id: "dataGrid.noPresets.title", message: "No presets available" }), _jsx(Trans, { id: "dataGrid.exportPreset.title", message: "Export presets" }), _jsx(Trans, { id: "dataGrid.importPreset.title", message: "Import presets" }), _jsx(Trans, { id: "dataGrid.createNewPreset.title", message: "Create new preset" }), _jsx(Trans, { id: "card.entrustLogisticsEshopProfessionals", message: "Entrust the logistics of your e-shop to professionals." }), _jsx(Trans, { id: "form.heading.support", message: "Support:" }), _jsx(Trans, { id: "requiredField", message: "Required field" }), _jsx(Trans, { id: "form.login.label", message: "Login" }), _jsx(Trans, { id: "form.password.label", message: "Password" }), _jsx(Trans, { id: "form.distributionCenter.label", message: "Distribution center" }), _jsx(Trans, { id: "form.buttonSignIn", message: "Sign in" }), _jsx(Trans, { id: "footer.collapse", message: "Collapse" }), _jsx(Trans, { id: "step", message: "Step" }), _jsx(Trans, { id: "logout", message: "Logout" })] }));
 };