@mailstep/design-system 0.5.1-beta.2 → 0.6.0

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 { x } from '@xstyled/styled-components';
+import { ActionRow } from './components/ActionRow';
+import { Input } from '../../../../Forms/Input/Input';
+import { i18n } from '@lingui/core';
+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: i18n._({ 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 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';
+import { i18n } from '@lingui/core';
+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) &&
+        i18n._({ 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 { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import { Input } from '../../../../Forms/Input/Input';
+import IconList from '../IconList';
+import { i18n } from '@lingui/core';
+var OverlayComponentDefault = function (_a) {
+    var children = _a.children;
+    return _jsx("div", { children: children });
+};
+var createNumberComparators = function () { return [
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: i18n._({ id: 'dataGrid.comparator.lessThan', message: 'Less than' }), value: 'lt', icon: 'lessThen' },
+    {
+        label: i18n._({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
+        value: 'lte',
+        icon: 'lessThanEqual',
+    },
+    { label: i18n._({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
+    {
+        label: i18n._({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
+        value: 'gte',
+        icon: 'greaterThanEqual',
+    },
+]; };
+var createEqualComparators = [
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ 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.js

@@ -14,10 +14,7 @@ var ScrollSizer = styled.div(templateObject_4 || (templateObject_4 = __makeTempl
 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 })] }));
+    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;

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/Table.d.ts

@@ -1,8 +1,3 @@
-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>;
@@ -13,4 +8,3 @@ export declare const StyledDataRow: import("styled-components").StyledComponent<
 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

@@ -14,12 +14,7 @@ var __assign = (this && this.__assign) || function () {
     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; });

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

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

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

@@ -0,0 +1,32 @@
+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, customPaginationHandler = _a.customPaginationHandler;
+    var setRowsPerPage = gridActions.setRowsPerPage;
+    var page = gridSelectors.page;
+    var onSetRowsPerPage = useCallback(function (option) {
+        if (option && 'value' in option) {
+            setRowsPerPage === null || setRowsPerPage === void 0 ? void 0 : setRowsPerPage(Number(option.value));
+            customPaginationHandler === null || customPaginationHandler === void 0 ? void 0 : customPaginationHandler(page !== null && page !== void 0 ? page : 1, Number(option.value));
+        }
+    }, [setRowsPerPage, page, customPaginationHandler]);
+    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", menuPlacement: "auto", 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;

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

@@ -0,0 +1,89 @@
+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 { Trans } from '@lingui/react';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import { Input } from '../../../../Forms/Input/Input';
+import IconList from '../IconList/IconList';
+import { i18n } from '@lingui/core';
+var OverlayComponentDefault = function (_a) {
+    var children = _a.children;
+    return _jsx("div", { children: children });
+};
+export var ipv4 = /^([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$/;
+var createTextComparators = function () { return [
+    { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: i18n._({ id: 'dataGrid.comparator.notContains', message: 'Not contains' }), value: 'notLike', icon: 'false' },
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: i18n._({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
+    { label: i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' },
+]; };
+var createPresentTextComparators = function () { return [
+    { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
+]; };
+var createEqualComparators = function () { return [
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+]; };
+var validations = {
+    ip: {
+        check: function (value) { return ipv4.test(value.trim()); },
+        errorMsg: _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }),
+    },
+};
+var TextRange = function (props) {
+    var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "validation"]);
+    var eqOnlyTxt = i18n._({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
+    var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
+    var textComparators = createTextComparators();
+    var presentTextComparators = createPresentTextComparators();
+    var equalComparators = createEqualComparators();
+    var fallbackComparator = defaultComparator || textComparators[0].value;
+    var comparator = eqOnly ? 'eq' : (value === null || value === void 0 ? void 0 : value.comparator) || fallbackComparator;
+    var renderedComparator = isEqual ? equalComparators : isPresent ? presentTextComparators : textComparators;
+    var fieldValue = (value === null || value === void 0 ? void 0 : value.value) || '';
+    var onClose = useCallback(function () {
+        setOpen(false);
+    }, []);
+    var pickerRef = useClickOutside({ onClose: onClose });
+    var togglePicker = useCallback(function () { return setOpen(!isOpen); }, [isOpen, setOpen]);
+    var validation = !!validationKey && validations[validationKey];
+    var isInvalid = validation && Boolean(fieldValue && !validation.check(String(fieldValue)));
+    var onChangeTextInput = useCallback(function (event) {
+        var txtValue = event.target.value;
+        if (txtValue) {
+            onChange({ comparator: comparator, value: txtValue, isInvalid: validation && !validation.check(txtValue) });
+        }
+        else {
+            onChange(null);
+        }
+    }, [onChange, comparator, validation]);
+    var onChangeComparator = useCallback(function (option) {
+        onChange({ comparator: option.value, value: fieldValue, isInvalid: isInvalid });
+    }, []);
+    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, appearance: "grid", icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: 'tooltip', autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
+};
+export default TextRange;

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { FilterComponentProps } from '../../types';
+export type TextRangeComparator = 'like' | 'notLike' | 'eq' | 'neq' | 'startsWith' | 'endsWith';
+export type TextRangeValue = {
+    comparator?: TextRangeComparator;
+    value?: string | number;
+    isInvalid?: boolean;
+};
+export type Comparator = {
+    label: string;
+    value: string;
+    icon: string;
+};
+export type Props = FilterComponentProps<TextRangeValue> & {
+    eqOnly?: boolean;
+    isPresent?: boolean;
+    label?: string;
+    defaultComparator?: TextRangeValue['comparator'] & 'in';
+    validation?: string;
+    className?: string;
+    isEqual?: boolean;
+};

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

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

package/ui/Blocks/CommonGrid/components/gridCells/BoolIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<{}>;
+export declare const BoolIconCell: React.MemoExoticComponent<({ rowData, column }: Props) => JSX.Element>;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/BoolIcon.js

@@ -0,0 +1,22 @@
+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, { useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import get from 'lodash/fp/get';
+import Icon from '../../../../Elements/Icon/Icon';
+var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"])));
+var BoolIcon = function (_a) {
+    var rowData = _a.rowData, column = _a.column;
+    var theme = useTheme();
+    var value = get(column.name, rowData);
+    var icon = value ? 'check' : 'false';
+    var colorName = value ? 'green' : 'lightGray3';
+    var themeColor = th.color(colorName)({ theme: theme });
+    return (_jsx(Center, { children: _jsx(Icon, { icon: icon, fill: themeColor, size: "14px" }) }));
+};
+export var BoolIconCell = React.memo(BoolIcon);
+var templateObject_1;

package/ui/Blocks/CommonGrid/components/gridCells/ButtonInCell.d.ts

@@ -0,0 +1,4 @@
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<{}>;
+export declare const ButtonInCell: (props: Props) => JSX.Element;
+export {};

package/ui/Blocks/CommonGrid/components/{icons/ArrowSimple.js → gridCells/ButtonInCell.js}

@@ -10,5 +10,7 @@ var __assign = (this && this.__assign) || function () {
     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;
+import Button from '../../../../Elements/Button/Button';
+export var ButtonInCell = function (props) {
+    return _jsx(Button, __assign({}, props, { appearance: "secondaryLg", sizing: "grid" }));
+};

package/ui/Blocks/CommonGrid/components/gridCells/Date.d.ts

@@ -0,0 +1,4 @@
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<{}>;
+export declare const DateCell: ({ rowData, column }: Props) => JSX.Element | null;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/Date.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import get from 'lodash/fp/get';
+import { DateTime } from 'luxon';
+export var DateCell = function (_a) {
+    var rowData = _a.rowData, column = _a.column;
+    var value = get(column.name, rowData);
+    return value ? _jsx("span", { className: "cell", children: DateTime.fromISO(value).toFormat('dd. MM. yyyy') }) : null;
+};

package/ui/Blocks/CommonGrid/components/gridCells/DateTime.d.ts

@@ -0,0 +1,4 @@
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<{}>;
+export declare const DateTimeCell: ({ rowData, column }: Props) => JSX.Element | null;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/DateTime.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import get from 'lodash/fp/get';
+import { DateTime } from 'luxon';
+var defaultProps = {
+    dateTimeFormat: 'dd. MM. yyyy HH:mm',
+};
+export var DateTimeCell = function (_a) {
+    var _b;
+    var rowData = _a.rowData, column = _a.column;
+    var value = get(column.name, rowData);
+    var dateTimeFormat = ((_b = column === null || column === void 0 ? void 0 : column.passProps) !== null && _b !== void 0 ? _b : defaultProps).dateTimeFormat;
+    return value ? _jsx("span", { className: "cell", children: DateTime.fromISO(value, { setZone: true }).toFormat(dateTimeFormat) }) : null;
+};