@mailstep/design-system 0.4.21 → 0.5.0

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

@@ -0,0 +1,110 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { x } from '@xstyled/styled-components';
+import { Link } from 'react-router-dom';
+import { Cell, StyledDataRow } from './Table';
+import MemoDataCell from './DataCell';
+import EditIcon from './icons/Edit';
+import EyeOpenIcon from './icons/EyeOpen';
+import { getActionCellSizeProps } from '../utils';
+import { rowClassSymbol } from '../types';
+import { isFunction } from 'lodash/fp';
+import Context from '../CommonGridContext';
+import { useTimeMeasurement } from './utils';
+var EmptySpan = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return _jsx("span", __assign({}, props, { children: children }));
+};
+var DataRow = function (_a) {
+    var _b, _c, _d;
+    var columns = _a.columns, actionColumn = _a.actionColumn, rowData = _a.rowData, rowIndex = _a.rowIndex, uxState = _a.uxState, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onUxChange = _a.onUxChange, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, onRowAction = _a.onRowAction, displayColumnsWidth = _a.displayColumnsWidth, groups = _a.groups, isEven = _a.isEven;
+    var _e = React.useContext(Context), Checkbox = _e.Checkbox, Button = _e.Button;
+    var isChecked = !!((_b = uxState.checkedRows) === null || _b === void 0 ? void 0 : _b[rowData.id]);
+    var onCheckboxChange = React.useCallback(function () {
+        var checkedRows = __assign({}, (uxState.checkedRows || {}));
+        if (!isChecked) {
+            checkedRows[rowData.id] = true;
+        }
+        else {
+            delete checkedRows[rowData.id];
+        }
+        onUxChange && onUxChange('checkedRows', checkedRows);
+    }, [onUxChange, isChecked, uxState, rowData]);
+    var handleEditClick = React.useCallback(function () {
+        if (onRowEditClick)
+            onRowEditClick(rowData.id, rowData);
+        if (onUxChange && allowRowSelectOnAction)
+            onUxChange('selectedRow', rowData.id);
+    }, [onRowEditClick, rowData]);
+    var handleReadClick = React.useCallback(function () {
+        if (onRowReadClick)
+            onRowReadClick(rowData.id, rowData);
+        if (onUxChange && allowRowSelectOnAction)
+            onUxChange('selectedRow', rowData.id);
+    }, [onRowReadClick, rowData]);
+    var handleRowAction = React.useCallback(function (id, field, value) {
+        if (onRowAction)
+            onRowAction(id, field, value);
+        if (onUxChange && allowRowSelectOnAction)
+            onUxChange('selectedRow', id);
+    }, [onRowReadClick, rowData]);
+    var handleRowClick = React.useCallback(function (e) {
+        // test whether I should trigger event or not (because of possible button/link/input/etc in cell)
+        var classes = Object.values(e.target.classList);
+        if (!classes.includes('dataRow') && !classes.includes('cell'))
+            return;
+        if (onUxChange && allowRowSelect)
+            onUxChange('selectedRow', rowData.id);
+        if (onRowClick)
+            onRowClick(rowData.id, rowData);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onRowClick, onUxChange, rowData]);
+    var _f = useTimeMeasurement({ handleRowClick: handleRowClick }), handleMouseDown = _f.handleMouseDown, handleMouseUp = _f.handleMouseUp;
+    var RowActionComponent = ((actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) ? Link : EmptySpan);
+    var rowActionProps = React.useCallback(function (mode) {
+        var _a;
+        return (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink)
+            ? { to: (_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumn, { mode: mode, id: rowData.id }) }
+            : { onClick: { read: handleReadClick, edit: handleEditClick }[mode] };
+    }, [actionColumn, handleReadClick, handleEditClick]);
+    var rowClassName = React.useMemo(function () {
+        var classes = ['dataRow'];
+        if (isChecked)
+            classes.push('checked');
+        if (uxState.selectedRow == rowData.id && (allowRowSelect || allowRowSelectOnAction))
+            classes.push('selected');
+        if (rowData[rowClassSymbol])
+            classes.push(rowData[rowClassSymbol] || '');
+        return classes.join(' ');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isChecked, uxState, rowData]);
+    var actionColumnStyle = React.useMemo(function () {
+        return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
+    }, [actionColumn]);
+    var displayReadEditCell = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
+    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", appearance: "primary", margin: "5px", className: "actionColumnButton", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", appearance: "primary", margin: "5px", className: "actionColumnButton", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
+};
+export default DataRow;

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

@@ -0,0 +1,3 @@
+import { PaginatorProps } from '../types';
+declare const DefaultPaginator: (props: PaginatorProps) => import("react/jsx-runtime").JSX.Element;
+export default DefaultPaginator;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+var DefaultPaginator = function (props) {
+    var onPageChange = props.onPageChange, itemCount = props.itemCount, itemPerPage = props.itemPerPage, page = props.page;
+    var pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
+    var goFirst = React.useCallback(function () { return onPageChange(1); }, []);
+    var goPrev = React.useCallback(function () { return onPageChange(page - 1); }, [page]);
+    var goNext = React.useCallback(function () { return onPageChange(page + 1); }, [page]);
+    return (_jsxs("div", { children: [_jsx("button", { onClick: goFirst, disabled: page == 1, children: "go fist" }), _jsx("button", { onClick: goPrev, disabled: page <= 1, children: "go prev" }), _jsx("span", { children: "  Page: ".concat(page, " / ").concat(pageCount, "  ") }), _jsx("button", { onClick: goNext, disabled: page >= pageCount, children: "go next" })] }));
+};
+export default DefaultPaginator;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export type DialogProps = {
+    header?: JSX.Element | string;
+    onSubmit: (close: () => void) => void;
+    isSubmitting?: boolean;
+    isConfirmDisabled?: boolean;
+    onCancel: () => void;
+    children: React.ReactNode;
+};
+declare const Dialog: ({ header: Header, onCancel, onSubmit, isSubmitting, isConfirmDisabled, children }: DialogProps) => JSX.Element;
+export default Dialog;

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

@@ -0,0 +1,19 @@
+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 Context from '../CommonGridContext';
+var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed; /* Stay in place */\n  z-index: 1; /* Sit on top */\n  padding-top: 100px; /* Location of the box */\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: rgb(0, 0, 0); /* Fallback color */\n  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */\n  text-align: center;\n"], ["\n  position: fixed; /* Stay in place */\n  z-index: 1; /* Sit on top */\n  padding-top: 100px; /* Location of the box */\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: rgb(0, 0, 0); /* Fallback color */\n  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */\n  text-align: center;\n"])));
+var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: #fefefe;\n  margin: auto;\n  padding: 1em 2em;\n  border: 0;\n  border-radius: 0.5em;\n  min-width: 40%;\n  max-width: 80%;\n  display: inline-block;\n  text-align: left;\n"], ["\n  background-color: #fefefe;\n  margin: auto;\n  padding: 1em 2em;\n  border: 0;\n  border-radius: 0.5em;\n  min-width: 40%;\n  max-width: 80%;\n  display: inline-block;\n  text-align: left;\n"])));
+var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-bottom: 1em;\n  padding-bottom: 1em;\n  border-bottom: 1px solid lightgray;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n"], ["\n  margin-bottom: 1em;\n  padding-bottom: 1em;\n  border-bottom: 1px solid lightgray;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n"])));
+var ButtonsContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: 1em;\n  padding-top: 1em;\n  border-top: 1px solid lightgray;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n"], ["\n  margin-top: 1em;\n  padding-top: 1em;\n  border-top: 1px solid lightgray;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n"])));
+var Dialog = function (_a) {
+    var Header = _a.header, onCancel = _a.onCancel, onSubmit = _a.onSubmit, isSubmitting = _a.isSubmitting, isConfirmDisabled = _a.isConfirmDisabled, children = _a.children;
+    var _b = React.useContext(Context), Translator = _b.Translator, Button = _b.Button;
+    return (_jsx(DialogOverlay, { className: "dialog", children: _jsxs(DialogWindow, { children: [Header && _jsx(HeaderContainer, { children: Header }), children, _jsxs(ButtonsContainer, { children: [_jsx(Button, { onClick: onCancel, isLoading: isSubmitting, disabled: isConfirmDisabled, children: _jsx(Translator, { id: "form.buttonCancel", defaults: "Cancel" }) }), _jsx(Button, { onClick: onSubmit, children: _jsx(Translator, { id: "form.buttonSubmit", defaults: "Submit" }) })] })] }) }));
+};
+export default Dialog;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+type Pathname = {
+    pathname: string;
+};
+export type Item = {
+    icon?: React.ReactNode;
+    title?: string | JSX.Element;
+    link?: string | Pathname;
+    onClick?: Function;
+    hasSeparator?: boolean;
+};
+export type MenuItems = {
+    items?: Item[];
+};
+export type DropdownMenuProps = MenuItems & {
+    showMenu?: boolean;
+    className?: string;
+    childRef?: React.Ref<any>;
+};
+declare const DropdownMenu: ({ items, showMenu, className, childRef, ...rest }: DropdownMenuProps) => JSX.Element;
+export default DropdownMenu;

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

@@ -0,0 +1,59 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled, { css } from '@xstyled/styled-components';
+var StyledLink = styled(Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  color: formTextColor;\n"], ["\n  display: block;\n  color: formTextColor;\n"])));
+var StyledClickableDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: formTextColor;\n"], ["\n  display: block;\n  color: formTextColor;\n"])));
+var StyledListItem = styled.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px;\n  font-size: 1;\n\n  :hover {\n    background-color: primary;\n    color: white;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 10px;\n  font-size: 1;\n\n  :hover {\n    background-color: primary;\n    color: white;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
+    return props.hasSeparator && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: grayLight3;\n    "], ["\n      border-top: slim;\n      border-color: grayLight3;\n    "])));
+});
+var IconWrap = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));
+var MenuItem = function (_a) {
+    var icon = _a.icon, title = _a.title, link = _a.link, onClick = _a.onClick, rest = __rest(_a, ["icon", "title", "link", "onClick"]);
+    var onClickCallback = React.useCallback(function () {
+        if (onClick)
+            onClick();
+    }, [onClick]);
+    var styledListItem = (_jsxs(StyledListItem, __assign({}, rest, { children: [icon && _jsx(IconWrap, { children: icon }), title] })));
+    return link ? (_jsx(StyledLink, { color: "dropdownMenuItem", to: link, onClick: onClickCallback, children: styledListItem })) : (_jsx(StyledClickableDiv, { color: "dropdownMenuItem", onClick: onClickCallback, children: styledListItem }));
+};
+var MenuList = function (_a) {
+    var items = _a.items;
+    return (_jsx("ul", { children: items &&
+            items.map(function (item, i) {
+                return _jsx(MenuItem, __assign({}, item), i);
+            }) }));
+};
+var StyledDropdownWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: grayLight3;\n  border-radius: 5px;\n  box-shadow: dropdownMenuShadow;\n  color: primary;\n  z-index: 5;\n"], ["\n  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: grayLight3;\n  border-radius: 5px;\n  box-shadow: dropdownMenuShadow;\n  color: primary;\n  z-index: 5;\n"])));
+var DropdownMenu = function (_a) {
+    var items = _a.items, showMenu = _a.showMenu, className = _a.className, childRef = _a.childRef, rest = __rest(_a, ["items", "showMenu", "className", "childRef"]);
+    return (_jsx(_Fragment, { children: showMenu && (_jsx(StyledDropdownWrap, __assign({ ref: childRef, className: className }, rest, { children: _jsx(MenuList, { items: items }) }))) }));
+};
+export default DropdownMenu;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+type DropdownSelectProps = {
+    label: string | JSX.Element;
+    appearance: 'primary' | 'secondary';
+    options: {
+        label: string | JSX.Element;
+        value?: string | number;
+        onClick?: () => void;
+    }[];
+    showChevron?: boolean;
+    onSelect?: (value: string | number) => void;
+    disabled?: boolean;
+};
+declare const DropdownSelect: ({ label, appearance, options, showChevron, onSelect, disabled }: DropdownSelectProps) => JSX.Element;
+export default DropdownSelect;

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

@@ -0,0 +1,35 @@
+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 DropdownMenu from './DropdownMenu';
+import ArrowSimple from './icons/ArrowSimple';
+import Context from '../CommonGridContext';
+import { useClickOutside } from '../../Modal/hooks/useClickOutside';
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
+var ChevronIcon = styled(ArrowSimple)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transform: rotate(90deg);\n  margin-left: 1;\n"], ["\n  transform: rotate(90deg);\n  margin-left: 1;\n"])));
+var DropdownSelect = function (_a) {
+    var label = _a.label, appearance = _a.appearance, options = _a.options, showChevron = _a.showChevron, onSelect = _a.onSelect, disabled = _a.disabled;
+    var Button = React.useContext(Context).Button;
+    var _b = React.useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
+    var dropdownMenuRef = useClickOutside({ onClose: function () { return setShowDropdownMenu(false); } });
+    var toggleDropdownMenu = React.useCallback(function () {
+        setShowDropdownMenu(!showDropdownMenu);
+    }, [showDropdownMenu]);
+    var handleSelectItem = React.useCallback(function (item) {
+        var _a;
+        setShowDropdownMenu(false);
+        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect((item === null || item === void 0 ? void 0 : item.value) || '');
+    }, [onSelect]);
+    var items = options.map(function (item) { return ({
+        title: item.label,
+        onClick: function () { return handleSelectItem(item); },
+    }); });
+    return (_jsxs("div", { ref: dropdownMenuRef, children: [_jsxs(Button, { type: "button", disabled: disabled, appearance: appearance, onClick: toggleDropdownMenu, children: [label, showChevron && _jsx(ChevronIcon, {})] }), showDropdownMenu && _jsx(StyledDropdownMenu, { className: "dropdownMenu", items: items, showMenu: true })] }));
+};
+export default DropdownSelect;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+declare const OverlayComponent: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+export default OverlayComponent;

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

@@ -0,0 +1,36 @@
+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 React from 'react';
+import styled from '@xstyled/styled-components';
+var OverlayWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"], ["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"])));
+var OverlayComponent = function (_a) {
+    var children = _a.children;
+    var overlayRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        var Overlay = overlayRef.current;
+        if (!Overlay)
+            return;
+        var FilterCell = Overlay === null || Overlay === void 0 ? void 0 : Overlay.closest('.cell');
+        var GridWrapper = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.closest('.gridWrapper');
+        // position of left edge of filter cell
+        var relativeLeftOffset = (FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetLeft) - ((_a = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.parentElement) === null || _a === void 0 ? void 0 : _a.offsetLeft); // parent element = row
+        // space available to the right edge of visible part of grid
+        var spaceTotal = (GridWrapper === null || GridWrapper === void 0 ? void 0 : GridWrapper.clientWidth) + (GridWrapper === null || GridWrapper === void 0 ? void 0 : GridWrapper.scrollLeft) - relativeLeftOffset;
+        // difference between availible space and width
+        var spaceLeft = spaceTotal - (Overlay === null || Overlay === void 0 ? void 0 : Overlay.clientWidth);
+        // left position
+        var left = spaceLeft > 0 ? FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetLeft : (FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetLeft) + spaceLeft;
+        // top calculation
+        var topOffset = (FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetTop) + (FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.clientHeight);
+        Overlay.style.left = "".concat(left, "px");
+        Overlay.style.top = "".concat(topOffset, "px");
+        Overlay.style.visibility = "initial";
+    });
+    return (_jsx(OverlayWrapper, { ref: overlayRef, className: "filterOverlay", children: children }));
+};
+export default OverlayComponent;
+var templateObject_1;

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

@@ -0,0 +1,15 @@
+import { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, FiltersConfig, UxState, RowProps } from '../types';
+type Props = {
+    columns: ColumnDefinitionType[];
+    actionColumn?: ActionColumn;
+    onChange: Required<GridActionsType>['addFilter'];
+    filterValues?: Settings['filter'];
+    displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
+    filters?: FiltersConfig;
+    groups?: Group[];
+    handleUxChange?: GridActionsType['handleUxChange'];
+    rowsData: RowProps[];
+    uxState: UxState;
+};
+declare const FilterRow: ({ columns, groups, actionColumn, onChange, filterValues, displayColumnsWidth, filters, handleUxChange, rowsData, uxState, }: Props) => JSX.Element;
+export default FilterRow;

package/ui/Blocks/CommonGrid/components/FilterRow.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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import get from 'lodash/fp/get';
+import throttle from 'lodash/throttle';
+import ColumnFilterCell from './ColumnFilterCell';
+import { Row, Cell } from './Table';
+import { getActionCellSizeProps, getFilterName } from '../utils';
+import Context from '../CommonGridContext';
+import { useToggleAllCheckbox } from '../utils/public';
+var FilterRow = function (_a) {
+    var _b, _c;
+    var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _d = _a.filterValues, filterValues = _d === void 0 ? {} : _d, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
+    var handleOnChange = throttle(onChange, 500);
+    var actionColumnStyle = React.useMemo(function () {
+        return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
+    }, [actionColumn]);
+    var _e = useToggleAllCheckbox(rowsData, uxState, handleUxChange), allChecked = _e[0], toggleCheckbox = _e[1];
+    var Checkbox = React.useContext(Context).Checkbox;
+    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 === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes));
+    var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
+    var rowsNumberLabel = (_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _c !== void 0 ? _c : '#';
+    return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && (_jsx(Cell, { className: "cell", style: actionColumnStyle }, 'actions')), columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
+};
+export default FilterRow;

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+type FloatingButtonProps = {
+    children?: ReactNode;
+};
+declare const FloatingButton: ({ children }: FloatingButtonProps) => JSX.Element;
+export default FloatingButton;

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

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { x } from '@xstyled/styled-components';
+var FloatingWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])));
+var FloatingButton = function (_a) {
+    var children = _a.children;
+    return _jsx(FloatingWrapper, { children: children });
+};
+export default FloatingButton;
+var templateObject_1;

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

@@ -0,0 +1,9 @@
+import { ActionColumn, Group, ColumnDefinition, GridSelectorsType } from '../types';
+type GroupRowProps = {
+    groups: Group[];
+    actionColumn?: ActionColumn;
+    columns: ColumnDefinition[];
+    displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
+};
+declare const GroupRow: ({ actionColumn, columns, groups, displayColumnsWidth }: GroupRowProps) => JSX.Element;
+export default GroupRow;

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

@@ -0,0 +1,27 @@
+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 { Row, Cell } from './Table';
+import { getCellSizeProps, getActionCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
+var GroupCell = function (_a) {
+    var column = _a.column, group = _a.group, displayColumnWidth = _a.displayColumnWidth;
+    var cellSizeProps = getCellSizeProps(column, displayColumnWidth);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo), " ").concat(getGroupClassNames(group));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: group.start && _jsx(_Fragment, { children: group.name }) })));
+};
+var GroupRow = function (_a) {
+    var actionColumn = _a.actionColumn, columns = _a.columns, groups = _a.groups, displayColumnsWidth = _a.displayColumnsWidth;
+    var actionColumnStyle = React.useMemo(function () { return (actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {}); }, [actionColumn]);
+    return (_jsxs(Row, { className: "group-row", children: [actionColumn && _jsx(Cell, { className: "cell", style: actionColumnStyle }, "actions"), groups.map(function (group, key) { return (_jsx(GroupCell, { column: columns[key], group: group, displayColumnWidth: displayColumnsWidth[columns[key].name] }, key)); })] }));
+};
+export default GroupRow;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { DraggableProps, DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+import { SortingValueType, Group, GridActionsType, StickTo } from '../types';
+type Props = {
+    title?: string | JSX.Element;
+    name?: string;
+    isSortable: boolean;
+    systemName?: string;
+    isDragging?: boolean;
+    draggableProps?: DraggableProps | any;
+    dragHandleProps?: DraggableProvidedDragHandleProps | null;
+    innerRef?: Function;
+    hasResize?: boolean;
+    flexBasis?: number;
+    flexGrow?: number;
+    flexShrink?: number;
+    onResizeOver?: () => void;
+    onResizeOut?: () => void;
+    onAddSort?: GridActionsType['addSorting'];
+    sortValue: SortingValueType;
+    handleResizeDrag?: (column: string, width: number) => void;
+    group?: Group;
+    sticky?: boolean;
+    stickTo?: StickTo;
+};
+declare const _default: React.MemoExoticComponent<({ title, name, isSortable, systemName, onAddSort, sortValue, hasResize, onResizeOver, onResizeOut, innerRef, isDragging, draggableProps, dragHandleProps, flexBasis, flexGrow, flexShrink, handleResizeDrag, group, sticky, stickTo, }: Props) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,43 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled from '@xstyled/styled-components';
+import { Cell } from './Table';
+import ColumnTitle from './ColumnTitle';
+import Resize from './Resize';
+import { getGroupClassNames, getStickyCollClassNames } from '../utils';
+import Context from '../CommonGridContext';
+var DraggableCell = styled(Cell)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var $isDragging = _a.$isDragging;
+    return ($isDragging ? 'transparentRed' : 'transparent');
+});
+var HeadCell = function (_a) {
+    var title = _a.title, _b = _a.name, name = _b === void 0 ? '' : _b, isSortable = _a.isSortable, systemName = _a.systemName, onAddSort = _a.onAddSort, sortValue = _a.sortValue, hasResize = _a.hasResize, onResizeOver = _a.onResizeOver, onResizeOut = _a.onResizeOut, innerRef = _a.innerRef, isDragging = _a.isDragging, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps, flexBasis = _a.flexBasis, flexGrow = _a.flexGrow, _c = _a.flexShrink, flexShrink = _c === void 0 ? 1 : _c, handleResizeDrag = _a.handleResizeDrag, group = _a.group, sticky = _a.sticky, stickTo = _a.stickTo;
+    var CustomColumnTitle = React.useContext(Context).ColumnTitle;
+    var onResize = React.useCallback(function (width) {
+        handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
+    }, [handleResizeDrag, name]);
+    var style = React.useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
+    var ColumnTitleComponent = CustomColumnTitle || ColumnTitle;
+    var onSetSort = React.useCallback(function (value) {
+        onAddSort && onAddSort(systemName || name, value);
+    }, [onAddSort, systemName, name]);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!sticky, stickTo), " ").concat(getGroupClassNames(group));
+    return (_jsxs(DraggableCell, __assign({}, draggableProps, dragHandleProps, { style: style, flexBasis: flexBasis, flexGrow: flexGrow, flexShrink: flexShrink, innerRef: innerRef, "$isDragging": isDragging, className: cellClassName, children: [_jsx(ColumnTitleComponent, { title: title, isSortable: isSortable, onSetSort: onSetSort, sortValue: sortValue }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize, onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
+};
+export default React.memo(HeadCell);
+var templateObject_1;

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

@@ -0,0 +1,15 @@
+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;
+    groups: Group[];
+};
+declare const HeadRow: ({ columns, actionColumn, onAddSort, setColumnsOrder, columnsOrder, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups, }: HeadRowProps) => JSX.Element;
+export default HeadRow;

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

@@ -0,0 +1,69 @@
+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 __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';
+import { Row, Cell } from './Table';
+import HeadCell from './HeadCell';
+import { getActionCellSizeProps, getCellSizeProps, getSortName } from '../utils';
+var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
+    var _a;
+    return (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) { return item.sticky && item.stickTo === stickyTo; })) === null || _a === void 0 ? void 0 : _a.map(function (column) { return (_jsx(HeadCell, __assign({ name: column.name, systemName: column.systemName, isSortable: false, hasResize: false, isDragging: false, sortValue: null }, getCellSizeProps(column, displayColumnsWidth[column.name]), { title: column.title, sticky: column.sticky, stickTo: column.stickTo }), column.name)); });
+};
+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 _d = useState(false), showUIElements = _d[0], setShowUIElements = _d[1];
+    useEffect(function () {
+        setShowUIElements(true);
+    }, []);
+    var handleDragEnd = React.useCallback(function (item) {
+        var _a, _b;
+        var to = (_a = item.destination) === null || _a === void 0 ? void 0 : _a.index;
+        var from = (_b = item.source) === null || _b === void 0 ? void 0 : _b.index;
+        if (to === from || !item.destination) {
+            return;
+        }
+        var newOrderColumns = __spreadArray([], (columnsOrder || []), true);
+        var fromIndex = newOrderColumns.findIndex(function (column) { return columns[from].name === column; });
+        var toIndex = newOrderColumns.findIndex(function (column) { return to && columns[to].name === column; });
+        // move column from a position to the new position
+        var column = newOrderColumns[fromIndex];
+        newOrderColumns.splice(fromIndex, 1);
+        newOrderColumns.splice(toIndex, 0, column);
+        setColumnsOrder(newOrderColumns);
+    }, [setColumnsOrder, columnsOrder, columns]);
+    var _e = useState(false), isDragDisabled = _e[0], setIsDragDisabled = _e[1];
+    var onResizeOver = React.useCallback(function () {
+        setIsDragDisabled(true);
+    }, [setIsDragDisabled]);
+    var onResizeOut = React.useCallback(function () {
+        setIsDragDisabled(false);
+    }, [setIsDragDisabled]);
+    var displayReadEditCell = ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
+    return (_jsx(_Fragment, { children: showUIElements && (_jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, children: function (droppableProvided) { return (_jsxs(Row, __assign({ className: "headRow", accountForScrollbar: false, innerRef: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) }))] })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
+                            .filter(function (item) { return !item.sticky; })
+                            .map(function (column, key) { return (_jsx(Draggable, { draggableId: column.name, index: key, isDragDisabled: isDragDisabled || column.sticky, children: function (draggableProvided, snapshot) {
+                                var _a;
+                                return (_jsx(HeadCell, __assign({ name: column.name, systemName: column.systemName, onAddSort: onAddSort, isSortable: !!column.sorting, sortValue: ((_a = sortingValues.find(function (sorting) { return sorting.column == getSortName(column); })) === null || _a === void 0 ? void 0 : _a.direction) || null, innerRef: draggableProvided.innerRef, handleResizeDrag: handleResizeDrag, hasResize: columnLayout == 'normal' || !!columns[key + 1], draggableProps: draggableProvided.draggableProps, dragHandleProps: draggableProvided.dragHandleProps, isDragging: snapshot.isDragging, onResizeOver: onResizeOver, onResizeOut: onResizeOut }, getCellSizeProps(column, displayColumnsWidth[column.name]), { group: groups[key], title: column.title, sticky: column.sticky, stickTo: column.stickTo })));
+                            } }, column.name)); }), getStickyComponent(columns, 'right', displayColumnsWidth), droppableProvided.placeholder] }))); } }) })) }));
+};
+export default HeadRow;