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

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

@@ -0,0 +1,200 @@
+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 _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+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);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n\n  & > * {\n    margin-left: 10px;\n  }\n"
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { Button } from "../../../../Elements/Button";
+import { useGridActionTrigger } from "../../hooks/useGridActionTrigger";
+import { useToggleAllCheckbox } from "../../hooks/useToggleAllCheckbox";
+import ButtonMore from "../ButtonMore/ButtonMore";
+import { i18n } from "@lingui/core";
+import { Trans } from "@lingui/react";
+import styled from "@xstyled/styled-components";
+var Wrap = styled.div(_templateObject());
+var ActionsWrap = styled.div(_templateObject1());
+var StyledText = styled.span(_templateObject2());
+var ContentWrap = styled.div(_templateObject3());
+var ButtonsWrap = styled.div(_templateObject4());
+var ActionHead = function ActionHead(param) {
+    var gridActions = param.gridActions, gridSelectors = param.gridSelectors, actionOptions = param.actionOptions, onBatchAction = param.onBatchAction, rowsData = param.rowsData, processCheckedValues = param.processCheckedValues, processCheckedValuesTitle = param.processCheckedValuesTitle;
+    var handleUxChange = (gridActions || {}).handleUxChange;
+    var _ref = gridSelectors || {}, _ref_uxState = _ref.uxState, uxState = _ref_uxState === void 0 ? {} : _ref_uxState;
+    var _useToggleAllCheckbox = _sliced_to_array(useToggleAllCheckbox(rowsData, uxState, handleUxChange), 2), checked = _useToggleAllCheckbox[0], toggleCheckbox = _useToggleAllCheckbox[1];
+    var _useGridActionTrigger = _sliced_to_array(useGridActionTrigger(rowsData, uxState, actionOptions, onBatchAction), 2), enabledActions = _useGridActionTrigger[0], onSubmit = _useGridActionTrigger[1];
+    var checkedRowsCount = Object.keys((uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows) || []).length;
+    var checkAll = useCallback(function() {
+        if (!checked) {
+            toggleCheckbox();
+        }
+    }, [
+        checked,
+        toggleCheckbox
+    ]);
+    var actionsOptions = useMemo(function() {
+        if (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.length) {
+            return actionOptions.map(function(option) {
+                return {
+                    title: option.label,
+                    onClick: function onClick() {
+                        onSubmit(option.value);
+                    },
+                    link: "#"
+                };
+            });
+        }
+        return [];
+    }, [
+        actionOptions,
+        onSubmit
+    ]);
+    return /* @__PURE__ */ jsx(Wrap, {
+        children: checkedRowsCount > 0 && /* @__PURE__ */ jsx(ActionsWrap, {
+            children: /* @__PURE__ */ jsxs(ContentWrap, {
+                children: [
+                    /* @__PURE__ */ jsx(StyledText, {
+                        children: i18n._({
+                            id: "dataGrid.checkedRowsCount",
+                            message: "Selected {checkedRowsCount} items",
+                            values: {
+                                checkedRowsCount: checkedRowsCount
+                            }
+                        })
+                    }),
+                    /* @__PURE__ */ jsxs(ButtonsWrap, {
+                        children: [
+                            /* @__PURE__ */ jsx(Button, {
+                                type: "button",
+                                onClick: checkAll,
+                                appearance: "secondary",
+                                variant: "default",
+                                "data-cy": "checkAllBtn",
+                                disabled: checked,
+                                children: /* @__PURE__ */ jsx(Trans, {
+                                    id: "dataGrid.checkAll",
+                                    message: "Check all"
+                                })
+                            }),
+                            processCheckedValues && /* @__PURE__ */ jsx(Button, {
+                                type: "button",
+                                onClick: processCheckedValues,
+                                appearance: "primary",
+                                variant: "default",
+                                "data-cy": "exportBtn",
+                                disabled: !rowsData.length,
+                                children: processCheckedValuesTitle || /* @__PURE__ */ jsx(Trans, {
+                                    id: "dataGrid.actionOptions.export",
+                                    message: "Export"
+                                })
+                            }),
+                            (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.length) && /* @__PURE__ */ jsx(ButtonMore, {
+                                items: actionsOptions,
+                                disabled: !enabledActions.length || !rowsData.length,
+                                dropdownPosition: "top"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+};
+var ActionHead_default = ActionHead;
+export { ActionHead_default as default };

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.js

@@ -0,0 +1,51 @@
+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  position: relative;\n  left: 0;\n  top: 3px;\n  display: flex;\n  flex-direction: column;\n  padding: 2;\n  width: 100%;\n  background-color: ",
+        ";\n  box-shadow: ",
+        ";\n  min-width: 8.9rem;\n  font-size: 12px;\n  font-weight: normal;\n  border-radius: 10px;\n  z-index: 1;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  padding: 2 2;\n  border-radius: 6px;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        ";\n    color: ",
+        ";\n    font-weight: bold;\n  }\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx } from "react/jsx-runtime";
+import styled from "@xstyled/styled-components";
+import { th } from "@xstyled/system";
+var StyledDropdownWrap = styled.div(_templateObject(), th.color("white"), th.shadow("dropShadow"));
+var StyledDropdownItem = styled.li(_templateObject1(), th.color("bgLightGray1"), th.color("typoPrimary"));
+var ActionDropdownMenu = function ActionDropdownMenu(param) {
+    var items = param.items;
+    return /* @__PURE__ */ jsx(StyledDropdownWrap, {
+        children: items.map(function(item, index) {
+            var _item_onClick;
+            return /* @__PURE__ */ jsx(StyledDropdownItem, {
+                onClick: (_item_onClick = item.onClick) !== null && _item_onClick !== void 0 ? _item_onClick : void 0,
+                children: item.title
+            }, index);
+        })
+    });
+};
+var ActionDropdownMenu_default = ActionDropdownMenu;
+export { ActionDropdownMenu_default as default };

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownSelect.js

@@ -0,0 +1,167 @@
+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 _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+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);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 1 2;\n  min-width: 9rem;\n  height: 28px;\n  background-color: ",
+        ";\n  color: ",
+        ";\n  border: slim;\n  border-color: ",
+        ";\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: ",
+        ";\n  transition: 0.2s;\n  &:not(:disabled):hover {\n    color: ",
+        ";\n    border-color: ",
+        ";\n  }\n  p {\n    margin: 0;\n    margin-right: auto;\n    padding-right: 36px;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  color: ",
+        ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(",
+        ");\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { memo, useRef } from "react";
+import Icon from "../../../../../Elements/Icon/Icon";
+import Popover from "../../../../Popover";
+import { Trans } from "@lingui/react";
+import styled from "@xstyled/styled-components";
+import { th } from "@xstyled/system";
+import ActionDropdownMenu from "./ActionDropdownMenu";
+var Content = styled.div(_templateObject(), th.color("white"), function(param) {
+    var $isDisabled = param.$isDisabled;
+    return $isDisabled ? th.color("lightGray7") : th.color("lightGray5");
+}, function(param) {
+    var $isDisabled = param.$isDisabled, $isOpened = param.$isOpened;
+    return $isDisabled ? th.color("lightGray7") : $isOpened ? th.color("blue2") : th.color("lightGray5");
+}, function(param) {
+    var $isDisabled = param.$isDisabled;
+    return $isDisabled ? "not-allowed" : "pointer";
+}, th.color("gray1"), th.color("gray1"));
+var IconWrap = styled.div(_templateObject1(), function(param) {
+    var $isDisabled = param.$isDisabled, $isOpened = param.$isOpened;
+    return $isDisabled ? th.color("lightGray6") : $isOpened ? th.color("blue2") : th.color("gray1");
+}, function(param) {
+    var $isOpened = param.$isOpened;
+    return $isOpened ? "180deg" : 0;
+});
+var ActionDropdownSelect = function ActionDropdownSelect(param) {
+    var options = param.options, onSelect = param.onSelect, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled;
+    var _React_useState = _sliced_to_array(React.useState(false), 2), showDropdownMenu = _React_useState[0], setShowDropdownMenu = _React_useState[1];
+    var toggleDropdownMenu = React.useCallback(function() {
+        setShowDropdownMenu(function(prev) {
+            return !prev;
+        });
+    }, []);
+    var handleSelectItem = React.useCallback(function(item) {
+        setShowDropdownMenu(false);
+        onSelect(item.value);
+    }, [
+        onSelect
+    ]);
+    var items = options.map(function(item) {
+        return {
+            title: item.label,
+            onClick: function onClick() {
+                handleSelectItem(item);
+            },
+            link: "#"
+        };
+    });
+    var ref = useRef(null);
+    return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+            /* @__PURE__ */ jsxs(Content, {
+                $isDisabled: disabled,
+                $isOpened: showDropdownMenu,
+                onClick: toggleDropdownMenu,
+                ref: ref,
+                children: [
+                    /* @__PURE__ */ jsx("p", {
+                        children: /* @__PURE__ */ jsx(Trans, {
+                            id: "dataGrid.buttonActions",
+                            message: "Actions"
+                        })
+                    }),
+                    /* @__PURE__ */ jsx(IconWrap, {
+                        $isDisabled: disabled,
+                        $isOpened: showDropdownMenu,
+                        children: /* @__PURE__ */ jsx(Icon, {
+                            icon: "goDown"
+                        })
+                    })
+                ]
+            }),
+            showDropdownMenu && !disabled && (items === null || items === void 0 ? void 0 : items.length) > 0 && /* @__PURE__ */ jsx(Popover, {
+                parentRef: ref,
+                onClose: toggleDropdownMenu,
+                placement: "bottom-start",
+                children: /* @__PURE__ */ jsx(ActionDropdownMenu, {
+                    items: items
+                })
+            })
+        ]
+    });
+};
+var ActionDropdownSelect_default = memo(ActionDropdownSelect);
+export { ActionDropdownSelect_default as default };

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

@@ -0,0 +1,3 @@
+import ActionHead from "./ActionHead";
+var ActionHead_default = ActionHead;
+export { ActionHead_default as default };

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

@@ -0,0 +1,126 @@
+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 _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+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);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  width: fit-content;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  position: absolute;\n  top: ",
+        ";\n  bottom: ",
+        ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import Button from "../../../../Elements/Button/Button";
+import DropdownMenu from "../../../../Elements/DropdownMenu";
+import { useClickOutside } from "../../../Modal/hooks/useClickOutside";
+import styled from "@xstyled/styled-components";
+var ButtonWrapper = styled.div(_templateObject());
+var StyledDropdownMenu = styled(DropdownMenu)(_templateObject1(), function(param) {
+    var dropdownPosition = param.dropdownPosition;
+    return !dropdownPosition || dropdownPosition === "bottom" ? "calc(100% + 8px)" : "auto";
+}, function(param) {
+    var dropdownPosition = param.dropdownPosition;
+    return dropdownPosition === "top" ? "calc(100% + 13px)" : "auto";
+});
+var ButtonMore = function ButtonMore(param) {
+    var items = param.items, disabled = param.disabled, dropdownPosition = param.dropdownPosition;
+    var _useState = _sliced_to_array(useState(false), 2), actionsVisible = _useState[0], setActionsVisible = _useState[1];
+    var onClose = useCallback(function() {
+        setActionsVisible(false);
+    }, []);
+    var ref = useClickOutside({
+        onClose: onClose
+    });
+    var handleClick = useCallback(function() {
+        setActionsVisible(!actionsVisible);
+    }, [
+        actionsVisible
+    ]);
+    return /* @__PURE__ */ jsxs(ButtonWrapper, {
+        ref: ref,
+        children: [
+            /* @__PURE__ */ jsx(Button, {
+                onClick: handleClick,
+                icon: "ellipsisVertical",
+                appearance: "secondary",
+                variant: "icon",
+                type: "button",
+                "data-cy": "gridActionBtn",
+                disabled: disabled
+            }),
+            /* @__PURE__ */ jsx(StyledDropdownMenu, {
+                showMenu: actionsVisible,
+                items: items,
+                dropdownPosition: dropdownPosition
+            })
+        ]
+    });
+};
+var ButtonMore_default = ButtonMore;
+export { ButtonMore_default as default };

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

@@ -0,0 +1,3 @@
+import ButtonMore from "./ButtonMore";
+var ButtonMore_default = ButtonMore;
+export { ButtonMore_default as default };

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

@@ -0,0 +1,115 @@
+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 React from "react";
+import { useAddFilter } from "../hooks/useAddFilter";
+import { createFilterType, getStickyCollClassNames, getCellSizeProps, getGroupClassNames } from "../utils";
+import { x } from "@xstyled/styled-components";
+import OverlayComponent from "./FilterDropdown";
+import { Cell } from "./Table";
+var ColumnFilterCell = function ColumnFilterCell(param) {
+    var onChange = param.onChange, value = param.value, others = param.others, displayColumnWidth = param.displayColumnWidth, filters = param.filters, columnDefinition = param.column, group = param.group, comparators = param.comparators, actionColumn = param.actionColumn, rowsData = param.rowsData, uxState = param.uxState, handleUxChange = param.handleUxChange, onAsyncLoadFilterOptions = param.onAsyncLoadFilterOptions;
+    var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
+    var handleAddFilter = useAddFilter(onChange);
+    var handleChange = React.useCallback(function(event, others2) {
+        handleAddFilter((event === null || event === void 0 ? void 0 : event.target) ? event.target.value : event, columnDefinition, others2);
+    }, [
+        handleAddFilter,
+        columnDefinition
+    ]);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!columnDefinition.sticky, columnDefinition.stickTo), " ").concat(getGroupClassNames(group));
+    if (!columnDefinition.filtering) {
+        return /* @__PURE__ */ jsx(Cell, _object_spread({
+            className: cellClassName
+        }, cellSizeProps));
+    }
+    var filterType = createFilterType(columnDefinition);
+    var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
+    var defaultComparators = comparators === null || comparators === void 0 ? void 0 : comparators[filterType];
+    var RenderComponent = filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent;
+    if (!RenderComponent) {
+        console.error("ERROR, using unknown filter type ".concat(filterType));
+        return /* @__PURE__ */ jsx(x.div, {
+            children: /* @__PURE__ */ jsx("span", {
+                children: "".concat(filterType, " filter")
+            })
+        });
+    }
+    return /* @__PURE__ */ jsx(Cell, _object_spread_props(_object_spread({
+        className: cellClassName
+    }, cellSizeProps), {
+        children: /* @__PURE__ */ jsx(x.div, {
+            children: /* @__PURE__ */ jsx(RenderComponent, _object_spread_props(_object_spread({
+                asyncLoadKey: columnDefinition.asyncLoadKey,
+                "data-test": columnDefinition.name,
+                name: columnDefinition.name,
+                onChange: handleChange,
+                value: value,
+                others: others,
+                OverlayComponent: OverlayComponent,
+                comparators: defaultComparators,
+                actionColumn: actionColumn,
+                rowsData: rowsData,
+                uxState: uxState,
+                handleUxChange: handleUxChange,
+                onAsyncLoadFilterOptions: onAsyncLoadFilterOptions
+            }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, filterType == "options" && {
+                options: columnDefinition.filterOptions
+            }), {
+                columnWidth: cellSizeProps === null || cellSizeProps === void 0 ? void 0 : cellSizeProps.flexBasis
+            }))
+        })
+    }));
+};
+var ColumnFilterCell_default = ColumnFilterCell;
+export { ColumnFilterCell_default as default };