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

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

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 } from "react/jsx-runtime";
+import { t } from '@lingui/macro';
+import GridSelect from '../GridSelect';
+var getFlagOptions = function () { return [
+    { value: '', label: t({ id: 'dataGrid.columnActive.filterOptions.all', message: 'All' }) },
+    { value: '1', label: t({ id: 'dataGrid.columnActive.filterOptions.yes', message: 'Yes' }) },
+    { value: '0', label: t({ id: 'dataGrid.columnActive.filterOptions.no', message: 'No' }) },
+]; };
+var SelectFilter = function (_a) {
+    var restProps = __rest(_a, []);
+    return _jsx(GridSelect, __assign({ options: getFlagOptions() }, restProps));
+};
+export default SelectFilter;

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

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

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+type ItemType = {
+    title: string | React.ReactElement;
+    onClick: () => void;
+    link?: string;
+};
+export type Props = {
+    items: ItemType[];
+    disabled?: boolean;
+    dropdownPosition?: 'top' | 'bottom';
+};
+declare const ButtonMore: ({ items, disabled, dropdownPosition }: Props) => JSX.Element;
+export default ButtonMore;

package/ui/Blocks/CommonGrid/components/ButtonMore/ButtonMore.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 { useCallback, useState } from 'react';
+import styled from '@xstyled/styled-components';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import Button from '../../../../Elements/Button/Button';
+import DropdownMenu from '../../../../Elements/DropdownMenu';
+var ButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n"], ["\n  position: relative;\n  width: fit-content;\n"])));
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"])), function (_a) {
+    var dropdownPosition = _a.dropdownPosition;
+    return (!dropdownPosition || dropdownPosition === 'bottom' ? 'calc(100% + 8px)' : 'auto');
+}, function (_a) {
+    var dropdownPosition = _a.dropdownPosition;
+    return (dropdownPosition === 'top' ? 'calc(100% + 13px)' : 'auto');
+});
+var ButtonMore = function (_a) {
+    var items = _a.items, disabled = _a.disabled, dropdownPosition = _a.dropdownPosition;
+    var _b = useState(false), actionsVisible = _b[0], setActionsVisible = _b[1];
+    var onClose = useCallback(function () {
+        setActionsVisible(false);
+    }, []);
+    var ref = useClickOutside({ onClose: onClose });
+    var handleClick = useCallback(function () {
+        setActionsVisible(!actionsVisible);
+    }, [actionsVisible]);
+    return (_jsxs(ButtonWrapper, { ref: ref, children: [_jsx(Button, { onClick: handleClick, icon: "ellipsisVertical", appearance: "secondaryLg", type: "button", sizing: "iconLg", "data-cy": "gridActionBtn", disabled: disabled }), _jsx(StyledDropdownMenu, { showMenu: actionsVisible, items: items, dropdownPosition: dropdownPosition })] }));
+};
+export default ButtonMore;
+var templateObject_1, templateObject_2;

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { ColumnDefinition, GridActionsType, FiltersConfig, Group } from '../types';
+type Props = {
+    onChange: Required<GridActionsType>['addFilter'];
+    value?: any;
+    column: ColumnDefinition;
+    displayColumnWidth: number;
+    filters?: FiltersConfig;
+    group?: Group;
+};
+declare const ColumnFilterCell: ({ onChange, value, displayColumnWidth, filters, column: columnDefinition, group, }: Props) => JSX.Element;
+export default ColumnFilterCell;

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

@@ -0,0 +1,41 @@
+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 React from 'react';
+import { x } from '@xstyled/styled-components';
+import { Cell } from './Table';
+import { useAddFilter } from '../utils/public';
+import { createFilterType, getStickyCollClassNames } from '../utils';
+import { getCellSizeProps, getGroupClassNames } from '../utils';
+import OverlayComponent from './FilterDropdown';
+var ColumnFilterCell = function (_a) {
+    var onChange = _a.onChange, value = _a.value, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group;
+    var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
+    var handleAddFilter = useAddFilter(onChange);
+    var handleChange = React.useCallback(function (event) {
+        handleAddFilter((event === null || event === void 0 ? void 0 : event.target) ? event.target.value : event, columnDefinition);
+    }, [handleAddFilter, columnDefinition]);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!columnDefinition.sticky, columnDefinition.stickTo), " ").concat(getGroupClassNames(group));
+    if (!columnDefinition.filtering) {
+        return _jsx(Cell, __assign({ className: cellClassName }, cellSizeProps));
+    }
+    var filterType = createFilterType(columnDefinition);
+    var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
+    var RenderComponent = filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent;
+    if (!RenderComponent) {
+        console.error("ERROR, using unknown filter type ".concat(filterType));
+        return (_jsx(x.div, { children: _jsx("span", { children: "".concat(filterType, " filter") }) }));
+    }
+    var passProps = __assign(__assign(__assign({}, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps), columnDefinition.filterExtraProps), (filterType == 'options' && { options: columnDefinition.filterOptions }));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { className: "test", children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, OverlayComponent: OverlayComponent }, passProps)) }) })));
+};
+export default ColumnFilterCell;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ColumnTitleComponentType } from '../../types';
+type Props = React.ComponentProps<ColumnTitleComponentType>;
+declare const ColumnTitle: ({ title, isSortable, onSetSort, sortValue }: Props) => JSX.Element | null;
+export default ColumnTitle;

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

@@ -0,0 +1,58 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import styled, { x, css } from '@xstyled/styled-components';
+import Icon from '../../../../Elements/Icon/Icon';
+// ArrowWrap and WarningWrap need to have the same size to solve resizing issues
+var WRAPPER_WIDTH = 35;
+var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  font-size: 0.8rem;\n"], ["\n  width: 100%;\n  font-size: 0.8rem;\n"])));
+var Title = styled.h4(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"], ["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"])));
+var arrowStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"], ["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"])));
+var InlineArrowWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"], ["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"])), function (_a) {
+    var $isPopup = _a.$isPopup;
+    return ($isPopup ? 'none' : 'flex');
+}, arrowStyles);
+var PopupArrowWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"], ["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"])), arrowStyles, WRAPPER_WIDTH);
+var OverflowWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"], ["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"])));
+var WarningWrap = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"])), function (_a) {
+    var $isPopup = _a.$isPopup;
+    return ($isPopup ? 'block' : 'none');
+}, OverflowWrap);
+var Content = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: ", ";\n  display: flex;\n"], ["\n  justify-content: ", ";\n  display: flex;\n"])), function (_a) {
+    var $isPopup = _a.$isPopup;
+    return ($isPopup ? 'space-between' : 'unset');
+});
+var ColumnTitle = function (_a) {
+    var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
+    var _b = useState(false), isOverflowing = _b[0], setIsOverflowing = _b[1];
+    var onSetAsc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('asc'); }, [onSetSort]);
+    var onSetDesc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('desc'); }, [onSetSort]);
+    var onSetNull = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort(null); }, [onSetSort]);
+    var isAsc = sortValue == 'asc';
+    var isDesc = sortValue == 'desc';
+    var wrapRef = useRef(null);
+    var contentRef = useRef(null);
+    useEffect(function () {
+        var wrapRefCopy = wrapRef.current;
+        var contentRefCopy = contentRef.current;
+        if (!wrapRefCopy || !contentRefCopy)
+            return;
+        var resizeObserver = new ResizeObserver(function () {
+            var wrapWidth = wrapRefCopy.offsetWidth;
+            var contentWidth = contentRefCopy.offsetWidth + 42; // width of sorting buttons
+            setIsOverflowing(wrapWidth <= contentWidth);
+        });
+        resizeObserver.observe(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
+        return function () {
+            resizeObserver.unobserve(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wrapRef === null || wrapRef === void 0 ? void 0 : wrapRef.current]);
+    var Arrows = (_jsxs(_Fragment, { children: [_jsx(x.div, { onClick: isAsc ? onSetNull : onSetAsc, children: _jsx(Icon, { icon: "chevronUp", fill: isAsc ? 'blue2' : 'lightGray3' }) }), _jsx(x.div, { onClick: isDesc ? onSetNull : onSetDesc, children: _jsx(Icon, { icon: "chevronDown", fill: isDesc ? 'blue2' : 'lightGray3' }) })] }));
+    return (_jsx(Wrap, { ref: wrapRef, children: _jsxs(Content, { "$isPopup": isOverflowing, children: [_jsx("div", { children: _jsx(Title, { ref: contentRef, children: title }) }), isSortable && (_jsxs(_Fragment, { children: [_jsx(WarningWrap, { "$isPopup": isOverflowing, children: _jsx(Icon, { icon: "warningDual", fill: "black", secondaryColor: "yellow2" }) }), _jsx(OverflowWrap, { "$isPopup": isOverflowing, children: _jsx(PopupArrowWrap, { "$isPopup": isOverflowing, children: Arrows }) }), _jsx(InlineArrowWrap, { "$isPopup": isOverflowing, children: Arrows })] }))] }) }));
+};
+export default ColumnTitle;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

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

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SortingValueType } from '../types';
+declare const _default: React.NamedExoticComponent<{
+    title?: string | JSX.Element | undefined;
+    isSortable: boolean;
+    onSetSort: (value: SortingValueType) => void;
+    sortValue: SortingValueType;
+}>;
+export default _default;

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

@@ -0,0 +1,20 @@
+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 { SortingUp, SortingDown } from './icons/Sorting';
+var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & + * {\n    margin-left: 1em;\n  }\n"], ["\n  & + * {\n    margin-left: 1em;\n  }\n"])));
+var ColumnTitle = function (_a) {
+    var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
+    var handleClick = React.useCallback(function () {
+        var newValue = sortValue ? (sortValue == 'asc' ? 'desc' : null) : 'asc';
+        if (onSetSort)
+            onSetSort(newValue);
+    }, [sortValue, onSetSort]);
+    return (_jsxs("div", { onClick: isSortable ? handleClick : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16" }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16" })] }));
+};
+export default React.memo(ColumnTitle);
+var templateObject_1;

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

@@ -0,0 +1,11 @@
+import { CommonGridProps, GridActionsType, GridSelectorsType } from '../../types';
+export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+type Props = {
+    columns?: CommonGridProps['columnsDefinitions'];
+    extraControlButtons: CommonGridProps['extraControlButtons'];
+    eshopSelect: CommonGridProps['extraControlButtons'];
+    gridActions: GridActionsType;
+    gridSelectors: GridSelectorsType;
+};
+declare const ControlButtons: ({ extraControlButtons, eshopSelect, gridActions, gridSelectors }: Props) => JSX.Element;
+export default ControlButtons;

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

@@ -0,0 +1,20 @@
+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 ExtraControlButtons from '../ExtraControlButtons';
+import { ExtraControlButtonPosition } from '../../types';
+import Button from '../../../../Elements/Button/Button';
+export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var ControlButtons = function (_a) {
+    var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors;
+    var resetFilters = gridActions.resetFilters;
+    var filter = gridSelectors.filter;
+    var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
+    return (_jsxs(Row, { children: [eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: resetFilters, appearance: "secondaryLg", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
+};
+export default ControlButtons;
+var templateObject_1;

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

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

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ColumnDefinition, RowProps, Group } from '../types';
+type DataCellPros = {
+    column: ColumnDefinition;
+    rowData: RowProps;
+    onRowAction?: (id: string, field: string, value: any) => void;
+    displayColumnWidth: number;
+    group: Group;
+};
+declare const MemoDataCell: React.NamedExoticComponent<DataCellPros>;
+export default MemoDataCell;

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

@@ -0,0 +1,52 @@
+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 React from 'react';
+import get from 'lodash/fp/get';
+import { TextCell } from './Table';
+import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
+var DataCell = function (_a) {
+    var column = _a.column, group = _a.group, rowData = _a.rowData, onRowAction = _a.onRowAction, displayColumnWidth = _a.displayColumnWidth;
+    var Wrapper = column.fixedSize ? 'div' : TextCell;
+    var wrapperBaseProps = column.fixedSize
+        ? { style: __assign(__assign({}, getCellSizeProps(column, displayColumnWidth)), { alignSelf: 'center' }) }
+        : getCellSizeProps(column, displayColumnWidth);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo), " ").concat(getGroupClassNames(group));
+    if (column.cellComponent) {
+        return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: _jsx(column.cellComponent, { rowData: rowData, onRowAction: onRowAction, column: column }) })));
+    }
+    else {
+        return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: column.formatRowValue ? column.formatRowValue(rowData) : get(column.name, rowData) })));
+    }
+};
+var MemoDataCell = React.memo(DataCell, function (prevProps, newProps) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    if (prevProps.rowData !== newProps.rowData ||
+        prevProps.displayColumnWidth !== newProps.displayColumnWidth ||
+        ((_a = prevProps.column) === null || _a === void 0 ? void 0 : _a.fixedSize) != ((_b = newProps.column) === null || _b === void 0 ? void 0 : _b.fixedSize) ||
+        ((_c = prevProps.column) === null || _c === void 0 ? void 0 : _c.flexGrow) != ((_d = newProps.column) === null || _d === void 0 ? void 0 : _d.flexGrow) ||
+        ((_e = prevProps.column) === null || _e === void 0 ? void 0 : _e.flexShrink) != ((_f = newProps.column) === null || _f === void 0 ? void 0 : _f.flexShrink) ||
+        ((_g = prevProps.group) === null || _g === void 0 ? void 0 : _g.start) != ((_h = newProps.group) === null || _h === void 0 ? void 0 : _h.start) ||
+        ((_j = prevProps.group) === null || _j === void 0 ? void 0 : _j.end) != ((_k = newProps.group) === null || _k === void 0 ? void 0 : _k.end)) {
+        return false;
+    }
+    if ((((_l = prevProps.column) === null || _l === void 0 ? void 0 : _l.formatRowValue) || ((_m = newProps.column) === null || _m === void 0 ? void 0 : _m.formatRowValue)) &&
+        ((_o = prevProps.column) === null || _o === void 0 ? void 0 : _o.formatRowValue) !== ((_p = newProps.column) === null || _p === void 0 ? void 0 : _p.formatRowValue)) {
+        return false;
+    }
+    if ((((_q = prevProps.column) === null || _q === void 0 ? void 0 : _q.cellComponent) || ((_r = newProps.column) === null || _r === void 0 ? void 0 : _r.cellComponent)) &&
+        (((_s = prevProps.column) === null || _s === void 0 ? void 0 : _s.cellComponent) !== ((_t = newProps.column) === null || _t === void 0 ? void 0 : _t.cellComponent) || prevProps.onRowAction !== newProps.onRowAction)) {
+        return false;
+    }
+    return true;
+});
+export default MemoDataCell;

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

@@ -0,0 +1,21 @@
+import { ColumnDefinition, ActionColumn, RowProps, UxState, GridSelectorsType, Group } from '../types';
+type DataRowProps = {
+    columns: ColumnDefinition[];
+    actionColumn?: ActionColumn;
+    rowData: RowProps;
+    rowIndex: number;
+    uxState: UxState;
+    allowRowSelect?: boolean;
+    allowRowSelectOnAction?: boolean;
+    onUxChange?: (uxKey: keyof UxState, uxValue: any) => void;
+    onRowEditClick?: (id: string, props: RowProps) => void;
+    onRowReadClick?: (id: string, props: RowProps) => void;
+    onRowClick?: (id: string, props: RowProps) => void;
+    onRowAction?: (id: string, field: string, value: any) => void;
+    createLink?: (params?: object) => string;
+    displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
+    groups: Group[];
+    isEven?: boolean;
+};
+declare const DataRow: ({ columns, actionColumn, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowEditClick, onRowReadClick, onRowClick, onRowAction, displayColumnsWidth, groups, isEven, }: DataRowProps) => JSX.Element;
+export default DataRow;

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

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

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

@@ -0,0 +1,12 @@
+import { FilterComponentProps } from '../../types';
+type InitialView = 'past' | 'future';
+type DatePickerRangeProps = FilterComponentProps<Date[]> & {
+    filterTime?: number;
+    initialView?: InitialView;
+};
+type DateRangeProps = DatePickerRangeProps & {
+    error?: string;
+    label?: string;
+};
+declare const DatePickerRange: (props: DateRangeProps) => JSX.Element;
+export default DatePickerRange;