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

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

@@ -1,40 +1,53 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import { 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
+		}) })
+	});
 };
-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;
+//#endregion
+export { ColumnFilterCell as default };

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

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

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

@@ -1,58 +1,132 @@
-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 { 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
+				})
+			] })]
+		})
+	});
 };
-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;
+//#endregion
+export { ColumnTitle as default };

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

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

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

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

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

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

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

@@ -1,31 +1,48 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import { SortingDown, SortingUp } from "./icons/Sorting.js";
+import React from "react";
+import styled$1, { th, useTheme } 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 theme = useTheme();
+	const typoPrimaryColor = th.color("typoPrimary")({ theme });
+	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",
+				fill: typoPrimaryColor
+			}),
+			isSortable && sortValue === "desc" && /* @__PURE__ */ jsx(SortingDown, {
+				width: "16",
+				fill: typoPrimaryColor
+			})
+		]
+	});
 };
-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;
+var ColumnTitle_default = React.memo(ColumnTitle);
+//#endregion
+export { ColumnTitle_default as default };

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

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

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

@@ -1,54 +1,160 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import { 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"
+			})
+		})
+	})] })] });
 };
-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;
+//#endregion
+export { ControlButtons as default };

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

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

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

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