@mailstep/design-system 0.8.31-beta.3 → 0.8.31

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

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

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

@@ -1,12 +1,42 @@
-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;
+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 };

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

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

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

@@ -1,52 +1,37 @@
-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);
+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)
+	});
 };
-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;
+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;
 });
-export default MemoDataCell;
+//#endregion
+export { MemoDataCell as default };

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

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

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

@@ -1,52 +1,62 @@
-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)); }) }));
+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))
+	});
 };
-export default DataRow;
+//#endregion
+export { DataRow as default };

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

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

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

@@ -1,34 +1,69 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+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") : th$1.color("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
+		})]
+	});
 };
-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;
+//#endregion
+export { DropdownButton as default };

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

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

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

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

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

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

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

@@ -1,67 +1,60 @@
-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/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 __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 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)) });
 };
-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;
+//#endregion
+export { Row, ExtraControlButtons as default };

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

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

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

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

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

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