@mailstep/design-system 0.6.4 → 0.6.5-beta.1

package/package.json

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

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

@@ -1,9 +1,6 @@
-import { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
-import { DropResult } from 'react-beautiful-dnd';
+import { CommonGridProps, FiltersConfig } from './types';
 type Props = CommonGridProps & {
     filters?: FiltersConfig;
-    handleDragEnd: (item: DropResult) => void;
-    displayColumnsDefinitions: ColumnDefinition[];
 };
-declare const CommonGrid: ({ filters, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: Props) => JSX.Element;
+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

@@ -21,7 +21,7 @@ import HeadRow from './components/HeadRow';
 import useUxReset from './hooks/useUxReset';
 import useRowsKeyControls from './hooks/useRowsKeyControls';
 import useColumnSizes from './hooks/useColumnSizes';
-import { getGroups } from './utils';
+import { isColumnOn, getGroups } from './utils';
 import { initialState } from './store';
 import { Trans } from '@lingui/react';
 import FloatingButton from './components/FloatingButton/FloatingButton';
@@ -35,16 +35,47 @@ var defaultVoidFunction = function () {
 };
 var defaultUxState = initialState.uxState;
 var defaultColumnsWidth = {};
+var defaultPerPageOptions = [10, 20, 50, 100];
 var CommonGrid = function (_a) {
-    var filters = _a.filters, handleDragEnd = _a.handleDragEnd, 
+    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, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className, gridRef = _a.gridRef, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps;
+    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)
@@ -63,7 +94,7 @@ var CommonGrid = function (_a) {
         gridBoxRef.current = node;
         !!gridRef && (gridRef.current = node);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, setColumnsOrder: setColumnsOrder, columnsOrder: columnsOrder, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -60,7 +60,7 @@ var StyledCommonGrid = function (props) {
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         onClose: onClose,
-    }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig, handleDragEnd = _d.handleDragEnd, onCloseForm = _d.onCloseForm, displayColumnsDefinitions = _d.displayColumnsDefinitions, manageColumnsFormDefinitions = _d.manageColumnsFormDefinitions;
-    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, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, 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: onCloseForm, onCancel: onCloseForm, 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: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
+    }), 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, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _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/components/HeadRow.d.ts

@@ -1,15 +1,15 @@
-import { DropResult } from 'react-beautiful-dnd';
 import { Settings, ColumnDefinition, ActionColumn, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
 type HeadRowProps = {
     actionColumn?: ActionColumn;
     columns: ColumnDefinition[];
+    columnsOrder?: string[];
     onAddSort: GridActionsType['addSorting'];
+    setColumnsOrder: (columnsOrder: string[]) => void;
     sortingValues?: Settings['sorting'];
     displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
     columnLayout: Required<CommonGridProps>['columnLayout'];
     handleResizeDrag: (column: string, width: number) => void;
-    handleDragEnd: (item: DropResult) => void;
     groups: Group[];
 };
-declare const HeadRow: ({ columns, actionColumn, onAddSort, handleDragEnd, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups, }: HeadRowProps) => JSX.Element;
+declare const HeadRow: ({ columns, actionColumn, onAddSort, setColumnsOrder, columnsOrder, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups, }: HeadRowProps) => JSX.Element;
 export default HeadRow;

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

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
@@ -21,11 +30,27 @@ var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
 };
 var HeadRow = function (_a) {
     var _b;
-    var columns = _a.columns, actionColumn = _a.actionColumn, onAddSort = _a.onAddSort, handleDragEnd = _a.handleDragEnd, _c = _a.sortingValues, sortingValues = _c === void 0 ? [] : _c, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups;
+    var columns = _a.columns, actionColumn = _a.actionColumn, onAddSort = _a.onAddSort, setColumnsOrder = _a.setColumnsOrder, columnsOrder = _a.columnsOrder, _c = _a.sortingValues, sortingValues = _c === void 0 ? [] : _c, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups;
     var _d = useState(false), showUIElements = _d[0], setShowUIElements = _d[1];
     useEffect(function () {
         setShowUIElements(true);
     }, []);
+    var handleDragEnd = React.useCallback(function (item) {
+        var _a, _b;
+        var to = (_a = item.destination) === null || _a === void 0 ? void 0 : _a.index;
+        var from = (_b = item.source) === null || _b === void 0 ? void 0 : _b.index;
+        if (to === from || !item.destination) {
+            return;
+        }
+        var newOrderColumns = __spreadArray([], (columnsOrder || []), true);
+        var fromIndex = newOrderColumns.findIndex(function (column) { return columns[from].name === column; });
+        var toIndex = newOrderColumns.findIndex(function (column) { return to && columns[to].name === column; });
+        // move column from a position to the new position
+        var column = newOrderColumns[fromIndex];
+        newOrderColumns.splice(fromIndex, 1);
+        newOrderColumns.splice(toIndex, 0, column);
+        setColumnsOrder(newOrderColumns);
+    }, [setColumnsOrder, columnsOrder, columns]);
     var _e = useState(false), isDragDisabled = _e[0], setIsDragDisabled = _e[1];
     var onResizeOver = React.useCallback(function () {
         setIsDragDisabled(true);

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

@@ -1,13 +1,11 @@
 import React from 'react';
 import { ColumnConfig, CommonGridProps } from '../../types';
-import { DropResult } from 'react-beautiful-dnd';
 type ManageColumnProps = {
     columns?: CommonGridProps['columnsDefinitions'];
     columnsConfigValues?: string[];
     setColumnsConfigOptions: (value: React.SetStateAction<{
         [x: string]: ColumnConfig | {};
     }>) => void;
-    handleDragEnd: (item: DropResult) => void;
 };
-declare const ManageColumnForm: ({ columns, columnsConfigValues, setColumnsConfigOptions, handleDragEnd, }: ManageColumnProps) => JSX.Element;
+declare const ManageColumnForm: ({ columns, columnsConfigValues, setColumnsConfigOptions }: ManageColumnProps) => JSX.Element;
 export default ManageColumnForm;

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

@@ -1,23 +1,11 @@
-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 { useCallback, useState } from 'react';
 import { x } from '@xstyled/styled-components';
 import { ActionRow } from './components/ActionRow';
 import { Input } from '../../../../Forms/Input/Input';
 import { i18n } from '@lingui/core';
-import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
 var ManageColumnForm = function (_a) {
-    var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd;
+    var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions;
     var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
     var onChangeInputValue = useCallback(function (e) {
         setSearchedValue(e.target.value);
@@ -25,8 +13,8 @@ var ManageColumnForm = function (_a) {
     var clear = useCallback(function () {
         setSearchedValue('');
     }, [setSearchedValue]);
-    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "vertical", children: function (droppableProvided) { return (_jsx(x.div, __assign({ h: "400px", overflowY: "scroll", mt: "20px", ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
-                            return (_jsx(Draggable, { draggableId: column.name, index: index, isDragDisabled: !!searchedValue, children: function (draggableProvided, snapshot) { return (_jsx(ActionRow, { column: column, innerRef: draggableProvided.innerRef, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue, draggableProps: draggableProvided.draggableProps, dragHandleProps: draggableProvided.dragHandleProps }, index)); } }, column.name));
-                        }) }))); } }) })] }));
+    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
+                    return (_jsx(ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index));
+                }) })] }));
 };
 export default ManageColumnForm;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ColumnConfig, ColumnDefinition } from '../../../types';
-import { DraggableProps, DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 type ActionRowProps = {
     column: ColumnDefinition;
     columnsConfigValues: string[] | undefined;
@@ -8,9 +7,6 @@ type ActionRowProps = {
         [x: string]: ColumnConfig | {};
     }>) => void;
     searchedValue: string;
-    innerRef?: Function;
-    draggableProps?: DraggableProps | any;
-    dragHandleProps?: DraggableProvidedDragHandleProps | null;
 };
-export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, searchedValue, innerRef, draggableProps, dragHandleProps, }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, searchedValue }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,7 +14,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { x, th } from '@xstyled/styled-components';
 import styled from 'styled-components';
 import Toggle from '../../../../../Elements/Toggle/Toggle';
@@ -22,15 +22,14 @@ import { Group } from '../../../../../Elements/Icon/icons/Group';
 import { isObject } from 'lodash';
 import { H6 } from '../../../../../Elements/Typography/Typography';
 import { i18n } from '@lingui/core';
-var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
+var RowLayout = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
     var $isVisible = _a.$isVisible;
     return ($isVisible ? 'flex' : 'none');
 }, th.color('lightGray6'));
 export var ActionRow = function (_a) {
     var _b, _c, _d, _e, _f;
-    var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue, innerRef = _a.innerRef, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps;
+    var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue;
     var _g = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _g[0], setIsSelected = _g[1];
-    var style = useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
     var translatedValue = isObject(column === null || column === void 0 ? void 0 : column.title) &&
         'props' in column.title &&
         ((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) &&
@@ -43,6 +42,6 @@ export var ActionRow = function (_a) {
         });
         setIsSelected(!isSelected);
     }, [setColumnsConfigOptions, isSelected, column.name]);
-    return (_jsxs(RowLayout, __assign({ "$isVisible": isVisible }, draggableProps, dragHandleProps, { ref: innerRef, style: style, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] })));
+    return (_jsxs(RowLayout, { "$isVisible": isVisible, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] }));
 };
 var templateObject_1;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { DropResult } from 'react-beautiful-dnd';
 import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
 type Props = {
     columns: CommonGridProps['columnsDefinitions'];
@@ -16,9 +15,5 @@ declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }
     }>>;
     onConfirmForm: () => void;
     resetColumnConfig: () => void;
-    handleDragEnd: (isManageModal?: boolean) => (item: DropResult) => void;
-    onCloseForm: () => void;
-    displayColumnsDefinitions: import("../types").ColumnDefinition<string>[];
-    manageColumnsFormDefinitions: import("../types").ColumnDefinition<string>[];
 };
 export default useManageColumn;

package/ui/Blocks/CommonGrid/hooks/useManageColumn.js

@@ -9,25 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { checksColumnsOrder, isColumnOn } from '../utils';
+import { useCallback, useMemo, useState } from 'react';
 var useManageColumn = function (_a) {
     var columns = _a.columns, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, onClose = _a.onClose;
-    var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig, setColumnsOrder = gridActions.setColumnsOrder;
-    var columnConfig = gridSelectors.columnConfig, columnsOrder = gridSelectors.columnsOrder;
-    var initialColumnsOrder = useMemo(function () { return columns === null || columns === void 0 ? void 0 : columns.map(function (col) { return col.name; }); }, [columns]);
-    var columnsOrderValue = (columnsOrder === null || columnsOrder === void 0 ? void 0 : columnsOrder.length) ? columnsOrder : initialColumnsOrder;
-    var _b = useState(__assign({}, (columnConfig !== null && columnConfig !== void 0 ? columnConfig : {}))), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
-    var _c = useState(columnsOrderValue), updatedColumnsOrder = _c[0], setUpdatedColumnsOrder = _c[1];
+    var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig;
+    var columnConfig = gridSelectors.columnConfig;
+    var _b = useState(__assign({}, columnConfig)), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
     var columnsConfigValues = useMemo(function () {
         return columns === null || columns === void 0 ? void 0 : columns.filter(function (column) {
             var _a;
@@ -36,65 +23,12 @@ var useManageColumn = function (_a) {
         }).map(function (column) { return column.name; });
     }, [columnConfig, columns]);
     var onConfirmForm = useCallback(function () {
-        setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions);
-        setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(columnsConfigValues);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [columnsConfigOptions, updatedColumnsOrder, onClose, setColumnConfig, setColumnsOrder]);
+        (setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions)) && (onClose === null || onClose === void 0 ? void 0 : onClose());
+    }, [columnsConfigOptions, onClose, setColumnConfig]);
     var resetColumnConfig = useCallback(function () {
-        setUpdatedColumnsOrder(initialColumnsOrder);
-        resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        setColumnsConfigOptions({});
-    }, [onClose, resetGrid, initialColumnsOrder, columnConfig]);
-    var onCloseForm = useCallback(function () {
-        setUpdatedColumnsOrder(columnsOrderValue);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        setColumnsConfigOptions({});
-    }, [columnsOrderValue, onClose]);
-    var getSortedColumns = useCallback(function (orderValues, isManageModal) {
-        return (!isManageModal ? columns.filter(function (column) { return isColumnOn(column, columnConfig); }) : columns).toSorted(function (col1, col2) {
-            var i = (orderValues || []).indexOf(col1.name);
-            var j = (orderValues || []).indexOf(col2.name);
-            return i > j ? 1 : i < j ? -1 : 0;
-        });
-    }, [columnConfig, columns]);
-    var displayColumnsDefinitions = useMemo(function () { return getSortedColumns(columnsOrderValue, false); }, [columnsOrderValue]);
-    var manageColumnsFormDefinitions = useMemo(function () { return getSortedColumns(updatedColumnsOrder, true); }, [updatedColumnsOrder]);
-    var handleDragEnd = useCallback(function (isManageModal) {
-        if (isManageModal === void 0) { isManageModal = false; }
-        return function (item) {
-            var destination = item.destination, source = item.source;
-            var to = destination === null || destination === void 0 ? void 0 : destination.index;
-            var from = source === null || source === void 0 ? void 0 : source.index;
-            if (to === from || !destination) {
-                return;
-            }
-            var columns = isManageModal ? manageColumnsFormDefinitions : displayColumnsDefinitions;
-            var newOrderColumns = __spreadArray([], (isManageModal ? updatedColumnsOrder : columnsOrderValue), true);
-            var fromIndex = newOrderColumns.findIndex(function (column) { return columns[from].name === column; });
-            var toIndex = newOrderColumns.findIndex(function (column) { return columns[to !== null && to !== void 0 ? to : 0].name === column; });
-            // move column from a position to the new position
-            var column = newOrderColumns[fromIndex];
-            newOrderColumns.splice(fromIndex, 1);
-            newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, column);
-            if (!isManageModal) {
-                setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(newOrderColumns);
-            }
-            setUpdatedColumnsOrder(newOrderColumns);
-        };
-    }, [updatedColumnsOrder, columnsOrderValue, setColumnsOrder, manageColumnsFormDefinitions, displayColumnsDefinitions]);
-    useEffect(function () {
-        checksColumnsOrder(columnsOrderValue, columns);
-    }, []);
-    return {
-        columnsConfigValues: columnsConfigValues,
-        setColumnsConfigOptions: setColumnsConfigOptions,
-        onConfirmForm: onConfirmForm,
-        resetColumnConfig: resetColumnConfig,
-        handleDragEnd: handleDragEnd,
-        onCloseForm: onCloseForm,
-        displayColumnsDefinitions: displayColumnsDefinitions,
-        manageColumnsFormDefinitions: manageColumnsFormDefinitions,
-    };
+        (resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid()) && (onClose === null || onClose === void 0 ? void 0 : onClose());
+        setColumnsConfigOptions(columnConfig || {});
+    }, [onClose, resetGrid]);
+    return { columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, onConfirmForm: onConfirmForm, resetColumnConfig: resetColumnConfig };
 };
 export default useManageColumn;

package/ui/Blocks/CommonGrid/storybook/stories/loading.stories.js

@@ -6,7 +6,7 @@ import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
-export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true }) })); };
+export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true, hideColumnConfig: true }) })); };
 LoadingState.story = {
     name: 'Loading state',
 };

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.js

@@ -6,7 +6,7 @@ import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
-export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
+export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
 ManyColumnsNoScrollLayout.story = {
     name: 'many columns no-scroll layout',
 };

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.js

@@ -6,7 +6,7 @@ import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
-export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
+export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
 ManyColumnsNormalLayoutANoControls.story = {
     name: 'many columns normal layout a no controls',
 };

package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.js

@@ -8,7 +8,7 @@ export default {
     title: '@Blocks/CommonGrid',
 };
 export var WithCustomGridActions = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions }) }));
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions, hideColumnConfig: true }) }));
 };
 WithCustomGridActions.story = {
     name: 'With custom grid actions',

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

@@ -6,10 +6,8 @@ export declare const ContentContainer: import("styled-components").StyledCompone
 export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
 export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
 export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: import("../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
-export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: import("./types").CommonGridProps & {
+export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, hideColumnConfig, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: import("./types").CommonGridProps & {
     filters?: import("./types").FiltersConfig | undefined;
-    handleDragEnd: (item: import("react-beautiful-dnd").DropResult) => void;
-    displayColumnsDefinitions: import("./types").ColumnDefinition[];
 }) => JSX.Element, import("@xstyled/system").Theme, {
     onRowClick?: Function | undefined;
     height?: number | undefined;

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

@@ -255,6 +255,7 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     onBatchAction?: OnBatchActionFn;
     columnLayout?: ColumnLayout;
     confirmOnReset?: () => boolean;
+    hideColumnConfig?: boolean;
     className?: string;
     gridRef?: React.MutableRefObject<HTMLElement>;
     minColumnWidth?: number;
@@ -298,7 +299,7 @@ export type GridProps = Omit<CommonGridProps, 'filters'> & {
     queryRowsParam?: number | string;
     customPaginationHandler?: (page: number, rows: number) => void;
 };
-export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'minColumnWidth' | 'columnLayout'>;
+export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'hideColumnConfig' | 'minColumnWidth' | 'columnLayout'>;
 export type Item = {
     label: string | JSX.Element;
     value: string;

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

@@ -18,4 +18,3 @@ export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickT
 export declare const GRID_MIN_ROWS = 6;
 export declare const rowHeight = 40;
 export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;
-export declare const checksColumnsOrder: (colsOrder: string[], columnsDefinitions: ColumnDefinition[]) => void;

package/ui/Blocks/CommonGrid/utils/index.js

@@ -77,16 +77,3 @@ export var getFilters = function (optimizeFilters) {
         filters.text.defaultExtraProps = { defaultComparator: 'eq' };
     return filters;
 };
-export var checksColumnsOrder = function (colsOrder, columnsDefinitions) {
-    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');
-    }
-};

package/ui/Elements/Pagination/Pagination.d.ts

@@ -1,9 +1,11 @@
-export type Props = {
+export type PaginationProps = {
     page?: number;
     itemCount?: number;
     itemPerPage: number;
+    radius?: number;
+    rate?: number;
     onPageChange?: (number: number, rows: number) => void;
     customPaginationHandler?: (page: number, rows: number) => void;
 };
-declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page, customPaginationHandler }: Props) => JSX.Element;
+declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page, radius, rate, customPaginationHandler, }: PaginationProps) => JSX.Element;
 export default Pagination;

package/ui/Elements/Pagination/Pagination.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
 var Pagination = function (_a) {
-    var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page, customPaginationHandler = _a.customPaginationHandler;
+    var onPageChange = _a.onPageChange, _b = _a.itemPerPage, itemPerPage = _b === void 0 ? 3 : _b, _c = _a.itemCount, itemCount = _c === void 0 ? 0 : _c, page = _a.page, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.rate, rate = _e === void 0 ? 4 : _e, customPaginationHandler = _a.customPaginationHandler;
     var setPage = useCallback(function (number) { return function () {
         if (customPaginationHandler) {
             customPaginationHandler(number, itemPerPage);
@@ -13,31 +13,27 @@ var Pagination = function (_a) {
         }
     }; }, [itemPerPage, onPageChange, customPaginationHandler]);
     var pageX = page !== null && page !== void 0 ? page : 1;
-    var pageCount = Math.max(Math.ceil((itemCount !== null && itemCount !== void 0 ? itemCount : 0) / (itemPerPage !== null && itemPerPage !== void 0 ? itemPerPage : 3)), 1);
+    var pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
     var arrayOfPages = useMemo(function () {
         var pageNumbers = Array.from({ length: pageCount }, function (_, i) { return i + 1; });
         // first and last page are still visible
         // if number of pages is less than 6 (display all pages without dots and duplication of first and last char)
-        if (pageCount < 6) {
+        if (pageCount < radius + 1) {
             return pageNumbers.slice(1, pageCount - 1);
-            // if current page is less than 5 (display first 5 pages)
+            // if current page is less than radius (display first radius pages)
         }
-        else if (pageX < 5) {
-            return pageNumbers.slice(1, 5);
-            // display last 5 pages
+        else if (pageX < radius) {
+            return pageNumbers.slice(1, Math.min(pageX + rate, radius));
+            // display last radius pages
         }
-        else if (pageX > pageCount - 4) {
-            return pageNumbers.slice(pageCount - 5, pageCount - 1);
-        }
-        else if (window.innerWidth < 768) {
-            // display dispersion of 1 chars from current page (part between dots)
-            return pageNumbers.slice(pageX - 2, pageX + 1);
+        else if (pageX > pageCount - Math.floor(radius / 2)) {
+            return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
         }
         else {
             // display dispersion of 2 chars from current page (part between dots)
-            return pageNumbers.slice(pageX - 3, pageX + 2);
+            return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
         }
     }, [pageCount, pageX]);
-    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), pageX >= 5 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), pageX < pageCount - 3 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
+    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), arrayOfPages[0] > 2 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
 };
 export default Pagination;

package/ui/Elements/Pagination/index.d.ts

@@ -1,3 +1,4 @@
 import Pagination from './Pagination';
+export type { PaginationProps } from './Pagination';
 export { Pagination };
 export default Pagination;

package/ui/Elements/Pagination/stories/Pagination.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
+import { PaginationProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ onPageChange, itemPerPage, itemCount, page, customPaginationHandler }: import("../Pagination").Props) => JSX.Element;
+    component: ({ onPageChange, itemPerPage, itemCount, page, radius, rate, customPaginationHandler, }: PaginationProps) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
@@ -10,3 +10,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const ManyPages: Story;
+export declare const Shorter: Story;