@mailstep/design-system 0.6.2-beta.8 → 0.6.2-beta.9

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

@@ -1,73 +1,45 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var system_1 = require("@xstyled/system");
-var react_2 = require("@lingui/react");
-var ActionDropdownMenu_1 = __importDefault(require("./ActionDropdownMenu"));
-var Popover_1 = __importDefault(require("../../../../Popover"));
-var Icon_1 = __importDefault(require("../../../../../Elements/Icon/Icon"));
-var Content = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), system_1.th.color('white'), function (_a) {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { memo, useRef } from 'react';
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import { Trans } from '@lingui/react';
+import ActionDropdownMenu from './ActionDropdownMenu.js';
+import Popover from '../../../../Popover/index.js';
+import Icon from '../../../../../Elements/Icon/Icon.js';
+var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), th.color('white'), function (_a) {
     var $isDisabled = _a.$isDisabled;
-    return ($isDisabled ? system_1.th.color('lightGray7') : system_1.th.color('lightGray5'));
+    return ($isDisabled ? th.color('lightGray7') : th.color('lightGray5'));
 }, function (_a) {
     var $isDisabled = _a.$isDisabled, $isOpened = _a.$isOpened;
-    return $isDisabled ? system_1.th.color('lightGray7') : $isOpened ? system_1.th.color('blue2') : system_1.th.color('lightGray5');
+    return $isDisabled ? th.color('lightGray7') : $isOpened ? th.color('blue2') : th.color('lightGray5');
 }, function (_a) {
     var $isDisabled = _a.$isDisabled;
     return ($isDisabled ? 'not-allowed' : 'pointer');
-}, system_1.th.color('gray1'), system_1.th.color('gray1'));
-var IconWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"], ["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"])), function (_a) {
+}, th.color('gray1'), th.color('gray1'));
+var IconWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"], ["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"])), function (_a) {
     var $isDisabled = _a.$isDisabled, $isOpened = _a.$isOpened;
-    return $isDisabled ? system_1.th.color('lightGray6') : $isOpened ? system_1.th.color('blue2') : system_1.th.color('gray1');
+    return $isDisabled ? th.color('lightGray6') : $isOpened ? th.color('blue2') : th.color('gray1');
 }, function (_a) {
     var $isOpened = _a.$isOpened;
     return ($isOpened ? '180deg' : 0);
 });
 var ActionDropdownSelect = function (_a) {
     var options = _a.options, onSelect = _a.onSelect, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
-    var _c = react_1.default.useState(false), showDropdownMenu = _c[0], setShowDropdownMenu = _c[1];
-    var toggleDropdownMenu = react_1.default.useCallback(function () {
+    var _c = React.useState(false), showDropdownMenu = _c[0], setShowDropdownMenu = _c[1];
+    var toggleDropdownMenu = React.useCallback(function () {
         setShowDropdownMenu(function (prev) { return !prev; });
     }, []);
-    var handleSelectItem = react_1.default.useCallback(function (item) {
+    var handleSelectItem = React.useCallback(function (item) {
         setShowDropdownMenu(false);
         onSelect(item.value);
     }, [onSelect]);
     var items = options.map(function (item) { return ({ title: item.label, onClick: function () { return handleSelectItem(item); }, link: '#' }); });
-    var ref = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Content, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, onClick: toggleDropdownMenu, ref: ref, children: [(0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.buttonActions", message: "Actions" }) }), (0, jsx_runtime_1.jsx)(IconWrap, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: "goDown" }) })] }), showDropdownMenu && !disabled && (items === null || items === void 0 ? void 0 : items.length) > 0 && ((0, jsx_runtime_1.jsx)(Popover_1.default, { parentRef: ref, onClose: toggleDropdownMenu, placement: "bottom-start", children: (0, jsx_runtime_1.jsx)(ActionDropdownMenu_1.default, { items: items }) }))] }));
+    var ref = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsxs(Content, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, onClick: toggleDropdownMenu, ref: ref, children: [_jsx("p", { children: _jsx(Trans, { id: "dataGrid.buttonActions", message: "Actions" }) }), _jsx(IconWrap, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, children: _jsx(Icon, { icon: "goDown" }) })] }), showDropdownMenu && !disabled && (items === null || items === void 0 ? void 0 : items.length) > 0 && (_jsx(Popover, { parentRef: ref, onClose: toggleDropdownMenu, placement: "bottom-start", children: _jsx(ActionDropdownMenu, { items: items }) }))] }));
 };
-exports.default = (0, react_1.memo)(ActionDropdownSelect);
+export default memo(ActionDropdownSelect);
 var templateObject_1, templateObject_2;

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

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var ActionHead_1 = __importDefault(require("./ActionHead"));
-exports.default = ActionHead_1.default;
+import ActionHead from './ActionHead.js';
+export default ActionHead;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,22 +20,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var GridSelect_1 = __importDefault(require("../GridSelect"));
-var core_1 = require("@lingui/core");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import GridSelect from '../GridSelect/index.js';
+import { i18n } from '@lingui/core';
 var getFlagOptions = function () { return [
-    { value: '', label: core_1.i18n._({ id: 'dataGrid.columnActive.filterOptions.all', message: 'All' }) },
-    { value: '1', label: core_1.i18n._({ id: 'dataGrid.columnActive.filterOptions.yes', message: 'Yes' }) },
-    { value: '0', label: core_1.i18n._({ id: 'dataGrid.columnActive.filterOptions.no', message: 'No' }) },
+    { value: '', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.all', message: 'All' }) },
+    { value: '1', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.yes', message: 'Yes' }) },
+    { value: '0', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.no', message: 'No' }) },
 ]; };
 var SelectFilter = function (_a) {
     var restProps = __rest(_a, []);
-    var options = (0, react_1.useMemo)(function () { return getFlagOptions(); }, []);
-    return (0, jsx_runtime_1.jsx)(GridSelect_1.default, __assign({ options: options }, restProps));
+    var options = useMemo(function () { return getFlagOptions(); }, []);
+    return _jsx(GridSelect, __assign({ options: options }, restProps));
 };
-exports.default = SelectFilter;
+export default SelectFilter;

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

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var BooleanSelect_1 = __importDefault(require("./BooleanSelect"));
-exports.default = BooleanSelect_1.default;
+import BooleanSelect from './BooleanSelect.js';
+export default BooleanSelect;

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

@@ -1,20 +1,15 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var useClickOutside_1 = require("../../../Modal/hooks/useClickOutside");
-var Button_1 = __importDefault(require("../../../../Elements/Button/Button"));
-var DropdownMenu_1 = __importDefault(require("../../../../Elements/DropdownMenu"));
-var ButtonWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n"], ["\n  position: relative;\n  width: fit-content;\n"])));
-var StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"])), function (_a) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import styled from '@xstyled/styled-components';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside.js';
+import Button from '../../../../Elements/Button/Button.js';
+import DropdownMenu from '../../../../Elements/DropdownMenu/index.js';
+var ButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n"], ["\n  position: relative;\n  width: fit-content;\n"])));
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"])), function (_a) {
     var dropdownPosition = _a.dropdownPosition;
     return (!dropdownPosition || dropdownPosition === 'bottom' ? 'calc(100% + 8px)' : 'auto');
 }, function (_a) {
@@ -23,15 +18,15 @@ var StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.default
 });
 var ButtonMore = function (_a) {
     var items = _a.items, disabled = _a.disabled, dropdownPosition = _a.dropdownPosition;
-    var _b = (0, react_1.useState)(false), actionsVisible = _b[0], setActionsVisible = _b[1];
-    var onClose = (0, react_1.useCallback)(function () {
+    var _b = useState(false), actionsVisible = _b[0], setActionsVisible = _b[1];
+    var onClose = useCallback(function () {
         setActionsVisible(false);
     }, []);
-    var ref = (0, useClickOutside_1.useClickOutside)({ onClose: onClose });
-    var handleClick = (0, react_1.useCallback)(function () {
+    var ref = useClickOutside({ onClose: onClose });
+    var handleClick = useCallback(function () {
         setActionsVisible(!actionsVisible);
     }, [actionsVisible]);
-    return ((0, jsx_runtime_1.jsxs)(ButtonWrapper, { ref: ref, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleClick, icon: "ellipsisVertical", appearance: "secondaryLg", type: "button", sizing: "iconLg", "data-cy": "gridActionBtn", disabled: disabled }), (0, jsx_runtime_1.jsx)(StyledDropdownMenu, { showMenu: actionsVisible, items: items, dropdownPosition: dropdownPosition })] }));
+    return (_jsxs(ButtonWrapper, { ref: ref, children: [_jsx(Button, { onClick: handleClick, icon: "ellipsisVertical", appearance: "secondaryLg", type: "button", sizing: "iconLg", "data-cy": "gridActionBtn", disabled: disabled }), _jsx(StyledDropdownMenu, { showMenu: actionsVisible, items: items, dropdownPosition: dropdownPosition })] }));
 };
-exports.default = ButtonMore;
+export default ButtonMore;
 var templateObject_1, templateObject_2;

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

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var ButtonMore_1 = __importDefault(require("./ButtonMore"));
-exports.default = ButtonMore_1.default;
+import ButtonMore from './ButtonMore.js';
+export default ButtonMore;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,37 +9,33 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = require("@xstyled/styled-components");
-var Table_1 = require("./Table");
-var useAddFilter_1 = require("../hooks/useAddFilter");
-var utils_1 = require("../utils");
-var utils_2 = require("../utils");
-var FilterDropdown_1 = __importDefault(require("./FilterDropdown"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { x } from '@xstyled/styled-components';
+import { Cell } from './Table.js';
+import { useAddFilter } from '../hooks/useAddFilter.js';
+import { createFilterType, getStickyCollClassNames } from '../utils/index.js';
+import { getCellSizeProps, getGroupClassNames } from '../utils/index.js';
+import OverlayComponent from './FilterDropdown.js';
 var ColumnFilterCell = function (_a) {
     var onChange = _a.onChange, value = _a.value, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group;
-    var cellSizeProps = (0, utils_2.getCellSizeProps)(columnDefinition, displayColumnWidth);
-    var handleAddFilter = (0, useAddFilter_1.useAddFilter)(onChange);
-    var handleChange = react_1.default.useCallback(function (event) {
+    var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
+    var handleAddFilter = useAddFilter(onChange);
+    var handleChange = React.useCallback(function (event) {
         handleAddFilter((event === null || event === void 0 ? void 0 : event.target) ? event.target.value : event, columnDefinition);
     }, [handleAddFilter, columnDefinition]);
-    var cellClassName = "cell".concat((0, utils_1.getStickyCollClassNames)(!!columnDefinition.sticky, columnDefinition.stickTo), " ").concat((0, utils_2.getGroupClassNames)(group));
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!columnDefinition.sticky, columnDefinition.stickTo), " ").concat(getGroupClassNames(group));
     if (!columnDefinition.filtering) {
-        return (0, jsx_runtime_1.jsx)(Table_1.Cell, __assign({ className: cellClassName }, cellSizeProps));
+        return _jsx(Cell, __assign({ className: cellClassName }, cellSizeProps));
     }
-    var filterType = (0, utils_1.createFilterType)(columnDefinition);
+    var filterType = createFilterType(columnDefinition);
     var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
     var RenderComponent = filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent;
     if (!RenderComponent) {
         console.error("ERROR, using unknown filter type ".concat(filterType));
-        return ((0, jsx_runtime_1.jsx)(styled_components_1.x.div, { children: (0, jsx_runtime_1.jsx)("span", { children: "".concat(filterType, " filter") }) }));
+        return (_jsx(x.div, { children: _jsx("span", { children: "".concat(filterType, " filter") }) }));
     }
     var passProps = __assign(__assign(__assign({}, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps), columnDefinition.filterExtraProps), (filterType == 'options' && { options: columnDefinition.filterOptions }));
-    return ((0, jsx_runtime_1.jsx)(Table_1.Cell, __assign({ className: cellClassName }, cellSizeProps, { children: (0, jsx_runtime_1.jsx)(styled_components_1.x.div, { className: "test", children: (0, jsx_runtime_1.jsx)(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, OverlayComponent: FilterDropdown_1.default }, passProps)) }) })));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { className: "test", children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, OverlayComponent: OverlayComponent }, passProps)) }) })));
 };
-exports.default = ColumnFilterCell;
+export default ColumnFilterCell;

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

@@ -1,69 +1,41 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var Icon_1 = __importDefault(require("../../../../Elements/Icon/Icon"));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import styled, { x, css } from '@xstyled/styled-components';
+import Icon from '../../../../Elements/Icon/Icon.js';
 // ArrowWrap and WarningWrap need to have the same size to solve resizing issues
 var WRAPPER_WIDTH = 35;
-var Wrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  font-size: 0.8rem;\n"], ["\n  width: 100%;\n  font-size: 0.8rem;\n"])));
-var Title = styled_components_1.default.h4(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"], ["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"])));
-var arrowStyles = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"], ["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"])));
-var InlineArrowWrap = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"], ["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"])), function (_a) {
+var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  font-size: 0.8rem;\n"], ["\n  width: 100%;\n  font-size: 0.8rem;\n"])));
+var Title = styled.h4(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"], ["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"])));
+var arrowStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"], ["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"])));
+var InlineArrowWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"], ["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"])), function (_a) {
     var $isPopup = _a.$isPopup;
     return ($isPopup ? 'none' : 'flex');
 }, arrowStyles);
-var PopupArrowWrap = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"], ["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"])), arrowStyles, WRAPPER_WIDTH);
-var OverflowWrap = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"], ["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"])));
-var WarningWrap = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"])), function (_a) {
+var PopupArrowWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"], ["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"])), arrowStyles, WRAPPER_WIDTH);
+var OverflowWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"], ["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"])));
+var WarningWrap = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"])), function (_a) {
     var $isPopup = _a.$isPopup;
     return ($isPopup ? 'block' : 'none');
 }, OverflowWrap);
-var Content = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: ", ";\n  display: flex;\n"], ["\n  justify-content: ", ";\n  display: flex;\n"])), function (_a) {
+var Content = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: ", ";\n  display: flex;\n"], ["\n  justify-content: ", ";\n  display: flex;\n"])), function (_a) {
     var $isPopup = _a.$isPopup;
     return ($isPopup ? 'space-between' : 'unset');
 });
 var ColumnTitle = function (_a) {
     var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
-    var _b = (0, react_1.useState)(false), isOverflowing = _b[0], setIsOverflowing = _b[1];
-    var onSetAsc = (0, react_1.useCallback)(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('asc'); }, [onSetSort]);
-    var onSetDesc = (0, react_1.useCallback)(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('desc'); }, [onSetSort]);
-    var onSetNull = (0, react_1.useCallback)(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort(null); }, [onSetSort]);
+    var _b = useState(false), isOverflowing = _b[0], setIsOverflowing = _b[1];
+    var onSetAsc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('asc'); }, [onSetSort]);
+    var onSetDesc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('desc'); }, [onSetSort]);
+    var onSetNull = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort(null); }, [onSetSort]);
     var isAsc = sortValue == 'asc';
     var isDesc = sortValue == 'desc';
-    var wrapRef = (0, react_1.useRef)(null);
-    var contentRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
+    var wrapRef = useRef(null);
+    var contentRef = useRef(null);
+    useEffect(function () {
         var wrapRefCopy = wrapRef.current;
         var contentRefCopy = contentRef.current;
         if (!wrapRefCopy || !contentRefCopy)
@@ -79,8 +51,8 @@ var ColumnTitle = function (_a) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wrapRef === null || wrapRef === void 0 ? void 0 : wrapRef.current]);
-    var Arrows = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styled_components_1.x.div, { onClick: isAsc ? onSetNull : onSetAsc, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: "chevronUp", fill: isAsc ? 'blue2' : 'lightGray3' }) }), (0, jsx_runtime_1.jsx)(styled_components_1.x.div, { onClick: isDesc ? onSetNull : onSetDesc, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: "chevronDown", fill: isDesc ? 'blue2' : 'lightGray3' }) })] }));
-    return ((0, jsx_runtime_1.jsx)(Wrap, { ref: wrapRef, children: (0, jsx_runtime_1.jsxs)(Content, { "$isPopup": isOverflowing, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Title, { ref: contentRef, children: title }) }), isSortable && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(WarningWrap, { "$isPopup": isOverflowing, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: "warningDual", fill: "black", secondaryColor: "yellow2" }) }), (0, jsx_runtime_1.jsx)(OverflowWrap, { "$isPopup": isOverflowing, children: (0, jsx_runtime_1.jsx)(PopupArrowWrap, { "$isPopup": isOverflowing, children: Arrows }) }), (0, jsx_runtime_1.jsx)(InlineArrowWrap, { "$isPopup": isOverflowing, children: Arrows })] }))] }) }));
+    var Arrows = (_jsxs(_Fragment, { children: [_jsx(x.div, { onClick: isAsc ? onSetNull : onSetAsc, children: _jsx(Icon, { icon: "chevronUp", fill: isAsc ? 'blue2' : 'lightGray3' }) }), _jsx(x.div, { onClick: isDesc ? onSetNull : onSetDesc, children: _jsx(Icon, { icon: "chevronDown", fill: isDesc ? 'blue2' : 'lightGray3' }) })] }));
+    return (_jsx(Wrap, { ref: wrapRef, children: _jsxs(Content, { "$isPopup": isOverflowing, children: [_jsx("div", { children: _jsx(Title, { ref: contentRef, children: title }) }), isSortable && (_jsxs(_Fragment, { children: [_jsx(WarningWrap, { "$isPopup": isOverflowing, children: _jsx(Icon, { icon: "warningDual", fill: "black", secondaryColor: "yellow2" }) }), _jsx(OverflowWrap, { "$isPopup": isOverflowing, children: _jsx(PopupArrowWrap, { "$isPopup": isOverflowing, children: Arrows }) }), _jsx(InlineArrowWrap, { "$isPopup": isOverflowing, children: Arrows })] }))] }) }));
 };
-exports.default = ColumnTitle;
+export default ColumnTitle;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var ColumnTitle_1 = __importDefault(require("./ColumnTitle"));
-exports.default = ColumnTitle_1.default;
+import ColumnTitle from './ColumnTitle.js';
+export default ColumnTitle;

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

@@ -1,25 +1,20 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var Sorting_1 = require("./icons/Sorting");
-var Title = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & + * {\n    margin-left: 1em;\n  }\n"], ["\n  & + * {\n    margin-left: 1em;\n  }\n"])));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled from '@xstyled/styled-components';
+import { SortingUp, SortingDown } from './icons/Sorting.js';
+var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & + * {\n    margin-left: 1em;\n  }\n"], ["\n  & + * {\n    margin-left: 1em;\n  }\n"])));
 var ColumnTitle = function (_a) {
     var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
-    var handleClick = react_1.default.useCallback(function () {
+    var handleClick = React.useCallback(function () {
         var newValue = sortValue ? (sortValue == 'asc' ? 'desc' : null) : 'asc';
         if (onSetSort)
             onSetSort(newValue);
     }, [sortValue, onSetSort]);
-    return ((0, jsx_runtime_1.jsxs)("div", { onClick: isSortable ? handleClick : undefined, className: isSortable ? 'sortable' : '', children: [(0, jsx_runtime_1.jsx)(Title, { children: title }), isSortable && sortValue === 'asc' && (0, jsx_runtime_1.jsx)(Sorting_1.SortingUp, { width: "16" }), isSortable && sortValue === 'desc' && (0, jsx_runtime_1.jsx)(Sorting_1.SortingDown, { width: "16" })] }));
+    return (_jsxs("div", { onClick: isSortable ? handleClick : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16" }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16" })] }));
 };
-exports.default = react_1.default.memo(ColumnTitle);
+export default React.memo(ColumnTitle);
 var templateObject_1;

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

@@ -1,49 +1,20 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Row = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var react_1 = require("@lingui/react");
-var ExtraControlButtons_1 = __importDefault(require("../ExtraControlButtons"));
-var types_1 = require("../../types");
-var Button_1 = __importDefault(require("../../../../Elements/Button/Button"));
-exports.Row = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"])));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { x } from '@xstyled/styled-components';
+import { Trans } from '@lingui/react';
+import ExtraControlButtons from '../ExtraControlButtons/index.js';
+import { ExtraControlButtonPosition } from '../../types.js';
+import Button from '../../../../Elements/Button/Button.js';
+export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"])));
 var ControlButtons = function (_a) {
     var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors;
     var resetFilters = gridActions.resetFilters;
     var filter = gridSelectors.filter;
     var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
-    return ((0, jsx_runtime_1.jsxs)(exports.Row, { children: [eshopSelect && ((0, jsx_runtime_1.jsx)(styled_components_1.x.div, { children: (0, jsx_runtime_1.jsx)(ExtraControlButtons_1.default, { extraControlButtons: eshopSelect, targetPosition: types_1.ExtraControlButtonPosition.TopRight }) })), (0, jsx_runtime_1.jsx)(ExtraControlButtons_1.default, { extraControlButtons: extraControlButtons, targetPosition: types_1.ExtraControlButtonPosition.TopLeft }), (0, jsx_runtime_1.jsx)(styled_components_1.x.div, { children: filtersOn && ((0, jsx_runtime_1.jsx)(Button_1.default, { type: "button", onClick: resetFilters, appearance: "secondaryLg", "data-cy": "resetFiltersBtn", children: (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
+    return (_jsxs(Row, { children: [eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: resetFilters, appearance: "secondaryLg", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
 };
-exports.default = ControlButtons;
+export default ControlButtons;
 var templateObject_1;

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

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var ControlButtons_1 = __importDefault(require("./ControlButtons"));
-exports.default = ControlButtons_1.default;
+import ControlButtons from './ControlButtons.js';
+export default ControlButtons;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,30 +9,26 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var get_1 = __importDefault(require("lodash/fp/get"));
-var Table_1 = require("./Table");
-var utils_1 = require("../utils");
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import get from 'lodash/fp/get';
+import { TextCell } from './Table.js';
+import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils/index.js';
 var DataCell = function (_a) {
     var column = _a.column, group = _a.group, rowData = _a.rowData, onRowAction = _a.onRowAction, displayColumnWidth = _a.displayColumnWidth;
-    var Wrapper = column.fixedSize ? 'div' : Table_1.TextCell;
+    var Wrapper = column.fixedSize ? 'div' : TextCell;
     var wrapperBaseProps = column.fixedSize
-        ? { style: __assign(__assign({}, (0, utils_1.getCellSizeProps)(column, displayColumnWidth)), { alignSelf: 'center' }) }
-        : (0, utils_1.getCellSizeProps)(column, displayColumnWidth);
-    var cellClassName = "cell".concat((0, utils_1.getStickyCollClassNames)(!!column.sticky, column.stickTo), " ").concat((0, utils_1.getGroupClassNames)(group));
+        ? { style: __assign(__assign({}, getCellSizeProps(column, displayColumnWidth)), { alignSelf: 'center' }) }
+        : getCellSizeProps(column, displayColumnWidth);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo), " ").concat(getGroupClassNames(group));
     if (column.cellComponent) {
-        return ((0, jsx_runtime_1.jsx)(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: (0, jsx_runtime_1.jsx)(column.cellComponent, { rowData: rowData, onRowAction: onRowAction, column: column }) })));
+        return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: _jsx(column.cellComponent, { rowData: rowData, onRowAction: onRowAction, column: column }) })));
     }
     else {
-        return ((0, jsx_runtime_1.jsx)(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: column.formatRowValue ? column.formatRowValue(rowData) : (0, get_1.default)(column.name, rowData) })));
+        return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: column.formatRowValue ? column.formatRowValue(rowData) : get(column.name, rowData) })));
     }
 };
-var MemoDataCell = react_1.default.memo(DataCell, function (prevProps, newProps) {
+var MemoDataCell = React.memo(DataCell, function (prevProps, newProps) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     if (prevProps.rowData !== newProps.rowData ||
         prevProps.displayColumnWidth !== newProps.displayColumnWidth ||
@@ -54,4 +49,4 @@ var MemoDataCell = react_1.default.memo(DataCell, function (prevProps, newProps)
     }
     return true;
 });
-exports.default = MemoDataCell;
+export default MemoDataCell;