@mailstep/design-system 0.5.1-beta.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.5.1-beta.1",
+  "version": "0.6.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -14,14 +14,15 @@
     "storybook": "storybook dev -p 6006",
     "build": "rm -rf ./build && tsc && vite build && cp package.json build && cp README.md build",
     "build-storybook": "storybook build",
-    "deploy": "npm publish ./build",
+    "deploy": "npm run build && npm publish ./build",
     "dev": "yarn storybook",
     "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\""
   },
   "devDependencies": {
+    "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/preset-typescript": "^7.23.3",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
@@ -29,6 +30,9 @@
     "@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",
+    "@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 +42,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",
@@ -47,19 +54,31 @@
     "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.2.1",
     "@xstyled/styled-components": "^3.8.0",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "0.6.15",
+    "faker": "^5.1.0",
+    "immer": "9.0.7",
     "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
-    "react-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",
@@ -69,15 +88,7 @@
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1",
-    "immer": "9.0.7",
-    "react-beautiful-dnd": "^13.0.0",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "react-redux": "*",
-    "redux": ">=4.0.5",
-    "reselect": "5.0.0-alpha.2",
-    "@types/faker": "^4.1.11",
-    "faker": "^5.1.0"
+    "webpack": "^5.82.1"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
@@ -87,25 +98,34 @@
     "@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",
+    "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
+    "babel-plugin-macros": "^3.1.0",
+    "immer": "9.0.7",
     "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-redux": ">=4.0.5",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
+    "redux": ">=4.0.5",
+    "reselect": "5.0.0-alpha.2",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.0.4",
-    "immer": "9.0.7",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-redux": ">=4.0.5",
-    "redux": ">=4.0.5",
-    "reselect": "5.0.0-alpha.2"
+    "typescript": "^5.0.4"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

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

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

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { x } from '@xstyled/styled-components';
 import { Row, MessageCell } from './components/Table';
@@ -18,17 +18,13 @@ import GroupRow from './components/GroupRow';
 import FilterRow from './components/FilterRow';
 import DataRow from './components/DataRow';
 import HeadRow from './components/HeadRow';
-import ConfigForm from './components/ConfigForm';
 import useUxReset from './hooks/useUxReset';
-import useControlButtons from './hooks/useControlButtons';
 import useRowsKeyControls from './hooks/useRowsKeyControls';
 import useColumnSizes from './hooks/useColumnSizes';
-import ActionColumnHead from './components/ActionColumnHead';
-import { Provider as ContextProvider, defaultComponents } from './CommonGridContext';
 import { isColumnOn, getGroups } from './utils';
 import { initialState } from './store';
-import ButtonStrip from './components/ButtonStrip';
-import FloatingButton from './components/FloatingButton';
+import { Trans } from '@lingui/react';
+import FloatingButton from './components/FloatingButton/FloatingButton';
 var rowsStyles = { outline: 'none' };
 var defaultVoidFunction = function () {
     var args = [];
@@ -41,17 +37,13 @@ var defaultUxState = initialState.uxState;
 var defaultColumnsWidth = {};
 var defaultPerPageOptions = [10, 20, 50, 100];
 var CommonGrid = function (_a) {
-    var components = _a.components, filters = _a.filters, 
+    var filters = _a.filters, 
     // redux props
     gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, 
     // input props
-    hideAllControls = _a.hideAllControls, _b = _a.totalRowsCount, totalRowsCount = _b === void 0 ? 0 : _b, 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, onBatchAction = _a.onBatchAction, _c = _a.columnLayout, columnLayout = _c === void 0 ? 'normal' : _c, hideColumnConfig = _a.hideColumnConfig, confirmOnReset = _a.confirmOnReset, className = _a.className, gridRef = _a.gridRef, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, extraControlButtons = _a.extraControlButtons, _d = _a.perPageOptions, perPageOptions = _d === void 0 ? defaultPerPageOptions : _d, floatingButton = _a.floatingButton;
-    var usedComponents = React.useMemo(function () {
-        return __assign(__assign({}, defaultComponents), (components || {}));
-    }, [components]);
-    var Translator = usedComponents.Translator, Paginator = usedComponents.Paginator;
-    var _e = gridSelectors.uxState, uxState = _e === void 0 ? defaultUxState : _e, isConfigFormOpen = gridSelectors.isConfigFormOpen, columnConfig = gridSelectors.columnConfig, _f = gridSelectors.columnsWidth, columnsWidth = _f === void 0 ? defaultColumnsWidth : _f, columnsWidthVariant = gridSelectors.columnsWidthVariant, _g = gridSelectors.page, page = _g === void 0 ? 1 : _g, filter = gridSelectors.filter, sorting = gridSelectors.sorting, _h = gridSelectors.rowsPerPage, rowsPerPage = _h === void 0 ? 10 : _h;
-    var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _j = gridActions.openConfigForm, openConfigForm = _j === void 0 ? defaultVoidFunction : _j, closeConfigForm = gridActions.closeConfigForm, _k = gridActions.setColumnConfig, setColumnConfig = _k === void 0 ? defaultVoidFunction : _k, _l = gridActions.setPage, setPage = _l === void 0 ? defaultVoidFunction : _l, _m = gridActions.setRowsPerPage, setRowsPerPage = _m === void 0 ? defaultVoidFunction : _m, _o = gridActions.addFilter, addFilter = _o === void 0 ? defaultVoidFunction : _o, _p = gridActions.resetFilters, resetFilters = _p === void 0 ? defaultVoidFunction : _p, _q = gridActions.addSorting, addSorting = _q === void 0 ? defaultVoidFunction : _q, _r = gridActions.resetGrid, resetGrid = _r === void 0 ? defaultVoidFunction : _r, _s = gridActions.setColumnWidth, setColumnWidth = _s === void 0 ? defaultVoidFunction : _s, _t = gridActions.setColumnsOrder, setColumnsOrder = _t === void 0 ? defaultVoidFunction : _t;
+    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) {
@@ -87,16 +79,14 @@ var CommonGrid = function (_a) {
     var GridMessage;
     var messageClass = 'info';
     if (isLoading)
-        GridMessage = _jsx(Translator, { id: "dataGrid.status.loadingData", defaults: "... loading data ..." });
+        GridMessage = _jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." });
     if (!isLoading && (!rowsData || rowsData.length < 1))
-        GridMessage = _jsx(Translator, { id: "dataGrid.status.noDataFound", defaults: "No data found." });
+        GridMessage = _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." });
     if (!isLoading && errorMessage) {
         GridMessage = errorMessage;
         messageClass = 'error';
     }
-    var rowsSeenTxt = "".concat((page - 1) * rowsPerPage + 1, "-").concat(Math.min(page * rowsPerPage, totalRowsCount), " / ").concat(totalRowsCount);
-    var _u = useControlButtons(hideColumnConfig, openConfigForm, resetGrid, columnsDefinitions, resetFilters, setRowsPerPage, rowsSeenTxt, extraControlButtons, Translator, confirmOnReset, perPageOptions), topLeftButtons = _u.topLeftButtons, topRightButtons = _u.topRightButtons, bottomRightButtons = _u.bottomRightButtons, bottomLeftButtons = _u.bottomLeftButtons;
-    var _v = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth), displayColumnsWidth = _v.displayColumnsWidth, totalColumnsWidth = _v.totalColumnsWidth, gridBoxRef = _v.gridBoxRef, handleResizeDrag = _v.handleResizeDrag;
+    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]);
@@ -104,12 +94,12 @@ var CommonGrid = function (_a) {
         gridBoxRef.current = node;
         !!gridRef && (gridRef.current = node);
     }, []);
-    return (_jsx(ContextProvider, { components: usedComponents, children: _jsxs(x.div, { className: className || '', children: [!hideAllControls && _jsx(ButtonStrip, { buttonsLeft: topLeftButtons, buttonsRight: topRightButtons }), _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, setColumnsOrder: setColumnsOrder, columnsOrder: columnsOrder, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, setColumnsOrder: setColumnsOrder, columnsOrder: columnsOrder, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {
                                     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));
-                                }) })] }), !hideAllControls && (_jsxs(x.div, { display: "flex", children: [actionColumnDefinition && (_jsx(ActionColumnHead, { actionColumn: actionColumnDefinition, onBatchAction: onBatchAction, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange })), _jsx(ButtonStrip, { buttonsLeft: bottomLeftButtons, buttonsRight: bottomRightButtons })] })), _jsxs(x.div, { textAlign: "center", className: "paginatorWrapper", position: "relative", children: [floatingButton && _jsx(FloatingButton, { children: floatingButton }), _jsx(Paginator, { itemCount: totalRowsCount || 0, itemPerPage: rowsPerPage, page: page, onPageChange: setPage })] }), setColumnConfig && closeConfigForm && isConfigFormOpen && (_jsx(ConfigForm, { onSubmit: setColumnConfig, onCancel: closeConfigForm, columns: columnsDefinitions, columnConfig: columnConfig }))] }) }));
+                                }) })] }) }), 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,66 @@
+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, 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 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 _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);
+            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 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", 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 }) }))] }));
+};
+export default StyledCommonGrid;

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

@@ -0,0 +1,4 @@
+import { ExtraControlButton } from './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;

package/ui/Blocks/CommonGrid/StandardButtons.js

@@ -0,0 +1,36 @@
+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" }),
+    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 }),
+    };
+};

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

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

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

@@ -0,0 +1,50 @@
+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 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 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,
+                onClick: function () { return onSubmit(option.value); },
+                link: '#',
+            }); });
+        }
+        return [];
+    }, [actionColumn, onSubmit]);
+    return (_jsx(Wrap, { children: checkedRowsCount > 0 && (_jsx(ActionsWrap, { children: _jsxs(ContentWrap, { children: [_jsx(StyledText, { children: i18n._({
+                            id: 'dataGrid.checkedRowsCount',
+                            message: "Selected {checkedRowsCount} items",
+                            values: { checkedRowsCount: checkedRowsCount },
+                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondaryLg", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), processCheckedValues && (_jsx(Button, { type: "button", onClick: processCheckedValues, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle ? (processCheckedValuesTitle) : (_jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" })) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
+};
+export default ActionHead;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Blocks/CommonGrid/components/ActionHead/components/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;

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

@@ -0,0 +1,37 @@
+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 { useMemo } from 'react';
+import GridSelect from '../GridSelect';
+import { i18n } from '@lingui/core';
+var getFlagOptions = function () { return [
+    { value: '', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.all', message: 'All' }) },
+    { value: '1', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.yes', message: 'Yes' }) },
+    { value: '0', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.no', message: 'No' }) },
+]; };
+var SelectFilter = function (_a) {
+    var restProps = __rest(_a, []);
+    var options = useMemo(function () { return getFlagOptions(); }, []);
+    return _jsx(GridSelect, __assign({ options: options }, restProps));
+};
+export default SelectFilter;

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

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

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+type ItemType = {
+    title: string | React.ReactElement;
+    onClick: () => void;
+    link?: string;
+};
+export type Props = {
+    items: ItemType[];
+    disabled?: boolean;
+    dropdownPosition?: 'top' | 'bottom';
+};
+declare const ButtonMore: ({ items, disabled, dropdownPosition }: Props) => JSX.Element;
+export default ButtonMore;