@mailstep/design-system 0.6.2-beta.1 → 0.6.2-beta.3

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,22 +10,26 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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';
-import OversizedScroll from './components/OversizedScroll';
-import GroupRow from './components/GroupRow';
-import FilterRow from './components/FilterRow';
-import DataRow from './components/DataRow';
-import HeadRow from './components/HeadRow';
-import useUxReset from './hooks/useUxReset';
-import useRowsKeyControls from './hooks/useRowsKeyControls';
-import useColumnSizes from './hooks/useColumnSizes';
-import { isColumnOn, getGroups } from './utils';
-import { initialState } from './store';
-import { Trans } from '@lingui/react';
-import FloatingButton from './components/FloatingButton/FloatingButton';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = require("@xstyled/styled-components");
+var Table_1 = require("./components/Table");
+var OversizedScroll_1 = __importDefault(require("./components/OversizedScroll"));
+var GroupRow_1 = __importDefault(require("./components/GroupRow"));
+var FilterRow_1 = __importDefault(require("./components/FilterRow"));
+var DataRow_1 = __importDefault(require("./components/DataRow"));
+var HeadRow_1 = __importDefault(require("./components/HeadRow"));
+var useUxReset_1 = __importDefault(require("./hooks/useUxReset"));
+var useRowsKeyControls_1 = __importDefault(require("./hooks/useRowsKeyControls"));
+var useColumnSizes_1 = __importDefault(require("./hooks/useColumnSizes"));
+var utils_1 = require("./utils");
+var store_1 = require("./store");
+var react_2 = require("@lingui/react");
+var FloatingButton_1 = __importDefault(require("./components/FloatingButton/FloatingButton"));
 var rowsStyles = { outline: 'none' };
 var defaultVoidFunction = function () {
     var args = [];
@@ -33,7 +38,7 @@ var defaultVoidFunction = function () {
     }
     return null;
 };
-var defaultUxState = initialState.uxState;
+var defaultUxState = store_1.initialState.uxState;
 var defaultColumnsWidth = {};
 var defaultPerPageOptions = [10, 20, 50, 100];
 var CommonGrid = function (_a) {
@@ -44,9 +49,9 @@ var CommonGrid = function (_a) {
     isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, columnsDefinitions = _a.columnsDefinitions, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, hideColumnConfig = _a.hideColumnConfig, className = _a.className, gridRef = _a.gridRef, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps;
     var _c = gridSelectors.uxState, uxState = _c === void 0 ? defaultUxState : _c, columnConfig = gridSelectors.columnConfig, _d = gridSelectors.columnsWidth, columnsWidth = _d === void 0 ? defaultColumnsWidth : _d, columnsWidthVariant = gridSelectors.columnsWidthVariant, _e = gridSelectors.page, page = _e === void 0 ? 1 : _e, filter = gridSelectors.filter, sorting = gridSelectors.sorting, _f = gridSelectors.rowsPerPage, rowsPerPage = _f === void 0 ? 10 : _f;
     var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _g = gridActions.addFilter, addFilter = _g === void 0 ? defaultVoidFunction : _g, _h = gridActions.addSorting, addSorting = _h === void 0 ? defaultVoidFunction : _h, _j = gridActions.setColumnWidth, setColumnWidth = _j === void 0 ? defaultVoidFunction : _j, _k = gridActions.setColumnsOrder, setColumnsOrder = _k === void 0 ? defaultVoidFunction : _k;
-    var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
-    useUxReset(rowsData, uxState, clearUxState);
-    var checksColumnsOrder = React.useCallback(function (colsOrder) {
+    var handleRowsKeyDown = (0, useRowsKeyControls_1.default)(rowsData, uxState, handleUxChange);
+    (0, useUxReset_1.default)(rowsData, uxState, clearUxState);
+    var checksColumnsOrder = react_1.default.useCallback(function (colsOrder) {
         var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });
         var stickyLeftColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo !== 'right'; });
         if (stickyLeftColls.length > 1 || stickyRightColls.length > 1) {
@@ -60,7 +65,7 @@ var CommonGrid = function (_a) {
         }
     }, [columnsDefinitions]);
     // todo refactor as part of definitions
-    var columnsOrder = React.useMemo(function () {
+    var columnsOrder = react_1.default.useMemo(function () {
         var _a;
         var order = ((_a = gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.columnsOrder) === null || _a === void 0 ? void 0 : _a.length)
             ? gridSelectors.columnsOrder
@@ -69,8 +74,8 @@ var CommonGrid = function (_a) {
         return order;
     }, [columnsDefinitions, gridSelectors.columnsOrder]);
     // filtered and ordered columns definition, relevant columns definition to iterate over and render
-    var displayColumnsDefinitions = React.useMemo(function () {
-        return (!hideColumnConfig ? columnsDefinitions.filter(function (column) { return isColumnOn(column, columnConfig); }) : columnsDefinitions).sort(function (col1, col2) {
+    var displayColumnsDefinitions = react_1.default.useMemo(function () {
+        return (!hideColumnConfig ? columnsDefinitions.filter(function (column) { return (0, utils_1.isColumnOn)(column, columnConfig); }) : columnsDefinitions).sort(function (col1, col2) {
             var i = (columnsOrder || []).indexOf(col1.name);
             var j = (columnsOrder || []).indexOf(col2.name);
             return i > j ? 1 : i < j ? -1 : 0;
@@ -79,27 +84,27 @@ var CommonGrid = function (_a) {
     var GridMessage;
     var messageClass = 'info';
     if (isLoading)
-        GridMessage = _jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." });
+        GridMessage = (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." });
     if (!isLoading && (!rowsData || rowsData.length < 1))
-        GridMessage = _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." });
+        GridMessage = (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.status.noDataFound", message: "No data found." });
     if (!isLoading && errorMessage) {
         GridMessage = errorMessage;
         messageClass = 'error';
     }
-    var _l = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth), displayColumnsWidth = _l.displayColumnsWidth, totalColumnsWidth = _l.totalColumnsWidth, gridBoxRef = _l.gridBoxRef, handleResizeDrag = _l.handleResizeDrag;
-    var groups = React.useMemo(function () {
-        return getGroups(displayColumnsDefinitions);
+    var _l = (0, useColumnSizes_1.default)(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth), displayColumnsWidth = _l.displayColumnsWidth, totalColumnsWidth = _l.totalColumnsWidth, gridBoxRef = _l.gridBoxRef, handleResizeDrag = _l.handleResizeDrag;
+    var groups = react_1.default.useMemo(function () {
+        return (0, utils_1.getGroups)(displayColumnsDefinitions);
     }, [displayColumnsDefinitions]);
-    var commonGridRef = React.useCallback(function (node) {
+    var commonGridRef = react_1.default.useCallback(function (node) {
         gridBoxRef.current = node;
         !!gridRef && (gridRef.current = node);
     }, []);
-    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 &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styled_components_1.x.div, { className: className || '', children: (0, jsx_runtime_1.jsxs)(OversizedScroll_1.default, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && ((0, jsx_runtime_1.jsx)(Table_1.Row, { className: "dataRow", align: "center", children: (0, jsx_runtime_1.jsx)(Table_1.MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && ((0, jsx_runtime_1.jsx)(GroupRow_1.default, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), (0, jsx_runtime_1.jsx)(HeadRow_1.default, { 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; }) && ((0, jsx_runtime_1.jsx)(FilterRow_1.default, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), (0, jsx_runtime_1.jsx)("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {
                                     var rowIndex = rowsPerPage * page + (index + 1) - rowsPerPage;
-                                    return (_jsx(DataRow, { rowData: row, rowIndex: rowIndex, uxState: uxState, isEven: hasColouredRows && (index + 1) % 2 === 0, allowRowSelect: allowRowSelect, allowRowSelectOnAction: allowRowSelectOnAction, onRowAction: onRowAction, onUxChange: handleUxChange, onRowEditClick: onRowEditClick, onRowReadClick: onRowReadClick, onRowClick: onRowClick, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, displayColumnsWidth: displayColumnsWidth, groups: groups }, row.id));
-                                }) })] }) }), floatingButtonProps && _jsx(FloatingButton, __assign({}, floatingButtonProps))] }));
+                                    return ((0, jsx_runtime_1.jsx)(DataRow_1.default, { rowData: row, rowIndex: rowIndex, uxState: uxState, isEven: hasColouredRows && (index + 1) % 2 === 0, allowRowSelect: allowRowSelect, allowRowSelectOnAction: allowRowSelectOnAction, onRowAction: onRowAction, onUxChange: handleUxChange, onRowEditClick: onRowEditClick, onRowReadClick: onRowReadClick, onRowClick: onRowClick, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, displayColumnsWidth: displayColumnsWidth, groups: groups }, row.id));
+                                }) })] }) }), floatingButtonProps && (0, jsx_runtime_1.jsx)(FloatingButton_1.default, __assign({}, floatingButtonProps))] }));
 };
-export default CommonGrid;
+exports.default = CommonGrid;

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,47 +21,51 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import useGetGridHeight from './hooks/useGetGridHeight';
-import { useEffect, useMemo } from 'react';
-import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils';
-import useEditReadAsColumn from './hooks/useEditReadAsColumn';
-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 '../HidePrint/HidePrint';
-import ControlButtons from './components/ControlButtons';
-import { x } from '@xstyled/styled-components';
-import ActionHead from './components/ActionHead';
-import { Pagination } from '../../Elements/Pagination';
-import TablePagination from './components/TablePagination';
-import Modal from '../Modal';
-import ManageColumnForm from './components/ManageColumnForm';
-import { Trans } from '@lingui/react';
-import { Settings2 } from '../../Elements/Icon/icons/Settings2';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var useGetGridHeight_1 = __importDefault(require("./hooks/useGetGridHeight"));
+var react_1 = require("react");
+var utils_1 = require("./utils");
+var useEditReadAsColumn_1 = __importDefault(require("./hooks/useEditReadAsColumn"));
+var useModal_1 = require("../Modal/hooks/useModal");
+var useManageColumn_1 = __importDefault(require("./hooks/useManageColumn"));
+var styles_1 = require("./styles");
+var Typography_1 = require("../../Elements/Typography");
+var HidePrint_1 = __importDefault(require("../HidePrint/HidePrint"));
+var ControlButtons_1 = __importDefault(require("./components/ControlButtons"));
+var styled_components_1 = require("@xstyled/styled-components");
+var ActionHead_1 = __importDefault(require("./components/ActionHead"));
+var Pagination_1 = require("../../Elements/Pagination");
+var TablePagination_1 = __importDefault(require("./components/TablePagination"));
+var Modal_1 = __importDefault(require("../Modal"));
+var ManageColumnForm_1 = __importDefault(require("./components/ManageColumnForm"));
+var react_2 = require("@lingui/react");
+var Settings2_1 = require("../../Elements/Icon/icons/Settings2");
 var StyledCommonGrid = function (props) {
     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, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
-    var _b = useGetGridHeight(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
-    useEffect(function () {
+    var _b = (0, useGetGridHeight_1.default)(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
+    (0, react_1.useEffect)(function () {
         var _a;
         if (!queryRowsParam && gridHeight && gridHeight > 0) {
             // Only main grids (without form grids on new pages)
-            var numberOfRows = Math.max(Math.floor(gridHeight / rowHeight - 2), GRID_MIN_ROWS);
+            var numberOfRows = Math.max(Math.floor(gridHeight / utils_1.rowHeight - 2), utils_1.GRID_MIN_ROWS);
             numberOfRows && ((_a = gridActions.setRowsPerPage) === null || _a === void 0 ? void 0 : _a.call(gridActions, numberOfRows));
         }
     }, [gridHeight, gridActions, queryRowsParam]);
-    var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
-    var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
+    var modifiedPassDownProps = (0, useEditReadAsColumn_1.default)(passDownProps);
+    var filters = (0, react_1.useMemo)(function () { return (0, utils_1.getFilters)(optimizeFilters); }, [optimizeFilters]);
     var columns = modifiedPassDownProps.columnsDefinitions;
-    var _c = useModal(), openManageColumnForm = _c.onOpen, manageColumnFormVisible = _c.isOpen, onClose = _c.onClose;
-    var _d = useManageColumn({
+    var _c = (0, useModal_1.useModal)(), openManageColumnForm = _c.onOpen, manageColumnFormVisible = _c.isOpen, onClose = _c.onClose;
+    var _d = (0, useManageColumn_1.default)({
         columns: columns,
         gridActions: gridActions,
         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", sizing: "iconLg", appearance: "ghost", icon: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!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, customPaginationHandler: customPaginationHandler }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), 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 ((0, jsx_runtime_1.jsxs)(styles_1.ContentContainer, { children: [(0, jsx_runtime_1.jsxs)(styles_1.CommonGridWrap, { children: [(0, jsx_runtime_1.jsx)(HidePrint_1.default, { children: (0, jsx_runtime_1.jsxs)(styles_1.StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && ((0, jsx_runtime_1.jsx)(ControlButtons_1.default, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), (0, jsx_runtime_1.jsx)(styles_1.StyledColumnButton, { type: "button", sizing: "iconLg", appearance: "ghost", icon: (0, jsx_runtime_1.jsx)(Settings2_1.Settings2, {}), onClick: openManageColumnForm, children: (0, jsx_runtime_1.jsx)(Typography_1.H6, { variant: "semiBold", children: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), (0, jsx_runtime_1.jsx)(styles_1.CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, hasColouredRows: true }))] }), (0, jsx_runtime_1.jsx)(HidePrint_1.default, { children: (0, jsx_runtime_1.jsxs)(styles_1.BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && ((0, jsx_runtime_1.jsx)(ActionHead_1.default, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), (0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [(0, jsx_runtime_1.jsx)(Pagination_1.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, customPaginationHandler: customPaginationHandler }), (0, jsx_runtime_1.jsx)(TablePagination_1.default, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && ((0, jsx_runtime_1.jsx)(Modal_1.default, { title: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: (0, jsx_runtime_1.jsx)(ManageColumnForm_1.default, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
 };
-export default StyledCommonGrid;
+exports.default = StyledCommonGrid;

package/ui/Blocks/CommonGrid/HoC/withReduxActions.js

@@ -1,11 +1,13 @@
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { createActions, createFullSelector } from '../store';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_redux_1 = require("react-redux");
+var redux_1 = require("redux");
+var store_1 = require("../store");
 var withReduxActions = function (gridName, prefix) {
     if (prefix === void 0) { prefix = 'grid'; }
-    var actions = createActions(gridName);
-    var selectors = createFullSelector(gridName);
-    return connect(function (state) {
+    var actions = (0, store_1.createActions)(gridName);
+    var selectors = (0, store_1.createFullSelector)(gridName);
+    return (0, react_redux_1.connect)(function (state) {
         var _a;
         return (_a = {},
             _a["".concat(prefix, "Selectors")] = selectors(state),
@@ -13,7 +15,7 @@ var withReduxActions = function (gridName, prefix) {
     }, function (dispatch) {
         var _a;
         return (_a = {},
-            _a["".concat(prefix, "Actions")] = bindActionCreators({
+            _a["".concat(prefix, "Actions")] = (0, redux_1.bindActionCreators)({
                 init: actions.init,
                 clearUxState: actions.clearUxState,
                 handleUxChange: actions.handleUxChange,
@@ -33,4 +35,4 @@ var withReduxActions = function (gridName, prefix) {
             _a);
     });
 };
-export default withReduxActions;
+exports.default = withReduxActions;

package/ui/Blocks/CommonGrid/StandardButtons.js

@@ -1,36 +1,45 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Trans } from '@lingui/react';
-import ButtonMore from './components/ButtonMore/ButtonMore';
-export var getCreateButton = function (onCreate, canCreate, disabled) { return ({
-    label: _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }),
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMoreButton = exports.getImportButton = exports.getCreateButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@lingui/react");
+var ButtonMore_1 = __importDefault(require("./components/ButtonMore/ButtonMore"));
+var getCreateButton = function (onCreate, canCreate, disabled) { return ({
+    label: (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }),
     style: 'primary',
     onClick: onCreate,
     hide: !canCreate,
     disabled: disabled,
 }); };
-export var getImportButton = function (onImport, canImport, disabled) { return ({
-    label: _jsx(Trans, { id: "form.buttonImport", message: "Import" }),
+exports.getCreateButton = getCreateButton;
+var getImportButton = function (onImport, canImport, disabled) { return ({
+    label: (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "form.buttonImport", message: "Import" }),
     onClick: onImport,
     hide: !canImport,
     disabled: disabled,
 }); };
-export var getMoreButton = function (onExport, onImport, canImport) {
+exports.getImportButton = getImportButton;
+var getMoreButton = function (onExport, onImport, canImport) {
     var items = [];
     if (onImport && canImport) {
         items.push({
-            title: _jsx(Trans, { id: "form.buttonImport", message: "Import" }),
+            title: (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "form.buttonImport", message: "Import" }),
             onClick: onImport,
             link: '#',
             name: 'moreActionImportBtn',
         });
     }
     items.push({
-        title: _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }),
+        title: (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.actionOptions.export", message: "Export" }),
         onClick: onExport,
         link: '#',
         name: 'moreActionExportBtn',
     });
     return {
-        node: _jsx(ButtonMore, { items: items }),
+        node: (0, jsx_runtime_1.jsx)(ButtonMore_1.default, { items: items }),
     };
 };
+exports.getMoreButton = getMoreButton;

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

@@ -1,35 +1,40 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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 { 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"])));
-var ContentWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
-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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var react_2 = require("@lingui/react");
+var Button_1 = require("../../../../Elements/Button");
+var ButtonMore_1 = __importDefault(require("../ButtonMore/ButtonMore"));
+var core_1 = require("@lingui/core");
+var useToggleAllCheckbox_1 = require("../../hooks/useToggleAllCheckbox");
+var useGridActionTrigger_1 = require("../../hooks/useGridActionTrigger");
+var Wrap = styled_components_1.default.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_components_1.default.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_components_1.default.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"])));
+var ContentWrap = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var ButtonsWrap = styled_components_1.default.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, processCheckedValues = _a.processCheckedValues, processCheckedValuesTitle = _a.processCheckedValuesTitle;
     var handleUxChange = (gridActions || {}).handleUxChange;
     var _c = (gridSelectors || {}).uxState, uxState = _c === void 0 ? {} : _c;
-    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 _d = (0, useToggleAllCheckbox_1.useToggleAllCheckbox)(rowsData, uxState, handleUxChange), checked = _d[0], toggleCheckbox = _d[1];
+    var _e = (0, useGridActionTrigger_1.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 () {
+    var checkAll = (0, react_1.useCallback)(function () {
         if (!checked) {
             toggleCheckbox();
         }
     }, [checked, toggleCheckbox]);
-    var actionsOptions = useMemo(function () {
+    var actionsOptions = (0, react_1.useMemo)(function () {
         var _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 ({
@@ -40,11 +45,11 @@ var ActionHead = function (_a) {
         }
         return [];
     }, [actionColumn, onSubmit]);
-    return (_jsx(Wrap, { children: checkedRowsCount > 0 && (_jsx(ActionsWrap, { children: _jsxs(ContentWrap, { children: [_jsx(StyledText, { children: i18n._({
+    return ((0, jsx_runtime_1.jsx)(Wrap, { children: checkedRowsCount > 0 && ((0, jsx_runtime_1.jsx)(ActionsWrap, { children: (0, jsx_runtime_1.jsxs)(ContentWrap, { children: [(0, jsx_runtime_1.jsx)(StyledText, { children: core_1.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" }) }), 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" }))] })] }) })) }));
+                        }) }), (0, jsx_runtime_1.jsxs)(ButtonsWrap, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: checkAll, appearance: "secondaryLg", "data-cy": "checkAllBtn", disabled: checked, children: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), processCheckedValues && ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: processCheckedValues, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle ? (processCheckedValuesTitle) : ((0, jsx_runtime_1.jsx)(react_2.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) && ((0, jsx_runtime_1.jsx)(ButtonMore_1.default, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
 };
-export default ActionHead;
+exports.default = ActionHead;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,18 +1,23 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-var StyledDropdownWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  left: 0;\n  top: 3px;\n  display: flex;\n  flex-direction: column;\n  padding: 2;\n  width: 100%;\n  background-color: ", ";\n  box-shadow: ", ";\n  min-width: 8.9rem;\n  font-size: 12px;\n  font-weight: normal;\n  border-radius: 10px;\n  z-index: 1;\n"], ["\n  position: relative;\n  left: 0;\n  top: 3px;\n  display: flex;\n  flex-direction: column;\n  padding: 2;\n  width: 100%;\n  background-color: ", ";\n  box-shadow: ", ";\n  min-width: 8.9rem;\n  font-size: 12px;\n  font-weight: normal;\n  border-radius: 10px;\n  z-index: 1;\n"])), th.color('white'), th.shadow('dropShadow'));
-var StyledDropdownItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 2 2;\n  border-radius: 6px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: bold;\n  }\n"], ["\n  padding: 2 2;\n  border-radius: 6px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: bold;\n  }\n"])), th.color('bgLightGray1'), th.color('typoPrimary'));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var system_1 = require("@xstyled/system");
+var StyledDropdownWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  left: 0;\n  top: 3px;\n  display: flex;\n  flex-direction: column;\n  padding: 2;\n  width: 100%;\n  background-color: ", ";\n  box-shadow: ", ";\n  min-width: 8.9rem;\n  font-size: 12px;\n  font-weight: normal;\n  border-radius: 10px;\n  z-index: 1;\n"], ["\n  position: relative;\n  left: 0;\n  top: 3px;\n  display: flex;\n  flex-direction: column;\n  padding: 2;\n  width: 100%;\n  background-color: ", ";\n  box-shadow: ", ";\n  min-width: 8.9rem;\n  font-size: 12px;\n  font-weight: normal;\n  border-radius: 10px;\n  z-index: 1;\n"])), system_1.th.color('white'), system_1.th.shadow('dropShadow'));
+var StyledDropdownItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 2 2;\n  border-radius: 6px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: bold;\n  }\n"], ["\n  padding: 2 2;\n  border-radius: 6px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: bold;\n  }\n"])), system_1.th.color('bgLightGray1'), system_1.th.color('typoPrimary'));
 var ActionDropdownMenu = function (_a) {
     var items = _a.items;
-    return (_jsx(StyledDropdownWrap, { children: items.map(function (item, index) {
+    return ((0, jsx_runtime_1.jsx)(StyledDropdownWrap, { children: items.map(function (item, index) {
             var _a;
-            return (_jsx(StyledDropdownItem, { onClick: (_a = item.onClick) !== null && _a !== void 0 ? _a : undefined, children: item.title }, index));
+            return ((0, jsx_runtime_1.jsx)(StyledDropdownItem, { onClick: (_a = item.onClick) !== null && _a !== void 0 ? _a : undefined, children: item.title }, index));
         }) }));
 };
-export default ActionDropdownMenu;
+exports.default = ActionDropdownMenu;
 var templateObject_1, templateObject_2;

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

@@ -1,45 +1,73 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { memo, useRef } from 'react';
-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 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var system_1 = require("@xstyled/system");
+var react_2 = require("@lingui/react");
+var ActionDropdownMenu_1 = __importDefault(require("./ActionDropdownMenu"));
+var Popover_1 = __importDefault(require("../../../../Popover"));
+var Icon_1 = __importDefault(require("../../../../../Elements/Icon/Icon"));
+var Content = styled_components_1.default.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"])), system_1.th.color('white'), function (_a) {
     var $isDisabled = _a.$isDisabled;
-    return ($isDisabled ? th.color('lightGray7') : th.color('lightGray5'));
+    return ($isDisabled ? system_1.th.color('lightGray7') : system_1.th.color('lightGray5'));
 }, function (_a) {
     var $isDisabled = _a.$isDisabled, $isOpened = _a.$isOpened;
-    return $isDisabled ? th.color('lightGray7') : $isOpened ? th.color('blue2') : th.color('lightGray5');
+    return $isDisabled ? system_1.th.color('lightGray7') : $isOpened ? system_1.th.color('blue2') : system_1.th.color('lightGray5');
 }, function (_a) {
     var $isDisabled = _a.$isDisabled;
     return ($isDisabled ? 'not-allowed' : 'pointer');
-}, th.color('gray1'), th.color('gray1'));
-var IconWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"], ["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"])), function (_a) {
+}, system_1.th.color('gray1'), system_1.th.color('gray1'));
+var IconWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"], ["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"])), function (_a) {
     var $isDisabled = _a.$isDisabled, $isOpened = _a.$isOpened;
-    return $isDisabled ? th.color('lightGray6') : $isOpened ? th.color('blue2') : th.color('gray1');
+    return $isDisabled ? system_1.th.color('lightGray6') : $isOpened ? system_1.th.color('blue2') : system_1.th.color('gray1');
 }, function (_a) {
     var $isOpened = _a.$isOpened;
     return ($isOpened ? '180deg' : 0);
 });
 var ActionDropdownSelect = function (_a) {
     var options = _a.options, onSelect = _a.onSelect, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
-    var _c = React.useState(false), showDropdownMenu = _c[0], setShowDropdownMenu = _c[1];
-    var toggleDropdownMenu = React.useCallback(function () {
+    var _c = react_1.default.useState(false), showDropdownMenu = _c[0], setShowDropdownMenu = _c[1];
+    var toggleDropdownMenu = react_1.default.useCallback(function () {
         setShowDropdownMenu(function (prev) { return !prev; });
     }, []);
-    var handleSelectItem = React.useCallback(function (item) {
+    var handleSelectItem = react_1.default.useCallback(function (item) {
         setShowDropdownMenu(false);
         onSelect(item.value);
     }, [onSelect]);
     var items = options.map(function (item) { return ({ title: item.label, onClick: function () { return handleSelectItem(item); }, link: '#' }); });
-    var ref = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsxs(Content, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, onClick: toggleDropdownMenu, ref: ref, children: [_jsx("p", { children: _jsx(Trans, { id: "dataGrid.buttonActions", message: "Actions" }) }), _jsx(IconWrap, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, children: _jsx(Icon, { icon: "goDown" }) })] }), showDropdownMenu && !disabled && (items === null || items === void 0 ? void 0 : items.length) > 0 && (_jsx(Popover, { parentRef: ref, onClose: toggleDropdownMenu, placement: "bottom-start", children: _jsx(ActionDropdownMenu, { items: items }) }))] }));
+    var ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Content, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, onClick: toggleDropdownMenu, ref: ref, children: [(0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.buttonActions", message: "Actions" }) }), (0, jsx_runtime_1.jsx)(IconWrap, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: "goDown" }) })] }), showDropdownMenu && !disabled && (items === null || items === void 0 ? void 0 : items.length) > 0 && ((0, jsx_runtime_1.jsx)(Popover_1.default, { parentRef: ref, onClose: toggleDropdownMenu, placement: "bottom-start", children: (0, jsx_runtime_1.jsx)(ActionDropdownMenu_1.default, { items: items }) }))] }));
 };
-export default memo(ActionDropdownSelect);
+exports.default = (0, react_1.memo)(ActionDropdownSelect);
 var templateObject_1, templateObject_2;

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

@@ -1,2 +1,7 @@
-import ActionHead from './ActionHead';
-export default ActionHead;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ActionHead_1 = __importDefault(require("./ActionHead"));
+exports.default = ActionHead_1.default;