@mailstep/design-system 0.8.29 → 0.8.31-beta.1

package/ui/Blocks/CommonGrid/HoC/withReduxActions.js

@@ -1,32 +1,41 @@
-import { createActions, createFullSelector } from "../store/index.js";
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
-//#region packages/ui/Blocks/CommonGrid/HoC/withReduxActions.ts
-const withReduxActions = (gridName, prefix = "grid") => {
-	const actions = createActions(gridName);
-	const selectors = createFullSelector(gridName);
-	return connect((state) => ({ [`${prefix}Selectors`]: selectors(state) }), (dispatch) => ({ [`${prefix}Actions`]: bindActionCreators({
-		init: actions.init,
-		clearUxState: actions.clearUxState,
-		handleUxChange: actions.handleUxChange,
-		openConfigForm: actions.openConfigForm,
-		closeConfigForm: actions.closeConfigForm,
-		setColumnConfig: actions.setColumnConfig,
-		setPage: actions.setPage,
-		setPresets: actions.setPresets,
-		createPreset: actions.createPreset,
-		deletePreset: actions.deletePreset,
-		setRowsPerPage: actions.setRowsPerPage,
-		addFilter: actions.addFilter,
-		setFilters: actions.setFilters,
-		resetFilters: actions.resetFilters,
-		addSorting: actions.addSorting,
-		resetSorting: actions.resetSorting,
-		clearSettings: actions.clearSettings,
-		setColumnWidth: actions.setColumnWidth,
-		resetGrid: actions.resetGrid,
-		setColumnsOrder: actions.setColumnsOrder
-	}, dispatch) }));
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { createActions, createFullSelector } from '../store';
+var withReduxActions = function (gridName, prefix) {
+    if (prefix === void 0) { prefix = 'grid'; }
+    var actions = createActions(gridName);
+    var selectors = createFullSelector(gridName);
+    return connect(function (state) {
+        var _a;
+        return (_a = {},
+            _a["".concat(prefix, "Selectors")] = selectors(state),
+            _a);
+    }, function (dispatch) {
+        var _a;
+        return (_a = {},
+            _a["".concat(prefix, "Actions")] = bindActionCreators({
+                init: actions.init,
+                clearUxState: actions.clearUxState,
+                handleUxChange: actions.handleUxChange,
+                openConfigForm: actions.openConfigForm,
+                closeConfigForm: actions.closeConfigForm,
+                setColumnConfig: actions.setColumnConfig,
+                setPage: actions.setPage,
+                setPresets: actions.setPresets,
+                createPreset: actions.createPreset,
+                deletePreset: actions.deletePreset,
+                setRowsPerPage: actions.setRowsPerPage,
+                addFilter: actions.addFilter,
+                setFilters: actions.setFilters,
+                resetFilters: actions.resetFilters,
+                addSorting: actions.addSorting,
+                resetSorting: actions.resetSorting,
+                clearSettings: actions.clearSettings,
+                setColumnWidth: actions.setColumnWidth,
+                resetGrid: actions.resetGrid,
+                setColumnsOrder: actions.setColumnsOrder,
+            }, dispatch),
+            _a);
+    });
 };
-//#endregion
-export { withReduxActions as default };
+export default withReduxActions;

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

@@ -1,5 +1,6 @@
-import { type FC } from 'react';
-import { type GridActionsType, type GridSelectorsType, type OnBatchActionFn, type RowProps, type ActionColumn } from '../../types';
+import { FC } from 'react';
+import { GridActionsType, GridSelectorsType, OnBatchActionFn, RowProps, ActionColumn } from '../../types';
+
 type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;

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

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

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.d.ts

@@ -1,4 +1,5 @@
-import { type FC, type ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
+
 type ItemType = {
     title: string | ReactNode;
     onClick: () => void;

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

@@ -1,39 +1,18 @@
-import "react";
-import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.tsx
-const StyledDropdownWrap = styled$1.div`
-  position: relative;
-  left: 0;
-  top: 3px;
-  display: flex;
-  flex-direction: column;
-  padding: 2;
-  width: 100%;
-  background-color: ${th$1.color("white")};
-  box-shadow: ${th$1.shadow("dropShadow")};
-  min-width: 8.9rem;
-  font-size: 12px;
-  font-weight: normal;
-  border-radius: 10px;
-  z-index: 1;
-`;
-const StyledDropdownItem = styled$1.li`
-  padding: 2 2;
-  border-radius: 6px;
-  cursor: pointer;
-  &:hover {
-    background-color: ${th$1.color("bgLightGray1")};
-    color: ${th$1.color("typoPrimary")};
-    font-weight: bold;
-  }
-`;
-const ActionDropdownMenu = ({ items }) => {
-	return /* @__PURE__ */ jsx(StyledDropdownWrap, { children: items.map((item, index) => /* @__PURE__ */ jsx(StyledDropdownItem, {
-		onClick: item.onClick ?? void 0,
-		children: item.title
-	}, index)) });
+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 { ActionDropdownMenu as default };
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+var StyledDropdownWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  left: 0;\n  top: 3px;\n  display: flex;\n  flex-direction: column;\n  padding: 2;\n  width: 100%;\n  background-color: ", ";\n  box-shadow: ", ";\n  min-width: 8.9rem;\n  font-size: 12px;\n  font-weight: normal;\n  border-radius: 10px;\n  z-index: 1;\n"], ["\n  position: relative;\n  left: 0;\n  top: 3px;\n  display: flex;\n  flex-direction: column;\n  padding: 2;\n  width: 100%;\n  background-color: ", ";\n  box-shadow: ", ";\n  min-width: 8.9rem;\n  font-size: 12px;\n  font-weight: normal;\n  border-radius: 10px;\n  z-index: 1;\n"])), th.color('white'), th.shadow('dropShadow'));
+var StyledDropdownItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 2 2;\n  border-radius: 6px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: bold;\n  }\n"], ["\n  padding: 2 2;\n  border-radius: 6px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: bold;\n  }\n"])), th.color('bgLightGray1'), th.color('typoPrimary'));
+var ActionDropdownMenu = function (_a) {
+    var items = _a.items;
+    return (_jsx(StyledDropdownWrap, { children: items.map(function (item, index) {
+            var _a;
+            return (_jsx(StyledDropdownItem, { onClick: (_a = item.onClick) !== null && _a !== void 0 ? _a : undefined, children: item.title }, index));
+        }) }));
+};
+export default ActionDropdownMenu;
+var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownSelect.d.ts

@@ -1,4 +1,5 @@
-import React, { type ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
+
 type Item = {
     label: string | ReactNode;
     value: string;

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

@@ -1,81 +1,51 @@
-import Icon from "../../../../../Elements/Icon/Icon.js";
-import Popover from "../../../../Popover/index.js";
-import ActionDropdownMenu from "./ActionDropdownMenu.js";
-import React, { memo, useRef } from "react";
-import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Trans } from "@lingui/react";
-//#region packages/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownSelect.tsx
-const Content = styled$1.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 1 2;
-  min-width: 9rem;
-  height: 28px;
-  background-color: ${th$1.color("white")};
-  color: ${({ $isDisabled }) => $isDisabled ? th$1.color("lightGray7") : th$1.color("lightGray5")};
-  border: slim;
-  border-color: ${({ $isDisabled, $isOpened }) => $isDisabled ? th$1.color("lightGray7") : $isOpened ? th$1.color("blue2") : th$1.color("lightGray5")};
-  font-size: 12px;
-  font-weight: 600;
-  border-radius: 6px;
-  cursor: ${({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer"};
-  transition: 0.2s;
-  &:not(:disabled):hover {
-    color: ${th$1.color("gray1")};
-    border-color: ${th$1.color("gray1")};
-  }
-  p {
-    margin: 0;
-    margin-right: auto;
-    padding-right: 36px;
-  }
-`;
-const IconWrap = styled$1.div`
-  color: ${({ $isDisabled, $isOpened }) => $isDisabled ? th$1.color("lightGray6") : $isOpened ? th$1.color("blue2") : th$1.color("gray1")};
-  font-size: 0.8rem;
-  font-weight: 1000;
-  transform: rotate(${({ $isOpened }) => $isOpened ? "180deg" : 0});
-`;
-const ActionDropdownSelect = ({ options, onSelect, disabled = false }) => {
-	const [showDropdownMenu, setShowDropdownMenu] = React.useState(false);
-	const toggleDropdownMenu = React.useCallback(() => {
-		setShowDropdownMenu((prev) => !prev);
-	}, []);
-	const handleSelectItem = React.useCallback((item) => {
-		setShowDropdownMenu(false);
-		onSelect(item.value);
-	}, [onSelect]);
-	const items = options.map((item) => ({
-		title: item.label,
-		onClick: () => {
-			handleSelectItem(item);
-		},
-		link: "#"
-	}));
-	const ref = useRef(null);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Content, {
-		$isDisabled: disabled,
-		$isOpened: showDropdownMenu,
-		onClick: toggleDropdownMenu,
-		ref,
-		children: [/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Trans, {
-			id: "dataGrid.buttonActions",
-			message: "Actions"
-		}) }), /* @__PURE__ */ jsx(IconWrap, {
-			$isDisabled: disabled,
-			$isOpened: showDropdownMenu,
-			children: /* @__PURE__ */ jsx(Icon, { icon: "goDown" })
-		})]
-	}), showDropdownMenu && !disabled && items?.length > 0 && /* @__PURE__ */ jsx(Popover, {
-		parentRef: ref,
-		onClose: toggleDropdownMenu,
-		placement: "bottom-start",
-		children: /* @__PURE__ */ jsx(ActionDropdownMenu, { items })
-	})] });
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-var ActionDropdownSelect_default = memo(ActionDropdownSelect);
-//#endregion
-export { ActionDropdownSelect_default as default };
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { memo, useRef } from 'react';
+import Icon from '../../../../../Elements/Icon/Icon';
+import Popover from '../../../../Popover';
+import { Trans } from '@lingui/react';
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import ActionDropdownMenu from './ActionDropdownMenu';
+var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 1 2;\n  min-width: 9rem;\n  height: 28px;\n  background-color: ", ";\n  color: ", ";\n  border: slim;\n  border-color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: ", ";\n  transition: 0.2s;\n  &:not(:disabled):hover {\n    color: ", ";\n    border-color: ", ";\n  }\n  p {\n    margin: 0;\n    margin-right: auto;\n    padding-right: 36px;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 1 2;\n  min-width: 9rem;\n  height: 28px;\n  background-color: ", ";\n  color: ", ";\n  border: slim;\n  border-color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: ", ";\n  transition: 0.2s;\n  &:not(:disabled):hover {\n    color: ", ";\n    border-color: ", ";\n  }\n  p {\n    margin: 0;\n    margin-right: auto;\n    padding-right: 36px;\n  }\n"])), th.color('white'), function (_a) {
+    var $isDisabled = _a.$isDisabled;
+    return ($isDisabled ? th.color('lightGray7') : th.color('lightGray5'));
+}, function (_a) {
+    var $isDisabled = _a.$isDisabled, $isOpened = _a.$isOpened;
+    return $isDisabled ? th.color('lightGray7') : $isOpened ? th.color('blue2') : th.color('lightGray5');
+}, function (_a) {
+    var $isDisabled = _a.$isDisabled;
+    return ($isDisabled ? 'not-allowed' : 'pointer');
+}, th.color('gray1'), th.color('gray1'));
+var IconWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"], ["\n  color: ", ";\n  font-size: 0.8rem;\n  font-weight: 1000;\n  transform: rotate(", ");\n"])), function (_a) {
+    var $isDisabled = _a.$isDisabled, $isOpened = _a.$isOpened;
+    return $isDisabled ? th.color('lightGray6') : $isOpened ? th.color('blue2') : th.color('gray1');
+}, function (_a) {
+    var $isOpened = _a.$isOpened;
+    return ($isOpened ? '180deg' : 0);
+});
+var ActionDropdownSelect = function (_a) {
+    var options = _a.options, onSelect = _a.onSelect, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var _c = React.useState(false), showDropdownMenu = _c[0], setShowDropdownMenu = _c[1];
+    var toggleDropdownMenu = React.useCallback(function () {
+        setShowDropdownMenu(function (prev) { return !prev; });
+    }, []);
+    var handleSelectItem = React.useCallback(function (item) {
+        setShowDropdownMenu(false);
+        onSelect(item.value);
+    }, [onSelect]);
+    var items = options.map(function (item) { return ({
+        title: item.label,
+        onClick: function () {
+            handleSelectItem(item);
+        },
+        link: '#'
+    }); });
+    var ref = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsxs(Content, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, onClick: toggleDropdownMenu, ref: ref, children: [_jsx("p", { children: _jsx(Trans, { id: "dataGrid.buttonActions", message: "Actions" }) }), _jsx(IconWrap, { "$isDisabled": disabled, "$isOpened": showDropdownMenu, children: _jsx(Icon, { icon: "goDown" }) })] }), showDropdownMenu && !disabled && (items === null || items === void 0 ? void 0 : items.length) > 0 && (_jsx(Popover, { parentRef: ref, onClose: toggleDropdownMenu, placement: "bottom-start", children: _jsx(ActionDropdownMenu, { items: items }) }))] }));
+};
+export default memo(ActionDropdownSelect);
+var templateObject_1, templateObject_2;

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

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

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

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

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { FC } from 'react';
+import { default as React, FC } from 'react';
+
 type ItemType = {
     title: string | React.ReactElement;
     onClick: () => void;

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

@@ -1,45 +1,32 @@
-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 { useCallback, useState } from "react";
-import styled$1 from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/ButtonMore/ButtonMore.tsx
-const ButtonWrapper = styled$1.div`
-  position: relative;
-  width: fit-content;
-`;
-const StyledDropdownMenu = styled$1(DropdownMenu)`
-  position: absolute;
-  top: ${({ dropdownPosition }) => !dropdownPosition || dropdownPosition === "bottom" ? "calc(100% + 8px)" : "auto"};
-  bottom: ${({ dropdownPosition }) => dropdownPosition === "top" ? "calc(100% + 13px)" : "auto"};
-  right: 0;
-  width: max-content;
-  z-index: 2;
-`;
-const ButtonMore = ({ items, disabled, dropdownPosition }) => {
-	const [actionsVisible, setActionsVisible] = useState(false);
-	return /* @__PURE__ */ jsxs(ButtonWrapper, {
-		ref: useClickOutside({ onClose: useCallback(() => {
-			setActionsVisible(false);
-		}, []) }),
-		children: [/* @__PURE__ */ jsx(Button, {
-			onClick: useCallback(() => {
-				setActionsVisible(!actionsVisible);
-			}, [actionsVisible]),
-			icon: "ellipsisVertical",
-			appearance: "secondary",
-			variant: "icon",
-			type: "button",
-			"data-cy": "gridActionBtn",
-			disabled
-		}), /* @__PURE__ */ jsx(StyledDropdownMenu, {
-			showMenu: actionsVisible,
-			items,
-			dropdownPosition
-		})]
-	});
+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 { ButtonMore as default };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import Button from '../../../../Elements/Button/Button';
+import DropdownMenu from '../../../../Elements/DropdownMenu';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import styled from '@xstyled/styled-components';
+var ButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n"], ["\n  position: relative;\n  width: fit-content;\n"])));
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"])), function (_a) {
+    var dropdownPosition = _a.dropdownPosition;
+    return (!dropdownPosition || dropdownPosition === 'bottom' ? 'calc(100% + 8px)' : 'auto');
+}, function (_a) {
+    var dropdownPosition = _a.dropdownPosition;
+    return (dropdownPosition === 'top' ? 'calc(100% + 13px)' : 'auto');
+});
+var ButtonMore = function (_a) {
+    var items = _a.items, disabled = _a.disabled, dropdownPosition = _a.dropdownPosition;
+    var _b = useState(false), actionsVisible = _b[0], setActionsVisible = _b[1];
+    var onClose = useCallback(function () {
+        setActionsVisible(false);
+    }, []);
+    var ref = useClickOutside({ onClose: onClose });
+    var handleClick = useCallback(function () {
+        setActionsVisible(!actionsVisible);
+    }, [actionsVisible]);
+    return (_jsxs(ButtonWrapper, { ref: ref, children: [_jsx(Button, { onClick: handleClick, icon: "ellipsisVertical", appearance: "secondary", variant: "icon", type: "button", "data-cy": "gridActionBtn", disabled: disabled }), _jsx(StyledDropdownMenu, { showMenu: actionsVisible, items: items, dropdownPosition: dropdownPosition })] }));
+};
+export default ButtonMore;
+var templateObject_1, templateObject_2;

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

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

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

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

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

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import type { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, Group, ActionColumn, UxState, RowProps } from '../types';
+import { FC } from 'react';
+import { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, Group, ActionColumn, UxState, RowProps } from '../types';
+
 type Props = {
     onChange: Required<GridActionsType>['addFilter'];
     value?: any;