@mailstep/design-system 0.8.27 → 0.8.28

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

@@ -1,52 +1,52 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import "react";
+import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styled from "@xstyled/styled-components";
-import get from "lodash/fp/get";
-var Wrapper = styled.div(_templateObject());
-var Tooltip = styled.div(_templateObject1());
-var HoverBubble = function HoverBubble(param) {
-    var rowData = param.rowData, column = param.column;
-    var value = get(column.name, rowData);
-    if (value) {
-        return /* @__PURE__ */ jsxs(Wrapper, {
-            children: [
-                /* @__PURE__ */ jsx(Tooltip, {
-                    children: /* @__PURE__ */ jsx("div", {
-                        className: "tooltip",
-                        children: value
-                    })
-                }),
-                value
-            ]
-        });
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.tsx
+const Wrapper = styled$1.div`
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  :hover {
+    cursor: pointer;
+    .tooltip {
+      display: block;
     }
-    return null;
+  }
+`;
+const Tooltip = styled$1.div`
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  margin-bottom: 2;
+
+  div {
+    display: none;
+    position: absolute;
+    background-color: white;
+    color: gray;
+    border-color: gray;
+    border: 1px solid;
+    border-radius: md;
+    padding: 2 3;
+    margin: 1;
+    z-index: 1;
+    box-shadow: tooltipBoxShadow;
+    transform: translateY(-100%);
+
+    max-width: 400px;
+    line-break: anywhere;
+    white-space: initial;
+  }
+`;
+const HoverBubble = ({ rowData, column }) => {
+	const value = get(column.name, rowData);
+	if (value) return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsx(Tooltip, { children: /* @__PURE__ */ jsx("div", {
+		className: "tooltip",
+		children: value
+	}) }), value] });
+	return null;
 };
+//#endregion
 export { HoverBubble };

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

@@ -1,36 +1,34 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { Link as ReactLink } from "react-router-dom";
-import Icon from "../../../../Elements/Icon/Icon";
-import Spinner from "../../../../Elements/Spinner/Spinner";
+import Icon from "../../../../Elements/Icon/Icon.js";
+import { Spinner } from "../../../../Elements/Spinner/Spinner.js";
+import "react";
 import { x } from "@xstyled/styled-components";
-var IconButtonInCell = function IconButtonInCell(param) {
-    var icon = param.icon, isLoading = param.isLoading, onClick = param.onClick, linkTo = param.linkTo;
-    return /* @__PURE__ */ jsx(Fragment, {
-        children: isLoading ? /* @__PURE__ */ jsx(Spinner, {
-            variant: "sm"
-        }) : linkTo ? /* @__PURE__ */ jsx(ReactLink, {
-            to: linkTo,
-            "data-cy": "".concat(icon !== null && icon !== void 0 ? icon : "", "IconBtn"),
-            children: /* @__PURE__ */ jsx(Icon, {
-                icon: icon || "warning",
-                size: "16px",
-                fill: "blue2"
-            })
-        }) : /* @__PURE__ */ jsx(x.span, {
-            onClick: onClick,
-            "data-cy": "".concat(icon !== null && icon !== void 0 ? icon : "", "IconBtn"),
-            cursor: "pointer",
-            h: "100%",
-            w: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            children: /* @__PURE__ */ jsx(Icon, {
-                icon: icon || "warning",
-                size: "16px",
-                fill: "blue2"
-            })
-        })
-    });
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.tsx
+const IconButtonInCell = ({ icon, isLoading, onClick, linkTo }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsx(Spinner, { variant: "sm" }) : linkTo ? /* @__PURE__ */ jsx(Link, {
+		to: linkTo,
+		"data-cy": `${icon ?? ""}IconBtn`,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: icon || "warning",
+			size: "16px",
+			fill: "blue2"
+		})
+	}) : /* @__PURE__ */ jsx(x.span, {
+		onClick,
+		"data-cy": `${icon ?? ""}IconBtn`,
+		cursor: "pointer",
+		h: "100%",
+		w: "100%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: icon || "warning",
+			size: "16px",
+			fill: "blue2"
+		})
+	}) });
 };
+//#endregion
 export { IconButtonInCell };

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

@@ -1,53 +1,31 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        "\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  max-width: 100%;\n  height: 30px;\n  border: 1x solid;\n  border-radius: md;\n  border-color: lightGray3;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import Image from "../../../../Elements/Image/Image.js";
+import "react";
+import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
-import Image from "../../../../Elements/Image/Image";
-import styled from "@xstyled/styled-components";
-import get from "lodash/fp/get";
-var ImageWrapper = styled.div(_templateObject(), function(param) {
-    var onClick = param.onClick;
-    return onClick ? "cursor: pointer;" : "";
-});
-var StyledImage = styled(Image)(_templateObject1());
-var ImageCell = function ImageCell(param) {
-    var rowData = param.rowData, column = param.column, onClick = param.onClick;
-    var _value_;
-    var value = get(column.name, rowData);
-    if (value === null || value === void 0 ? void 0 : (_value_ = value[0]) === null || _value_ === void 0 ? void 0 : _value_.urlSmall) {
-        return /* @__PURE__ */ jsx(ImageWrapper, {
-            onClick: onClick,
-            children: /* @__PURE__ */ jsx(StyledImage, {
-                src: value[0].urlSmall
-            })
-        });
-    }
-    return null;
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/ImageCell.tsx
+const ImageWrapper = styled$1.div`
+  ${({ onClick }) => onClick ? "cursor: pointer;" : ""}
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledImage = styled$1(Image)`
+  max-width: 100%;
+  height: 30px;
+  border: 1x solid;
+  border-radius: md;
+  border-color: lightGray3;
+`;
+const ImageCell = ({ rowData, column, onClick }) => {
+	const value = get(column.name, rowData);
+	if (value?.[0]?.urlSmall) return /* @__PURE__ */ jsx(ImageWrapper, {
+		onClick,
+		children: /* @__PURE__ */ jsx(StyledImage, { src: value[0].urlSmall })
+	});
+	return null;
 };
+//#endregion
 export { ImageCell };

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

@@ -1,23 +1,9 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  text-decoration: underline;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "@xstyled/styled-components";
-import { SimpleLink } from "../../../../Elements/SimpleLink";
-var LinkInCell = styled(SimpleLink)(_templateObject());
+import StyledLink from "../../../../Elements/SimpleLink/SimpleLink.js";
+import "../../../../Elements/SimpleLink/index.js";
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/LinkInCell.tsx
+const LinkInCell = styled$1(StyledLink)`
+  text-decoration: underline;
+`;
+//#endregion
 export { LinkInCell };

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

@@ -1,67 +1,41 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  width: 100%;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "../../../../Elements/Icon/Icon.js";
 import React from "react";
-import Icon from "../../../../Elements/Icon/Icon";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
-import styled from "@xstyled/styled-components";
-var Wrap = styled.div(_templateObject());
-var Trigger = styled.div(_templateObject1());
-var RemoveCell = function RemoveCell(param) {
-    var rowData = param.rowData, onRowAction = param.onRowAction;
-    var _rowData_product;
-    var onRemoveClick = React.useCallback(function() {
-        onRowAction === null || onRowAction === void 0 ? void 0 : onRowAction(rowData.id, "remove", rowData);
-    }, [
-        rowData,
-        onRowAction
-    ]);
-    if ((rowData === null || rowData === void 0 ? void 0 : (_rowData_product = rowData.product) === null || _rowData_product === void 0 ? void 0 : _rowData_product.type) === "virtual") {
-        return /* @__PURE__ */ jsx(Trans, {
-            id: "dataGrid.columnLot.NA",
-            message: "N/A"
-        });
-    }
-    return /* @__PURE__ */ jsx(Wrap, {
-        children: /* @__PURE__ */ jsxs(Trigger, {
-            onClick: onRemoveClick,
-            children: [
-                /* @__PURE__ */ jsx(Icon, {
-                    icon: "deleteX",
-                    size: "12px"
-                }),
-                /* @__PURE__ */ jsx(Trans, {
-                    id: "dataGrid.deleteItem",
-                    message: "Delete"
-                })
-            ]
-        })
-    });
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/RemoveItem.tsx
+const Wrap = styled$1.div`
+  width: 100%;
+`;
+const Trigger = styled$1.div`
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  color: gray;
+  font-weight: bold;
+  font-size: 10px;
+  & .faIcon {
+    margin-right: 4px;
+  }
+`;
+const RemoveCell = ({ rowData, onRowAction }) => {
+	const onRemoveClick = React.useCallback(() => {
+		onRowAction?.(rowData.id, "remove", rowData);
+	}, [rowData, onRowAction]);
+	if (rowData?.product?.type === "virtual") return /* @__PURE__ */ jsx(Trans, {
+		id: "dataGrid.columnLot.NA",
+		message: "N/A"
+	});
+	return /* @__PURE__ */ jsx(Wrap, { children: /* @__PURE__ */ jsxs(Trigger, {
+		onClick: onRemoveClick,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "deleteX",
+			size: "12px"
+		}), /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.deleteItem",
+			message: "Delete"
+		})]
+	}) });
 };
+//#endregion
 export { RemoveCell, Trigger, Wrap };

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

@@ -1,117 +1,79 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import Checkbox_default from "../../../../Forms/Checkbox/index.js";
+import { IconButtonInCell } from "./IconButtonInCell.js";
 import { useCallback, useMemo } from "react";
-import Checkbox from "../../../../Forms/Checkbox";
 import { x } from "@xstyled/styled-components";
-import { isFunction } from "lodash/fp";
-import { IconButtonInCell } from "./IconButtonInCell";
-var RowActionsCell = function RowActionsCell(param) {
-    var actionColumnDefinition = param.actionColumnDefinition, rowData = param.rowData, addRowNumbers = param.addRowNumbers, rowIndex = param.rowIndex, checkedRows = param.checkedRows, withCheckboxes = param.withCheckboxes, onUxChange = param.onUxChange, onRowAction = param.onRowAction;
-    var rowDataId = rowData === null || rowData === void 0 ? void 0 : rowData.id;
-    var canEdit = isFunction(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit) ? actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit(rowData) : actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit;
-    var canRead = isFunction(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead) ? actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead(rowData) : actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead;
-    var onClick = useCallback(function() {
-        var action = canEdit ? "row_edit" : "row_read";
-        onRowAction === null || onRowAction === void 0 ? void 0 : onRowAction(rowData === null || rowData === void 0 ? void 0 : rowData.id, action, rowData);
-    }, [
-        canEdit,
-        onRowAction,
-        rowData
-    ]);
-    var linkTo = useMemo(function() {
-        var _actionColumnDefinition_createLink;
-        var mode = canEdit ? "edit" : "read";
-        return actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : (_actionColumnDefinition_createLink = actionColumnDefinition.createLink) === null || _actionColumnDefinition_createLink === void 0 ? void 0 : _actionColumnDefinition_createLink.call(actionColumnDefinition, {
-            mode: mode,
-            id: rowData === null || rowData === void 0 ? void 0 : rowData.id
-        });
-    }, [
-        canEdit,
-        rowData === null || rowData === void 0 ? void 0 : rowData.id
-    ]);
-    var isChecked = !!(checkedRows === null || checkedRows === void 0 ? void 0 : checkedRows[rowDataId]);
-    var onCheckboxChange = useCallback(function() {
-        var newCheckedRows = _object_spread({}, checkedRows || {});
-        if (!isChecked) {
-            newCheckedRows[rowDataId] = true;
-        } else {
-            delete newCheckedRows[rowDataId];
-        }
-        onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange("checkedRows", newCheckedRows);
-    }, [
-        onUxChange,
-        isChecked,
-        rowDataId,
-        checkedRows
-    ]);
-    var handleOnClick = useCallback(function() {
-        if (isFunction(onClick)) {
-            onClick();
-        }
-    }, [
-        onClick
-    ]);
-    return /* @__PURE__ */ jsxs(x.div, {
-        w: "100%",
-        display: "flex",
-        gap: "16px",
-        pl: "4px",
-        pr: "4px",
-        children: [
-            withCheckboxes && /* @__PURE__ */ jsx(x.div, {
-                w: "100%",
-                children: /* @__PURE__ */ jsx(Checkbox, {
-                    checked: isChecked,
-                    onChange: onCheckboxChange,
-                    label: ""
-                })
-            }),
-            addRowNumbers && /* @__PURE__ */ jsx(x.div, {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                pr: "8px",
-                w: "100%",
-                children: rowIndex
-            }),
-            canEdit && /* @__PURE__ */ jsx(IconButtonInCell, {
-                icon: "pen",
-                onClick: handleOnClick,
-                linkTo: linkTo
-            }, "edit"),
-            !canEdit && canRead && /* @__PURE__ */ jsx(IconButtonInCell, {
-                icon: "chevronRight",
-                onClick: handleOnClick,
-                linkTo: linkTo
-            }, "read")
-        ]
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isFunction } from "lodash/fp.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.tsx
+const RowActionsCell = ({ actionColumnDefinition, rowData, addRowNumbers, rowIndex, checkedRows, withCheckboxes, onUxChange, onRowAction }) => {
+	const rowDataId = rowData?.id;
+	const canEdit = isFunction(actionColumnDefinition?.canRowEdit) ? actionColumnDefinition?.canRowEdit(rowData) : actionColumnDefinition?.canRowEdit;
+	const canRead = isFunction(actionColumnDefinition?.canRowRead) ? actionColumnDefinition?.canRowRead(rowData) : actionColumnDefinition?.canRowRead;
+	const onClick = useCallback(() => {
+		const action = canEdit ? "row_edit" : "row_read";
+		onRowAction?.(rowData?.id, action, rowData);
+	}, [
+		canEdit,
+		onRowAction,
+		rowData
+	]);
+	const linkTo = useMemo(() => {
+		const mode = canEdit ? "edit" : "read";
+		return actionColumnDefinition?.createLink?.({
+			mode,
+			id: rowData?.id
+		});
+	}, [canEdit, rowData?.id]);
+	const isChecked = !!checkedRows?.[rowDataId];
+	const onCheckboxChange = useCallback(() => {
+		const newCheckedRows = { ...checkedRows || {} };
+		if (!isChecked) newCheckedRows[rowDataId] = true;
+		else delete newCheckedRows[rowDataId];
+		onUxChange?.("checkedRows", newCheckedRows);
+	}, [
+		onUxChange,
+		isChecked,
+		rowDataId,
+		checkedRows
+	]);
+	const handleOnClick = useCallback(() => {
+		if (isFunction(onClick)) onClick();
+	}, [onClick]);
+	return /* @__PURE__ */ jsxs(x.div, {
+		w: "100%",
+		display: "flex",
+		gap: "16px",
+		pl: "4px",
+		pr: "4px",
+		children: [
+			withCheckboxes && /* @__PURE__ */ jsx(x.div, {
+				w: "100%",
+				children: /* @__PURE__ */ jsx(Checkbox_default, {
+					checked: isChecked,
+					onChange: onCheckboxChange,
+					label: ""
+				})
+			}),
+			addRowNumbers && /* @__PURE__ */ jsx(x.div, {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				pr: "8px",
+				w: "100%",
+				children: rowIndex
+			}),
+			canEdit && /* @__PURE__ */ jsx(IconButtonInCell, {
+				icon: "pen",
+				onClick: handleOnClick,
+				linkTo
+			}, "edit"),
+			!canEdit && canRead && /* @__PURE__ */ jsx(IconButtonInCell, {
+				icon: "chevronRight",
+				onClick: handleOnClick,
+				linkTo
+			}, "read")
+		]
+	});
 };
+//#endregion
 export { RowActionsCell };

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

@@ -1,10 +1,10 @@
+import "react";
 import { jsx } from "react/jsx-runtime";
-import get from "lodash/fp/get";
-var StringJoinCell = function StringJoinCell(param) {
-    var rowData = param.rowData, column = param.column;
-    var values = get(column.name, rowData);
-    return (values === null || values === void 0 ? void 0 : values.length) ? /* @__PURE__ */ jsx("span", {
-        children: values.join(", ")
-    }) : null;
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/StringJoin.tsx
+const StringJoinCell = ({ rowData, column }) => {
+	const values = get(column.name, rowData);
+	return values?.length ? /* @__PURE__ */ jsx("span", { children: values.join(", ") }) : null;
 };
+//#endregion
 export { StringJoinCell };