@mailstep/design-system 0.4.21 → 0.5.0

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CommonGridProps } from '../types';
+type OversizedScrollProps = {
+    columnLayout: Required<CommonGridProps>['columnLayout'];
+    isLoading?: boolean;
+    children: React.ReactNode;
+    floatingChildren?: React.ReactNode;
+    totalColumnsWidth: number;
+};
+declare const forwardedWrapper: React.ForwardRefExoticComponent<OversizedScrollProps & React.RefAttributes<any>>;
+export default forwardedWrapper;

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

@@ -0,0 +1,24 @@
+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, { css } from '@xstyled/styled-components';
+var ScrollWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  min-height: ", ";\n"], ["\n  ", ";\n\n  min-height: ", ";\n"])), function (props) {
+    return props.columnLayout != 'no-scroll' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "], ["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "])), props.columnLayout == 'sticky' ? 'inherit' : 'auto');
+}, function (props) { return (props.columnLayout == 'normal' ? '360px' : '0'); });
+var ScrollSizer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) {
+    return props.columnLayout != 'no-scroll' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n    "], ["\n      width: ", "px;\n    "])), props.totalColumnsWidth);
+});
+var FloatPosition = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  left: 0;\n"], ["\n  position: sticky;\n  left: 0;\n"])));
+var OversizedScroll = function (_a, ref) {
+    var columnLayout = _a.columnLayout, isLoading = _a.isLoading, children = _a.children, floatingChildren = _a.floatingChildren, totalColumnsWidth = _a.totalColumnsWidth;
+    return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    _jsxs(ScrollWrapper, { columnLayout: columnLayout, isLoading: isLoading, className: "gridWrapper", ref: ref, children: [_jsx(ScrollSizer, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, children: children }), floatingChildren && _jsx(FloatPosition, { children: floatingChildren })] }));
+};
+var forwardedWrapper = React.forwardRef(OversizedScroll);
+export default forwardedWrapper;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,7 @@
+interface Resize {
+    onResize: (width: number) => void;
+    onResizeOver: () => void;
+    onResizeOut: () => void;
+}
+declare const Resize: ({ onResize, onResizeOver, onResizeOut }: Resize) => JSX.Element;
+export default Resize;

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

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import styled from '@xstyled/styled-components';
+var Resizer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"], ["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"])));
+var Resize = function (_a) {
+    var onResize = _a.onResize, onResizeOver = _a.onResizeOver, onResizeOut = _a.onResizeOut;
+    var handleMouseDown = useCallback(function (downEvent) {
+        if ((downEvent === null || downEvent === void 0 ? void 0 : downEvent.button) !== 0) {
+            return;
+        }
+        var initialPosX = downEvent === null || downEvent === void 0 ? void 0 : downEvent.pageX;
+        var handleMouseMove = function (moveEvent) {
+            onResize(moveEvent.pageX - initialPosX);
+        };
+        var handleMouseUp = function (upEvent) {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            upEvent.stopPropagation();
+            upEvent.preventDefault();
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        downEvent.stopPropagation();
+        downEvent.preventDefault();
+    }, [onResize]);
+    return _jsx(Resizer, { className: "resizer", onMouseDown: handleMouseDown, onMouseOver: onResizeOver, onMouseOut: onResizeOut });
+};
+export default Resize;
+var templateObject_1;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+type TableProps = {
+    children: React.ReactNode;
+};
+export declare const Body: ({ children }: TableProps) => JSX.Element;
+export declare const StyledRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    hasRowClick: boolean;
+}, never>;
+export declare const Row: (props: any) => JSX.Element;
+export declare const StyledDataRow: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {
+    isEven: boolean;
+}, never>;
+export declare const Cell: (props: any) => JSX.Element;
+export declare const TextCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
+export declare const MessageCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
+export {};

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

@@ -0,0 +1,30 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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";
+// @ts-ignore
+import styled, { system, th } from '@xstyled/styled-components';
+export var Body = function (_a) {
+    var children = _a.children;
+    return _jsx("div", { children: children });
+};
+export var StyledRow = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"], ["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"])), system, function (props) { return (props.hasRowClick ? 'pointer' : 'cursor'); });
+export var Row = function (props) { return _jsx(StyledRow, __assign({ ref: props.innerRef }, props)); };
+var StyledCell = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n"], ["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n"])), system, function (props) { return props.align; });
+export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
+export var Cell = function (props) { return _jsx(StyledCell, __assign({ ref: props.innerRef }, props)); };
+export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
+export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Blocks/CommonGrid/components/icons/ArrowSimple.d.ts

@@ -0,0 +1,2 @@
+declare const SvgArrowSimple: (props: any) => JSX.Element;
+export default SvgArrowSimple;

package/ui/Blocks/CommonGrid/components/icons/ArrowSimple.js

@@ -0,0 +1,14 @@
+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";
+var SvgArrowSimple = function (props) { return (_jsx("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "arrow-simple_svg__menu-toggle-icon" }, props, { children: _jsx("path", { d: "M9 18l6-6-6-6", fill: "none" }) }))); };
+export default SvgArrowSimple;

package/ui/Blocks/CommonGrid/components/icons/Edit.d.ts

@@ -0,0 +1,2 @@
+declare const Edit: (props: any) => JSX.Element;
+export default Edit;

package/ui/Blocks/CommonGrid/components/icons/Edit.js

@@ -0,0 +1,14 @@
+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";
+var Edit = function (props) { return (_jsx("svg", __assign({ "data-icon": "edit", viewBox: "0 0 16 16" }, props, { children: _jsx("path", { d: "M3.25 10.26l2.47 2.47 6.69-6.69-2.46-2.48-6.7 6.7zM.99 14.99l3.86-1.39-2.46-2.44-1.4 3.83zm12.25-14c-.48 0-.92.2-1.24.51l-1.44 1.44 2.47 2.47 1.44-1.44c.32-.32.51-.75.51-1.24.01-.95-.77-1.74-1.74-1.74z", fillRule: "evenodd" }) }))); };
+export default Edit;

package/ui/Blocks/CommonGrid/components/icons/EyeOpen.d.ts

@@ -0,0 +1,2 @@
+declare const EyeOpen: (props: any) => JSX.Element;
+export default EyeOpen;

package/ui/Blocks/CommonGrid/components/icons/EyeOpen.js

@@ -0,0 +1,14 @@
+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";
+var EyeOpen = function (props) { return (_jsx("svg", __assign({ "data-icon": "eye-open", viewBox: "0 0 16 16" }, props, { children: _jsx("path", { d: "M8.002 7.003a1.003 1.003 0 000 2.005 1.003 1.003 0 000-2.005zm7.988.972v-.02-.01-.02-.02a.675.675 0 00-.17-.36c-.509-.673-1.118-1.264-1.737-1.806-1.328-1.173-2.846-2.155-4.523-2.546a6.702 6.702 0 00-2.925-.06c-.889.18-1.738.541-2.546.992C2.84 4.837 1.692 5.81.694 6.902c-.18.211-.36.411-.53.632a.742.742 0 000 .932c.51.672 1.119 1.264 1.738 1.805 1.328 1.173 2.846 2.156 4.523 2.547.968.23 1.947.24 2.925.04.889-.18 1.738-.542 2.546-.993 1.248-.712 2.397-1.684 3.395-2.777.18-.2.37-.411.54-.632.09-.1.149-.23.169-.36v-.02-.02-.01-.02-.03c0-.01-.01-.01-.01-.02zm-7.988 3.038a2.998 2.998 0 01-2.995-3.008 2.998 2.998 0 012.995-3.008 2.998 2.998 0 012.996 3.008 2.998 2.998 0 01-2.996 3.008z", fillRule: "evenodd" }) }))); };
+export default EyeOpen;

package/ui/Blocks/CommonGrid/components/icons/Sorting.d.ts

@@ -0,0 +1,2 @@
+export declare const SortingUp: (props: any) => JSX.Element;
+export declare const SortingDown: (props: any) => JSX.Element;

package/ui/Blocks/CommonGrid/components/icons/Sorting.js

@@ -0,0 +1,14 @@
+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";
+export var SortingUp = function (props) { return (_jsx("svg", __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx("path", { d: "M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z", fillRule: "evenodd" }) }))); };
+export var SortingDown = function (props) { return (_jsx("svg", __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx("path", { d: "M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z", fillRule: "evenodd" }) }))); };

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

@@ -0,0 +1,8 @@
+type Props = {
+    handleRowClick: (e: MouseEvent) => void;
+};
+export declare const useTimeMeasurement: ({ handleRowClick }: Props) => {
+    handleMouseDown: () => void;
+    handleMouseUp: (e: MouseEvent) => void;
+};
+export {};

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

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+export var useTimeMeasurement = function (_a) {
+    var handleRowClick = _a.handleRowClick;
+    var _b = useState(0), startTime = _b[0], setStartTime = _b[1];
+    var handleMouseDown = function () {
+        // Set the start time when mouse is pressed
+        var start = Date.now();
+        setStartTime(start);
+    };
+    var handleMouseUp = function (e) {
+        if (startTime !== 0) {
+            // Calculate the time difference between mouse down and up
+            var endTime = Date.now();
+            var duration = endTime - startTime;
+            if (duration > 0 && duration < 200) {
+                handleRowClick(e);
+            }
+            setStartTime(0);
+        }
+    };
+    return { handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp };
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
+type ReturnProps = {
+    displayColumnsWidth: {
+        [anyColumn: string]: number;
+    };
+    totalColumnsWidth: number;
+    gridBoxRef: React.MutableRefObject<HTMLElement>;
+    handleResizeDrag: (column: string, width: number) => void;
+};
+declare const useColumnSizes: (displayColumnsDefinitions: CommonGridProps['columnsDefinitions'], storeColumnsWidth: Required<GridSelectorsType>['columnsWidth'], storeColumnsWidthVariant: GridSelectorsType['columnsWidthVariant'], setColumnWidth: Required<GridActionsType>['setColumnWidth'], columnLayout: Required<CommonGridProps>['columnLayout'], minColumnWidth?: number) => ReturnProps;
+export default useColumnSizes;

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import sum from 'lodash/sum';
+var useColumnSizes = function (displayColumnsDefinitions, storeColumnsWidth, storeColumnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth) {
+    /**
+     * decorate grid resize with layout and reset grid widths if layout changes
+     */
+    if (minColumnWidth === void 0) { minColumnWidth = 50; }
+    var handleSetColumnWidth = React.useCallback(function (columnWidth) { return setColumnWidth(columnWidth, columnLayout); }, [columnLayout, setColumnWidth]);
+    React.useEffect(function () {
+        if (storeColumnsWidthVariant != columnLayout)
+            handleSetColumnWidth(null);
+    }, [columnLayout, storeColumnsWidthVariant, handleSetColumnWidth]);
+    /**
+     * base width of each displayed column and of all displayed columns put together
+     */
+    var displayColumnsWidth = React.useMemo(function () {
+        var displayColumnsWidth = {};
+        displayColumnsDefinitions.forEach(function (column) { return (displayColumnsWidth[column.name] = (storeColumnsWidth === null || storeColumnsWidth === void 0 ? void 0 : storeColumnsWidth[column.name]) || column.flexBasis); });
+        return displayColumnsWidth;
+    }, [displayColumnsDefinitions, storeColumnsWidth]);
+    var totalColumnsWidth = React.useMemo(function () {
+        return sum(Object.values(displayColumnsWidth));
+    }, [displayColumnsWidth]);
+    /**
+     * handling of remaining space
+     */
+    // TODO optimize better
+    var gridBoxRef = React.useRef(null);
+    var testAdjustLastColumn = React.useCallback(function () {
+        var _a;
+        var _b;
+        var gridWidth = ((_b = gridBoxRef === null || gridBoxRef === void 0 ? void 0 : gridBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || null;
+        if ((columnLayout == 'normal' || columnLayout == 'sticky') && gridWidth && totalColumnsWidth < gridWidth) {
+            var lastColumn = displayColumnsDefinitions[displayColumnsDefinitions.length - 1];
+            if (lastColumn) {
+                var change = (_a = {}, _a[lastColumn.name] = displayColumnsWidth[lastColumn.name] + gridWidth - totalColumnsWidth, _a);
+                handleSetColumnWidth(change);
+            }
+        }
+    }, [columnLayout, displayColumnsDefinitions, displayColumnsWidth, gridBoxRef, handleSetColumnWidth, totalColumnsWidth]);
+    React.useEffect(function () {
+        testAdjustLastColumn();
+    }, [testAdjustLastColumn]);
+    React.useLayoutEffect(function () {
+        window.addEventListener('resize', testAdjustLastColumn);
+        return function () { return window.removeEventListener('resize', testAdjustLastColumn); };
+    }, [testAdjustLastColumn]);
+    /**
+     * resizing of columns
+     */
+    var handleResizeDrag = React.useCallback(function (columnName, width) {
+        var _a, _b;
+        var _c;
+        var i = displayColumnsDefinitions.findIndex(function (_a) {
+            var name = _a.name;
+            return name == columnName;
+        });
+        var nextColumn = displayColumnsDefinitions[i + 1];
+        if (columnLayout == 'normal' || columnLayout == 'sticky') {
+            var gridWidth = ((_c = gridBoxRef === null || gridBoxRef === void 0 ? void 0 : gridBoxRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) || null;
+            var lastColumnWidth = displayColumnsWidth[displayColumnsDefinitions[displayColumnsDefinitions.length - 1].name];
+            var lastColumnMinWidth = (gridWidth && gridWidth - (totalColumnsWidth - lastColumnWidth)) || 0;
+            var minWidth = !nextColumn ? Math.max(lastColumnMinWidth, minColumnWidth) : minColumnWidth;
+            var origin_1 = displayColumnsWidth[columnName];
+            var newWidth = origin_1 + width < minWidth ? minWidth : origin_1 + width;
+            handleSetColumnWidth((_a = {}, _a[columnName] = newWidth, _a));
+        }
+        else if (columnLayout == 'no-scroll') {
+            var nextColumnWidth = displayColumnsWidth[nextColumn.name];
+            var origin_2 = displayColumnsWidth[columnName];
+            var addedColumnWidth = origin_2 + width < minColumnWidth ? minColumnWidth - origin_2 : width;
+            var addedNextColumnWidth = nextColumnWidth - addedColumnWidth < minColumnWidth ? nextColumnWidth - minColumnWidth : addedColumnWidth;
+            var addedWidth = Math.min(addedColumnWidth, addedNextColumnWidth);
+            var columnsWidth = (_b = {}, _b[columnName] = origin_2 + addedWidth, _b);
+            if (nextColumn) {
+                columnsWidth[nextColumn.name] = nextColumnWidth - addedWidth;
+            }
+            handleSetColumnWidth(columnsWidth);
+        }
+    }, [displayColumnsDefinitions, columnLayout, displayColumnsWidth, totalColumnsWidth, minColumnWidth, handleSetColumnWidth]);
+    return { totalColumnsWidth: totalColumnsWidth, gridBoxRef: gridBoxRef, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag };
+};
+export default useColumnSizes;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CommonGridProps, GridActionsType, ExtraControlButton } from '../types';
+type ReturnProps = {
+    topLeftButtons: ExtraControlButton[];
+    topRightButtons: ExtraControlButton[];
+    bottomLeftButtons: ExtraControlButton[];
+    bottomRightButtons: ExtraControlButton[];
+};
+declare const useControlButtons: (hideColumnConfig: CommonGridProps['hideColumnConfig'], openConfigForm: Required<GridActionsType>['openConfigForm'], resetGrid: Required<GridActionsType>['resetGrid'], columnsDefinitions: CommonGridProps['columnsDefinitions'], resetFilters: Required<GridActionsType>['resetFilters'], setRowsPerPage: Required<GridActionsType>['setRowsPerPage'], rowsSeenTxt: string, extraControlButtons: CommonGridProps['extraControlButtons'], Translator: React.ComponentType<any>, confirmOnReset: (() => boolean) | undefined, perPageOptions: number[]) => ReturnProps;
+export default useControlButtons;

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

@@ -0,0 +1,64 @@
+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 } from "react/jsx-runtime";
+import React from 'react';
+import { ExtraControlButtonPosition } from '../types';
+var getButtonsByPosition = function (location, extraControlButtons) {
+    return (extraControlButtons || []).filter(function (_a) {
+        var position = _a.position;
+        return position == location || (!position && location == 'top-left');
+    });
+};
+var useControlButtons = function (hideColumnConfig, openConfigForm, resetGrid, columnsDefinitions, resetFilters, setRowsPerPage, rowsSeenTxt, extraControlButtons, Translator, confirmOnReset, perPageOptions) {
+    var resetGridWithConfirm = React.useCallback(function () { return confirmOnReset ? confirmOnReset() && resetGrid() : resetGrid(); }, [confirmOnReset, resetGrid]);
+    var topLeftButtons = React.useMemo(function () {
+        return __spreadArray([
+            {
+                label: rowsSeenTxt,
+                options: perPageOptions.map(function (value) { return ({ label: String(value), onClick: function () { return setRowsPerPage(value); } }); }),
+                hideChevron: true,
+            },
+            {
+                label: _jsx(Translator, { id: "dataGrid.buttonClearSettings", defaults: "Reset filters" }),
+                onClick: resetFilters,
+                hide: !columnsDefinitions.find(function (col) { return col.filtering; }), // does grid have any filters
+            },
+            {
+                label: _jsx(Translator, { id: "dataGrid.buttonClearConfig", defaults: "Reset config" }),
+                onClick: resetGridWithConfirm,
+            },
+            {
+                label: _jsx(Translator, { id: "dataGrid.buttonGridConfig", defaults: "Configure columns" }),
+                onClick: openConfigForm,
+                hide: hideColumnConfig,
+            }
+        ], getButtonsByPosition(ExtraControlButtonPosition.TopLeft, extraControlButtons), true);
+    }, [
+        hideColumnConfig,
+        columnsDefinitions,
+        extraControlButtons,
+        openConfigForm,
+        resetFilters,
+        resetGrid,
+        rowsSeenTxt,
+        setRowsPerPage,
+    ]);
+    var topRightButtons = React.useMemo(function () {
+        return getButtonsByPosition(ExtraControlButtonPosition.TopRight, extraControlButtons);
+    }, [extraControlButtons]);
+    var bottomLeftButtons = React.useMemo(function () {
+        return getButtonsByPosition(ExtraControlButtonPosition.BottomLeft, extraControlButtons);
+    }, [extraControlButtons]);
+    var bottomRightButtons = React.useMemo(function () {
+        return getButtonsByPosition(ExtraControlButtonPosition.BottomRight, extraControlButtons);
+    }, [extraControlButtons]);
+    return { topLeftButtons: topLeftButtons, topRightButtons: topRightButtons, bottomLeftButtons: bottomLeftButtons, bottomRightButtons: bottomRightButtons };
+};
+export default useControlButtons;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RowProps, UxState } from '../types';
+declare const useRowsKeyControls: (rowsData: RowProps[], uxState: UxState, onUxChange?: ((uxKey: keyof UxState, uxValue: any) => void) | undefined) => (e: React.KeyboardEvent<HTMLDivElement>) => void;
+export default useRowsKeyControls;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+var useRowsKeyControls = function (rowsData, uxState, onUxChange) {
+    return React.useCallback(function (e) {
+        var _a, _b;
+        var selectedRowId = uxState.selectedRow;
+        if (!selectedRowId)
+            return;
+        var selectedRowIdx = rowsData.findIndex(function (row) { return row.id === selectedRowId; });
+        var previousRowId = (_a = rowsData[selectedRowIdx - 1]) === null || _a === void 0 ? void 0 : _a.id;
+        var nextRowId = (_b = rowsData[selectedRowIdx + 1]) === null || _b === void 0 ? void 0 : _b.id;
+        var isFirst = selectedRowIdx === 0;
+        var isLast = selectedRowIdx === rowsData.length - 1;
+        if (e.key === 'ArrowUp' && !isFirst)
+            onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', previousRowId);
+        if (e.key === 'ArrowDown' && !isLast)
+            onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', nextRowId);
+        if (e.key === 'Escape')
+            onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', null);
+    }, [uxState, rowsData, onUxChange]);
+};
+export default useRowsKeyControls;

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

@@ -0,0 +1,3 @@
+import { RowProps, GridActionsType, UxState } from '../types';
+declare const useUxReset: (rowsData: RowProps[], uxState: UxState, clearUxState: GridActionsType['clearUxState']) => any;
+export default useUxReset;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+var useUxReset = function (rowsData, uxState, clearUxState) {
+    var _a = React.useState('|'), previous = _a[0], setPrevious = _a[1];
+    React.useEffect(function () {
+        var ids = (rowsData || []).map(function (row) { return row.id; }).join('|');
+        // clear uxState if listed rows change and uxState is not clear already
+        if (ids !== previous) {
+            if (clearUxState && ((uxState.checkedRows && Object.keys(uxState.checkedRows).length) || uxState.selectedRow)) {
+                clearUxState();
+            }
+        }
+        setPrevious(ids);
+    }, [rowsData]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+export default useUxReset;

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

@@ -0,0 +1,7 @@
+import CommonGrid from './CommonGrid';
+import withReduxActions from './HoC/withReduxActions';
+import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import * as Types from './types';
+import * as utils from './utils/public';
+export default CommonGrid;
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils };

package/ui/Blocks/CommonGrid/index.js

@@ -0,0 +1,7 @@
+import CommonGrid from './CommonGrid';
+import withReduxActions from './HoC/withReduxActions';
+import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import * as Types from './types';
+import * as utils from './utils/public';
+export default CommonGrid;
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils };

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

@@ -0,0 +1,58 @@
+import { FilterProps, SortingValueType, InitProps, GridState, GridSelectorsType, ColumnConfig } from '../types';
+type DefaultRootState = {};
+export type MultiState = {
+    [key: string]: GridState;
+};
+export declare const initialState: GridState;
+export declare const actionPrefix = "@store/CommonGrid";
+export declare const actionTypes: {
+    init: string;
+    clearUxState: string;
+    handleUxChange: string;
+    openConfigForm: string;
+    closeConfigForm: string;
+    setColumnConfig: string;
+    setPage: string;
+    setRowsPerPage: string;
+    resetFilters: string;
+    addFilter: string;
+    addSorting: string;
+    clearSettings: string;
+    resetGrid: string;
+    setColumnWidth: string;
+    setColumnsOrder: string;
+};
+declare const _default: (state: MultiState | undefined, action: Action) => MultiState;
+export default _default;
+export declare const createActions: (gridName: string) => {
+    init: (initProps: InitProps) => Action;
+    clearUxState: () => Action;
+    handleUxChange: (uxKey: keyof GridState['uxState'], uxValue: any) => Action;
+    openConfigForm: () => Action;
+    closeConfigForm: () => Action;
+    setColumnConfig: (columnConfig: ColumnConfig) => Action;
+    setPage: (page: number) => Action;
+    setColumnWidth: (columnsWidth: {
+        [anyKey: string]: number;
+    } | null, columnLayout: 'normal' | 'no-scroll' | 'sticky') => Action;
+    resetGrid: () => Action;
+    setColumnsOrder: (columnsOrder: string[]) => Action;
+    setRowsPerPage: (rowsPerPage: number) => Action;
+    resetFilters: () => Action;
+    addFilter: (column: string, value: any, filterProps: FilterProps) => Action;
+    addSorting: (column: string, direction: SortingValueType) => Action;
+    clearSettings: () => Action;
+};
+export declare const createSelectors: (gridName: string) => {
+    getUxState: (state: DefaultRootState) => GridState['uxState'];
+    isConfigFormOpen: (state: DefaultRootState) => GridState['isConfigFormOpen'];
+    getColumnConfig: (state: DefaultRootState) => GridState['columnConfig'];
+    getPage: (state: DefaultRootState) => GridState['page'];
+    getRowsPerPage: (state: DefaultRootState) => GridState['rowsPerPage'];
+    getFilter: (state: DefaultRootState) => GridState['filter'];
+    getSorting: (state: DefaultRootState) => GridState['sorting'];
+    getColumnsWidth: (state: DefaultRootState) => GridState['columnsWidth'];
+    getColumnsWidthVariant: (state: DefaultRootState) => GridState['columnsWidthVariant'];
+    getColumnsOrder: (state: DefaultRootState) => GridState['columnsOrder'];
+};
+export declare const createFullSelector: (gridName: string) => (state: DefaultRootState) => GridSelectorsType;