@mailstep/design-system 0.8.26-beta.3 → 0.8.26-beta.4

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.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.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.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.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.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.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.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.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 };

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

@@ -0,0 +1,60 @@
+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 Toggle from "../../../../Elements/Toggle/Toggle";
+var SwitchInCell = function SwitchInCell(props) {
+    return /* @__PURE__ */ jsx(Toggle, _object_spread_props(_object_spread({}, props), {
+        variant: "grid"
+    }));
+};
+export { SwitchInCell };

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

@@ -0,0 +1,85 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import get from "lodash/fp/get";
+import { SwitchInCell } from "./SwitchInCell";
+var ToggleCell = function ToggleCell(param) {
+    var rowData = param.rowData, column = param.column, onRowAction = param.onRowAction;
+    var _column_passProps;
+    var inverse = !!(column === null || column === void 0 ? void 0 : (_column_passProps = column.passProps) === null || _column_passProps === void 0 ? void 0 : _column_passProps.inverse);
+    var rawValue = get(column.name, rowData);
+    var value = inverse ? !rawValue : !!rawValue;
+    var actionName = "toggle_".concat(column.name);
+    var _React_useState = _sliced_to_array(React.useState(value), 2), isChecked = _React_useState[0], setIsChecked = _React_useState[1];
+    React.useEffect(function() {
+        setIsChecked(value);
+    }, [
+        rowData.id
+    ]);
+    var onSwitchChange = useCallback(function() {
+        if (!onRowAction) return;
+        var ret = onRowAction(rowData.id, actionName, !isChecked, rowData);
+        if (ret) {
+            ret.then(function() {
+                setIsChecked(!isChecked);
+            });
+        } else {
+            setIsChecked(!isChecked);
+        }
+    }, [
+        onRowAction,
+        rowData.id,
+        actionName,
+        isChecked
+    ]);
+    return /* @__PURE__ */ jsx(SwitchInCell, {
+        checked: isChecked,
+        onChange: onSwitchChange
+    });
+};
+export { ToggleCell };

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

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