@mailstep/design-system 0.4.21 → 0.5.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.4.21",
+  "version": "0.5.0-beta.10",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -29,6 +29,9 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lingui/macro": "3.15.0",
+    "@lingui/react": "3.15.0",
+    "@popperjs/core": "^2.11.8",
     "@storybook/addon-controls": "7.6.8",
     "@storybook/addon-essentials": "7.6.8",
     "@storybook/addon-interactions": "7.6.8",
@@ -38,8 +41,11 @@
     "@storybook/react-webpack5": "7.6.8",
     "@storybook/testing-library": "0.2.2",
     "@svgr/rollup": "^8.0.1",
+    "@types/faker": "^4.1.11",
+    "@types/luxon": "^3.4.2",
     "@types/node": "^20.1.7",
     "@types/react": "^18.2.6",
+    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^18.2.4",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router": "^5.1.20",
@@ -48,18 +54,30 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@xstyled/styled-components": "^3.8.0",
     "babel-loader": "^9.1.2",
+    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "0.6.15",
+    "faker": "^5.1.0",
+    "immer": "9.0.7",
     "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
-    "react-helmet": "^6.1.0",
+    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-redux": "*",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-script": "^2.0.5",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
+    "redux": ">=4.0.5",
+    "reselect": "5.0.0-alpha.2",
     "storybook": "7.6.8",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
@@ -79,16 +97,29 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lingui/macro": "3.15.0",
+    "@lingui/react": "3.15.0",
+    "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
+    "immer": "9.0.7",
     "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-redux": ">=4.0.5",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
+    "redux": ">=4.0.5",
+    "reselect": "5.0.0-alpha.2",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",

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

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

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -0,0 +1,106 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } 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 { Provider as ContextProvider } from './CommonGridContext';
+import { isColumnOn, getGroups } from './utils';
+import { initialState } from './store';
+import { Trans } from '@lingui/react';
+import FloatingButton from './components/FloatingButton/FloatingButton';
+var rowsStyles = { outline: 'none' };
+var defaultVoidFunction = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return null;
+};
+var defaultUxState = initialState.uxState;
+var defaultColumnsWidth = {};
+var defaultPerPageOptions = [10, 20, 50, 100];
+var CommonGrid = function (_a) {
+    var filters = _a.filters, 
+    // redux props
+    gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, 
+    // input props
+    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 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) {
+            console.error('Grid can have only sticky column on each side.');
+        }
+        if (stickyLeftColls.length && colsOrder.indexOf(stickyLeftColls[0].name) !== 0) {
+            console.error('The left sticky column should be the first one in a row');
+        }
+        if (stickyRightColls.length && colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1) {
+            console.error('The Right sticky column should be the last one in a row');
+        }
+    }, [columnsDefinitions]);
+    // todo refactor as part of definitions
+    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
+            : columnsDefinitions.map(function (column) { return column.name; });
+        checksColumnsOrder(order);
+        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 i = (columnsOrder || []).indexOf(col1.name);
+            var j = (columnsOrder || []).indexOf(col2.name);
+            return i > j ? 1 : i < j ? -1 : 0;
+        });
+    }, [hideColumnConfig, columnConfig, columnsDefinitions, columnsOrder]);
+    var GridMessage;
+    var messageClass = 'info';
+    if (isLoading)
+        GridMessage = _jsx(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." });
+    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);
+    }, [displayColumnsDefinitions]);
+    var commonGridRef = React.useCallback(function (node) {
+        gridBoxRef.current = node;
+        !!gridRef && (gridRef.current = node);
+    }, []);
+    return (_jsxs(ContextProvider, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, setColumnsOrder: setColumnsOrder, columnsOrder: columnsOrder, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+                                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))] }));
+};
+export default CommonGrid;

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

@@ -0,0 +1,3 @@
+import { GridProps } from './types';
+declare const StyledCommonGrid: (props: GridProps) => JSX.Element;
+export default StyledCommonGrid;

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -0,0 +1,67 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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 } 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 './components/HidePrint/HidePrint';
+import ControlButtons from './components/ControlButtons';
+import { Rows } from '../../Elements/Icon/icons/Rows';
+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';
+var StyledCommonGrid = function (props) {
+    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, onExport = props.onExport, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "onExport", "hideControlButtons", "floatingButtonProps"]);
+    var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
+    var rowHeight = 40;
+    var _b = useGetGridHeight(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
+    useEffect(function () {
+        var _a;
+        if (!(gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) && gridHeight && gridHeight > 0) {
+            // Only main grids (without form grids on new pages)
+            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]);
+    var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
+    var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
+    var columns = modifiedPassDownProps.columnsDefinitions;
+    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 (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, hasColouredRows: true, floatingButtonProps: floatingButtonProps }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isAbsolute: !!gridHeight, children: [_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, onExport: onExport }), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
+};
+export default StyledCommonGrid;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const Context: React.Context<null>;
+type EnhancedProviderProps = {
+    children: React.ReactNode;
+};
+declare const Provider: ({ ...rest }: EnhancedProviderProps) => JSX.Element;
+declare const Consumer: React.Consumer<null>;
+export default Context;
+export { Provider, Consumer };

package/ui/Blocks/CommonGrid/CommonGridContext.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+var Context = React.createContext(null);
+var Provider = function (_a) {
+    var rest = __rest(_a, []);
+    return _jsx(Context.Provider, __assign({ value: null }, rest));
+};
+var Consumer = Context.Consumer;
+export default Context;
+export { Provider, Consumer };

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

@@ -0,0 +1,2 @@
+declare const withReduxActions: (gridName: string, prefix?: string) => import("react-redux").InferableComponentEnhancerWithProps<{}, {}>;
+export default withReduxActions;

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

@@ -0,0 +1,36 @@
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { createActions, createFullSelector } from '../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 _a;
+        return (_a = {},
+            _a["".concat(prefix, "Selectors")] = selectors(state),
+            _a);
+    }, function (dispatch) {
+        var _a;
+        return (_a = {},
+            _a["".concat(prefix, "Actions")] = bindActionCreators({
+                init: actions.init,
+                clearUxState: actions.clearUxState,
+                handleUxChange: actions.handleUxChange,
+                openConfigForm: actions.openConfigForm,
+                closeConfigForm: actions.closeConfigForm,
+                setColumnConfig: actions.setColumnConfig,
+                setPage: actions.setPage,
+                setRowsPerPage: actions.setRowsPerPage,
+                addFilter: actions.addFilter,
+                resetFilters: actions.resetFilters,
+                addSorting: actions.addSorting,
+                clearSettings: actions.clearSettings,
+                setColumnWidth: actions.setColumnWidth,
+                resetGrid: actions.resetGrid,
+                setColumnsOrder: actions.setColumnsOrder,
+            }, dispatch),
+            _a);
+    });
+};
+export default withReduxActions;

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

@@ -0,0 +1,6 @@
+import { ExtraControlButton } from './types';
+import { Option, ValueType } from '../../Elements/Select/types';
+export declare const getCreateButton: (onCreate: () => void, canCreate: boolean, disabled?: boolean) => ExtraControlButton;
+export declare const getImportButton: (onImport: () => void, canImport: boolean, disabled?: boolean) => ExtraControlButton;
+export declare const getMoreButton: (onExport: () => void, onImport?: () => void, canImport?: boolean) => ExtraControlButton;
+export declare const getEshopSelect: (eshopOptions: Option[], selectedEshop: string, onChange: (eshopOption: ValueType) => void, isClearable?: boolean) => ExtraControlButton[];

package/ui/Blocks/CommonGrid/StandardButtons.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Trans } from '@lingui/react';
+import { x } from '@xstyled/styled-components';
+import { t } from '@lingui/macro';
+import Select from '../../Elements/Select';
+import ButtonMore from './components/ButtonMore/ButtonMore';
+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,
+}); };
+export var getImportButton = function (onImport, canImport, disabled) { return ({
+    label: _jsx(Trans, { id: "form.buttonImport", message: "Import" }),
+    onClick: onImport,
+    hide: !canImport,
+    disabled: disabled,
+}); };
+export var getMoreButton = function (onExport, onImport, canImport) {
+    var items = [];
+    if (onImport && canImport) {
+        items.push({
+            title: _jsx(Trans, { id: "form.buttonImport", message: "Import" }),
+            onClick: onImport,
+            link: '#',
+            name: 'moreActionImportBtn',
+        });
+    }
+    items.push({
+        title: _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }),
+        onClick: onExport,
+        link: '#',
+        name: 'moreActionExportBtn',
+    });
+    return {
+        node: _jsx(ButtonMore, { items: items }),
+    };
+};
+export var getEshopSelect = function (eshopOptions, selectedEshop, onChange, isClearable) {
+    if (isClearable === void 0) { isClearable = true; }
+    var eshops = [];
+    if (eshopOptions.length > 1) {
+        eshops.push({
+            position: 'top-right',
+            node: (_jsx(x.div, { w: "200px", "data-cy": "eshopSelect", children: _jsx(Select, { name: "eshop", options: eshopOptions, value: selectedEshop, onChange: onChange, isSearchable: false, isClearable: isClearable, disabled: !eshopOptions.length, placeholder: t({ id: 'products.eshopFilterPlaceholder', message: 'Select eshop...' }) }) })),
+        });
+    }
+    return eshops;
+};

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

@@ -0,0 +1,11 @@
+import { GridActionsType, GridSelectorsType, OnBatchActionFn, RowProps, ActionColumn } from '../../types';
+type Props = {
+    gridActions: GridActionsType;
+    gridSelectors: GridSelectorsType;
+    actionColumn?: ActionColumn;
+    onBatchAction?: OnBatchActionFn;
+    rowsData: RowProps[];
+    onExport?: (range: 'filtered' | 'selected', format: string) => void;
+};
+declare const ActionHead: ({ gridActions, gridSelectors, actionColumn, onBatchAction, rowsData, onExport }: Props) => JSX.Element;
+export default ActionHead;

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

@@ -0,0 +1,53 @@
+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 { t } from '@lingui/macro';
+import { useGridActionTrigger, useToggleAllCheckbox } from '../../utils/public';
+import { useModal } from '../../../Modal/hooks/useModal';
+import { Button } from '../../../../Elements/Button';
+import ButtonMore from '../ButtonMore/ButtonMore';
+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, onExport = _a.onExport;
+    var handleUxChange = (gridActions || {}).handleUxChange;
+    var _c = (gridSelectors || {}).uxState, uxState = _c === void 0 ? {} : _c;
+    var _d = useModal(), onExportClick = _d.onOpen, exportFormVisible = _d.isOpen, hideExport = _d.onClose;
+    var _e = useToggleAllCheckbox(rowsData, uxState, handleUxChange), checked = _e[0], toggleCheckbox = _e[1];
+    var _f = useGridActionTrigger(rowsData, uxState, actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions, onBatchAction), enabledActions = _f[0], onSubmit = _f[1];
+    var checkedRowsCount = Object.keys((uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows) || []).length;
+    var checkAll = useCallback(function () {
+        if (!checked) {
+            toggleCheckbox();
+        }
+    }, [checked, toggleCheckbox]);
+    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 ({
+                title: option.label,
+                // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+                onClick: function () { return onSubmit(option.value); },
+                link: '#',
+            }); });
+        }
+        return [];
+    }, [actionColumn, onSubmit]);
+    var canExport = typeof onExport === 'function';
+    return (_jsx(Wrap, { children: checkedRowsCount > 0 && (_jsx(ActionsWrap, { children: _jsxs(ContentWrap, { children: [_jsx(StyledText, { children: t({
+                            id: 'dataGrid.checkedRowsCount',
+                            message: "Selected {checkedRowsCount} items",
+                            values: { checkedRowsCount: checkedRowsCount },
+                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondaryLg", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), canExport && (_jsx(Button, { type: "button", onClick: onExportClick, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
+};
+export default ActionHead;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+type ItemType = {
+    title: string | JSX.Element;
+    onClick: () => void;
+    link: string;
+};
+type DropdownMenuProps = {
+    items: ItemType[];
+};
+declare const ActionDropdownMenu: FC<DropdownMenuProps>;
+export default ActionDropdownMenu;

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

@@ -0,0 +1,18 @@
+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 ActionDropdownMenu = function (_a) {
+    var items = _a.items;
+    return (_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));
+        }) }));
+};
+export default ActionDropdownMenu;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+type Item = {
+    label: string | JSX.Element;
+    value: string;
+};
+type DropdownSelectProps = {
+    options: Item[];
+    onSelect: (value: Item['value']) => void;
+    disabled?: boolean;
+};
+declare const _default: React.MemoExoticComponent<({ options, onSelect, disabled }: DropdownSelectProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,45 @@
+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 $isDisabled = _a.$isDisabled;
+    return ($isDisabled ? th.color('lightGray7') : th.color('lightGray5'));
+}, function (_a) {
+    var $isDisabled = _a.$isDisabled, $isOpened = _a.$isOpened;
+    return $isDisabled ? th.color('lightGray7') : $isOpened ? th.color('blue2') : 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) {
+    var $isDisabled = _a.$isDisabled, $isOpened = _a.$isOpened;
+    return $isDisabled ? th.color('lightGray6') : $isOpened ? th.color('blue2') : 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 () {
+        setShowDropdownMenu(function (prev) { return !prev; });
+    }, []);
+    var handleSelectItem = React.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 }) }))] }));
+};
+export default memo(ActionDropdownSelect);
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,2 @@
+import ActionHead from './ActionHead';
+export default ActionHead;

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

@@ -0,0 +1,2 @@
+import ActionHead from './ActionHead';
+export default ActionHead;

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

@@ -0,0 +1,6 @@
+type Props = {
+    onChange: (data: any) => void;
+    value?: string;
+};
+declare const SelectFilter: ({ ...restProps }: Props) => JSX.Element;
+export default SelectFilter;