@mailstep/design-system 0.4.21 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.4.21",
+  "version": "0.5.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -14,7 +14,7 @@
     "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 run build && npm publish ./build",
+    "deploy": "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!\""
   },
@@ -69,7 +69,15 @@
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1"
+    "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"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
@@ -92,7 +100,12 @@
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.0.4"
+    "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"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

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

@@ -0,0 +1,3 @@
+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;
+export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -0,0 +1,115 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { x } from '@xstyled/styled-components';
+import { Row, MessageCell } from './components/Table';
+import OversizedScroll from './components/OversizedScroll';
+import GroupRow from './components/GroupRow';
+import FilterRow from './components/FilterRow';
+import DataRow from './components/DataRow';
+import HeadRow from './components/HeadRow';
+import 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';
+var rowsStyles = { outline: 'none' };
+var defaultVoidFunction = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return null;
+};
+var defaultUxState = initialState.uxState;
+var defaultColumnsWidth = {};
+var defaultPerPageOptions = [10, 20, 50, 100];
+var CommonGrid = function (_a) {
+    var components = _a.components, 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;
+    var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
+    useUxReset(rowsData, uxState, clearUxState);
+    var checksColumnsOrder = React.useCallback(function (colsOrder) {
+        var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });
+        var stickyLeftColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo !== 'right'; });
+        if (stickyLeftColls.length > 1 || stickyRightColls.length > 1) {
+            console.error('Grid can have only sticky column on each side.');
+        }
+        if (stickyLeftColls.length && colsOrder.indexOf(stickyLeftColls[0].name) !== 0) {
+            console.error('The left sticky column should be the first one in a row');
+        }
+        if (stickyRightColls.length && colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1) {
+            console.error('The Right sticky column should be the last one in a row');
+        }
+    }, [columnsDefinitions]);
+    // todo refactor as part of definitions
+    var columnsOrder = React.useMemo(function () {
+        var _a;
+        var order = ((_a = gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.columnsOrder) === null || _a === void 0 ? void 0 : _a.length)
+            ? gridSelectors.columnsOrder
+            : columnsDefinitions.map(function (column) { return column.name; });
+        checksColumnsOrder(order);
+        return order;
+    }, [columnsDefinitions, gridSelectors.columnsOrder]);
+    // filtered and ordered columns definition, relevant columns definition to iterate over and render
+    var displayColumnsDefinitions = React.useMemo(function () {
+        return (!hideColumnConfig ? columnsDefinitions.filter(function (column) { return isColumnOn(column, columnConfig); }) : columnsDefinitions).sort(function (col1, col2) {
+            var i = (columnsOrder || []).indexOf(col1.name);
+            var j = (columnsOrder || []).indexOf(col2.name);
+            return i > j ? 1 : i < j ? -1 : 0;
+        });
+    }, [hideColumnConfig, columnConfig, columnsDefinitions, columnsOrder]);
+    var GridMessage;
+    var messageClass = 'info';
+    if (isLoading)
+        GridMessage = _jsx(Translator, { id: "dataGrid.status.loadingData", defaults: "... loading data ..." });
+    if (!isLoading && (!rowsData || rowsData.length < 1))
+        GridMessage = _jsx(Translator, { id: "dataGrid.status.noDataFound", defaults: "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 groups = React.useMemo(function () {
+        return getGroups(displayColumnsDefinitions);
+    }, [displayColumnsDefinitions]);
+    var commonGridRef = React.useCallback(function (node) {
+        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 &&
+                                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 }))] }) }));
+};
+export default CommonGrid;

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

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

package/ui/Blocks/CommonGrid/CommonGridContext.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import DefaultPaginator from './components/DefaultPaginator';
+export var defaultComponents = {
+    // various components:
+    Translator: function (_a) {
+        var defaults = _a.defaults;
+        return _jsx("div", { children: defaults });
+    },
+    Checkbox: function (props) { return _jsx("input", __assign({ type: "checkbox" }, props)); },
+    Button: function (props) { return _jsx("button", __assign({}, props)); },
+    Switch: function (props) { return _jsx("input", __assign({ type: "checkbox" }, props)); },
+    Paginator: DefaultPaginator,
+};
+var Context = React.createContext(defaultComponents);
+var Provider = function (_a) {
+    var components = _a.components, rest = __rest(_a, ["components"]);
+    var mergedContext = React.useMemo(function () { return (__assign(__assign({}, defaultComponents), components)); }, [components]);
+    return _jsx(Context.Provider, __assign({ value: mergedContext }, rest));
+};
+var Consumer = Context.Consumer;
+export default Context;
+export { Provider, Consumer };

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

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

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ActionColumnHeadProps } from '../types';
+declare const _default: React.MemoExoticComponent<({ actionColumn, onBatchAction, handleUxChange, rowsData, uxState, }: ActionColumnHeadProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { x } from '@xstyled/styled-components';
+import Context from '../CommonGridContext';
+import DropdownSelect from './DropdownSelect';
+import { useToggleAllCheckbox, useGridActionTrigger } from '../utils/public';
+var ActionColumnHead = function (_a) {
+    var _b, _c;
+    var actionColumn = _a.actionColumn, onBatchAction = _a.onBatchAction, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
+    var _d = React.useContext(Context), Translator = _d.Translator, Checkbox = _d.Checkbox;
+    var _e = useToggleAllCheckbox(rowsData, uxState, handleUxChange), allChecked = _e[0], toggleCheckbox = _e[1];
+    var _f = useGridActionTrigger(rowsData, uxState, actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions, onBatchAction), enabledActions = _f[0], handleBatchAction = _f[1];
+    var displayCheckbox = (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.checkAllPosition) !== 'top' && (((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || actionColumn.forceCheckboxes);
+    return (_jsxs(x.div, { display: "flex", mr: 1, className: "actionsHandler", children: [displayCheckbox && _jsx(Checkbox, { label: "", checked: allChecked, onChange: toggleCheckbox }), ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.length) ? (_jsx(DropdownSelect, { label: _jsx(Translator, { id: "dataGrid.buttonActions", defaults: "Actions" }), options: enabledActions, onSelect: handleBatchAction, appearance: "secondary", disabled: !enabledActions.length || !rowsData.length })) : null] }));
+};
+export default React.memo(ActionColumnHead);

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

@@ -0,0 +1,7 @@
+import { ExtraControlButton as ButtonProps } from '../types';
+type ButtonStripProps = {
+    buttonsLeft?: ButtonProps[];
+    buttonsRight?: ButtonProps[];
+};
+declare const ButtonStrip: ({ buttonsLeft, buttonsRight }: ButtonStripProps) => JSX.Element;
+export default ButtonStrip;

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

@@ -0,0 +1,35 @@
+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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { x } from '@xstyled/styled-components';
+import DropdownSelect from './DropdownSelect';
+import Context from '../CommonGridContext';
+var ControlButton = function (_a) {
+    var node = _a.node, label = _a.label, style = _a.style, hide = _a.hide, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron;
+    var Button = React.useContext(Context).Button;
+    if (node)
+        return _jsx(_Fragment, { children: node });
+    if (hide)
+        return null;
+    if (options) {
+        return (_jsx(DropdownSelect, { label: label || '', appearance: style || 'secondary', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
+    }
+    else {
+        return (_jsx(Button, { type: "button", onClick: onClick, disabled: disabled, appearance: style || 'secondary', children: label }));
+    }
+};
+var ButtonStrip = function (_a) {
+    var _b = _a.buttonsLeft, buttonsLeft = _b === void 0 ? [] : _b, _c = _a.buttonsRight, buttonsRight = _c === void 0 ? [] : _c;
+    return (_jsxs(x.div, { display: "flex", justifyContent: "space-between", className: "buttonsStrip", w: '100%', children: [_jsx(x.div, { display: "flex", children: buttonsLeft.map(function (button, idx) { return (_jsx(x.div, { mr: 1, children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }), _jsx(x.div, { display: "flex", children: buttonsRight.map(function (button, idx) { return (_jsx(x.div, { ml: 1, children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) })] }));
+};
+export default ButtonStrip;

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

@@ -0,0 +1,11 @@
+import { ColumnDefinition, GridActionsType, FiltersConfig, Group } from '../types';
+type Props = {
+    onChange: Required<GridActionsType>['addFilter'];
+    value?: any;
+    column: ColumnDefinition;
+    displayColumnWidth: number;
+    filters?: FiltersConfig;
+    group?: Group;
+};
+declare const ColumnFilterCell: ({ onChange, value, displayColumnWidth, filters, column: columnDefinition, group, }: Props) => JSX.Element;
+export default ColumnFilterCell;

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

@@ -0,0 +1,41 @@
+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 } from "react/jsx-runtime";
+import React from 'react';
+import { x } from '@xstyled/styled-components';
+import { Cell } from './Table';
+import { useAddFilter } from '../utils/public';
+import { createFilterType, getStickyCollClassNames } from '../utils';
+import { getCellSizeProps, getGroupClassNames } from '../utils';
+import OverlayComponent from './FilterDropdown';
+var ColumnFilterCell = function (_a) {
+    var onChange = _a.onChange, value = _a.value, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group;
+    var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
+    var handleAddFilter = useAddFilter(onChange);
+    var handleChange = React.useCallback(function (event) {
+        handleAddFilter((event === null || event === void 0 ? void 0 : event.target) ? event.target.value : event, columnDefinition);
+    }, [handleAddFilter, columnDefinition]);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!columnDefinition.sticky, columnDefinition.stickTo), " ").concat(getGroupClassNames(group));
+    if (!columnDefinition.filtering) {
+        return _jsx(Cell, __assign({ className: cellClassName }, cellSizeProps));
+    }
+    var filterType = createFilterType(columnDefinition);
+    var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
+    var RenderComponent = filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent;
+    if (!RenderComponent) {
+        console.error("ERROR, using unknown filter type ".concat(filterType));
+        return (_jsx(x.div, { children: _jsx("span", { children: "".concat(filterType, " filter") }) }));
+    }
+    var passProps = __assign(__assign(__assign({}, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps), columnDefinition.filterExtraProps), (filterType == 'options' && { options: columnDefinition.filterOptions }));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { className: "test", children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, OverlayComponent: OverlayComponent }, passProps)) }) })));
+};
+export default ColumnFilterCell;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SortingValueType } from '../types';
+declare const _default: React.NamedExoticComponent<{
+    title?: string | JSX.Element | undefined;
+    isSortable: boolean;
+    onSetSort: (value: SortingValueType) => void;
+    sortValue: SortingValueType;
+}>;
+export default _default;

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

@@ -0,0 +1,20 @@
+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 React from 'react';
+import styled from '@xstyled/styled-components';
+import { SortingUp, SortingDown } from './icons/Sorting';
+var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & + * {\n    margin-left: 1em;\n  }\n"], ["\n  & + * {\n    margin-left: 1em;\n  }\n"])));
+var ColumnTitle = function (_a) {
+    var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
+    var handleClick = React.useCallback(function () {
+        var newValue = sortValue ? (sortValue == 'asc' ? 'desc' : null) : 'asc';
+        if (onSetSort)
+            onSetSort(newValue);
+    }, [sortValue, onSetSort]);
+    return (_jsxs("div", { onClick: isSortable ? handleClick : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16" }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16" })] }));
+};
+export default React.memo(ColumnTitle);
+var templateObject_1;

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

@@ -0,0 +1,9 @@
+import { ColumnDefinition, ColumnConfig } from '../types';
+type ConfigFormProps = {
+    columns: ColumnDefinition[];
+    columnConfig?: ColumnConfig;
+    onCancel: () => void;
+    onSubmit: (columnConfig: ColumnConfig) => void | Promise<any> | null;
+};
+declare const ConfigForm: ({ columns, columnConfig, onCancel, onSubmit }: ConfigFormProps) => JSX.Element;
+export default ConfigForm;

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

@@ -0,0 +1,58 @@
+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 React from 'react';
+import DialogWrapper from './Dialog';
+import { x } from '@xstyled/styled-components';
+import styled from '@xstyled/styled-components';
+import { isColumnOn } from '../utils';
+import Context from '../CommonGridContext';
+import cloneDeep from 'lodash/cloneDeep';
+var H4 = styled.h4(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: dark;\n  margin-bottom: 0;\n  font-weight: thin;\n  font-size: 1.25rem;\n"], ["\n  color: dark;\n  margin-bottom: 0;\n  font-weight: thin;\n  font-size: 1.25rem;\n"])));
+var ColumnTitle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: dark;\n"], ["\n  color: dark;\n"])));
+var Title = function (_a) {
+    var isCheckedAll = _a.isCheckedAll, onCheckAll = _a.onCheckAll;
+    var _b = React.useContext(Context), Translator = _b.Translator, Button = _b.Button;
+    var toggleAll = React.useCallback(function () { return onCheckAll(isCheckedAll); }, [isCheckedAll, onCheckAll]);
+    return (_jsxs(x.div, { display: "flex", justifyContent: "space-between", alignItems: "center", w: '100%', children: [_jsx(H4, { children: _jsx(Translator, { id: "dataGrid.config.title", defaults: "Configure columns" }) }), _jsx(Button, { appearance: "minimal", onClick: toggleAll, children: isCheckedAll ? (_jsx(Translator, { id: "dataGrid.config.buttonUncheckAll", defaults: "Uncheck all" })) : (_jsx(Translator, { id: "dataGrid.config.buttonCheckAll", defaults: "Check all" })) })] }));
+};
+var HookedSwitch = function (_a) {
+    var checked = _a.checked, column = _a.column, onChange = _a.onChange;
+    var Switch = React.useContext(Context).Switch;
+    var handleToggleRow = React.useCallback(function () { return onChange(column); }, [column, onChange]);
+    return _jsx(Switch, { name: column.name, checked: checked, onChange: handleToggleRow });
+};
+var ConfigForm = function (_a) {
+    var columns = _a.columns, _b = _a.columnConfig, columnConfig = _b === void 0 ? {} : _b, onCancel = _a.onCancel, onSubmit = _a.onSubmit;
+    var _c = React.useState(columnConfig), newColumnConfig = _c[0], setColumnConfig = _c[1];
+    var handleToggleRow = function (column) {
+        var currentConfig = cloneDeep(newColumnConfig);
+        if (!currentConfig[column.name]) {
+            currentConfig[column.name] = {};
+        }
+        currentConfig[column.name].isHidden = isColumnOn(column, currentConfig); // = inversion
+        setColumnConfig(currentConfig);
+    };
+    var handleCheckAllColumns = React.useCallback(function (checkAll) {
+        var currentConfig = cloneDeep(newColumnConfig);
+        columns.forEach(function (column) {
+            if (!currentConfig[column.name]) {
+                currentConfig[column.name] = {};
+            }
+            currentConfig[column.name].isHidden = checkAll;
+        });
+        setColumnConfig(currentConfig);
+    }, [newColumnConfig, columns]);
+    var handleFormSubmit = React.useCallback(function () {
+        if (onSubmit)
+            onSubmit(newColumnConfig);
+    }, [onSubmit, newColumnConfig]);
+    var isCheckedAll = columns.every(function (column) { var _a; return !((_a = newColumnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden); });
+    return (_jsx(DialogWrapper, { onCancel: onCancel, onSubmit: handleFormSubmit, header: _jsx(Title, { isCheckedAll: isCheckedAll, onCheckAll: handleCheckAllColumns }), children: _jsx(x.div, { children: columns
+                .filter(function (column) { return !column.alwaysOn; })
+                .map(function (column) { return (_jsxs(x.div, { my: 3, display: "flex", alignItems: "center", children: [_jsx(x.div, { mr: 3, children: _jsx(HookedSwitch, { checked: isColumnOn(column, newColumnConfig), column: column, onChange: handleToggleRow }) }), _jsx(ColumnTitle, { children: column.title || '' })] }, column.name)); }) }) }));
+};
+export default ConfigForm;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ColumnDefinition, RowProps, Group } from '../types';
+type DataCellPros = {
+    column: ColumnDefinition;
+    rowData: RowProps;
+    onRowAction?: (id: string, field: string, value: any) => void;
+    displayColumnWidth: number;
+    group: Group;
+};
+declare const MemoDataCell: React.NamedExoticComponent<DataCellPros>;
+export default MemoDataCell;

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

@@ -0,0 +1,52 @@
+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 } from "react/jsx-runtime";
+import React from 'react';
+import get from 'lodash/fp/get';
+import { TextCell } from './Table';
+import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
+var DataCell = function (_a) {
+    var column = _a.column, group = _a.group, rowData = _a.rowData, onRowAction = _a.onRowAction, displayColumnWidth = _a.displayColumnWidth;
+    var Wrapper = column.fixedSize ? 'div' : TextCell;
+    var wrapperBaseProps = column.fixedSize
+        ? { style: __assign(__assign({}, getCellSizeProps(column, displayColumnWidth)), { alignSelf: 'center' }) }
+        : getCellSizeProps(column, displayColumnWidth);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo), " ").concat(getGroupClassNames(group));
+    if (column.cellComponent) {
+        return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: _jsx(column.cellComponent, { rowData: rowData, onRowAction: onRowAction, column: column }) })));
+    }
+    else {
+        return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: column.formatRowValue ? column.formatRowValue(rowData) : get(column.name, rowData) })));
+    }
+};
+var MemoDataCell = React.memo(DataCell, function (prevProps, newProps) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    if (prevProps.rowData !== newProps.rowData ||
+        prevProps.displayColumnWidth !== newProps.displayColumnWidth ||
+        ((_a = prevProps.column) === null || _a === void 0 ? void 0 : _a.fixedSize) != ((_b = newProps.column) === null || _b === void 0 ? void 0 : _b.fixedSize) ||
+        ((_c = prevProps.column) === null || _c === void 0 ? void 0 : _c.flexGrow) != ((_d = newProps.column) === null || _d === void 0 ? void 0 : _d.flexGrow) ||
+        ((_e = prevProps.column) === null || _e === void 0 ? void 0 : _e.flexShrink) != ((_f = newProps.column) === null || _f === void 0 ? void 0 : _f.flexShrink) ||
+        ((_g = prevProps.group) === null || _g === void 0 ? void 0 : _g.start) != ((_h = newProps.group) === null || _h === void 0 ? void 0 : _h.start) ||
+        ((_j = prevProps.group) === null || _j === void 0 ? void 0 : _j.end) != ((_k = newProps.group) === null || _k === void 0 ? void 0 : _k.end)) {
+        return false;
+    }
+    if ((((_l = prevProps.column) === null || _l === void 0 ? void 0 : _l.formatRowValue) || ((_m = newProps.column) === null || _m === void 0 ? void 0 : _m.formatRowValue)) &&
+        ((_o = prevProps.column) === null || _o === void 0 ? void 0 : _o.formatRowValue) !== ((_p = newProps.column) === null || _p === void 0 ? void 0 : _p.formatRowValue)) {
+        return false;
+    }
+    if ((((_q = prevProps.column) === null || _q === void 0 ? void 0 : _q.cellComponent) || ((_r = newProps.column) === null || _r === void 0 ? void 0 : _r.cellComponent)) &&
+        (((_s = prevProps.column) === null || _s === void 0 ? void 0 : _s.cellComponent) !== ((_t = newProps.column) === null || _t === void 0 ? void 0 : _t.cellComponent) || prevProps.onRowAction !== newProps.onRowAction)) {
+        return false;
+    }
+    return true;
+});
+export default MemoDataCell;

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

@@ -0,0 +1,21 @@
+import { ColumnDefinition, ActionColumn, RowProps, UxState, GridSelectorsType, Group } from '../types';
+type DataRowProps = {
+    columns: ColumnDefinition[];
+    actionColumn?: ActionColumn;
+    rowData: RowProps;
+    rowIndex: number;
+    uxState: UxState;
+    allowRowSelect?: boolean;
+    allowRowSelectOnAction?: boolean;
+    onUxChange?: (uxKey: keyof UxState, uxValue: any) => void;
+    onRowEditClick?: (id: string, props: RowProps) => void;
+    onRowReadClick?: (id: string, props: RowProps) => void;
+    onRowClick?: (id: string, props: RowProps) => void;
+    onRowAction?: (id: string, field: string, value: any) => void;
+    createLink?: (params?: object) => string;
+    displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
+    groups: Group[];
+    isEven?: boolean;
+};
+declare const DataRow: ({ columns, actionColumn, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowEditClick, onRowReadClick, onRowClick, onRowAction, displayColumnsWidth, groups, isEven, }: DataRowProps) => JSX.Element;
+export default DataRow;