@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

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

@@ -1,24 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var MultiSelect_1 = __importDefault(require("../../../../Elements/MultiSelect"));
-var SingleSelect_1 = __importDefault(require("../../../../Elements/SingleSelect"));
-var isArray_1 = __importDefault(require("lodash/isArray"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import MultiSelect from '../../../../Elements/MultiSelect/index.js';
+import SingleSelect from '../../../../Elements/SingleSelect/index.js';
+import isArray from 'lodash/isArray';
 var emptyValue = [];
 var SelectFilter = function (_a) {
     var onChange = _a.onChange, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton;
-    var handleOnMultiChange = (0, react_1.useCallback)(function (options) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(!(0, isArray_1.default)(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options.map(function (option) { return option.value; }));
+    var handleOnMultiChange = useCallback(function (options) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(!isArray(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options.map(function (option) { return option.value; }));
     }, [onChange]);
     if (isMulti) {
-        return ((0, jsx_runtime_1.jsx)(MultiSelect_1.default, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: value || emptyValue, options: options, checkAllButton: checkAllButton, style: "gridFilter" }));
+        return (_jsx(MultiSelect, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: value || emptyValue, options: options, checkAllButton: checkAllButton, style: "gridFilter" }));
     }
     else {
-        return (0, jsx_runtime_1.jsx)(SingleSelect_1.default, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter" });
+        return _jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter" });
     }
 };
-exports.default = SelectFilter;
+export default SelectFilter;

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

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var GridSelect_1 = __importDefault(require("./GridSelect"));
-exports.default = GridSelect_1.default;
+import GridSelect from './GridSelect.js';
+export default GridSelect;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,23 +9,19 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var Table_1 = require("./Table");
-var utils_1 = require("../utils");
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Row, Cell } from './Table.js';
+import { getCellSizeProps, getActionCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils/index.js';
 var GroupCell = function (_a) {
     var column = _a.column, group = _a.group, displayColumnWidth = _a.displayColumnWidth;
-    var cellSizeProps = (0, utils_1.getCellSizeProps)(column, displayColumnWidth);
-    var cellClassName = "cell".concat((0, utils_1.getStickyCollClassNames)(!!column.sticky, column.stickTo), " ").concat((0, utils_1.getGroupClassNames)(group));
-    return ((0, jsx_runtime_1.jsx)(Table_1.Cell, __assign({ className: cellClassName }, cellSizeProps, { children: group.start && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: group.name }) })));
+    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_1.default.useMemo(function () { return (actionColumn ? __assign({}, (0, utils_1.getActionCellSizeProps)(actionColumn)) : {}); }, [actionColumn]);
-    return ((0, jsx_runtime_1.jsxs)(Table_1.Row, { className: "group-row", children: [actionColumn && (0, jsx_runtime_1.jsx)(Table_1.Cell, { className: "cell", style: actionColumnStyle }, "actions"), groups.map(function (group, key) { return ((0, jsx_runtime_1.jsx)(GroupCell, { column: columns[key], group: group, displayColumnWidth: displayColumnsWidth[columns[key].name] }, key)); })] }));
+    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)); })] }));
 };
-exports.default = GroupRow;
+export default GroupRow;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -14,32 +13,28 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var Table_1 = require("./Table");
-var ColumnTitle_1 = __importDefault(require("./ColumnTitle"));
-var Resize_1 = __importDefault(require("./Resize"));
-var utils_1 = require("../utils");
-var DraggableCell = (0, styled_components_1.default)(Table_1.Cell)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+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.js';
+import ColumnTitle from './ColumnTitle.js';
+import Resize from './Resize.js';
+import { getGroupClassNames, getStickyCollClassNames } from '../utils/index.js';
+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 onResize = react_1.default.useCallback(function (width) {
+    var onResize = React.useCallback(function (width) {
         handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
     }, [handleResizeDrag, name]);
-    var style = react_1.default.useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
-    var onSetSort = react_1.default.useCallback(function (value) {
+    var style = React.useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
+    var onSetSort = React.useCallback(function (value) {
         onAddSort && onAddSort(systemName || name, value);
     }, [onAddSort, systemName, name]);
-    var cellClassName = "cell".concat((0, utils_1.getStickyCollClassNames)(!!sticky, stickTo), " ").concat((0, utils_1.getGroupClassNames)(group));
-    return ((0, jsx_runtime_1.jsxs)(DraggableCell, __assign({}, draggableProps, dragHandleProps, { style: style, flexBasis: flexBasis, flexGrow: flexGrow, flexShrink: flexShrink, innerRef: innerRef, "$isDragging": isDragging, className: cellClassName, children: [(0, jsx_runtime_1.jsx)(ColumnTitle_1.default, { title: title, isSortable: isSortable, onSetSort: onSetSort, sortValue: sortValue }), hasResize && onResizeOut && onResizeOver && ((0, jsx_runtime_1.jsx)(Resize_1.default, { onResize: onResize, onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
+    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(ColumnTitle, { title: title, isSortable: isSortable, onSetSort: onSetSort, sortValue: sortValue }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize, onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
 };
-exports.default = react_1.default.memo(HeadCell);
+export default React.memo(HeadCell);
 var templateObject_1;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,29 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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)) {
@@ -42,28 +18,24 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importStar(require("react"));
-var react_beautiful_dnd_1 = require("react-beautiful-dnd");
-var Table_1 = require("./Table");
-var HeadCell_1 = __importDefault(require("./HeadCell"));
-var utils_1 = require("../utils");
+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.js';
+import HeadCell from './HeadCell.js';
+import { getActionCellSizeProps, getCellSizeProps, getSortName } from '../utils/index.js';
 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 ((0, jsx_runtime_1.jsx)(HeadCell_1.default, __assign({ name: column.name, systemName: column.systemName, isSortable: false, hasResize: false, isDragging: false, sortValue: null }, (0, utils_1.getCellSizeProps)(column, displayColumnsWidth[column.name]), { title: column.title, sticky: column.sticky, stickTo: column.stickTo }), column.name)); });
+    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 = (0, react_1.useState)(false), showUIElements = _d[0], setShowUIElements = _d[1];
-    (0, react_1.useEffect)(function () {
+    var _d = useState(false), showUIElements = _d[0], setShowUIElements = _d[1];
+    useEffect(function () {
         setShowUIElements(true);
     }, []);
-    var handleDragEnd = react_1.default.useCallback(function (item) {
+    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;
@@ -79,19 +51,19 @@ var HeadRow = function (_a) {
         newOrderColumns.splice(toIndex, 0, column);
         setColumnsOrder(newOrderColumns);
     }, [setColumnsOrder, columnsOrder, columns]);
-    var _e = (0, react_1.useState)(false), isDragDisabled = _e[0], setIsDragDisabled = _e[1];
-    var onResizeOver = react_1.default.useCallback(function () {
+    var _e = useState(false), isDragDisabled = _e[0], setIsDragDisabled = _e[1];
+    var onResizeOver = React.useCallback(function () {
         setIsDragDisabled(true);
     }, [setIsDragDisabled]);
-    var onResizeOut = react_1.default.useCallback(function () {
+    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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showUIElements && ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.DragDropContext, { onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, children: function (droppableProvided) { return ((0, jsx_runtime_1.jsxs)(Table_1.Row, __assign({ className: "headRow", accountForScrollbar: false, innerRef: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [actionColumn && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayReadEditCell && ((0, jsx_runtime_1.jsx)(Table_1.Cell, { className: "cell", style: Object.assign(__assign({}, (0, utils_1.getActionCellSizeProps)(actionColumn))) })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && ((0, jsx_runtime_1.jsx)(Table_1.Cell, { className: "cell", style: Object.assign(__assign({}, (0, utils_1.getActionCellSizeProps)(actionColumn))) }))] })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
+    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 ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: column.name, index: key, isDragDisabled: isDragDisabled || column.sticky, children: function (draggableProvided, snapshot) {
+                            .map(function (column, key) { return (_jsx(Draggable, { draggableId: column.name, index: key, isDragDisabled: isDragDisabled || column.sticky, children: function (draggableProvided, snapshot) {
                                 var _a;
-                                return ((0, jsx_runtime_1.jsx)(HeadCell_1.default, __assign({ name: column.name, systemName: column.systemName, onAddSort: onAddSort, isSortable: !!column.sorting, sortValue: ((_a = sortingValues.find(function (sorting) { return sorting.column == (0, utils_1.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 }, (0, utils_1.getCellSizeProps)(column, displayColumnsWidth[column.name]), { group: groups[key], title: column.title, sticky: column.sticky, stickTo: column.stickTo })));
+                                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] }))); } }) })) }));
 };
-exports.default = HeadRow;
+export default HeadRow;

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

@@ -1,21 +1,15 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItemIcon = exports.ListItemContent = exports.ListItem = exports.List = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var system_1 = require("@xstyled/system");
-var Icon_1 = __importDefault(require("../../../../Elements/Icon/Icon"));
-exports.List = styled_components_1.default.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"])));
-exports.ListItem = styled_components_1.default.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"])), (0, system_1.th)('colors.bgLightGray1'));
-exports.ListItemContent = styled_components_1.default.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) {
+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.js';
+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) {
@@ -25,11 +19,11 @@ exports.ListItemContent = styled_components_1.default.span(templateObject_3 || (
     var selected = _a.selected;
     return (selected ? 'white' : 'transparent');
 });
-exports.ListItemIcon = styled_components_1.default.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"])));
+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_1.default.useCallback(function (item) { return function () { return onClick(item); }; }, [onClick]);
-    return ((0, jsx_runtime_1.jsx)(exports.List, { className: "ignore-element-for-closing-hook", children: list.map(function (item) { return ((0, jsx_runtime_1.jsx)(exports.ListItem, { onClick: handleClick(item), children: (0, jsx_runtime_1.jsxs)(exports.ListItemContent, { selected: selected === item.value, children: [(0, jsx_runtime_1.jsx)(exports.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: item.icon, fill: "red1", size: "8px" }) }), item.label] }) }, item.value)); }) }));
+    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)); }) }));
 };
-exports.default = IconList;
+export default IconList;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var IconList_1 = __importDefault(require("./IconList"));
-exports.default = IconList_1.default;
+import IconList from './IconList.js';
+export default IconList;

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

@@ -1,22 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = require("@xstyled/styled-components");
-var ActionRow_1 = require("./components/ActionRow");
-var Input_1 = require("../../../../Forms/Input/Input");
-var core_1 = require("@lingui/core");
+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.js';
+import { Input } from '../../../../Forms/Input/Input.js';
+import { i18n } from '@lingui/core';
 var ManageColumnForm = function (_a) {
     var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions;
-    var _b = (0, react_1.useState)(''), searchedValue = _b[0], setSearchedValue = _b[1];
-    var onChangeInputValue = (0, react_1.useCallback)(function (e) {
+    var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
+    var onChangeInputValue = useCallback(function (e) {
         setSearchedValue(e.target.value);
     }, [setSearchedValue]);
-    var clear = (0, react_1.useCallback)(function () {
+    var clear = useCallback(function () {
         setSearchedValue('');
     }, [setSearchedValue]);
-    return ((0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { icon: "search", type: "text", value: searchedValue, placeholder: core_1.i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), (0, jsx_runtime_1.jsx)(styled_components_1.x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
-                    return ((0, jsx_runtime_1.jsx)(ActionRow_1.ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index));
+    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));
                 }) })] }));
 };
-exports.default = ManageColumnForm;
+export default ManageColumnForm;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -14,41 +13,35 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionRow = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = require("@xstyled/styled-components");
-var styled_components_2 = __importDefault(require("styled-components"));
-var Toggle_1 = __importDefault(require("../../../../../Elements/Toggle/Toggle"));
-var Group_1 = require("../../../../../Elements/Icon/icons/Group");
-var lodash_1 = require("lodash");
-var Typography_1 = require("../../../../../Elements/Typography/Typography");
-var core_1 = require("@lingui/core");
-var RowLayout = (0, styled_components_2.default)(styled_components_1.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) {
+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.js';
+import { Group } from '../../../../../Elements/Icon/icons/Group.js';
+import { isObject } from 'lodash';
+import { H6 } from '../../../../../Elements/Typography/Typography.js';
+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');
-}, styled_components_1.th.color('lightGray6'));
-var ActionRow = function (_a) {
+}, 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 = (0, react_1.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 = (0, lodash_1.isObject)(column === null || column === void 0 ? void 0 : column.title) &&
+    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) &&
-        core_1.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 });
+        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 = (0, react_1.useCallback)(function () {
+    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 ((0, jsx_runtime_1.jsxs)(RowLayout, { "$isVisible": isVisible, children: [(0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(styled_components_1.x.div, { w: "28px", children: (0, jsx_runtime_1.jsx)(Toggle_1.default, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), (0, jsx_runtime_1.jsx)(Typography_1.H6, { variant: "medium", ml: "8px", children: translatedValue })] }), (0, jsx_runtime_1.jsx)(Group_1.Group, {})] }));
+    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, {})] }));
 };
-exports.ActionRow = ActionRow;
 var templateObject_1;

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

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var ManageColumnForm_1 = __importDefault(require("./ManageColumnForm"));
-exports.default = ManageColumnForm_1.default;
+import ManageColumnForm from './ManageColumnForm.js';
+export default ManageColumnForm;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,51 +20,47 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var useClickOutside_1 = require("../../../Modal/hooks/useClickOutside");
-var Input_1 = require("../../../../Forms/Input/Input");
-var IconList_1 = __importDefault(require("../IconList"));
-var core_1 = require("@lingui/core");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside.js';
+import { Input } from '../../../../Forms/Input/Input.js';
+import IconList from '../IconList/index.js';
+import { i18n } from '@lingui/core';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
-    return (0, jsx_runtime_1.jsx)("div", { children: children });
+    return _jsx("div", { children: children });
 };
 var createNumberComparators = function () { return [
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.lessThan', message: 'Less than' }), value: 'lt', icon: 'lessThen' },
+    { 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: core_1.i18n._({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
+        label: i18n._({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
         value: 'lte',
         icon: 'lessThanEqual',
     },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
+    { label: i18n._({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
     {
-        label: core_1.i18n._({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
+        label: i18n._({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
         value: 'gte',
         icon: 'greaterThanEqual',
     },
 ]; };
 var createEqualComparators = [
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { 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 = (0, react_1.useState)(false), isOpen = _c[0], setOpen = _c[1];
+    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 = (0, react_1.useCallback)(function () { return setOpen(false); }, []);
-    var pickerRef = (0, useClickOutside_1.useClickOutside)({ onClose: onClose });
-    var togglePicker = (0, react_1.useCallback)(function () { return setOpen(!isOpen); }, [isOpen, setOpen]);
-    var onChangeTextInput = (0, react_1.useCallback)(function (event) {
+    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)
@@ -73,9 +68,9 @@ var NumberRange = function (props) {
         var isValid = number || number === 0;
         onChange({ comparator: comparator, value: isValid ? number : '' });
     }, [onChange, comparator, decimals, value]);
-    var onChangeComparator = (0, react_1.useCallback)(function (option) {
+    var onChangeComparator = useCallback(function (option) {
         onChange({ comparator: option.value, value: fieldValue });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: pickerRef, children: [(0, jsx_runtime_1.jsx)(Input_1.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 && ((0, jsx_runtime_1.jsx)(OverlayComponent, { children: (0, jsx_runtime_1.jsx)(IconList_1.default, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
+    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 }) }))] }));
 };
-exports.default = NumberRange;
+export default NumberRange;

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

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var NumberRange_1 = __importDefault(require("./NumberRange"));
-exports.default = NumberRange_1.default;
+import NumberRange from './NumberRange.js';
+export default NumberRange;

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

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};