@mailstep/design-system 0.6.3-beta.5 → 0.6.3-beta.7

package/package.json

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

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

@@ -1,6 +1,9 @@
-import { CommonGridProps, FiltersConfig } from './types';
+import { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
+import { DropResult } from 'react-beautiful-dnd';
 type Props = CommonGridProps & {
     filters?: FiltersConfig;
+    handleDragEnd: (item: DropResult) => void;
+    displayColumnsDefinitions: ColumnDefinition[];
 };
-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;
+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;
 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 { isColumnOn, getGroups } from './utils';
+import { getGroups } from './utils';
 import { initialState } from './store';
 import { Trans } from '@lingui/react';
 import FloatingButton from './components/FloatingButton/FloatingButton';
@@ -35,13 +35,12 @@ var defaultVoidFunction = function () {
 };
 var defaultUxState = initialState.uxState;
 var defaultColumnsWidth = {};
-var defaultPerPageOptions = [10, 20, 50, 100];
 var CommonGrid = function (_a) {
-    var filters = _a.filters, 
+    var filters = _a.filters, handleDragEnd = _a.handleDragEnd, 
     // redux props
     gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, 
     // input props
-    isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, columnsDefinitions = _a.columnsDefinitions, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, hideColumnConfig = _a.hideColumnConfig, className = _a.className, gridRef = _a.gridRef, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps;
+    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;
     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);
@@ -68,14 +67,6 @@ var CommonGrid = function (_a) {
         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)
@@ -94,7 +85,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, 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, 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 &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -40,7 +40,7 @@ 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 _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, hideColumnConfig = props.hideColumnConfig, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "hideColumnConfig"]);
     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 () {
@@ -60,7 +60,8 @@ 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;
-    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: 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: displayColumnsDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd }) }))] }));
+        hideColumnConfig: hideColumnConfig,
+    }), 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) }) }))] }));
 };
 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, setColumnsOrder, columnsOrder, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups, }: HeadRowProps) => JSX.Element;
+declare const HeadRow: ({ columns, actionColumn, onAddSort, handleDragEnd, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups, }: HeadRowProps) => JSX.Element;
 export default HeadRow;

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

@@ -9,15 +9,6 @@ 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';
@@ -30,27 +21,11 @@ var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
 };
 var HeadRow = function (_a) {
     var _b;
-    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 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 _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 === -1 ? 0 : 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/hooks/useManageColumn.d.ts

@@ -1,23 +1,25 @@
-/// <reference types="react" />
 import { DropResult } from 'react-beautiful-dnd';
 import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
+import React from 'react';
 type Props = {
     columns: CommonGridProps['columnsDefinitions'];
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
     onClose?: () => void;
+    hideColumnConfig?: boolean;
 };
-declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }: Props) => {
+declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose, hideColumnConfig }: Props) => {
     columnsConfigValues: string[];
-    setColumnsConfigOptions: import("react").Dispatch<import("react").SetStateAction<{
+    setColumnsConfigOptions: React.Dispatch<React.SetStateAction<{
         [x: string]: {
             isHidden?: boolean | undefined;
         };
     }>>;
     onConfirmForm: () => void;
     resetColumnConfig: () => void;
-    handleDragEnd: (item: DropResult) => 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

@@ -19,12 +19,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useCallback, useMemo, useState } from 'react';
+import { isColumnOn } from '../utils';
 var useManageColumn = function (_a) {
-    var columns = _a.columns, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, onClose = _a.onClose;
+    var columns = _a.columns, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, onClose = _a.onClose, hideColumnConfig = _a.hideColumnConfig;
     var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig, setColumnsOrder = gridActions.setColumnsOrder;
     var columnConfig = gridSelectors.columnConfig, columnsOrder = gridSelectors.columnsOrder;
     var _b = useState(__assign({}, columnConfig)), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
-    var _c = useState(columnsOrder || columns.map(function (col) { return col.name; })), updatedColumnsOrder = _c[0], setUpdatedColumnsOrder = _c[1];
+    var _c = useState(columnsOrder !== null && columnsOrder !== void 0 ? columnsOrder : []), updatedColumnsOrder = _c[0], setUpdatedColumnsOrder = _c[1];
     console.log('columnConfig', columnConfig);
     console.log('columnsOrder', columnsOrder);
     console.log('columnsConfigOptions', columnsConfigOptions);
@@ -36,45 +37,57 @@ var useManageColumn = function (_a) {
             return (column === null || column === void 0 ? void 0 : column.alwaysOn) || typeof isHidden === 'boolean' ? !isHidden : !(column === null || column === void 0 ? void 0 : column.defaultHidden);
         }).map(function (column) { return column.name; });
     }, [columnConfig, columns]);
-    var columnsOrderValues = useMemo(function () {
-        var order = (columnsOrder === null || columnsOrder === void 0 ? void 0 : columnsOrder.length) ? columnsOrder : columns.map(function (column) { return column.name; });
-        return order;
-    }, [columns, columnsOrder]);
     var onConfirmForm = useCallback(function () {
-        (setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions)) && (setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(updatedColumnsOrder)) && (onClose === null || onClose === void 0 ? void 0 : onClose());
+        setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions);
+        setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(updatedColumnsOrder);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [columnsConfigOptions, updatedColumnsOrder, onClose, setColumnConfig]);
     var resetColumnConfig = useCallback(function () {
         setUpdatedColumnsOrder([]);
-        (resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid()) && (onClose === null || onClose === void 0 ? void 0 : onClose());
+        resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
         setColumnsConfigOptions(columnConfig || {});
     }, [onClose, resetGrid]);
     var onCloseForm = useCallback(function () {
         setUpdatedColumnsOrder(columnsOrder !== null && columnsOrder !== void 0 ? columnsOrder : []);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, []);
-    var handleDragEnd = useCallback(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 newOrderColumns = __spreadArray([], updatedColumnsOrder, 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 === -1 ? 0 : toIndex, 0, column);
-        setUpdatedColumnsOrder(newOrderColumns);
+    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 newOrderColumns = __spreadArray([], (updatedColumnsOrder !== null && updatedColumnsOrder !== void 0 ? updatedColumnsOrder : []), 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 ? 0 : toIndex, 0, column);
+            if (!isManageModal) {
+                setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(newOrderColumns);
+            }
+            setUpdatedColumnsOrder(newOrderColumns);
+        };
     }, [columns, updatedColumnsOrder]);
     var displayColumnsDefinitions = useMemo(function () {
-        return columns.sort(function (col1, col2) {
+        return (!hideColumnConfig ? columns.filter(function (column) { return isColumnOn(column, columnConfig); }) : columns).sort(function (col1, col2) {
             var i = (columnsOrder || []).indexOf(col1.name);
             var j = (columnsOrder || []).indexOf(col2.name);
             return i > j ? 1 : i < j ? -1 : 0;
         });
-    }, [columns, columnsOrder]);
+    }, [hideColumnConfig, columnConfig, columns, columnsOrder]);
+    var manageColumnsFormDefinitions = useMemo(function () {
+        return (!hideColumnConfig ? columns.filter(function (column) { return isColumnOn(column, columnConfig); }) : columns).sort(function (col1, col2) {
+            var i = (updatedColumnsOrder || []).indexOf(col1.name);
+            var j = (updatedColumnsOrder || []).indexOf(col2.name);
+            return i > j ? 1 : i < j ? -1 : 0;
+        });
+    }, [hideColumnConfig, columnConfig, columns, columnsOrder]);
     return {
         columnsConfigValues: columnsConfigValues,
         setColumnsConfigOptions: setColumnsConfigOptions,
@@ -83,6 +96,7 @@ var useManageColumn = function (_a) {
         handleDragEnd: handleDragEnd,
         onCloseForm: onCloseForm,
         displayColumnsDefinitions: displayColumnsDefinitions,
+        manageColumnsFormDefinitions: manageColumnsFormDefinitions,
     };
 };
 export default useManageColumn;

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

@@ -6,8 +6,10 @@ 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, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, hideColumnConfig, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: import("./types").CommonGridProps & {
+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 & {
     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;