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

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

@@ -1,41 +1,32 @@
-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);
-    });
+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) }));
 };
-export default withReduxActions;
+//#endregion
+export { withReduxActions as default };

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

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

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

@@ -1,50 +1,109 @@
-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 "../../../../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: white;
+  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"
+		})
+	] })] }) }) });
 };
-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: white;\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: white;\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;
+//#endregion
+export { ActionHead as default };

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

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

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

@@ -1,18 +1,39 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import "react";
+import styled$1 from "@xstyled/styled-components";
+import { th as th$1 } from "@xstyled/system";
+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)) });
 };
-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;
+//#endregion
+export { ActionDropdownMenu as default };

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

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

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

@@ -1,51 +1,81 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+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 "@xstyled/system";
+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 })
+	})] });
 };
-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;
+var ActionDropdownSelect_default = memo(ActionDropdownSelect);
+//#endregion
+export { ActionDropdownSelect_default as default };

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

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

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

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

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

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

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

@@ -1,32 +1,45 @@
-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 { 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
+		})]
+	});
 };
-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;
+//#endregion
+export { ButtonMore as default };

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

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

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

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

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

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