@mailstep/design-system 0.5.0-beta.3 → 0.5.0-beta.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.5.0-beta.3",
+  "version": "0.5.0-beta.31",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -19,9 +19,10 @@
     "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\""
   },
   "devDependencies": {
+    "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/preset-typescript": "^7.23.3",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
@@ -29,8 +30,8 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/macro": "3.15.0",
-    "@lingui/react": "3.15.0",
+    "@lingui/react": "3.17.2",
+    "@popperjs/core": "^2.11.8",
     "@storybook/addon-controls": "7.6.8",
     "@storybook/addon-essentials": "7.6.8",
     "@storybook/addon-interactions": "7.6.8",
@@ -52,21 +53,27 @@
     "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.2.1",
     "@xstyled/styled-components": "^3.8.0",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "0.6.15",
     "faker": "^5.1.0",
     "immer": "9.0.7",
     "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
     "react-redux": "*",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-script": "^2.0.5",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
@@ -90,19 +97,26 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/macro": "3.15.0",
-    "@lingui/react": "3.15.0",
+    "@lingui/react": "3.17.2",
+    "@lingui/core": "3.17.2",
+    "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
+    "babel-plugin-macros": "^3.1.0",
     "immer": "9.0.7",
     "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
     "react-redux": ">=4.0.5",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
@@ -114,13 +128,5 @@
   },
   "resolutions": {
     "jackspeak": "2.1.1"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.11.8",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
-    "react-onclickoutside": "^6.13.0",
-    "react-popper": "^2.3.0",
-    "react-select": "^5.8.0"
   }
 }

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

@@ -1,3 +1,6 @@
-import { CommonGridProps } from './types';
-declare const CommonGrid: ({ filters, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, hideColumnConfig, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: CommonGridProps) => JSX.Element;
+import { CommonGridProps, FiltersConfig } from './types';
+type Props = CommonGridProps & {
+    filters?: FiltersConfig;
+};
+declare const CommonGrid: ({ filters, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, hideColumnConfig, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: Props) => JSX.Element;
 export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { x } from '@xstyled/styled-components';
 import { Row, MessageCell } from './components/Table';
@@ -21,7 +21,6 @@ import HeadRow from './components/HeadRow';
 import useUxReset from './hooks/useUxReset';
 import useRowsKeyControls from './hooks/useRowsKeyControls';
 import useColumnSizes from './hooks/useColumnSizes';
-import { Provider as ContextProvider } from './CommonGridContext';
 import { isColumnOn, getGroups } from './utils';
 import { initialState } from './store';
 import { Trans } from '@lingui/react';
@@ -95,7 +94,7 @@ var CommonGrid = function (_a) {
         gridBoxRef.current = node;
         !!gridRef && (gridRef.current = node);
     }, []);
-    return (_jsxs(ContextProvider, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, setColumnsOrder: setColumnsOrder, columnsOrder: columnsOrder, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, setColumnsOrder: setColumnsOrder, columnsOrder: columnsOrder, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -29,7 +29,7 @@ import { useModal } from '../Modal/hooks/useModal';
 import useManageColumn from './hooks/useManageColumn';
 import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip, StyledColumnButton, } from './styles';
 import { H6 } from '../../Elements/Typography';
-import HidePrint from './components/HidePrint/HidePrint';
+import HidePrint from '../HidePrint/HidePrint';
 import ControlButtons from './components/ControlButtons';
 import { Rows } from '../../Elements/Icon/icons/Rows';
 import { x } from '@xstyled/styled-components';
@@ -40,7 +40,7 @@ import Modal from '../Modal';
 import ManageColumnForm from './components/ManageColumnForm';
 import { Trans } from '@lingui/react';
 var StyledCommonGrid = function (props) {
-    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, onExport = props.onExport, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "onExport", "hideControlButtons", "floatingButtonProps"]);
+    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
     var rowHeight = 40;
     var _b = useGetGridHeight(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
@@ -62,6 +62,6 @@ var StyledCommonGrid = function (props) {
         gridSelectors: gridSelectors,
         onClose: onClose,
     }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, hasColouredRows: true, floatingButtonProps: floatingButtonProps }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isAbsolute: !!gridHeight, children: [_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, onExport: onExport }), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, hasColouredRows: true, floatingButtonProps: floatingButtonProps }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isAbsolute: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
 };
 export default StyledCommonGrid;

package/ui/Blocks/CommonGrid/StandardButtons.js

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

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

@@ -5,7 +5,8 @@ type Props = {
     actionColumn?: ActionColumn;
     onBatchAction?: OnBatchActionFn;
     rowsData: RowProps[];
-    onExport?: (range: 'filtered' | 'selected', format: string) => void;
+    processCheckedValues?: () => void;
+    processCheckedValuesTitle?: string;
 };
-declare const ActionHead: ({ gridActions, gridSelectors, actionColumn, onBatchAction, rowsData, onExport }: Props) => JSX.Element;
+declare const ActionHead: ({ gridActions, gridSelectors, actionColumn, onBatchAction, rowsData, processCheckedValues, processCheckedValuesTitle, }: Props) => JSX.Element;
 export default ActionHead;

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

@@ -6,11 +6,11 @@ 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';
 import ButtonMore from '../ButtonMore/ButtonMore';
+import { i18n } from '@lingui/core';
+import { useToggleAllCheckbox } from '../../hooks/useToggleAllCheckbox';
+import { useGridActionTrigger } from '../../hooks/useGridActionTrigger';
 var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"])));
 var ActionsWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"], ["\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"])));
 var StyledText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"])));
@@ -18,12 +18,11 @@ var ContentWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTempl
 var ButtonsWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n\n  & > * {\n    margin-left: 10px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n\n  & > * {\n    margin-left: 10px;\n  }\n"])));
 var ActionHead = function (_a) {
     var _b;
-    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, actionColumn = _a.actionColumn, onBatchAction = _a.onBatchAction, rowsData = _a.rowsData, onExport = _a.onExport;
+    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, actionColumn = _a.actionColumn, onBatchAction = _a.onBatchAction, rowsData = _a.rowsData, processCheckedValues = _a.processCheckedValues, processCheckedValuesTitle = _a.processCheckedValuesTitle;
     var handleUxChange = (gridActions || {}).handleUxChange;
     var _c = (gridSelectors || {}).uxState, uxState = _c === void 0 ? {} : _c;
-    var _d = useModal(), onExportClick = _d.onOpen, exportFormVisible = _d.isOpen, hideExport = _d.onClose;
-    var _e = useToggleAllCheckbox(rowsData, uxState, handleUxChange), checked = _e[0], toggleCheckbox = _e[1];
-    var _f = useGridActionTrigger(rowsData, uxState, actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions, onBatchAction), enabledActions = _f[0], onSubmit = _f[1];
+    var _d = useToggleAllCheckbox(rowsData, uxState, handleUxChange), checked = _d[0], toggleCheckbox = _d[1];
+    var _e = useGridActionTrigger(rowsData, uxState, actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions, onBatchAction), enabledActions = _e[0], onSubmit = _e[1];
     var checkedRowsCount = Object.keys((uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows) || []).length;
     var checkAll = useCallback(function () {
         if (!checked) {
@@ -35,19 +34,17 @@ var ActionHead = function (_a) {
         if ((_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _a === void 0 ? void 0 : _a.length) {
             return actionColumn.actionOptions.map(function (option) { return ({
                 title: option.label,
-                // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
                 onClick: function () { return onSubmit(option.value); },
                 link: '#',
             }); });
         }
         return [];
     }, [actionColumn, onSubmit]);
-    var canExport = typeof onExport === 'function';
-    return (_jsx(Wrap, { children: checkedRowsCount > 0 && (_jsx(ActionsWrap, { children: _jsxs(ContentWrap, { children: [_jsx(StyledText, { children: t({
+    return (_jsx(Wrap, { children: checkedRowsCount > 0 && (_jsx(ActionsWrap, { children: _jsxs(ContentWrap, { children: [_jsx(StyledText, { children: i18n._({
                             id: 'dataGrid.checkedRowsCount',
                             message: "Selected {checkedRowsCount} items",
                             values: { checkedRowsCount: checkedRowsCount },
-                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondaryLg", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), canExport && (_jsx(Button, { type: "button", onClick: onExportClick, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
+                        }) }), _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" }) }), processCheckedValues && (_jsx(Button, { type: "button", onClick: processCheckedValues, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle ? (processCheckedValuesTitle) : (_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,15 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { t } from '@lingui/macro';
+import { useMemo } from 'react';
 import GridSelect from '../GridSelect';
+import { i18n } from '@lingui/core';
 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: i18n._({ id: 'dataGrid.columnActive.filterOptions.all', message: 'All' }) },
+    { value: '1', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.yes', message: 'Yes' }) },
+    { value: '0', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.no', message: 'No' }) },
 ]; };
 var SelectFilter = function (_a) {
     var restProps = __rest(_a, []);
-    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/ColumnFilterCell.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { x } from '@xstyled/styled-components';
 import { Cell } from './Table';
-import { useAddFilter } from '../utils/public';
+import { useAddFilter } from '../hooks/useAddFilter';
 import { createFilterType, getStickyCollClassNames } from '../utils';
 import { getCellSizeProps, getGroupClassNames } from '../utils';
 import OverlayComponent from './FilterDropdown';

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

@@ -32,7 +32,7 @@ import { getActionCellSizeProps } from '../utils';
 import { rowClassSymbol } from '../types';
 import { isFunction } from 'lodash/fp';
 import { useTimeMeasurement } from './utils';
-import Toggle from '../../../Elements/Toggle/Toggle';
+import Checkbox from '../../../Forms/Checkbox';
 import Button from '../../../Elements/Button/Button';
 var EmptySpan = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -105,6 +105,6 @@ var DataRow = function (_a) {
         return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
     }, [actionColumn]);
     var displayReadEditCell = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
-    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Toggle, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", appearance: "primary", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", appearance: "primary", mt: "5px", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
+    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", appearance: "primary", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", appearance: "primary", mt: "5px", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
 };
 export default DataRow;

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

@@ -29,10 +29,10 @@ 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';
+import { i18n } from '@lingui/core';
 var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"
     // User readable date range.
 ])));
@@ -64,7 +64,7 @@ var DatePickerRange = function (props) {
     var _e = useState((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
     var _f = useState((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
     var timeFormat = filterTime ? 'HH:mm' : false;
-    var placeholder = t({ id: 'dataGrid.filterCell', message: 'Type to filter' });
+    var placeholder = i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
     var cleanValue = React.useMemo(function () { return [
         typeof (value === null || value === void 0 ? void 0 : value[0]) === 'string' ? new Date(value[0]) : (value === null || value === void 0 ? void 0 : value[0]) || undefined,
         typeof (value === null || value === void 0 ? void 0 : value[1]) === 'string' ? new Date(value[1]) : (value === null || value === void 0 ? void 0 : value[1]) || undefined,
@@ -107,7 +107,7 @@ var DatePickerRange = function (props) {
     // Check if the second value is not selected and the first value is the same as the initial value
     var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
     var ref = useClickOutside({ onClose: onClose });
-    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, appearance: "grid", onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && 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 && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null }))] })) }) })] }));
 };
 export default DatePickerRange;
 var templateObject_1;

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

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import styled, { x } from '@xstyled/styled-components';
 import Button from '../../../../Elements/Button/Button';
-import DropdownSelect from '../DropdownSelect';
+import DropdownSelect from '../../../../Elements/DropdownSelect';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
 var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
 var ControlButton = function (_a) {

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

@@ -16,7 +16,7 @@ import throttle from 'lodash/throttle';
 import ColumnFilterCell from './ColumnFilterCell';
 import { Row, Cell } from './Table';
 import { getActionCellSizeProps, getFilterName } from '../utils';
-import { useToggleAllCheckbox } from '../utils/public';
+import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
 import Toggle from '../../../Elements/Toggle/Toggle';
 var FilterRow = function (_a) {
     var _b, _c;

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/ManageColumnForm/ManageColumnForm.js

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

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

@@ -16,12 +16,12 @@ 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';
 import { isObject } from 'lodash';
 import { H6 } from '../../../../../Elements/Typography/Typography';
+import { i18n } from '@lingui/core';
 var RowLayout = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
     var $isVisible = _a.$isVisible;
     return ($isVisible ? 'flex' : 'none');
@@ -33,7 +33,7 @@ export var ActionRow = function (_a) {
     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 });
+        i18n._({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message });
     var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase());
     var handleToggleChange = useCallback(function () {
         setColumnsConfigOptions(function (prevOptions) {

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

@@ -22,33 +22,33 @@ 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';
+import { i18n } from '@lingui/core';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
     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: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: i18n._({ id: 'dataGrid.comparator.lessThan', message: 'Less than' }), value: 'lt', icon: 'lessThen' },
     {
-        label: t({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
+        label: i18n._({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
         value: 'lte',
         icon: 'lessThanEqual',
     },
-    { label: t({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
+    { label: i18n._({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
     {
-        label: t({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
+        label: i18n._({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
         value: 'gte',
         icon: 'greaterThanEqual',
     },
 ]; };
 var createEqualComparators = [
-    { label: 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: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
 ];
 var NumberRange = function (props) {
     var numberComparators = createNumberComparators();

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

@@ -22,31 +22,31 @@ 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';
 import IconList from '../IconList/IconList';
+import { i18n } from '@lingui/core';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
     return _jsx("div", { children: children });
 };
 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: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: i18n._({ id: 'dataGrid.comparator.notContains', message: 'Not contains' }), value: 'notLike', icon: 'false' },
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: i18n._({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
+    { label: i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' },
 ]; };
 var createPresentTextComparators = function () { return [
-    { label: t({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
-    { label: t({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
 ]; };
 var createEqualComparators = function () { return [
-    { label: 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: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
 ]; };
 var validations = {
     ip: {
@@ -56,7 +56,7 @@ var validations = {
 };
 var TextRange = function (props) {
     var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "validation"]);
-    var eqOnlyTxt = t({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
+    var eqOnlyTxt = i18n._({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
     var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
     var textComparators = createTextComparators();
     var presentTextComparators = createPresentTextComparators();

package/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.d.ts

@@ -1,5 +1,4 @@
 import { DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
-export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-declare const Image: ({ rowData, column }: Props) => JSX.Element | null;
-export default Image;
+export declare const HoverBubble: ({ rowData, column }: Props) => JSX.Element | null;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.js

@@ -6,8 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@xstyled/styled-components';
 import get from 'lodash/fp/get';
 var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  :hover {\n    cursor: pointer;\n    .tooltip {\n      display: block;\n    }\n  }\n"], ["\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  :hover {\n    cursor: pointer;\n    .tooltip {\n      display: block;\n    }\n  }\n"])));
-export var Tooltip = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"], ["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"])));
-var Image = function (_a) {
+var Tooltip = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"], ["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"])));
+export var HoverBubble = function (_a) {
     var rowData = _a.rowData, column = _a.column;
     var value = get(column.name, rowData);
     if (value) {
@@ -15,5 +15,4 @@ var Image = function (_a) {
     }
     return null;
 };
-export default Image;
 var templateObject_1, templateObject_2;