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

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

@@ -1,53 +1,40 @@
-import { createFilterType, getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from "../utils/index.js";
-import { useAddFilter } from "../hooks/useAddFilter.js";
-import { Cell } from "./Table.js";
-import OverlayComponent from "./FilterDropdown.js";
-import React from "react";
-import { x } from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/ColumnFilterCell.tsx
-const ColumnFilterCell = ({ onChange, value, others, displayColumnWidth, filters, column: columnDefinition, group, comparators, actionColumn, rowsData, uxState, handleUxChange, onAsyncLoadFilterOptions }) => {
-	const cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
-	const handleAddFilter = useAddFilter(onChange);
-	const handleChange = React.useCallback((event, others) => {
-		handleAddFilter(event?.target ? event.target.value : event, columnDefinition, others);
-	}, [handleAddFilter, columnDefinition]);
-	const cellClassName = `cell${getStickyCollClassNames(!!columnDefinition.sticky, columnDefinition.stickTo)} ${getGroupClassNames(group)}`;
-	if (!columnDefinition.filtering) return /* @__PURE__ */ jsx(Cell, {
-		className: cellClassName,
-		...cellSizeProps
-	});
-	const filterType = createFilterType(columnDefinition);
-	const filterConfig = filters?.[filterType];
-	const defaultComparators = comparators?.[filterType];
-	const RenderComponent = filterConfig?.CellComponent;
-	if (!RenderComponent) {
-		console.error(`ERROR, using unknown filter type ${filterType}`);
-		return /* @__PURE__ */ jsx(x.div, { children: /* @__PURE__ */ jsx("span", { children: `${filterType} filter` }) });
-	}
-	return /* @__PURE__ */ jsx(Cell, {
-		className: cellClassName,
-		...cellSizeProps,
-		children: /* @__PURE__ */ jsx(x.div, { children: /* @__PURE__ */ jsx(RenderComponent, {
-			asyncLoadKey: columnDefinition.asyncLoadKey,
-			"data-test": columnDefinition.name,
-			name: columnDefinition.name,
-			onChange: handleChange,
-			value,
-			others,
-			OverlayComponent,
-			comparators: defaultComparators,
-			actionColumn,
-			rowsData,
-			uxState,
-			handleUxChange,
-			onAsyncLoadFilterOptions,
-			...filterConfig?.defaultExtraProps,
-			...columnDefinition.filterExtraProps,
-			...filterType == "options" && { options: columnDefinition.filterOptions },
-			columnWidth: cellSizeProps?.flexBasis
-		}) })
-	});
+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 { ColumnFilterCell as default };
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useAddFilter } from '../hooks/useAddFilter';
+import { createFilterType, getStickyCollClassNames, getCellSizeProps, getGroupClassNames } from '../utils';
+import { x } from '@xstyled/styled-components';
+import OverlayComponent from './FilterDropdown';
+import { Cell } from './Table';
+var ColumnFilterCell = function (_a) {
+    var onChange = _a.onChange, value = _a.value, others = _a.others, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group, comparators = _a.comparators, actionColumn = _a.actionColumn, rowsData = _a.rowsData, uxState = _a.uxState, handleUxChange = _a.handleUxChange, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions;
+    var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
+    var handleAddFilter = useAddFilter(onChange);
+    var handleChange = React.useCallback(function (event, others) {
+        handleAddFilter((event === null || event === void 0 ? void 0 : event.target) ? event.target.value : event, columnDefinition, others);
+    }, [handleAddFilter, columnDefinition]);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!columnDefinition.sticky, columnDefinition.stickTo), " ").concat(getGroupClassNames(group));
+    if (!columnDefinition.filtering) {
+        return _jsx(Cell, __assign({ className: cellClassName }, cellSizeProps));
+    }
+    var filterType = createFilterType(columnDefinition);
+    var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
+    var defaultComparators = comparators === null || comparators === void 0 ? void 0 : comparators[filterType];
+    var RenderComponent = filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent;
+    if (!RenderComponent) {
+        console.error("ERROR, using unknown filter type ".concat(filterType));
+        return (_jsx(x.div, { children: _jsx("span", { children: "".concat(filterType, " filter") }) }));
+    }
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ asyncLoadKey: columnDefinition.asyncLoadKey, "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, others: others, OverlayComponent: OverlayComponent, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }), { columnWidth: cellSizeProps === null || cellSizeProps === void 0 ? void 0 : cellSizeProps.flexBasis })) }) })));
+};
+export default ColumnFilterCell;

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

@@ -1,4 +1,5 @@
-import React from 'react';
-import { type ColumnTitleComponentType } from '../../types';
+import { default as React } from 'react';
+import { ColumnTitleComponentType } from '../../types';
+
 declare const ColumnTitle: React.FC<ColumnTitleComponentType>;
 export default ColumnTitle;

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

@@ -1,132 +1,58 @@
-import Icon from "../../../../Elements/Icon/Icon.js";
-import { useCallback, useEffect, useRef, useState } from "react";
-import styled$1, { css, x } from "@xstyled/styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/ColumnTitle/ColumnTitle.tsx
-const WRAPPER_WIDTH = 35;
-const Wrap = styled$1.div`
-  width: 100%;
-  font-size: 0.8rem;
-`;
-const Title = styled$1.h4`
-  margin: unset;
-  align-self: center;
-  flex-shrink: 1;
-`;
-const arrowStyles = css`
-  flex-direction: row;
-  & > * {
-    cursor: pointer;
-  }
-`;
-const InlineArrowWrap = styled$1.div`
-  display: ${({ $isPopup }) => $isPopup ? "none" : "flex"};
-  position: static;
-  font-size: 1rem;
-  ${arrowStyles}
-  margin-left: 6px;
-`;
-const PopupArrowWrap = styled$1.div`
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: -24px;
-  background-color: lightGray2;
-  font-size: 0.8rem;
-  border-radius: 0.4rem;
-  padding: 0 4px;
-  ${arrowStyles}
-  width: ${WRAPPER_WIDTH}px;
-  box-shadow: tooltipShadow;
-  z-index: 1;
-`;
-const OverflowWrap = styled$1.div`
-  display: none;
-  position: relative;
-  overflow: visible;
-  &:hover {
-    display: block;
-  }
-`;
-const WarningWrap = styled$1.div`
-  position: relative;
-  display: ${({ $isPopup }) => $isPopup ? "block" : "none"};
-  font-size: 0.7rem;
-  margin-right: 6px;
-  align-self: center;
-  &:hover + ${OverflowWrap} {
-    display: flex;
-  }
-`;
-const Content = styled$1.div`
-  justify-content: ${({ $isPopup }) => $isPopup ? "space-between" : "unset"};
-  display: flex;
-`;
-const ColumnTitle = ({ title, isSortable, onSetSort, sortValue }) => {
-	const [isOverflowing, setIsOverflowing] = useState(false);
-	const onSetAsc = useCallback(() => onSetSort?.("asc"), [onSetSort]);
-	const onSetDesc = useCallback(() => onSetSort?.("desc"), [onSetSort]);
-	const onSetNull = useCallback(() => onSetSort?.(null), [onSetSort]);
-	const isAsc = sortValue === "asc";
-	const isDesc = sortValue === "desc";
-	const wrapRef = useRef(null);
-	const contentRef = useRef(null);
-	useEffect(() => {
-		const wrapRefCopy = wrapRef.current;
-		const contentRefCopy = contentRef.current;
-		if (!wrapRefCopy || !contentRefCopy) return;
-		const resizeObserver = new ResizeObserver(() => {
-			const wrapWidth = wrapRefCopy.offsetWidth;
-			setIsOverflowing(wrapWidth <= contentRefCopy.offsetWidth + 42);
-		});
-		resizeObserver.observe(wrapRefCopy?.parentNode);
-		return () => {
-			resizeObserver.unobserve(wrapRefCopy?.parentNode);
-		};
-	}, [wrapRef?.current]);
-	const Arrows = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(x.div, {
-		onClick: isAsc ? onSetNull : onSetAsc,
-		children: /* @__PURE__ */ jsx(Icon, {
-			icon: "chevronUp",
-			fill: isAsc ? "blue2" : "lightGray3"
-		})
-	}), /* @__PURE__ */ jsx(x.div, {
-		onClick: isDesc ? onSetNull : onSetDesc,
-		children: /* @__PURE__ */ jsx(Icon, {
-			icon: "chevronDown",
-			fill: isDesc ? "blue2" : "lightGray3"
-		})
-	})] });
-	return /* @__PURE__ */ jsx(Wrap, {
-		ref: wrapRef,
-		children: /* @__PURE__ */ jsxs(Content, {
-			$isPopup: isOverflowing,
-			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Title, {
-				ref: contentRef,
-				children: title
-			}) }), isSortable && /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(WarningWrap, {
-					$isPopup: isOverflowing,
-					children: /* @__PURE__ */ jsx(Icon, {
-						icon: "warningDual",
-						fill: "black",
-						secondaryColor: "yellow2"
-					})
-				}),
-				/* @__PURE__ */ jsx(OverflowWrap, {
-					$isPopup: isOverflowing,
-					children: /* @__PURE__ */ jsx(PopupArrowWrap, {
-						$isPopup: isOverflowing,
-						children: Arrows
-					})
-				}),
-				/* @__PURE__ */ jsx(InlineArrowWrap, {
-					$isPopup: isOverflowing,
-					children: Arrows
-				})
-			] })]
-		})
-	});
+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 { ColumnTitle as default };
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import Icon from '../../../../Elements/Icon/Icon';
+import styled, { x, css } from '@xstyled/styled-components';
+// ArrowWrap and WarningWrap need to have the same size to solve resizing issues
+var WRAPPER_WIDTH = 35;
+var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  font-size: 0.8rem;\n"], ["\n  width: 100%;\n  font-size: 0.8rem;\n"])));
+var Title = styled.h4(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"], ["\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"])));
+var arrowStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"], ["\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"])));
+var InlineArrowWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"], ["\n  display: ", ";\n  position: static;\n  font-size: 1rem;\n  ", "\n  margin-left: 6px;\n"])), function (_a) {
+    var $isPopup = _a.$isPopup;
+    return ($isPopup ? 'none' : 'flex');
+}, arrowStyles);
+var PopupArrowWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"], ["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ", "\n  width: ", "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"])), arrowStyles, WRAPPER_WIDTH);
+var OverflowWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"], ["\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"])));
+var WarningWrap = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  display: ", ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ", " {\n    display: flex;\n  }\n"])), function (_a) {
+    var $isPopup = _a.$isPopup;
+    return ($isPopup ? 'block' : 'none');
+}, OverflowWrap);
+var Content = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: ", ";\n  display: flex;\n"], ["\n  justify-content: ", ";\n  display: flex;\n"])), function (_a) {
+    var $isPopup = _a.$isPopup;
+    return ($isPopup ? 'space-between' : 'unset');
+});
+var ColumnTitle = function (_a) {
+    var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
+    var _b = useState(false), isOverflowing = _b[0], setIsOverflowing = _b[1];
+    var onSetAsc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('asc'); }, [onSetSort]);
+    var onSetDesc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('desc'); }, [onSetSort]);
+    var onSetNull = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort(null); }, [onSetSort]);
+    var isAsc = sortValue === 'asc';
+    var isDesc = sortValue === 'desc';
+    var wrapRef = useRef(null);
+    var contentRef = useRef(null);
+    useEffect(function () {
+        var wrapRefCopy = wrapRef.current;
+        var contentRefCopy = contentRef.current;
+        if (!wrapRefCopy || !contentRefCopy)
+            return;
+        var resizeObserver = new ResizeObserver(function () {
+            var wrapWidth = wrapRefCopy.offsetWidth;
+            var contentWidth = contentRefCopy.offsetWidth + 42; // width of sorting buttons
+            setIsOverflowing(wrapWidth <= contentWidth);
+        });
+        resizeObserver.observe(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
+        return function () {
+            resizeObserver.unobserve(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wrapRef === null || wrapRef === void 0 ? void 0 : wrapRef.current]);
+    var Arrows = (_jsxs(_Fragment, { children: [_jsx(x.div, { onClick: isAsc ? onSetNull : onSetAsc, children: _jsx(Icon, { icon: "chevronUp", fill: isAsc ? 'blue2' : 'lightGray3' }) }), _jsx(x.div, { onClick: isDesc ? onSetNull : onSetDesc, children: _jsx(Icon, { icon: "chevronDown", fill: isDesc ? 'blue2' : 'lightGray3' }) })] }));
+    return (_jsx(Wrap, { ref: wrapRef, children: _jsxs(Content, { "$isPopup": isOverflowing, children: [_jsx("div", { children: _jsx(Title, { ref: contentRef, children: title }) }), isSortable && (_jsxs(_Fragment, { children: [_jsx(WarningWrap, { "$isPopup": isOverflowing, children: _jsx(Icon, { icon: "warningDual", fill: "black", secondaryColor: "yellow2" }) }), _jsx(OverflowWrap, { "$isPopup": isOverflowing, children: _jsx(PopupArrowWrap, { "$isPopup": isOverflowing, children: Arrows }) }), _jsx(InlineArrowWrap, { "$isPopup": isOverflowing, children: Arrows })] }))] }) }));
+};
+export default ColumnTitle;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

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

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

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

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

@@ -1,4 +1,5 @@
-import React from 'react';
-import type { ColumnTitleComponentType } from '../types';
+import { default as React } from 'react';
+import { ColumnTitleComponentType } from '../types';
+
 declare const _default: React.NamedExoticComponent<ColumnTitleComponentType>;
 export default _default;

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

@@ -1,40 +1,31 @@
-import { SortingDown, SortingUp } from "./icons/Sorting.js";
-import React from "react";
-import styled$1 from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/ColumnTitle.tsx
-const Title = styled$1.span`
-  & + * {
-    margin-left: 1em;
-  }
-`;
-const ColumnTitle = ({ title, isSortable, onSetSort, sortValue }) => {
-	const [mouseDownTimestamp, setMouseDownTimestamp] = React.useState(0);
-	const handleMouseDown = React.useCallback(() => {
-		setMouseDownTimestamp(Date.now());
-	}, []);
-	const handleMouseUp = React.useCallback(() => {
-		if (Date.now() - mouseDownTimestamp < 200) {
-			const newValue = sortValue ? sortValue === "asc" ? "desc" : null : "asc";
-			if (onSetSort) onSetSort(newValue);
-		}
-		setMouseDownTimestamp(0);
-	}, [
-		mouseDownTimestamp,
-		onSetSort,
-		sortValue
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		onMouseDown: isSortable ? handleMouseDown : void 0,
-		onMouseUp: isSortable ? handleMouseUp : void 0,
-		className: isSortable ? "sortable" : "",
-		children: [
-			/* @__PURE__ */ jsx(Title, { children: title }),
-			isSortable && sortValue === "asc" && /* @__PURE__ */ jsx(SortingUp, { width: "16" }),
-			isSortable && sortValue === "desc" && /* @__PURE__ */ jsx(SortingDown, { width: "16" })
-		]
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-var ColumnTitle_default = React.memo(ColumnTitle);
-//#endregion
-export { ColumnTitle_default as default };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { SortingUp, SortingDown } from './icons/Sorting';
+import styled, { useTheme, th } from '@xstyled/styled-components';
+var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & + * {\n    margin-left: 1em;\n  }\n"], ["\n  & + * {\n    margin-left: 1em;\n  }\n"])));
+var ColumnTitle = function (_a) {
+    var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
+    var _b = React.useState(0), mouseDownTimestamp = _b[0], setMouseDownTimestamp = _b[1];
+    var theme = useTheme();
+    var typoPrimaryColor = th.color('typoPrimary')({ theme: theme });
+    var handleMouseDown = React.useCallback(function () {
+        setMouseDownTimestamp(Date.now());
+    }, []);
+    var handleMouseUp = React.useCallback(function () {
+        var now = Date.now();
+        var duration = now - mouseDownTimestamp;
+        if (duration < 200) {
+            var newValue = sortValue ? (sortValue === 'asc' ? 'desc' : null) : 'asc';
+            if (onSetSort)
+                onSetSort(newValue);
+        }
+        setMouseDownTimestamp(0);
+    }, [mouseDownTimestamp, onSetSort, sortValue]);
+    return (_jsxs("div", { onMouseDown: isSortable ? handleMouseDown : undefined, onMouseUp: isSortable ? handleMouseUp : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16", fill: typoPrimaryColor }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16", fill: typoPrimaryColor })] }));
+};
+export default React.memo(ColumnTitle);
+var templateObject_1;

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import type { Dispatch, FC } from 'react';
-import { type CommonGridProps, type GridActionsType, type GridSelectorsType, type ColumnDefinition, type FiltersConfig } from '../../types';
+import { default as React, Dispatch, FC } from 'react';
+import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition, FiltersConfig } from '../../types';
+
 type Props = {
     extraControlButtons: CommonGridProps['extraControlButtons'];
     gridActions: GridActionsType;

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

@@ -1,160 +1,54 @@
-import { Settings2 } from "../../../../Elements/Icon/icons/Settings2.js";
-import { Filter } from "../../../../Elements/Icon/icons/Filter.js";
-import { Sort } from "../../../../Elements/Icon/icons/Sort.js";
-import Button from "../../../../Elements/Button/Button.js";
-import Tag from "../../../../Elements/Tag/Tag.js";
-import { palettes } from "../../../../Elements/Tag/palettes.js";
-import { H6 } from "../../../../Elements/Typography/Typography.js";
-import "../../../../Elements/Typography/index.js";
-import { isFilterActive } from "../../utils/index.js";
-import useQuickFilter from "../../hooks/useQuickFilter.js";
-import "../../types.js";
-import ExtraControlButtons_default from "../ExtraControlButtons/index.js";
-import QuickFilter_default from "../QuickFilter/index.js";
-import { ControlButtonsContainer, Left, Right, StyledColumnButton } from "./styles.js";
-import { useEffect, useMemo } from "react";
-import { useColor, x } from "@xstyled/styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { i18n } from "@lingui/core";
-import { Trans } from "@lingui/react";
-//#region packages/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.tsx
-const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quickFilter = "", columns, filters, hideControlButtons, displayManageColumnButton, openManageColumnForm, setDisplayManageColumnButton, onOpenPresetsModal, gridName, selectedPresetName, withPresets, withManageColumnButton, onOpenMobileFilters, onOpenMobileSorting, isSortTerminated }) => {
-	const { searchedValue, translatedValue, onChangeInputValue, onClear, onClearSettings, onDisplayInput, displayInput, isMobileInputView, isMobile, filter } = useQuickFilter({
-		gridActions,
-		gridSelectors,
-		quickFilter,
-		columns,
-		filters
-	});
-	useEffect(() => {
-		setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);
-	}, [
-		isMobileInputView,
-		withManageColumnButton,
-		setDisplayManageColumnButton
-	]);
-	const red = useColor("red1");
-	const filtersCount = useMemo(() => filter ? Object.values(filter).filter((item) => isFilterActive(item.value)).length : 0, [filter]);
-	const hasFilterableColumns = !!columns?.some((col) => col.filtering);
-	const hasSortableColumns = !!columns?.some((col) => col.sorting);
-	const sortCount = gridSelectors.sorting?.length ?? 0;
-	return /* @__PURE__ */ jsxs(ControlButtonsContainer, { children: [/* @__PURE__ */ jsxs(Left, { children: [
-		!hideControlButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
-			quickFilter && !isMobile && /* @__PURE__ */ jsx(QuickFilter_default, {
-				searchedValue,
-				placeholderText: i18n._({
-					id: "controlButtons.searchPlaceholder",
-					message: `Search ${translatedValue} ...`,
-					values: { translatedValue }
-				}),
-				onChange: onChangeInputValue,
-				onClear,
-				onClick: onDisplayInput,
-				displayInput,
-				isMobileInputView
-			}),
-			/* @__PURE__ */ jsx(ExtraControlButtons_default, {
-				extraControlButtons,
-				targetPosition: "top-left"
-			}),
-			/* @__PURE__ */ jsx(x.div, { children: !!filtersCount && !isMobile && /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				onClick: onClearSettings,
-				variant: "default",
-				appearance: "secondary",
-				"data-cy": "resetFiltersBtn",
-				children: /* @__PURE__ */ jsx(Trans, {
-					id: "dataGrid.buttonClearSettings",
-					message: "Reset"
-				})
-			}) })
-		] }),
-		isMobile && hasFilterableColumns && /* @__PURE__ */ jsxs(Button, {
-			type: "button",
-			appearance: filtersCount ? "primary" : "tertiary",
-			onClick: onOpenMobileFilters,
-			"data-cy": "mobileFilterBtn",
-			children: [/* @__PURE__ */ jsx(Filter, { fill: filtersCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
-				variant: "semiBold",
-				mt: 0,
-				mb: 0,
-				ml: "6px",
-				children: [
-					/* @__PURE__ */ jsx(Trans, {
-						id: "dataGrid.filter",
-						message: "Filter"
-					}),
-					" ",
-					filtersCount > 0 && `(${filtersCount})`
-				]
-			})]
-		}),
-		isMobile && hasSortableColumns && /* @__PURE__ */ jsx(x.div, {
-			ml: "10px",
-			children: /* @__PURE__ */ jsxs(Button, {
-				type: "button",
-				appearance: sortCount ? "primary" : "tertiary",
-				onClick: onOpenMobileSorting,
-				disabled: isSortTerminated,
-				"data-cy": "mobileSortBtn",
-				children: [/* @__PURE__ */ jsx(Sort, { stroke: sortCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
-					variant: "semiBold",
-					mt: 0,
-					mb: 0,
-					ml: "6px",
-					children: [
-						/* @__PURE__ */ jsx(Trans, {
-							id: "dataGrid.sort",
-							message: "Sort"
-						}),
-						" ",
-						sortCount > 0 && `(${sortCount})`
-					]
-				})]
-			})
-		}),
-		withPresets && gridName && !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(x.div, {
-			mx: "12px",
-			children: /* @__PURE__ */ jsx(Button, {
-				onClick: onOpenPresetsModal,
-				type: "button",
-				variant: "default",
-				appearance: "tertiary",
-				children: /* @__PURE__ */ jsx(Trans, {
-					id: "dataGrid.presets.title",
-					message: "Presets"
-				})
-			})
-		}), selectedPresetName && /* @__PURE__ */ jsx(Tag, {
-			size: "medium",
-			...palettes.redWhite,
-			children: /* @__PURE__ */ jsx(H6, {
-				mt: 0,
-				mb: 0,
-				variant: "semiBold",
-				children: selectedPresetName
-			})
-		})] })
-	] }), /* @__PURE__ */ jsxs(Right, { children: [/* @__PURE__ */ jsx(ExtraControlButtons_default, {
-		extraControlButtons,
-		targetPosition: "top-right",
-		isMobile
-	}), displayManageColumnButton && !isMobile && /* @__PURE__ */ jsx(StyledColumnButton, {
-		type: "button",
-		variant: "ghost",
-		appearance: "primary",
-		iconLeft: /* @__PURE__ */ jsx(Settings2, {}),
-		onClick: openManageColumnForm,
-		children: /* @__PURE__ */ jsx(H6, {
-			variant: "semiBold",
-			mt: 0,
-			mb: 0,
-			children: /* @__PURE__ */ jsx(Trans, {
-				id: "manageColumn.title",
-				message: "Manage column"
-			})
-		})
-	})] })] });
+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 { ControlButtons as default };
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import Button from '../../../../Elements/Button/Button';
+import { Filter } from '../../../../Elements/Icon/icons/Filter';
+import { Settings2 } from '../../../../Elements/Icon/icons/Settings2';
+import { Sort } from '../../../../Elements/Icon/icons/Sort';
+import Tag from '../../../../Elements/Tag/Tag';
+import { palettes } from '../../../../Elements/Tag/palettes';
+import { H6 } from '../../../../Elements/Typography';
+import useQuickFilter from '../../hooks/useQuickFilter';
+import { ExtraControlButtonPosition } from '../../types';
+import { isFilterActive } from '../../utils';
+import ExtraControlButtons from '../ExtraControlButtons';
+import QuickFilter from '../QuickFilter';
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/react';
+import { useColor, x } from '@xstyled/styled-components';
+import { ControlButtonsContainer, Left, Right, StyledColumnButton } from './styles';
+var ControlButtons = function (_a) {
+    var _b, _c;
+    var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _d = _a.quickFilter, quickFilter = _d === void 0 ? '' : _d, columns = _a.columns, filters = _a.filters, hideControlButtons = _a.hideControlButtons, displayManageColumnButton = _a.displayManageColumnButton, openManageColumnForm = _a.openManageColumnForm, setDisplayManageColumnButton = _a.setDisplayManageColumnButton, onOpenPresetsModal = _a.onOpenPresetsModal, gridName = _a.gridName, selectedPresetName = _a.selectedPresetName, withPresets = _a.withPresets, withManageColumnButton = _a.withManageColumnButton, onOpenMobileFilters = _a.onOpenMobileFilters, onOpenMobileSorting = _a.onOpenMobileSorting, isSortTerminated = _a.isSortTerminated;
+    var _e = useQuickFilter({
+        gridActions: gridActions,
+        gridSelectors: gridSelectors,
+        quickFilter: quickFilter,
+        columns: columns,
+        filters: filters
+    }), searchedValue = _e.searchedValue, translatedValue = _e.translatedValue, onChangeInputValue = _e.onChangeInputValue, onClear = _e.onClear, onClearSettings = _e.onClearSettings, onDisplayInput = _e.onDisplayInput, displayInput = _e.displayInput, isMobileInputView = _e.isMobileInputView, isMobile = _e.isMobile, filter = _e.filter;
+    useEffect(function () {
+        setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);
+    }, [isMobileInputView, withManageColumnButton, setDisplayManageColumnButton]);
+    var red = useColor('red1');
+    var filtersCount = useMemo(function () { return (filter ? Object.values(filter).filter(function (item) { return isFilterActive(item.value); }).length : 0); }, [filter]);
+    var hasFilterableColumns = !!(columns === null || columns === void 0 ? void 0 : columns.some(function (col) { return col.filtering; }));
+    var hasSortableColumns = !!(columns === null || columns === void 0 ? void 0 : columns.some(function (col) { return col.sorting; }));
+    var sortCount = (_c = (_b = gridSelectors.sorting) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+    return (_jsxs(ControlButtonsContainer, { children: [_jsxs(Left, { children: [!hideControlButtons && (_jsxs(_Fragment, { children: [quickFilter && !isMobile && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
+                                    id: 'controlButtons.searchPlaceholder',
+                                    message: "Search ".concat(translatedValue, " ..."),
+                                    values: { translatedValue: translatedValue }
+                                }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: !!filtersCount && !isMobile && (_jsx(Button, { type: "button", onClick: onClearSettings, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }) })) })] })), isMobile && hasFilterableColumns && (_jsxs(Button, { type: "button", appearance: filtersCount ? 'primary' : 'tertiary', onClick: onOpenMobileFilters, "data-cy": "mobileFilterBtn", children: [_jsx(Filter, { fill: filtersCount ? 'white' : red }), _jsxs(H6, { variant: "semiBold", mt: 0, mb: 0, ml: "6px", children: [_jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), " ", filtersCount > 0 && "(".concat(filtersCount, ")")] })] })), isMobile && hasSortableColumns && (_jsx(x.div, { ml: "10px", children: _jsxs(Button, { type: "button", appearance: sortCount ? 'primary' : 'tertiary', onClick: onOpenMobileSorting, disabled: isSortTerminated, "data-cy": "mobileSortBtn", children: [_jsx(Sort, { stroke: sortCount ? 'white' : red }), _jsxs(H6, { variant: "semiBold", mt: 0, mb: 0, ml: "6px", children: [_jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), " ", sortCount > 0 && "(".concat(sortCount, ")")] })] }) })), withPresets && gridName && !isMobile && (_jsxs(_Fragment, { children: [_jsx(x.div, { mx: "12px", children: _jsx(Button, { onClick: onOpenPresetsModal, type: "button", variant: "default", appearance: "tertiary", children: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }) }) }), selectedPresetName && (_jsx(Tag, __assign({ size: "medium" }, palettes.redWhite, { children: _jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: selectedPresetName }) })))] }))] }), _jsxs(Right, { children: [_jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight, isMobile: isMobile }), displayManageColumnButton && !isMobile && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] })] }));
+};
+export default ControlButtons;

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

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

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

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