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

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 { t } from '@lingui/macro';
+import { Trans } from '@lingui/react';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import { Input } from '../../../../Forms/Input/Input';
+import IconList from '../IconList/IconList';
+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: t({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: t({ id: 'dataGrid.comparator.notContains', message: 'Not contains' }), value: 'notLike', icon: 'false' },
+    { label: t({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: t({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: t({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
+    { label: t({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' },
+]; };
+var createPresentTextComparators = function () { return [
+    { label: t({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: t({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
+]; };
+var createEqualComparators = function () { return [
+    { label: t({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: t({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+]; };
+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 = t({ 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/gridCells/ButtonInCell.js

@@ -0,0 +1,16 @@
+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 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;
+};

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

@@ -0,0 +1,9 @@
+import { FlagAppearanceType } from '../../../../Elements/HighlightBox/HighlightBox';
+type Props = {
+    value: string;
+    appearanceMap: Record<string, FlagAppearanceType>;
+    enumObj: Record<string, () => string>;
+    size?: 'default' | 'small' | 'wide' | 'fitContent';
+};
+export declare const EnumInCell: ({ value, enumObj, appearanceMap, size }: Props) => JSX.Element | null;
+export {};

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

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { useMemo } from 'react';
+import styled from '@xstyled/styled-components';
+import HighlightBox from '../../../../Elements/HighlightBox';
+var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"])));
+export var EnumInCell = function (_a) {
+    var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size;
+    var finalLabel = useMemo(function () {
+        return enumObj[value] ? enumObj[value]() : value;
+    }, [enumObj, value]);
+    var coloringProp = useMemo(function () {
+        return { appearance: appearanceMap[value] };
+    }, [appearanceMap, value]);
+    if (!finalLabel)
+        return null;
+    return (_jsx(Center, { children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
+};
+var templateObject_1;

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

@@ -0,0 +1,5 @@
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<{}>;
+export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+declare const Image: ({ rowData, column }: Props) => JSX.Element | null;
+export default Image;

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

@@ -0,0 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import get from 'lodash/fp/get';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  :hover {\n    cursor: pointer;\n    .tooltip {\n      display: block;\n    }\n  }\n"], ["\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  :hover {\n    cursor: pointer;\n    .tooltip {\n      display: block;\n    }\n  }\n"])));
+export var Tooltip = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"], ["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"])));
+var Image = function (_a) {
+    var rowData = _a.rowData, column = _a.column;
+    var value = get(column.name, rowData);
+    if (value) {
+        return (_jsxs(Wrapper, { children: [_jsx(Tooltip, { children: _jsx("div", { className: "tooltip", children: value }) }), value] }));
+    }
+    return null;
+};
+export default Image;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    icon?: string;
+    isLoading?: boolean;
+    onClick: React.HTMLProps<HTMLButtonElement>['onClick'];
+    linkTo?: string;
+};
+export declare const IconButtonInCell: ({ icon, isLoading, onClick, linkTo }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import { Link as ReactLink } from 'react-router-dom';
+import Spinner from '../../../../Elements/Spinner/Spinner';
+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    cursor: pointer;\n    color: gray1;\n    :hover {\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  & > * {\n    cursor: pointer;\n    color: gray1;\n    :hover {\n      color: blue2;\n    }\n  }\n"])));
+export var IconButtonInCell = function (_a) {
+    var icon = _a.icon, isLoading = _a.isLoading, onClick = _a.onClick, linkTo = _a.linkTo;
+    return (_jsx(Center, { children: isLoading ? (_jsx(Spinner, { variant: "sm" })) : linkTo ? (_jsx(ReactLink, { to: linkTo, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px" }) })) : (_jsx("span", { onClick: onClick, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px" }) })) }));
+};
+var templateObject_1;

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

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

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

@@ -0,0 +1,23 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import get from 'lodash/fp/get';
+import Image from '../../../../Elements/Image/Image';
+var ImageWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  ", "\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+    var onClick = _a.onClick;
+    return (onClick ? 'cursor: pointer;' : '');
+});
+var StyledImage = styled(Image)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 100%;\n  height: 30px;\n  border: 1x solid;\n  border-radius: md;\n  border-color: lightGray3;\n"], ["\n  max-width: 100%;\n  height: 30px;\n  border: 1x solid;\n  border-radius: md;\n  border-color: lightGray3;\n"])));
+export var ImageCell = function (_a) {
+    var _b;
+    var rowData = _a.rowData, column = _a.column, onClick = _a.onClick;
+    var value = get(column.name, rowData);
+    if ((_b = value === null || value === void 0 ? void 0 : value[0]) === null || _b === void 0 ? void 0 : _b.urlSmall) {
+        return (_jsx(ImageWrapper, { onClick: onClick, children: _jsx(StyledImage, { src: value[0].urlSmall }) }));
+    }
+    return null;
+};
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1 @@
+export declare const LinkInCell: import("styled-components").StyledComponent<typeof import("react-router-dom").Link, import("@xstyled/system").Theme, import("../../../../Elements/SimpleLink/SimpleLink").Props, never>;

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

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+import { SimpleLink } from '../../../../Elements/SimpleLink';
+export var LinkInCell = styled(SimpleLink)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: underline;\n"], ["\n  text-decoration: underline;\n"])));
+var templateObject_1;

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

@@ -0,0 +1,5 @@
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<any>;
+export declare const Wrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const RemoveCell: ({ rowData, onRowAction }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+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 { Trans } from '@lingui/react';
+import Icon from '../../../../Elements/Icon/Icon';
+export var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var Trigger = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  color: gray;\n  font-weight: bold;\n  font-size: 10px;\n  & .faIcon {\n    margin-right: 4px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  color: gray;\n  font-weight: bold;\n  font-size: 10px;\n  & .faIcon {\n    margin-right: 4px;\n  }\n"])));
+export var RemoveCell = function (_a) {
+    var _b;
+    var rowData = _a.rowData, onRowAction = _a.onRowAction;
+    var onRemoveClick = React.useCallback(function () {
+        if (onRowAction)
+            onRowAction(rowData.id, 'remove', rowData);
+    }, [rowData, onRowAction]);
+    if (((_b = rowData === null || rowData === void 0 ? void 0 : rowData.product) === null || _b === void 0 ? void 0 : _b.type) === 'virtual') {
+        return _jsx(Trans, { id: "dataGrid.columnLot.NA", message: "N/A" });
+    }
+    return (_jsx(Wrap, { children: _jsxs(Trigger, { onClick: onRemoveClick, children: [_jsx(Icon, { icon: "deleteX", size: "12px" }), _jsx(Trans, { id: "dataGrid.deleteItem", message: "Delete" })] }) }));
+};
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,7 @@
+type Props = {
+    canEdit: boolean;
+    onClick: () => void;
+    linkTo?: string;
+};
+export declare const RowActionsCell: ({ canEdit, onClick, linkTo }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import styled from '@xstyled/styled-components';
+import { isFunction } from 'lodash/fp';
+import { IconButtonInCell } from './IconButtonInCell';
+var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  width: 100%;\n\n  svg {\n    color: blue2;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  width: 100%;\n\n  svg {\n    color: blue2;\n  }\n"])));
+export var RowActionsCell = function (_a) {
+    var canEdit = _a.canEdit, onClick = _a.onClick, linkTo = _a.linkTo;
+    var handleOnClick = useCallback(function () {
+        if (isFunction(onClick)) {
+            onClick();
+        }
+    }, [onClick]);
+    var actions = useMemo(function () {
+        var actionOptions = [];
+        if (canEdit) {
+            actionOptions.push(_jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"));
+        }
+        else {
+            actionOptions.push(_jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read"));
+        }
+        return actionOptions;
+    }, [canEdit, handleOnClick, linkTo]);
+    return _jsx(Center, { onClick: handleOnClick, children: actions });
+};
+var templateObject_1;

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import get from 'lodash/fp/get';
+export var StringJoinCell = function (_a) {
+    var rowData = _a.rowData, column = _a.column;
+    var values = get(column.name, rowData);
+    return values && values.length ? _jsx("span", { className: "cell", children: values.join(', ') }) : null;
+};

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

@@ -0,0 +1,2 @@
+import { Props } from '../../../../Elements/Toggle/types';
+export declare const SwitchInCell: (props: Props) => JSX.Element;

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

@@ -0,0 +1,16 @@
+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 Toggle from '../../../../Elements/Toggle/Toggle';
+export var SwitchInCell = function (props) {
+    return _jsx(Toggle, __assign({}, props, { variant: "grid" }));
+};

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

@@ -0,0 +1,12 @@
+export { DateCell } from './Date';
+export { DateTimeCell } from './DateTime';
+export { StringJoinCell } from './StringJoin';
+export { BoolIconCell } from './BoolIcon';
+export { RemoveCell } from './RemoveItem';
+export { LinkInCell } from './LinkInCell';
+export { ButtonInCell } from './ButtonInCell';
+export { IconButtonInCell } from './IconButtonInCell';
+export { SwitchInCell } from './SwitchInCell';
+export { ImageCell } from './ImageCell';
+export { EnumInCell } from './EnumInCell';
+export { RowActionsCell } from './RowActionsCell';

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

@@ -0,0 +1,12 @@
+export { DateCell } from './Date';
+export { DateTimeCell } from './DateTime';
+export { StringJoinCell } from './StringJoin';
+export { BoolIconCell } from './BoolIcon';
+export { RemoveCell } from './RemoveItem';
+export { LinkInCell } from './LinkInCell';
+export { ButtonInCell } from './ButtonInCell';
+export { IconButtonInCell } from './IconButtonInCell';
+export { SwitchInCell } from './SwitchInCell';
+export { ImageCell } from './ImageCell';
+export { EnumInCell } from './EnumInCell';
+export { RowActionsCell } from './RowActionsCell';

package/ui/Blocks/CommonGrid/components/icons/ArrowSimple.d.ts

@@ -0,0 +1,2 @@
+declare const SvgArrowSimple: (props: any) => JSX.Element;
+export default SvgArrowSimple;

package/ui/Blocks/CommonGrid/components/icons/ArrowSimple.js

@@ -0,0 +1,14 @@
+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";
+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;

package/ui/Blocks/CommonGrid/components/icons/Edit.d.ts

@@ -0,0 +1,2 @@
+declare const Edit: (props: any) => JSX.Element;
+export default Edit;

package/ui/Blocks/CommonGrid/components/icons/Edit.js

@@ -0,0 +1,14 @@
+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";
+var Edit = function (props) { return (_jsx("svg", __assign({ "data-icon": "edit", viewBox: "0 0 16 16" }, props, { children: _jsx("path", { d: "M3.25 10.26l2.47 2.47 6.69-6.69-2.46-2.48-6.7 6.7zM.99 14.99l3.86-1.39-2.46-2.44-1.4 3.83zm12.25-14c-.48 0-.92.2-1.24.51l-1.44 1.44 2.47 2.47 1.44-1.44c.32-.32.51-.75.51-1.24.01-.95-.77-1.74-1.74-1.74z", fillRule: "evenodd" }) }))); };
+export default Edit;

package/ui/Blocks/CommonGrid/components/icons/EyeOpen.d.ts

@@ -0,0 +1,2 @@
+declare const EyeOpen: (props: any) => JSX.Element;
+export default EyeOpen;

package/ui/Blocks/CommonGrid/components/icons/EyeOpen.js

@@ -0,0 +1,14 @@
+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";
+var EyeOpen = function (props) { return (_jsx("svg", __assign({ "data-icon": "eye-open", viewBox: "0 0 16 16" }, props, { children: _jsx("path", { d: "M8.002 7.003a1.003 1.003 0 000 2.005 1.003 1.003 0 000-2.005zm7.988.972v-.02-.01-.02-.02a.675.675 0 00-.17-.36c-.509-.673-1.118-1.264-1.737-1.806-1.328-1.173-2.846-2.155-4.523-2.546a6.702 6.702 0 00-2.925-.06c-.889.18-1.738.541-2.546.992C2.84 4.837 1.692 5.81.694 6.902c-.18.211-.36.411-.53.632a.742.742 0 000 .932c.51.672 1.119 1.264 1.738 1.805 1.328 1.173 2.846 2.156 4.523 2.547.968.23 1.947.24 2.925.04.889-.18 1.738-.542 2.546-.993 1.248-.712 2.397-1.684 3.395-2.777.18-.2.37-.411.54-.632.09-.1.149-.23.169-.36v-.02-.02-.01-.02-.03c0-.01-.01-.01-.01-.02zm-7.988 3.038a2.998 2.998 0 01-2.995-3.008 2.998 2.998 0 012.995-3.008 2.998 2.998 0 012.996 3.008 2.998 2.998 0 01-2.996 3.008z", fillRule: "evenodd" }) }))); };
+export default EyeOpen;

package/ui/Blocks/CommonGrid/components/icons/Sorting.d.ts

@@ -0,0 +1,2 @@
+export declare const SortingUp: (props: any) => JSX.Element;
+export declare const SortingDown: (props: any) => JSX.Element;

package/ui/Blocks/CommonGrid/components/icons/Sorting.js

@@ -0,0 +1,14 @@
+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";
+export var SortingUp = function (props) { return (_jsx("svg", __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx("path", { d: "M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z", fillRule: "evenodd" }) }))); };
+export var SortingDown = function (props) { return (_jsx("svg", __assign({ viewBox: "0 0 16 16" }, props, { children: _jsx("path", { d: "M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z", fillRule: "evenodd" }) }))); };

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

@@ -0,0 +1,8 @@
+type Props = {
+    handleRowClick: (e: MouseEvent) => void;
+};
+export declare const useTimeMeasurement: ({ handleRowClick }: Props) => {
+    handleMouseDown: () => void;
+    handleMouseUp: (e: MouseEvent) => void;
+};
+export {};

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

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+export var useTimeMeasurement = function (_a) {
+    var handleRowClick = _a.handleRowClick;
+    var _b = useState(0), startTime = _b[0], setStartTime = _b[1];
+    var handleMouseDown = function () {
+        // Set the start time when mouse is pressed
+        var start = Date.now();
+        setStartTime(start);
+    };
+    var handleMouseUp = function (e) {
+        if (startTime !== 0) {
+            // Calculate the time difference between mouse down and up
+            var endTime = Date.now();
+            var duration = endTime - startTime;
+            if (duration > 0 && duration < 200) {
+                handleRowClick(e);
+            }
+            setStartTime(0);
+        }
+    };
+    return { handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp };
+};