@mailstep/design-system 0.4.21 → 0.5.0-beta.10

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;

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

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

package/ui/Blocks/CommonGrid/components/HidePrint/HidePrint.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 from 'styled-components';
+var HideWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: content;\n  @media print {\n    display: none;\n  }\n"], ["\n  display: content;\n  @media print {\n    display: none;\n  }\n"])));
+var HidePrint = function (_a) {
+    var children = _a.children;
+    return _jsx(HideWrapper, { children: children });
+};
+export default HidePrint;
+var templateObject_1;

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

@@ -0,0 +1,18 @@
+export declare const List: import("styled-components").StyledComponent<"ul", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItem: import("styled-components").StyledComponent<"li", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItemContent: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+    selected?: boolean | undefined;
+}, never>;
+export declare const ListItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+type Item = {
+    value: string;
+    icon: string;
+    label: string;
+};
+type IconListProps = {
+    list: Item[];
+    selected: string;
+    onClick: (item: Item) => void;
+};
+declare const IconList: ({ list, selected, onClick }: IconListProps) => JSX.Element;
+export default IconList;

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

@@ -0,0 +1,29 @@
+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 { th } from '@xstyled/system';
+import Icon from '../../../../Elements/Icon/Icon';
+export var List = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"], ["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"])));
+export var ListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n\n  &:hover > span {\n    background-color: bgLightGray1;\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n\n  &:hover > span {\n    background-color: bgLightGray1;\n  }\n"])), th('colors.bgLightGray1'));
+export var ListItemContent = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: ", ";\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    font-weight: bold;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: ", ";\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    font-weight: bold;\n  }\n"])), function (_a) {
+    var selected = _a.selected;
+    return (selected ? 'bold' : 'normal');
+}, function (_a) {
+    var selected = _a.selected;
+    return (selected ? 'red1' : 'auto');
+}, function (_a) {
+    var selected = _a.selected;
+    return (selected ? 'white' : 'transparent');
+});
+export var ListItemIcon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  border: 1px solid;\n  border-color: blue2;\n  border-radius: 2px;\n  margin-right: 2;\n  width: 12px;\n  height: 12px;\n  line-height: 6px;\n  padding-top: 1px;\n"], ["\n  display: inline-block;\n  border: 1px solid;\n  border-color: blue2;\n  border-radius: 2px;\n  margin-right: 2;\n  width: 12px;\n  height: 12px;\n  line-height: 6px;\n  padding-top: 1px;\n"])));
+var IconList = function (_a) {
+    var list = _a.list, selected = _a.selected, onClick = _a.onClick;
+    var handleClick = React.useCallback(function (item) { return function () { return onClick(item); }; }, [onClick]);
+    return (_jsx(List, { className: "ignore-element-for-closing-hook", children: list.map(function (item) { return (_jsx(ListItem, { onClick: handleClick(item), children: _jsxs(ListItemContent, { selected: selected === item.value, children: [_jsx(ListItemIcon, { children: _jsx(Icon, { icon: item.icon, fill: "red1", size: "8px" }) }), item.label] }) }, item.value)); }) }));
+};
+export default IconList;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,2 @@
+import IconList from './IconList';
+export default IconList;

package/ui/Blocks/CommonGrid/components/IconList/index.js

@@ -0,0 +1,2 @@
+import IconList from './IconList';
+export default IconList;

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { t } from '@lingui/macro';
+import { x } from '@xstyled/styled-components';
+import { ActionRow } from './components/ActionRow';
+import { Input } from '../../../../Forms/Input/Input';
+var ManageColumnForm = function (_a) {
+    var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions;
+    var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
+    var onChangeInputValue = useCallback(function (e) {
+        setSearchedValue(e.target.value);
+    }, [setSearchedValue]);
+    var clear = useCallback(function () {
+        setSearchedValue('');
+    }, [setSearchedValue]);
+    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: t({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
+                    return (_jsx(ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index));
+                }) })] }));
+};
+export default ManageColumnForm;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ColumnConfig, ColumnDefinition } from '../../../types';
+type ActionRowProps = {
+    column: ColumnDefinition;
+    columnsConfigValues: string[] | undefined;
+    setColumnsConfigOptions: (value: React.SetStateAction<{
+        [x: string]: ColumnConfig | {};
+    }>) => void;
+    searchedValue: string;
+};
+export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, searchedValue }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+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 { useCallback, useState } from 'react';
+import { x, th } from '@xstyled/styled-components';
+import { t } from '@lingui/macro';
+import styled from 'styled-components';
+import Toggle from '../../../../../Elements/Toggle/Toggle';
+import { Group } from '../../../../../Elements/Icon/icons/Group';
+import { isObject } from 'lodash';
+import { H6 } from '../../../../../Elements/Typography/Typography';
+var RowLayout = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
+    var $isVisible = _a.$isVisible;
+    return ($isVisible ? 'flex' : 'none');
+}, th.color('lightGray6'));
+export var ActionRow = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue;
+    var _g = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _g[0], setIsSelected = _g[1];
+    var translatedValue = isObject(column === null || column === void 0 ? void 0 : column.title) &&
+        'props' in column.title &&
+        ((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) &&
+        t({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message });
+    var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase());
+    var handleToggleChange = useCallback(function () {
+        setColumnsConfigOptions(function (prevOptions) {
+            var _a;
+            return __assign(__assign({}, prevOptions), (_a = {}, _a[column.name] = !isSelected ? {} : { isHidden: true }, _a));
+        });
+        setIsSelected(!isSelected);
+    }, [setColumnsConfigOptions, isSelected, column.name]);
+    return (_jsxs(RowLayout, { "$isVisible": isVisible, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] }));
+};
+var templateObject_1;

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

@@ -0,0 +1,2 @@
+import ManageColumnForm from './ManageColumnForm';
+export default ManageColumnForm;

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

@@ -0,0 +1,2 @@
+import ManageColumnForm from './ManageColumnForm';
+export default ManageColumnForm;

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

@@ -0,0 +1,3 @@
+import { NumberRangeProps } from './types';
+declare const NumberRange: (props: NumberRangeProps) => JSX.Element;
+export default NumberRange;

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

@@ -0,0 +1,76 @@
+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 } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { t } from '@lingui/macro';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import { Input } from '../../../../Forms/Input/Input';
+import IconList from '../IconList';
+var OverlayComponentDefault = function (_a) {
+    var children = _a.children;
+    return _jsx("div", { children: children });
+};
+var createNumberComparators = function () { return [
+    { label: t({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: t({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: t({ id: 'dataGrid.comparator.lessThan', message: 'Less than' }), value: 'lt', icon: 'lessThen' },
+    {
+        label: t({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
+        value: 'lte',
+        icon: 'lessThanEqual',
+    },
+    { label: t({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
+    {
+        label: t({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
+        value: 'gte',
+        icon: 'greaterThanEqual',
+    },
+]; };
+var createEqualComparators = [
+    { label: t({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: t({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+];
+var NumberRange = function (props) {
+    var numberComparators = createNumberComparators();
+    var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, decimals = props.decimals, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, isEqual = props.isEqual, rest = __rest(props, ["name", "value", "label", "onChange", "decimals", "className", "OverlayComponent", "isEqual"]);
+    var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
+    var comparator = (value === null || value === void 0 ? void 0 : value.comparator) || numberComparators[0].value;
+    var renderedComparator = isEqual ? createEqualComparators : numberComparators;
+    var fieldValue = (value === null || value === void 0 ? void 0 : value.value) || (value === null || value === void 0 ? void 0 : value.value) === 0 ? value.value : '';
+    var onClose = useCallback(function () { return setOpen(false); }, []);
+    var pickerRef = useClickOutside({ onClose: onClose });
+    var togglePicker = useCallback(function () { return setOpen(!isOpen); }, [isOpen, setOpen]);
+    var onChangeTextInput = useCallback(function (event) {
+        var fieldValue = event.target.value.replace(',', '.');
+        var number = !decimals
+            ? parseInt(fieldValue)
+            : (parseFloat(fieldValue) || 0).toFixed(decimals).substr(0, fieldValue.length);
+        var isValid = number || number === 0;
+        onChange({ comparator: comparator, value: isValid ? number : '' });
+    }, [onChange, comparator, decimals, value]);
+    var onChangeComparator = useCallback(function (option) {
+        onChange({ comparator: option.value, value: fieldValue });
+    }, []);
+    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, value: fieldValue, label: label, "data-cy": "".concat(name, "Inp"), onChange: onChangeTextInput, iconOnClick: togglePicker, appearance: "grid", icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: className, autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
+};
+export default NumberRange;

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

@@ -0,0 +1,2 @@
+import NumberRange from './NumberRange';
+export default NumberRange;

package/ui/Blocks/CommonGrid/components/NumberRange/index.js

@@ -0,0 +1,2 @@
+import NumberRange from './NumberRange';
+export default NumberRange;

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

@@ -0,0 +1,17 @@
+import { FilterComponentProps } from '../../types';
+export type ComparatorValue = 'eq' | 'neq' | 'lt' | 'lte' | 'gt' | 'gte';
+export type NumberRangeValue = {
+    comparator?: ComparatorValue;
+    value?: string | number;
+};
+export type Comparator = {
+    label: string;
+    value: string;
+    icon: string;
+};
+export type NumberRangeProps = FilterComponentProps<NumberRangeValue> & {
+    decimals?: number;
+    label?: string;
+    className?: string;
+    isEqual?: boolean;
+};

package/ui/Blocks/CommonGrid/components/NumberRange/types.js

@@ -0,0 +1 @@
+export {};

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,21 @@
+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 (_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/ReadEditButtonCell/ReadEditButtonCell.d.ts

@@ -0,0 +1,6 @@
+import { DataCellProps, ActionColumn } from '../../types';
+type Props = DataCellProps<{
+    id: string;
+}>;
+declare const getReadEditButtonCell: (actionColumn?: ActionColumn) => ({ rowData, onRowAction }: Props) => JSX.Element | null;
+export default getReadEditButtonCell;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { isFunction } from 'lodash/fp';
+import { RowActionsCell } from '../gridCells';
+var getReadEditButtonCell = function (actionColumn) {
+    return function ReadEditButtonCell(_a) {
+        var rowData = _a.rowData, onRowAction = _a.onRowAction;
+        var canEdit = isFunction(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit;
+        var canRead = isFunction(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead;
+        // if canEdit and canRead are both true, canEdit supersedes canRead
+        var handleOnClick = useCallback(function () {
+            var action = canEdit ? 'row_edit' : 'row_read';
+            if (onRowAction)
+                onRowAction(rowData === null || rowData === void 0 ? void 0 : rowData.id, action, rowData);
+        }, [canEdit, onRowAction, rowData]);
+        var linkTo = useMemo(function () {
+            var _a;
+            var mode = canEdit ? 'edit' : 'read';
+            return (_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumn, { mode: mode, id: rowData === null || rowData === void 0 ? void 0 : rowData.id });
+        }, [canEdit, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
+        if (!canEdit && !canRead)
+            return null;
+        return _jsx(RowActionsCell, { canEdit: !!canEdit, onClick: handleOnClick, linkTo: linkTo });
+    };
+};
+export default getReadEditButtonCell;

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

@@ -0,0 +1,2 @@
+import ReadEditButtonCell from './ReadEditButtonCell';
+export default ReadEditButtonCell;

package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/index.js

@@ -0,0 +1,2 @@
+import ReadEditButtonCell from './ReadEditButtonCell';
+export default ReadEditButtonCell;

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,10 @@
+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>;

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

@@ -0,0 +1,25 @@
+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";
+import styled, { system, th } from '@xstyled/styled-components';
+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/TablePagination/TablePagination.d.ts

@@ -0,0 +1,7 @@
+import { GridActionsType, GridSelectorsType } from '../../types';
+type Props = {
+    gridActions: GridActionsType;
+    gridSelectors: GridSelectorsType;
+};
+declare const TablePagination: ({ gridActions, gridSelectors }: Props) => JSX.Element;
+export default TablePagination;

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

@@ -0,0 +1,31 @@
+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 styled, { x } from '@xstyled/styled-components';
+import { Trans } from '@lingui/react';
+import { useCallback, useMemo } from 'react';
+import Select from '../../../../Elements/Select/Select';
+import { Paragraph4 } from '../../../../Elements/Typography/Typography';
+var Wrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"])));
+var StyledSelect = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"], ["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"])));
+var rowsPerPageOptionValues = [10, 20, 50, 100];
+var LABEL_VALUE = '_label_';
+var filterRowsOption = function (option) { return option.value !== LABEL_VALUE; };
+var TablePagination = function (_a) {
+    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors;
+    var setRowsPerPage = gridActions.setRowsPerPage, setPage = gridActions.setPage;
+    var onSetRowsPerPage = useCallback(function (option) {
+        if (option && 'value' in option) {
+            setRowsPerPage === null || setRowsPerPage === void 0 ? void 0 : setRowsPerPage(Number(option.value));
+            setPage === null || setPage === void 0 ? void 0 : setPage(gridSelectors.page);
+        }
+    }, [gridSelectors.page, setPage, setRowsPerPage]);
+    var rowsPerPageOptions = useMemo(function () {
+        return rowsPerPageOptionValues.map(function (value) { return ({ value: value, label: value }); });
+    }, []);
+    return (_jsxs(Wrapper, { children: [_jsx(StyledSelect, { minWidth: "80px", children: _jsx(Select, { name: "rowsPerPage", style: "gridFilter", placeholder: "".concat(gridSelectors.rowsPerPage), options: rowsPerPageOptions, value: gridSelectors.rowsPerPage, filterOption: filterRowsOption, isDarkPlaceholderText: true, onChange: onSetRowsPerPage }) }), _jsx(Paragraph4, { variant: "normal", mr: "20px", children: _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }) })] }));
+};
+export default TablePagination;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,2 @@
+import TablePagination from './TablePagination';
+export default TablePagination;

package/ui/Blocks/CommonGrid/components/TablePagination/index.js

@@ -0,0 +1,2 @@
+import TablePagination from './TablePagination';
+export default TablePagination;

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

@@ -0,0 +1,4 @@
+import { Props } from './types';
+export declare const ipv4: RegExp;
+declare const TextRange: (props: Props) => JSX.Element;
+export default TextRange;