@mailstep/design-system 0.6.2-beta.8 → 0.6.2-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.2-beta.8",
+  "version": "0.6.2-beta.9",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "storybook": "storybook dev -p 6006",
-    "build": "rm -rf ./build && tsc && vite build && cp package.json build && cp README.md build",
+    "build": "rm -rf ./build && tsc && tsc-alias && vite build && cp package.json build && cp README.md build",
     "build-storybook": "storybook build",
     "deploy": "npm run build && npm publish ./build",
     "dev": "yarn storybook",
@@ -30,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/react": "3.17.2",
     "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-controls": "7.6.8",
     "@storybook/addon-essentials": "7.6.8",
@@ -83,6 +83,7 @@
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
+    "tsc-alias": "^1.8.8",
     "tslib": "^2.6.2",
     "typescript": "^5.0.4",
     "vite": "^5.0.10",
@@ -98,8 +99,8 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/react": "3.17.2",
     "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
     "babel-plugin-macros": "^3.1.0",

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,26 +9,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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"));
+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.js';
+import OversizedScroll from './components/OversizedScroll.js';
+import GroupRow from './components/GroupRow.js';
+import FilterRow from './components/FilterRow.js';
+import DataRow from './components/DataRow.js';
+import HeadRow from './components/HeadRow.js';
+import useUxReset from './hooks/useUxReset.js';
+import useRowsKeyControls from './hooks/useRowsKeyControls.js';
+import useColumnSizes from './hooks/useColumnSizes.js';
+import { isColumnOn, getGroups } from './utils/index.js';
+import { initialState } from './store/index.js';
+import { Trans } from '@lingui/react';
+import FloatingButton from './components/FloatingButton/FloatingButton.js';
 var rowsStyles = { outline: 'none' };
 var defaultVoidFunction = function () {
     var args = [];
@@ -38,7 +33,7 @@ var defaultVoidFunction = function () {
     }
     return null;
 };
-var defaultUxState = store_1.initialState.uxState;
+var defaultUxState = initialState.uxState;
 var defaultColumnsWidth = {};
 var defaultPerPageOptions = [10, 20, 50, 100];
 var CommonGrid = function (_a) {
@@ -49,9 +44,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 = (0, useRowsKeyControls_1.default)(rowsData, uxState, handleUxChange);
-    (0, useUxReset_1.default)(rowsData, uxState, clearUxState);
-    var checksColumnsOrder = react_1.default.useCallback(function (colsOrder) {
+    var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
+    useUxReset(rowsData, uxState, clearUxState);
+    var checksColumnsOrder = React.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) {
@@ -65,7 +60,7 @@ var CommonGrid = function (_a) {
         }
     }, [columnsDefinitions]);
     // todo refactor as part of definitions
-    var columnsOrder = react_1.default.useMemo(function () {
+    var columnsOrder = React.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
@@ -74,8 +69,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_1.default.useMemo(function () {
-        return (!hideColumnConfig ? columnsDefinitions.filter(function (column) { return (0, utils_1.isColumnOn)(column, columnConfig); }) : columnsDefinitions).sort(function (col1, col2) {
+    var displayColumnsDefinitions = React.useMemo(function () {
+        return (!hideColumnConfig ? columnsDefinitions.filter(function (column) { return 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;
@@ -84,27 +79,27 @@ var CommonGrid = function (_a) {
     var GridMessage;
     var messageClass = 'info';
     if (isLoading)
-        GridMessage = (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." });
+        GridMessage = _jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." });
     if (!isLoading && (!rowsData || rowsData.length < 1))
-        GridMessage = (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.status.noDataFound", message: "No data found." });
+        GridMessage = _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." });
     if (!isLoading && errorMessage) {
         GridMessage = errorMessage;
         messageClass = 'error';
     }
-    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);
+    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);
     }, [displayColumnsDefinitions]);
-    var commonGridRef = react_1.default.useCallback(function (node) {
+    var commonGridRef = React.useCallback(function (node) {
         gridBoxRef.current = node;
         !!gridRef && (gridRef.current = node);
     }, []);
-    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 &&
+    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) {
                                     var rowIndex = rowsPerPage * page + (index + 1) - rowsPerPage;
-                                    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))] }));
+                                    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))] }));
 };
-exports.default = CommonGrid;
+export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,51 +20,47 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useGetGridHeight from './hooks/useGetGridHeight.js';
+import { useEffect, useMemo } from 'react';
+import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils/index.js';
+import useEditReadAsColumn from './hooks/useEditReadAsColumn.js';
+import { useModal } from '../Modal/hooks/useModal.js';
+import useManageColumn from './hooks/useManageColumn.js';
+import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip, StyledColumnButton, } from './styles.js';
+import { H6 } from '../../Elements/Typography/index.js';
+import HidePrint from '../HidePrint/HidePrint.js';
+import ControlButtons from './components/ControlButtons/index.js';
+import { x } from '@xstyled/styled-components';
+import ActionHead from './components/ActionHead/index.js';
+import { Pagination } from '../../Elements/Pagination/index.js';
+import TablePagination from './components/TablePagination/index.js';
+import Modal from '../Modal/index.js';
+import ManageColumnForm from './components/ManageColumnForm/index.js';
+import { Trans } from '@lingui/react';
+import { Settings2 } from '../../Elements/Icon/icons/Settings2.js';
 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 = (0, useGetGridHeight_1.default)(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
-    (0, react_1.useEffect)(function () {
+    var _b = useGetGridHeight(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
+    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 / utils_1.rowHeight - 2), utils_1.GRID_MIN_ROWS);
+            var numberOfRows = Math.max(Math.floor(gridHeight / rowHeight - 2), GRID_MIN_ROWS);
             numberOfRows && ((_a = gridActions.setRowsPerPage) === null || _a === void 0 ? void 0 : _a.call(gridActions, numberOfRows));
         }
     }, [gridHeight, gridActions, queryRowsParam]);
-    var modifiedPassDownProps = (0, useEditReadAsColumn_1.default)(passDownProps);
-    var filters = (0, react_1.useMemo)(function () { return (0, utils_1.getFilters)(optimizeFilters); }, [optimizeFilters]);
+    var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
+    var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
     var columns = modifiedPassDownProps.columnsDefinitions;
-    var _c = (0, useModal_1.useModal)(), openManageColumnForm = _c.onOpen, manageColumnFormVisible = _c.isOpen, onClose = _c.onClose;
-    var _d = (0, useManageColumn_1.default)({
+    var _c = useModal(), openManageColumnForm = _c.onOpen, manageColumnFormVisible = _c.isOpen, onClose = _c.onClose;
+    var _d = useManageColumn({
         columns: columns,
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         onClose: onClose,
     }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig;
-    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 }) }))] }));
+    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 }) }))] }));
 };
-exports.default = StyledCommonGrid;
+export default StyledCommonGrid;

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

@@ -1,13 +1,11 @@
-"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");
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { createActions, createFullSelector } from '../store/index.js';
 var withReduxActions = function (gridName, prefix) {
     if (prefix === void 0) { prefix = 'grid'; }
-    var actions = (0, store_1.createActions)(gridName);
-    var selectors = (0, store_1.createFullSelector)(gridName);
-    return (0, react_redux_1.connect)(function (state) {
+    var actions = createActions(gridName);
+    var selectors = createFullSelector(gridName);
+    return connect(function (state) {
         var _a;
         return (_a = {},
             _a["".concat(prefix, "Selectors")] = selectors(state),
@@ -15,7 +13,7 @@ var withReduxActions = function (gridName, prefix) {
     }, function (dispatch) {
         var _a;
         return (_a = {},
-            _a["".concat(prefix, "Actions")] = (0, redux_1.bindActionCreators)({
+            _a["".concat(prefix, "Actions")] = bindActionCreators({
                 init: actions.init,
                 clearUxState: actions.clearUxState,
                 handleUxChange: actions.handleUxChange,
@@ -35,4 +33,4 @@ var withReduxActions = function (gridName, prefix) {
             _a);
     });
 };
-exports.default = withReduxActions;
+export default withReduxActions;

package/ui/Blocks/CommonGrid/StandardButtons.js

@@ -1,45 +1,36 @@
-"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" }),
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Trans } from '@lingui/react';
+import ButtonMore from './components/ButtonMore/ButtonMore.js';
+export var getCreateButton = function (onCreate, canCreate, disabled) { return ({
+    label: _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }),
     style: 'primary',
     onClick: onCreate,
     hide: !canCreate,
     disabled: disabled,
 }); };
-exports.getCreateButton = getCreateButton;
-var getImportButton = function (onImport, canImport, disabled) { return ({
-    label: (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "form.buttonImport", message: "Import" }),
+export var getImportButton = function (onImport, canImport, disabled) { return ({
+    label: _jsx(Trans, { id: "form.buttonImport", message: "Import" }),
     onClick: onImport,
     hide: !canImport,
     disabled: disabled,
 }); };
-exports.getImportButton = getImportButton;
-var getMoreButton = function (onExport, onImport, canImport) {
+export var getMoreButton = function (onExport, onImport, canImport) {
     var items = [];
     if (onImport && canImport) {
         items.push({
-            title: (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "form.buttonImport", message: "Import" }),
+            title: _jsx(Trans, { id: "form.buttonImport", message: "Import" }),
             onClick: onImport,
             link: '#',
             name: 'moreActionImportBtn',
         });
     }
     items.push({
-        title: (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.actionOptions.export", message: "Export" }),
+        title: _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }),
         onClick: onExport,
         link: '#',
         name: 'moreActionExportBtn',
     });
     return {
-        node: (0, jsx_runtime_1.jsx)(ButtonMore_1.default, { items: items }),
+        node: _jsx(ButtonMore, { items: items }),
     };
 };
-exports.getMoreButton = getMoreButton;

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

@@ -1,40 +1,35 @@
-"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;
 };
-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"])));
+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/index.js';
+import ButtonMore from '../ButtonMore/ButtonMore.js';
+import { i18n } from '@lingui/core';
+import { useToggleAllCheckbox } from '../../hooks/useToggleAllCheckbox.js';
+import { useGridActionTrigger } from '../../hooks/useGridActionTrigger.js';
+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 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 = (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 _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 = (0, react_1.useCallback)(function () {
+    var checkAll = useCallback(function () {
         if (!checked) {
             toggleCheckbox();
         }
     }, [checked, toggleCheckbox]);
-    var actionsOptions = (0, react_1.useMemo)(function () {
+    var actionsOptions = 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 ({
@@ -45,11 +40,11 @@ var ActionHead = function (_a) {
         }
         return [];
     }, [actionColumn, onSubmit]);
-    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._({
+    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 },
-                        }) }), (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" }))] })] }) })) }));
+                        }) }), _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" }))] })] }) })) }));
 };
-exports.default = ActionHead;
+export default ActionHead;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,23 +1,18 @@
-"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;
 };
-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'));
+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 ActionDropdownMenu = function (_a) {
     var items = _a.items;
-    return ((0, jsx_runtime_1.jsx)(StyledDropdownWrap, { children: items.map(function (item, index) {
+    return (_jsx(StyledDropdownWrap, { children: items.map(function (item, index) {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(StyledDropdownItem, { onClick: (_a = item.onClick) !== null && _a !== void 0 ? _a : undefined, children: item.title }, index));
+            return (_jsx(StyledDropdownItem, { onClick: (_a = item.onClick) !== null && _a !== void 0 ? _a : undefined, children: item.title }, index));
         }) }));
 };
-exports.default = ActionDropdownMenu;
+export default ActionDropdownMenu;
 var templateObject_1, templateObject_2;