@mailstep/design-system 0.8.26 → 0.8.27

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const ButtonInCell: FC<Props>;
 export {};

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

@@ -0,0 +1,61 @@
+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;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { jsx } from "react/jsx-runtime";
+import Button from "../../../../Elements/Button/Button";
+var ButtonInCell = function ButtonInCell(props) {
+    return /* @__PURE__ */ jsx(Button, _object_spread_props(_object_spread({}, props), {
+        appearance: "primary",
+        variant: "link"
+    }));
+};
+export { ButtonInCell };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const DateCell: FC<Props>;
 export {};

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

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

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const DateTimeCell: FC<Props>;
 export {};

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+import get from "lodash/fp/get";
+var defaultProps = {
+    dateTimeFormat: "dd. MM. yyyy HH:mm"
+};
+var DateTimeCell = function DateTimeCell(param) {
+    var rowData = param.rowData, column = param.column;
+    var _ref;
+    var value = get(column.name, rowData);
+    var dateTimeFormat = ((_ref = column === null || column === void 0 ? void 0 : column.passProps) !== null && _ref !== void 0 ? _ref : defaultProps).dateTimeFormat;
+    return value ? /* @__PURE__ */ jsx("span", {
+        children: DateTime.fromISO(value).toFormat(dateTimeFormat)
+    }) : null;
+};
+export { DateTimeCell };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { FlagAppearanceType } from '../../../../Elements/HighlightBox/HighlightBox';
-
+import type { FC } from 'react';
+import type { FlagAppearanceType } from '../../../../Elements/HighlightBox/HighlightBox';
 type Props = {
     value: string;
     appearanceMap: Record<string, FlagAppearanceType>;

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

@@ -0,0 +1,103 @@
+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;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+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  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import HighlightBox from "../../../../Elements/HighlightBox";
+import styled from "@xstyled/styled-components";
+var Center = styled.div(_templateObject());
+var EnumInCell = function EnumInCell(param) {
+    var value = param.value, enumObj = param.enumObj, appearanceMap = param.appearanceMap, size = param.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 /* @__PURE__ */ jsx(Center, {
+        "data-propagation": "true",
+        children: /* @__PURE__ */ jsx(HighlightBox, _object_spread_props(_object_spread({}, coloringProp), {
+            size: size,
+            prefix: "grid",
+            children: finalLabel
+        }))
+    });
+};
+export { EnumInCell };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import type { FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const HoverBubble: FC<Props>;
 export {};

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

@@ -0,0 +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 { 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
+            ]
+        });
+    }
+    return null;
+};
+export { HoverBubble };

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

@@ -1,5 +1,4 @@
-import { default as React, FC } from 'react';
-
+import React, { type FC } from 'react';
 type Props = {
     icon?: string;
     isLoading?: boolean;

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

@@ -0,0 +1,36 @@
+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 { 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"
+            })
+        })
+    });
+};
+export { IconButtonInCell };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}> & {
     onClick?: () => void;
 };

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

@@ -0,0 +1,53 @@
+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 { 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;
+};
+export { ImageCell };

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

@@ -1 +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>;
+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,23 @@
+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());
+export { LinkInCell };

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

@@ -1,8 +1,7 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import type { FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<any>;
-export declare const Wrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Trigger: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Wrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Trigger: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const RemoveCell: FC<Props>;
 export {};

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

@@ -0,0 +1,67 @@
+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 React from "react";
+import Icon from "../../../../Elements/Icon/Icon";
+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"
+                })
+            ]
+        })
+    });
+};
+export { RemoveCell, Trigger, Wrap };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps, ActionColumn, UxState, GridActionsType } from '../../types';
-
+import type { FC } from 'react';
+import type { DataCellProps, ActionColumn, UxState, GridActionsType } from '../../types';
 type Props = DataCellProps<{
     id: string;
 }> & {

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

@@ -0,0 +1,117 @@
+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 { 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")
+        ]
+    });
+};
+export { RowActionsCell };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const StringJoinCell: FC<Props>;
 export {};

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

@@ -0,0 +1,10 @@
+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;
+};
+export { StringJoinCell };