@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

package/ui/Blocks/CommonGrid/components/DataRow.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,33 +20,29 @@ 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 = __importDefault(require("react"));
-var styled_components_1 = require("@xstyled/styled-components");
-var react_router_dom_1 = require("react-router-dom");
-var Table_1 = require("./Table");
-var DataCell_1 = __importDefault(require("./DataCell"));
-var Edit_1 = __importDefault(require("./icons/Edit"));
-var EyeOpen_1 = __importDefault(require("./icons/EyeOpen"));
-var utils_1 = require("../utils");
-var types_1 = require("../types");
-var fp_1 = require("lodash/fp");
-var utils_2 = require("./utils");
-var Checkbox_1 = __importDefault(require("../../../Forms/Checkbox"));
-var Button_1 = __importDefault(require("../../../Elements/Button/Button"));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { x } from '@xstyled/styled-components';
+import { Link } from 'react-router-dom';
+import { Cell, StyledDataRow } from './Table.js';
+import MemoDataCell from './DataCell.js';
+import EditIcon from './icons/Edit.js';
+import EyeOpenIcon from './icons/EyeOpen.js';
+import { getActionCellSizeProps } from '../utils/index.js';
+import { rowClassSymbol } from '../types.js';
+import { isFunction } from 'lodash/fp';
+import { useTimeMeasurement } from './utils.js';
+import Checkbox from '../../../Forms/Checkbox/index.js';
+import Button from '../../../Elements/Button/Button.js';
 var EmptySpan = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (0, jsx_runtime_1.jsx)("span", __assign({}, props, { children: children }));
+    return _jsx("span", __assign({}, props, { children: children }));
 };
 var DataRow = function (_a) {
     var _b, _c, _d;
     var columns = _a.columns, actionColumn = _a.actionColumn, rowData = _a.rowData, rowIndex = _a.rowIndex, uxState = _a.uxState, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onUxChange = _a.onUxChange, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, onRowAction = _a.onRowAction, displayColumnsWidth = _a.displayColumnsWidth, groups = _a.groups, isEven = _a.isEven;
     var isChecked = !!((_b = uxState.checkedRows) === null || _b === void 0 ? void 0 : _b[rowData.id]);
-    var onCheckboxChange = react_1.default.useCallback(function () {
+    var onCheckboxChange = React.useCallback(function () {
         var checkedRows = __assign({}, (uxState.checkedRows || {}));
         if (!isChecked) {
             checkedRows[rowData.id] = true;
@@ -57,25 +52,25 @@ var DataRow = function (_a) {
         }
         onUxChange && onUxChange('checkedRows', checkedRows);
     }, [onUxChange, isChecked, uxState, rowData]);
-    var handleEditClick = react_1.default.useCallback(function () {
+    var handleEditClick = React.useCallback(function () {
         if (onRowEditClick)
             onRowEditClick(rowData.id, rowData);
         if (onUxChange && allowRowSelectOnAction)
             onUxChange('selectedRow', rowData.id);
     }, [onRowEditClick, rowData]);
-    var handleReadClick = react_1.default.useCallback(function () {
+    var handleReadClick = React.useCallback(function () {
         if (onRowReadClick)
             onRowReadClick(rowData.id, rowData);
         if (onUxChange && allowRowSelectOnAction)
             onUxChange('selectedRow', rowData.id);
     }, [onRowReadClick, rowData]);
-    var handleRowAction = react_1.default.useCallback(function (id, field, value) {
+    var handleRowAction = React.useCallback(function (id, field, value) {
         if (onRowAction)
             onRowAction(id, field, value);
         if (onUxChange && allowRowSelectOnAction)
             onUxChange('selectedRow', id);
     }, [onRowReadClick, rowData]);
-    var handleRowClick = react_1.default.useCallback(function (e) {
+    var handleRowClick = React.useCallback(function (e) {
         // test whether I should trigger event or not (because of possible button/link/input/etc in cell)
         var classes = Object.values(e.target.classList);
         if (!classes.includes('dataRow') && !classes.includes('cell'))
@@ -87,29 +82,29 @@ var DataRow = function (_a) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [onRowClick, onUxChange, rowData]);
-    var _e = (0, utils_2.useTimeMeasurement)({ handleRowClick: handleRowClick }), handleMouseDown = _e.handleMouseDown, handleMouseUp = _e.handleMouseUp;
-    var RowActionComponent = ((actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) ? react_router_dom_1.Link : EmptySpan);
-    var rowActionProps = react_1.default.useCallback(function (mode) {
+    var _e = useTimeMeasurement({ handleRowClick: handleRowClick }), handleMouseDown = _e.handleMouseDown, handleMouseUp = _e.handleMouseUp;
+    var RowActionComponent = ((actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) ? Link : EmptySpan);
+    var rowActionProps = React.useCallback(function (mode) {
         var _a;
         return (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink)
             ? { to: (_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumn, { mode: mode, id: rowData.id }) }
             : { onClick: { read: handleReadClick, edit: handleEditClick }[mode] };
     }, [actionColumn, handleReadClick, handleEditClick]);
-    var rowClassName = react_1.default.useMemo(function () {
+    var rowClassName = React.useMemo(function () {
         var classes = ['dataRow'];
         if (isChecked)
             classes.push('checked');
         if (uxState.selectedRow == rowData.id && (allowRowSelect || allowRowSelectOnAction))
             classes.push('selected');
-        if (rowData[types_1.rowClassSymbol])
-            classes.push(rowData[types_1.rowClassSymbol] || '');
+        if (rowData[rowClassSymbol])
+            classes.push(rowData[rowClassSymbol] || '');
         return classes.join(' ');
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isChecked, uxState, rowData]);
-    var actionColumnStyle = react_1.default.useMemo(function () {
-        return actionColumn ? __assign({}, (0, utils_1.getActionCellSizeProps)(actionColumn)) : {};
+    var actionColumnStyle = React.useMemo(function () {
+        return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
     }, [actionColumn]);
     var displayReadEditCell = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
-    return ((0, jsx_runtime_1.jsxs)(Table_1.StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayReadEditCell && ((0, jsx_runtime_1.jsxs)(Table_1.Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, (0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { children: [((0, fp_1.isFunction)(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && ((0, jsx_runtime_1.jsx)(RowActionComponent, __assign({}, rowActionProps('read'), { children: (0, jsx_runtime_1.jsx)(Button_1.default, { type: "button", appearance: "primary", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: (0, jsx_runtime_1.jsx)(EyeOpen_1.default, { width: "16px", height: "16px" }) }) }))), ((0, fp_1.isFunction)(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && ((0, jsx_runtime_1.jsx)(RowActionComponent, __assign({}, rowActionProps('edit'), { children: (0, jsx_runtime_1.jsx)(Button_1.default, { type: "button", appearance: "primary", mt: "5px", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: (0, jsx_runtime_1.jsx)(Edit_1.default, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && ((0, jsx_runtime_1.jsx)(Table_1.Cell, { className: "cell", style: actionColumnStyle, children: (0, jsx_runtime_1.jsx)(styled_components_1.x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return ((0, jsx_runtime_1.jsx)(DataCell_1.default, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
+    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", appearance: "primary", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", appearance: "primary", mt: "5px", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
 };
-exports.default = DataRow;
+export default DataRow;

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

@@ -1,4 +1,3 @@
-"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;
@@ -14,29 +13,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -48,20 +24,16 @@ 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 = __importStar(require("react"));
-var luxon_1 = require("luxon");
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var sameDate_1 = require("./utils/sameDate");
-var useClickOutside_1 = require("../../../Modal/hooks/useClickOutside");
-var DatePicker_1 = __importDefault(require("../../../../Elements/DatePicker"));
-var Input_1 = __importDefault(require("../../../../Forms/Input"));
-var core_1 = require("@lingui/core");
-var RangeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, useMemo } from 'react';
+import { DateTime } from 'luxon';
+import styled from '@xstyled/styled-components';
+import { sameDate } from './utils/sameDate.js';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside.js';
+import DatePicker from '../../../../Elements/DatePicker/index.js';
+import Input from '../../../../Forms/Input/index.js';
+import { i18n } from '@lingui/core';
+var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"
     // User readable date range.
 ])));
 // User readable date range.
@@ -73,31 +45,31 @@ var pickerRangeToString = function (values) {
     }
     // If only From date is specified
     if (values[0] && !values[1]) {
-        return luxon_1.DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
+        return DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
     }
     // If both of date are same, show only one date
-    if ((0, sameDate_1.sameDate)(values[0], values[1])) {
-        return luxon_1.DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
+    if (sameDate(values[0], values[1])) {
+        return DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
     }
     // Format each date separately and join together
-    return values.map(function (v) { return v && luxon_1.DateTime.fromJSDate(v).toFormat('dd.LL.yyyy'); }).join(' - ');
+    return values.map(function (v) { return v && DateTime.fromJSDate(v).toFormat('dd.LL.yyyy'); }).join(' - ');
 };
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
-    return (0, jsx_runtime_1.jsx)("div", { children: children });
+    return _jsx("div", { children: children });
 };
 var DatePickerRange = function (props) {
     var _a, _b, _c;
     var onChange = props.onChange, error = props.error, label = props.label, value = props.value, filterTime = props.filterTime, initialView = props.initialView, _d = props.OverlayComponent, OverlayComponent = _d === void 0 ? OverlayComponentDefault : _d, rest = __rest(props, ["onChange", "error", "label", "value", "filterTime", "initialView", "OverlayComponent"]);
-    var _e = (0, react_1.useState)((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
-    var _f = (0, react_1.useState)((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
+    var _e = useState((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
+    var _f = useState((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
     var timeFormat = filterTime ? 'HH:mm' : false;
-    var placeholder = core_1.i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
-    var cleanValue = react_1.default.useMemo(function () { return [
+    var placeholder = i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
+    var cleanValue = React.useMemo(function () { return [
         typeof (value === null || value === void 0 ? void 0 : value[0]) === 'string' ? new Date(value[0]) : (value === null || value === void 0 ? void 0 : value[0]) || undefined,
         typeof (value === null || value === void 0 ? void 0 : value[1]) === 'string' ? new Date(value[1]) : (value === null || value === void 0 ? void 0 : value[1]) || undefined,
     ]; }, [value]);
-    var initialViewDate = (0, react_1.useMemo)(function () {
+    var initialViewDate = useMemo(function () {
         if (cleanValue[0] && cleanValue[1]) {
             return cleanValue;
         }
@@ -112,30 +84,30 @@ var DatePickerRange = function (props) {
         }
         return [firstDate, secondDate];
     }, [cleanValue, initialView]);
-    var _g = (0, react_1.useState)(false), isOpen = _g[0], setOpen = _g[1];
-    var setDateFrom = (0, react_1.useCallback)(function (v) {
+    var _g = useState(false), isOpen = _g[0], setOpen = _g[1];
+    var setDateFrom = useCallback(function (v) {
         setStartRangeValue(v);
         onChange([v, cleanValue[1]]);
     }, [onChange, cleanValue]);
-    var setDateTo = (0, react_1.useCallback)(function (v) {
+    var setDateTo = useCallback(function (v) {
         setEndRangeValue(v);
         onChange([cleanValue[0], v]);
     }, [onChange, cleanValue]);
-    var openPicker = (0, react_1.useCallback)(function () { return setOpen(true); }, [setOpen]);
-    var clear = (0, react_1.useCallback)(function () {
+    var openPicker = useCallback(function () { return setOpen(true); }, [setOpen]);
+    var clear = useCallback(function () {
         onChange([]);
         setStartRangeValue(undefined);
         setEndRangeValue(undefined);
     }, [onChange]);
-    var isValidDateFrom = (0, react_1.useCallback)(function (current) { return !cleanValue[1] || luxon_1.DateTime.fromJSDate(cleanValue[1]) >= luxon_1.DateTime.fromJSDate(current); }, [cleanValue]);
-    var isValidDateTo = (0, react_1.useCallback)(function (current) { return !cleanValue[0] || luxon_1.DateTime.fromJSDate(current) >= luxon_1.DateTime.fromJSDate(cleanValue[0]); }, [cleanValue]);
-    var onClose = (0, react_1.useCallback)(function () {
+    var isValidDateFrom = useCallback(function (current) { return !cleanValue[1] || DateTime.fromJSDate(cleanValue[1]) >= DateTime.fromJSDate(current); }, [cleanValue]);
+    var isValidDateTo = useCallback(function (current) { return !cleanValue[0] || DateTime.fromJSDate(current) >= DateTime.fromJSDate(cleanValue[0]); }, [cleanValue]);
+    var onClose = useCallback(function () {
         setOpen(false);
     }, []);
     // Check if the second value is not selected and the first value is the same as the initial value
     var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
-    var ref = (0, useClickOutside_1.useClickOutside)({ onClose: onClose });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(Input_1.default, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, appearance: "grid", onClear: clear, error: error, readOnly: true }), (0, jsx_runtime_1.jsx)(OverlayComponent, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isOpen && ((0, jsx_runtime_1.jsxs)(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [(0, jsx_runtime_1.jsx)(DatePicker_1.default, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && core_1.i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), (0, jsx_runtime_1.jsx)(DatePicker_1.default, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && core_1.i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null }))] })) }) })] }));
+    var ref = useClickOutside({ onClose: onClose });
+    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, appearance: "grid", onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null }))] })) }) })] }));
 };
-exports.default = DatePickerRange;
+export default DatePickerRange;
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/DatePickerRange/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 DatePickerRange_1 = __importDefault(require("./DatePickerRange"));
-exports.default = DatePickerRange_1.default;
+import DatePickerRange from './DatePickerRange.js';
+export default DatePickerRange;

package/ui/Blocks/CommonGrid/components/DatePickerRange/utils/sameDate.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sameDate = void 0;
-var sameDate = function (date1, date2) {
+export var sameDate = function (date1, date2) {
     return date1 && date1.getTime && date2 && date2.getTime && date1.getTime() === date2.getTime();
 };
-exports.sameDate = sameDate;

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

@@ -1,4 +1,3 @@
-"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;
@@ -14,59 +13,31 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 Button_1 = __importDefault(require("../../../../Elements/Button/Button"));
-var DropdownSelect_1 = __importDefault(require("../../../../Elements/DropdownSelect"));
-exports.Row = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
-var StyledButton = (0, styled_components_1.default)(Button_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import styled, { x } from '@xstyled/styled-components';
+import Button from '../../../../Elements/Button/Button.js';
+import DropdownSelect from '../../../../Elements/DropdownSelect/index.js';
+export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
+var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
 var ControlButton = function (_a) {
     var node = _a.node, label = _a.label, style = _a.style, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron;
     if (node)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: node });
+        return _jsx(_Fragment, { children: node });
     if (options) {
-        return ((0, jsx_runtime_1.jsx)(DropdownSelect_1.default, { label: label || '', appearance: style || 'secondary', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
+        return (_jsx(DropdownSelect, { label: label || '', appearance: style || 'secondary', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
     }
     else {
-        return ((0, jsx_runtime_1.jsx)(StyledButton, { type: "button", onClick: onClick, disabled: disabled, appearance: style || 'secondary', children: label }));
+        return (_jsx(StyledButton, { type: "button", onClick: onClick, disabled: disabled, appearance: style || 'secondary', children: label }));
     }
 };
 var ExtraControlButtons = function (_a) {
     var extraControlButtons = _a.extraControlButtons, targetPosition = _a.targetPosition;
-    return ((0, jsx_runtime_1.jsx)(exports.Row, { children: (extraControlButtons || [])
+    return (_jsx(Row, { children: (extraControlButtons || [])
             .filter(function (_a) {
             var position = _a.position;
             return position == targetPosition;
         })
-            .map(function (button, idx) { return ((0, jsx_runtime_1.jsx)(styled_components_1.x.div, { children: (0, jsx_runtime_1.jsx)(ControlButton, __assign({}, button)) }, idx)); }) }));
+            .map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
 };
-exports.default = ExtraControlButtons;
+export default ExtraControlButtons;
 var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/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 ExtraControlButtons_1 = __importDefault(require("./ExtraControlButtons"));
-exports.default = ExtraControlButtons_1.default;
+import ExtraControlButtons from './ExtraControlButtons.js';
+export default ExtraControlButtons;

package/ui/Blocks/CommonGrid/components/FilterDropdown.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 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var OverlayWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"], ["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"])));
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled from '@xstyled/styled-components';
+var OverlayWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"], ["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"])));
 var OverlayComponent = function (_a) {
     var children = _a.children;
-    var overlayRef = react_1.default.useRef(null);
-    react_1.default.useEffect(function () {
+    var overlayRef = React.useRef(null);
+    React.useEffect(function () {
         var _a;
         var Overlay = overlayRef.current;
         if (!Overlay)
@@ -35,7 +30,7 @@ var OverlayComponent = function (_a) {
         Overlay.style.top = "".concat(topOffset, "px");
         Overlay.style.visibility = "initial";
     });
-    return ((0, jsx_runtime_1.jsx)(OverlayWrapper, { ref: overlayRef, className: "filterOverlay", children: children }));
+    return (_jsx(OverlayWrapper, { ref: overlayRef, className: "filterOverlay", children: children }));
 };
-exports.default = OverlayComponent;
+export default OverlayComponent;
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/FilterRow.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 throttle_1 = __importDefault(require("lodash/throttle"));
-var ColumnFilterCell_1 = __importDefault(require("./ColumnFilterCell"));
-var Table_1 = require("./Table");
-var utils_1 = require("../utils");
-var useToggleAllCheckbox_1 = require("../hooks/useToggleAllCheckbox");
-var Checkbox_1 = __importDefault(require("../../../Forms/Checkbox"));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import get from 'lodash/fp/get';
+import throttle from 'lodash/throttle';
+import ColumnFilterCell from './ColumnFilterCell.js';
+import { Row, Cell } from './Table.js';
+import { getActionCellSizeProps, getFilterName } from '../utils/index.js';
+import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox.js';
+import Checkbox from '../../../Forms/Checkbox/index.js';
 var FilterRow = function (_a) {
     var _b, _c;
     var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _d = _a.filterValues, filterValues = _d === void 0 ? {} : _d, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
-    var handleOnChange = (0, throttle_1.default)(onChange, 500);
-    var actionColumnStyle = react_1.default.useMemo(function () {
-        return actionColumn ? __assign({}, (0, utils_1.getActionCellSizeProps)(actionColumn)) : {};
+    var handleOnChange = throttle(onChange, 500);
+    var actionColumnStyle = React.useMemo(function () {
+        return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
     }, [actionColumn]);
-    var _e = (0, useToggleAllCheckbox_1.useToggleAllCheckbox)(rowsData, uxState, handleUxChange), allChecked = _e[0], toggleCheckbox = _e[1];
+    var _e = useToggleAllCheckbox(rowsData, uxState, handleUxChange), allChecked = _e[0], toggleCheckbox = _e[1];
     var displayCheckbox = (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.checkAllPosition) === 'top' && (((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes));
     var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
     var rowsNumberLabel = (_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _c !== void 0 ? _c : '#';
-    return ((0, jsx_runtime_1.jsxs)(Table_1.Row, { className: "filterRow", children: [displayCheckbox && ((0, jsx_runtime_1.jsx)(Table_1.Cell, { className: "cell", style: actionColumnStyle, children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && ((0, jsx_runtime_1.jsx)(Table_1.Cell, { className: "cell", style: actionColumnStyle, children: (0, jsx_runtime_1.jsx)("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && ((0, jsx_runtime_1.jsx)(Table_1.Cell, { className: "cell", style: actionColumnStyle }, 'actions')), columns.map(function (column, index) { return ((0, jsx_runtime_1.jsx)(ColumnFilterCell_1.default, { column: column, onChange: handleOnChange, value: (0, get_1.default)([(0, utils_1.getFilterName)(column), 'value'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
+    return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && (_jsx(Cell, { className: "cell", style: actionColumnStyle }, 'actions')), columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
 };
-exports.default = FilterRow;
+export default FilterRow;

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

@@ -1,22 +1,16 @@
-"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 });
-exports.StyledCross = exports.StyledButton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var DropdownMenu_1 = __importDefault(require("../../../../Elements/DropdownMenu"));
-var Popover_1 = __importDefault(require("../../../Popover"));
-var FloatingWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])));
-var StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 160px;\n  width: max-content;\n"], ["\n  min-width: 160px;\n  width: max-content;\n"])));
-exports.StyledButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"], ["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
-exports.StyledCross = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"], ["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"])), function (_a) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import styled from '@xstyled/styled-components';
+import DropdownMenu from '../../../../Elements/DropdownMenu/index.js';
+import Popover from '../../../Popover/index.js';
+var FloatingWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])));
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 160px;\n  width: max-content;\n"], ["\n  min-width: 160px;\n  width: max-content;\n"])));
+export var StyledButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"], ["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+export var StyledCross = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"], ["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? 'rotate(135deg) translate(1px, 0)' : 'none');
 }, function (_a) {
@@ -25,20 +19,20 @@ exports.StyledCross = styled_components_1.default.div(templateObject_4 || (templ
 });
 var FloatingButton = function (_a) {
     var options = _a.options, onSelect = _a.onSelect, onClick = _a.onClick;
-    var _b = (0, react_1.useState)(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
-    var ref = (0, react_1.useRef)(null);
-    var onClose = (0, react_1.useCallback)(function () { return setShowDropdownMenu(false); }, []);
-    var handleOnClick = (0, react_1.useCallback)(function () {
+    var _b = useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
+    var ref = useRef(null);
+    var onClose = useCallback(function () { return setShowDropdownMenu(false); }, []);
+    var handleOnClick = useCallback(function () {
         if (options && (options === null || options === void 0 ? void 0 : options.length) > 0) {
             setShowDropdownMenu(function (prev) { return !prev; });
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [onClick, options]);
-    var handleSelectItem = (0, react_1.useCallback)(function (item) {
+    var handleSelectItem = useCallback(function (item) {
         setShowDropdownMenu(false);
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
     }, [onSelect]);
-    var items = (0, react_1.useMemo)(function () {
+    var items = useMemo(function () {
         return options === null || options === void 0 ? void 0 : options.map(function (item) { return ({
             title: item.label,
             onClick: function () { return handleSelectItem(item); },
@@ -46,7 +40,7 @@ var FloatingButton = function (_a) {
             name: item.name,
         }); });
     }, [handleSelectItem, options]);
-    return ((0, jsx_runtime_1.jsx)(FloatingWrapper, { children: (0, jsx_runtime_1.jsxs)(exports.StyledButton, { ref: ref, onClick: handleOnClick, children: [(0, jsx_runtime_1.jsxs)(exports.StyledCross, { isOpen: showDropdownMenu, children: [(0, jsx_runtime_1.jsx)("span", { className: "line" }), (0, jsx_runtime_1.jsx)("span", { className: "line" })] }), showDropdownMenu && ((0, jsx_runtime_1.jsx)(Popover_1.default, { parentRef: ref, onClose: onClose, placement: "left-end", children: (0, jsx_runtime_1.jsx)(StyledDropdownMenu, { showMenu: true, items: items }) }))] }) }));
+    return (_jsx(FloatingWrapper, { children: _jsxs(StyledButton, { ref: ref, onClick: handleOnClick, children: [_jsxs(StyledCross, { isOpen: showDropdownMenu, children: [_jsx("span", { className: "line" }), _jsx("span", { className: "line" })] }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "left-end", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items }) }))] }) }));
 };
-exports.default = FloatingButton;
+export default FloatingButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/CommonGrid/components/FloatingButton/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 FloatingButton_1 = __importDefault(require("./FloatingButton"));
-exports.default = FloatingButton_1.default;
+import FloatingButton from './FloatingButton.js';
+export default FloatingButton;