@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.d.ts

@@ -1,4 +1,5 @@
-export declare const ControlButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Left: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Right: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledColumnButton: import("styled-components").StyledComponent<import("react").FC<import("../../../../Elements/Button/types").Props>, import("@xstyled/system").Theme, {}, never>;
+/// <reference types="react" />
+export declare const ControlButtonsContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Left: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Right: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const StyledColumnButton: import('styled-components').StyledComponent<import('react').FC<import('../../../../Elements/Button/types').Props>, import('@xstyled/system').Theme, {}, never>;

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

@@ -1,42 +1,12 @@
-import Button from "../../../../Elements/Button/Button.js";
-import "../../../../Elements/Button/index.js";
-import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
-//#region packages/ui/Blocks/CommonGrid/components/ControlButtons/styles.ts
-const ControlButtonsContainer = styled$1.div`
-  display: flex;
-  position: sticky;
-  justify-content: space-between;
-  flex: 1;
-  left: 20px;
-`;
-const Left = styled$1.div`
-  display: flex;
-  margin-right: 10px;
-`;
-const Right = styled$1.div`
-  display: flex;
-`;
-const StyledColumnButton = styled$1(Button)`
-  position: sticky;
-  right: 20px;
-  z-index: 3;
-  margin-left: 8px;
-
-  > span > svg {
-    stroke: ${th$1("colors.blue2")};
-    width: 18px;
-    height: 18px;
-  }
-  > span > H6 {
-    display: none;
-  }
-  @media (min-width: 1024px) {
-    > span > H6 {
-      display: flex;
-      margin-left: 5px;
-    }
-  }
-`;
-//#endregion
-export { ControlButtonsContainer, Left, Right, StyledColumnButton };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Button } from '../../../../Elements/Button';
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+export var ControlButtonsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"])));
+export var Left = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-right: 10px;\n"], ["\n  display: flex;\n  margin-right: 10px;\n"])));
+export var Right = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var StyledColumnButton = styled(Button)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  right: 20px;\n  z-index: 3;\n  margin-left: 8px;\n\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"], ["\n  position: sticky;\n  right: 20px;\n  z-index: 3;\n  margin-left: 8px;\n\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"])), th('colors.blue2'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/CommonGrid/components/DataCell.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import { type ColumnDefinition, type RowProps, type Group } from '../types';
+import { default as React } from 'react';
+import { ColumnDefinition, RowProps, Group } from '../types';
+
 type DataCellPros = {
     column: ColumnDefinition;
     rowData: RowProps;

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

@@ -1,37 +1,52 @@
-import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from "../utils/index.js";
-import { TextCell } from "./Table.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-import get from "lodash/fp/get";
-//#region packages/ui/Blocks/CommonGrid/components/DataCell.tsx
-const DataCell = ({ column, group, rowData, onRowAction, displayColumnWidth, rowIndex }) => {
-	const Wrapper = column.fixedSize ? "div" : TextCell;
-	const wrapperBaseProps = column.fixedSize ? { style: {
-		...getCellSizeProps(column, displayColumnWidth),
-		alignSelf: "center"
-	} } : getCellSizeProps(column, displayColumnWidth);
-	const cellClassName = `cell${getStickyCollClassNames(!!column.sticky, column.stickTo)} ${getGroupClassNames(group)}`;
-	if (column.cellComponent) return /* @__PURE__ */ jsx(Wrapper, {
-		className: cellClassName,
-		...wrapperBaseProps,
-		children: /* @__PURE__ */ jsx(column.cellComponent, {
-			rowData,
-			onRowAction,
-			column,
-			rowIndex
-		})
-	});
-	else return /* @__PURE__ */ jsx(Wrapper, {
-		className: cellClassName,
-		...wrapperBaseProps,
-		children: column.formatRowValue ? column.formatRowValue(rowData) : get(column.name, rowData)
-	});
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-const MemoDataCell = React.memo(DataCell, (prevProps, newProps) => {
-	if (prevProps.rowData !== newProps.rowData || prevProps.displayColumnWidth !== newProps.displayColumnWidth || prevProps.column?.fixedSize != newProps.column?.fixedSize || prevProps.column?.flexGrow != newProps.column?.flexGrow || prevProps.column?.flexShrink != newProps.column?.flexShrink || prevProps.group?.start != newProps.group?.start || prevProps.group?.end != newProps.group?.end) return false;
-	if ((prevProps.column?.formatRowValue || newProps.column?.formatRowValue) && prevProps.column?.formatRowValue !== newProps.column?.formatRowValue) return false;
-	if ((prevProps.column?.cellComponent || newProps.column?.cellComponent) && (prevProps.column?.cellComponent !== newProps.column?.cellComponent || prevProps.onRowAction !== newProps.onRowAction)) return false;
-	return true;
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
+import get from 'lodash/fp/get';
+import { TextCell } from './Table';
+var DataCell = function (_a) {
+    var column = _a.column, group = _a.group, rowData = _a.rowData, onRowAction = _a.onRowAction, displayColumnWidth = _a.displayColumnWidth, rowIndex = _a.rowIndex;
+    var Wrapper = column.fixedSize ? 'div' : TextCell;
+    var wrapperBaseProps = column.fixedSize
+        ? { 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 (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: _jsx(column.cellComponent, { rowData: rowData, onRowAction: onRowAction, column: column, rowIndex: rowIndex }) })));
+    }
+    else {
+        return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: column.formatRowValue ? column.formatRowValue(rowData) : get(column.name, rowData) })));
+    }
+};
+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 ||
+        ((_a = prevProps.column) === null || _a === void 0 ? void 0 : _a.fixedSize) != ((_b = newProps.column) === null || _b === void 0 ? void 0 : _b.fixedSize) ||
+        ((_c = prevProps.column) === null || _c === void 0 ? void 0 : _c.flexGrow) != ((_d = newProps.column) === null || _d === void 0 ? void 0 : _d.flexGrow) ||
+        ((_e = prevProps.column) === null || _e === void 0 ? void 0 : _e.flexShrink) != ((_f = newProps.column) === null || _f === void 0 ? void 0 : _f.flexShrink) ||
+        ((_g = prevProps.group) === null || _g === void 0 ? void 0 : _g.start) != ((_h = newProps.group) === null || _h === void 0 ? void 0 : _h.start) ||
+        ((_j = prevProps.group) === null || _j === void 0 ? void 0 : _j.end) != ((_k = newProps.group) === null || _k === void 0 ? void 0 : _k.end)) {
+        return false;
+    }
+    if ((((_l = prevProps.column) === null || _l === void 0 ? void 0 : _l.formatRowValue) || ((_m = newProps.column) === null || _m === void 0 ? void 0 : _m.formatRowValue)) &&
+        ((_o = prevProps.column) === null || _o === void 0 ? void 0 : _o.formatRowValue) !== ((_p = newProps.column) === null || _p === void 0 ? void 0 : _p.formatRowValue)) {
+        return false;
+    }
+    if ((((_q = prevProps.column) === null || _q === void 0 ? void 0 : _q.cellComponent) || ((_r = newProps.column) === null || _r === void 0 ? void 0 : _r.cellComponent)) &&
+        (((_s = prevProps.column) === null || _s === void 0 ? void 0 : _s.cellComponent) !== ((_t = newProps.column) === null || _t === void 0 ? void 0 : _t.cellComponent) || prevProps.onRowAction !== newProps.onRowAction)) {
+        return false;
+    }
+    return true;
 });
-//#endregion
-export { MemoDataCell as default };
+export default MemoDataCell;

package/ui/Blocks/CommonGrid/components/DataRow.d.ts

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import type { ColumnDefinition, RowProps, UxState, GridSelectorsType, Group } from '../types';
+import { FC } from 'react';
+import { ColumnDefinition, RowProps, UxState, GridSelectorsType, Group } from '../types';
+
 type DataRowProps = {
     columns: ColumnDefinition[];
     rowData: RowProps;

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

@@ -1,62 +1,52 @@
-import { rowClassSymbol } from "../types.js";
-import { StyledDataRow } from "./Table.js";
-import MemoDataCell from "./DataCell.js";
-import { useTimeMeasurement } from "./utils.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/DataRow.tsx
-const DataRow = ({ columns, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowClick, onRowAction, displayColumnsWidth, groups, isEven }) => {
-	const isChecked = !!uxState.checkedRows?.[rowData.id];
-	const handleRowAction = React.useCallback((id, field, value, rowData) => {
-		onRowAction?.(id, field, value, rowData);
-		if (allowRowSelectOnAction) onUxChange?.("selectedRow", id);
-	}, [
-		onRowAction,
-		allowRowSelectOnAction,
-		onUxChange
-	]);
-	const { handleMouseDown, handleMouseUp } = useTimeMeasurement({ handleRowClick: React.useCallback((e) => {
-		const classes = Object.values(e.target.classList);
-		const parent = e.target.closest(".cell");
-		let canPropagation = e.target.dataset?.propagation === "true";
-		let child = e.target;
-		while (child && child !== parent && !canPropagation) {
-			child = child.parentElement;
-			canPropagation = child?.dataset?.propagation === "true";
-		}
-		if (!classes.includes("dataRow") && !classes.includes("cell") && !canPropagation) return;
-		if (onUxChange && allowRowSelect) onUxChange("selectedRow", rowData.id);
-		if (onRowClick) onRowClick(rowData.id, rowData);
-	}, [
-		onRowClick,
-		onUxChange,
-		rowData
-	]) });
-	return /* @__PURE__ */ jsx(StyledDataRow, {
-		className: React.useMemo(() => {
-			const classes = ["dataRow"];
-			if (isChecked) classes.push("checked");
-			if (uxState.selectedRow === rowData.id && (allowRowSelect || allowRowSelectOnAction)) classes.push("selected");
-			if (rowData[rowClassSymbol]) classes.push(rowData[rowClassSymbol] || "");
-			return classes.join(" ");
-		}, [
-			isChecked,
-			uxState,
-			rowData
-		]),
-		hasRowClick: !!onRowClick,
-		onMouseDown: handleMouseDown,
-		onMouseUp: handleMouseUp,
-		isEven: !!isEven,
-		children: columns.map((column, key) => /* @__PURE__ */ jsx(MemoDataCell, {
-			column,
-			rowData,
-			rowIndex,
-			onRowAction: handleRowAction,
-			displayColumnWidth: displayColumnsWidth[column.name],
-			group: groups?.[key]
-		}, column.name))
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { rowClassSymbol } from '../types';
+import MemoDataCell from './DataCell';
+import { StyledDataRow } from './Table';
+import { useTimeMeasurement } from './utils';
+var DataRow = function (_a) {
+    var _b;
+    var columns = _a.columns, rowData = _a.rowData, rowIndex = _a.rowIndex, uxState = _a.uxState, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onUxChange = _a.onUxChange, 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 handleRowAction = React.useCallback(function (id, field, value, rowData) {
+        onRowAction === null || onRowAction === void 0 ? void 0 : onRowAction(id, field, value, rowData);
+        if (allowRowSelectOnAction) {
+            onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', id);
+        }
+    }, [onRowAction, allowRowSelectOnAction, onUxChange]);
+    var handleRowClick = React.useCallback(function (e) {
+        var _a, _b;
+        // test whether I should trigger event or not (because of possible button/link/input/etc in cell)
+        var classes = Object.values(e.target.classList);
+        // find children of parent that has propagation attribute
+        var parent = e.target.closest('.cell');
+        var canPropagation = ((_a = e.target.dataset) === null || _a === void 0 ? void 0 : _a.propagation) === 'true';
+        var child = e.target;
+        while (child && child !== parent && !canPropagation) {
+            child = child.parentElement;
+            canPropagation = ((_b = child === null || child === void 0 ? void 0 : child.dataset) === null || _b === void 0 ? void 0 : _b.propagation) === 'true';
+        }
+        if (!classes.includes('dataRow') && !classes.includes('cell') && !canPropagation)
+            return;
+        if (onUxChange && allowRowSelect)
+            onUxChange('selectedRow', rowData.id);
+        if (onRowClick)
+            onRowClick(rowData.id, rowData);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onRowClick, onUxChange, rowData]);
+    var _c = useTimeMeasurement({ handleRowClick: handleRowClick }), handleMouseDown = _c.handleMouseDown, handleMouseUp = _c.handleMouseUp;
+    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[rowClassSymbol])
+            classes.push(rowData[rowClassSymbol] || '');
+        return classes.join(' ');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isChecked, uxState, rowData]);
+    return (_jsx(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: !!isEven, children: columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, rowIndex: rowIndex, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); }) }));
 };
-//#endregion
-export { DataRow as default };
+export default DataRow;

package/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.d.ts

@@ -1,6 +1,7 @@
-import { type ReactNode, type FC } from 'react';
-import { type AppearanceValue } from '../../../../Elements/Button/types';
-import { type Item } from '../../types';
+import { ReactNode, FC } from 'react';
+import { AppearanceValue } from '../../../../Elements/Button/types';
+import { Item } from '../../types';
+
 type Props = {
     label: string | ReactNode;
     items: Item[];

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

@@ -1,69 +1,34 @@
-import { ArrowDown } from "../../../../Elements/Icon/icons/ArrowDown.js";
-import { ArrowUp } from "../../../../Elements/Icon/icons/ArrowUp.js";
-import "../../../../Elements/Icon/index.js";
-import Button from "../../../../Elements/Button/Button.js";
-import { DropdownMenu } from "../../../../Elements/DropdownMenu/DropdownMenu.js";
-import "../../../../Elements/DropdownMenu/index.js";
-import { useClickOutside } from "../../../Modal/hooks/useClickOutside.js";
-import React, { useCallback, useState } from "react";
-import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.tsx
-const ButtonWrapper = styled$1.div`
-  position: relative;
-  width: fit-content;
-`;
-const StyledDropdownMenu = styled$1(DropdownMenu)`
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  width: max-content;
-  z-index: 2;
-`;
-const StyledButton = styled$1(Button)`
-  padding-right: 0;
-`;
-const StyledIcon = styled$1.div`
-  width: 20px;
-  height: 20px;
-  margin: 9px;
-  & > svg {
-    stroke: ${({ appearance }) => appearance === "secondary" ? th$1.color("blue2") : appearance === "tertiary" ? th$1.color("red1") : "white"};
-  }
-`;
-const Separator = styled$1.div`
-  height: 38px;
-  width: 1px;
-  background-color: white;
-  margin-left: 18px;
-`;
-const DropdownButton = ({ label, items, appearance }) => {
-	const [showDropdownMenu, setShowDropdownMenu] = useState(false);
-	const onClose = useCallback(() => {
-		setShowDropdownMenu(false);
-	}, []);
-	const handleClick = React.useCallback(() => {
-		setShowDropdownMenu((prev) => !prev);
-	}, []);
-	return /* @__PURE__ */ jsxs(ButtonWrapper, {
-		ref: useClickOutside({ onClose }),
-		children: [/* @__PURE__ */ jsxs(StyledButton, {
-			onClick: handleClick,
-			appearance,
-			children: [
-				label,
-				/* @__PURE__ */ jsx(Separator, {}),
-				/* @__PURE__ */ jsx(StyledIcon, {
-					appearance,
-					children: showDropdownMenu ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {})
-				})
-			]
-		}), /* @__PURE__ */ jsx(StyledDropdownMenu, {
-			showMenu: showDropdownMenu,
-			items
-		})]
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { DropdownButton as default };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import Button from '../../../../Elements/Button/Button';
+import DropdownMenu from '../../../../Elements/DropdownMenu';
+import { ArrowDown, ArrowUp } from '../../../../Elements/Icon';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+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: calc(100% + 4px);\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"])));
+var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 0;\n"], ["\n  padding-right: 0;\n"])));
+var StyledIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  margin: 9px;\n  & > svg {\n    stroke: ", ";\n  }\n"], ["\n  width: 20px;\n  height: 20px;\n  margin: 9px;\n  & > svg {\n    stroke: ", ";\n  }\n"])), function (_a) {
+    var appearance = _a.appearance;
+    return appearance === 'secondary' ? th.color('blue2') : appearance === 'tertiary' ? th.color('red1') : th.color('white');
+});
+var Separator = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 38px;\n  width: 1px;\n  background-color: white;\n  margin-left: 18px;\n"], ["\n  height: 38px;\n  width: 1px;\n  background-color: white;\n  margin-left: 18px;\n"])));
+var DropdownButton = function (_a) {
+    var label = _a.label, items = _a.items, appearance = _a.appearance;
+    var _b = useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
+    var onClose = useCallback(function () {
+        setShowDropdownMenu(false);
+    }, []);
+    var handleClick = React.useCallback(function () {
+        setShowDropdownMenu(function (prev) { return !prev; });
+    }, []);
+    var ref = useClickOutside({ onClose: onClose });
+    return (_jsxs(ButtonWrapper, { ref: ref, children: [_jsxs(StyledButton, { onClick: handleClick, appearance: appearance, children: [label, _jsx(Separator, {}), _jsx(StyledIcon, { appearance: appearance, children: showDropdownMenu ? _jsx(ArrowUp, {}) : _jsx(ArrowDown, {}) })] }), _jsx(StyledDropdownMenu, { showMenu: showDropdownMenu, items: items })] }));
+};
+export default DropdownButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Blocks/CommonGrid/components/DropdownButton/index.d.ts

@@ -1,2 +1,3 @@
-import DropdownButton from './DropdownButton';
+import { default as DropdownButton } from './DropdownButton';
+
 export default DropdownButton;

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

@@ -1,5 +1,2 @@
-import DropdownButton from "./DropdownButton.js";
-//#region packages/ui/Blocks/CommonGrid/components/DropdownButton/index.ts
-var DropdownButton_default = DropdownButton;
-//#endregion
-export { DropdownButton_default as default };
+import DropdownButton from './DropdownButton';
+export default DropdownButton;

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.d.ts

@@ -1,6 +1,7 @@
-import { type FC } from 'react';
-import { type CommonGridProps, type ExtraControlButton } from '../../types';
-export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+import { FC } from 'react';
+import { CommonGridProps, ExtraControlButton } from '../../types';
+
+export declare const Row: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 type Props = {
     extraControlButtons: CommonGridProps['extraControlButtons'];
     targetPosition?: ExtraControlButton['position'];

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

@@ -1,60 +1,67 @@
-import Button from "../../../../Elements/Button/Button.js";
-import ButtonMore from "../ButtonMore/ButtonMore.js";
-import DropdownSelect_default from "../../../../Elements/DropdownSelect/index.js";
-import "react";
-import styled$1, { x } from "@xstyled/styled-components";
-import { Fragment, jsx } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.tsx
-const Row = styled$1.div`
-  display: flex;
-  & > * {
-    margin-right: 12px;
-  }
-  z-index: 2;
-`;
-const ControlButton = ({ hide, node, label, appearance, variant, disabled, onClick, onSelect, options, hideChevron, iconLeft, buttonProps }) => {
-	if (hide) return null;
-	if (node) return /* @__PURE__ */ jsx(Fragment, { children: node });
-	if (options) return /* @__PURE__ */ jsx(DropdownSelect_default, {
-		label: label || "",
-		appearance: appearance || "secondary",
-		variant: variant || "default",
-		options,
-		showChevron: !hideChevron,
-		onSelect,
-		disabled
-	});
-	else return /* @__PURE__ */ jsx(Button, {
-		type: "button",
-		onClick,
-		disabled,
-		variant: variant || "default",
-		appearance: appearance || "primary",
-		iconLeft,
-		...buttonProps,
-		children: label
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-const ExtraControlButtons = ({ extraControlButtons, isMobile, targetPosition }) => {
-	const buttons = targetPosition ? (extraControlButtons || []).filter(({ position, hide }) => position === targetPosition && !hide) : extraControlButtons ?? [];
-	if (isMobile && buttons?.length > 0) {
-		const items = buttons.flatMap(({ onSelect, onClick, options, label }) => {
-			if (options && onSelect) return options.map((option) => ({
-				title: typeof label === "string" && !option.label.startsWith(String(label)) ? `${label}: ${option.label}` : option.label,
-				onClick: () => {
-					onSelect(option.value);
-				}
-			}));
-			if (label && onClick) return [{
-				title: label,
-				onClick
-			}];
-			return [];
-		});
-		if (items.length === 0) return null;
-		return /* @__PURE__ */ jsx(ButtonMore, { items });
-	}
-	return /* @__PURE__ */ jsx(Row, { children: buttons?.map((button, idx) => /* @__PURE__ */ jsx(x.div, { children: /* @__PURE__ */ jsx(ControlButton, { ...button }) }, idx)) });
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { Row, ExtraControlButtons as default };
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import Button from '../../../../Elements/Button/Button';
+import DropdownSelect from '../../../../Elements/DropdownSelect';
+import ButtonMore from '../ButtonMore/ButtonMore';
+import styled, { x } from '@xstyled/styled-components';
+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 ControlButton = function (_a) {
+    var hide = _a.hide, node = _a.node, label = _a.label, appearance = _a.appearance, variant = _a.variant, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron, iconLeft = _a.iconLeft, buttonProps = _a.buttonProps;
+    if (hide) {
+        return null;
+    }
+    if (node)
+        return _jsx(_Fragment, { children: node });
+    if (options) {
+        return (_jsx(DropdownSelect, { label: label || '', appearance: appearance || 'secondary', variant: variant || 'default', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
+    }
+    else {
+        return (_jsx(Button, __assign({ type: "button", onClick: onClick, disabled: disabled, variant: variant || 'default', appearance: appearance || 'primary', iconLeft: iconLeft }, buttonProps, { children: label })));
+    }
+};
+var ExtraControlButtons = function (_a) {
+    var extraControlButtons = _a.extraControlButtons, isMobile = _a.isMobile, targetPosition = _a.targetPosition;
+    var buttons = targetPosition
+        ? (extraControlButtons || []).filter(function (_a) {
+            var position = _a.position, hide = _a.hide;
+            return position === targetPosition && !hide;
+        })
+        : extraControlButtons !== null && extraControlButtons !== void 0 ? extraControlButtons : [];
+    if (isMobile && (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0) {
+        var items = buttons.flatMap(function (_a) {
+            var onSelect = _a.onSelect, onClick = _a.onClick, options = _a.options, label = _a.label;
+            if (options && onSelect) {
+                return options.map(function (option) { return ({
+                    title: typeof label === 'string' && !option.label.startsWith(String(label)) ? "".concat(label, ": ").concat(option.label) : option.label,
+                    onClick: function () {
+                        onSelect(option.value);
+                    }
+                }); });
+            }
+            if (label && onClick) {
+                return [{ title: label, onClick: onClick }];
+            }
+            return [];
+        });
+        if (items.length === 0)
+            return null;
+        return _jsx(ButtonMore, { items: items });
+    }
+    return (_jsx(Row, { children: buttons === null || buttons === void 0 ? void 0 : buttons.map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
+};
+export default ExtraControlButtons;
+var templateObject_1;

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/index.d.ts

@@ -1,2 +1,3 @@
-import ExtraControlButtons from './ExtraControlButtons';
+import { default as ExtraControlButtons } from './ExtraControlButtons';
+
 export default ExtraControlButtons;

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

@@ -1,5 +1,2 @@
-import ExtraControlButtons from "./ExtraControlButtons.js";
-//#region packages/ui/Blocks/CommonGrid/components/ExtraControlButtons/index.tsx
-var ExtraControlButtons_default = ExtraControlButtons;
-//#endregion
-export { ExtraControlButtons_default as default };
+import ExtraControlButtons from './ExtraControlButtons';
+export default ExtraControlButtons;

package/ui/Blocks/CommonGrid/components/FilterDropdown.d.ts

@@ -1,3 +1,4 @@
-import { type PropsWithChildren, type ReactElement } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
+
 declare const OverlayComponent: ({ children }: PropsWithChildren) => ReactElement;
 export default OverlayComponent;