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

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

@@ -1,136 +1,28 @@
-import { Input } from "../../../../Forms/Input/Input.js";
-import { Modal } from "../../../Modal/Modal.js";
-import { useCreatePreset } from "../../hooks/useCreatePreset.js";
-import { useDeletePreset } from "../../hooks/useDeletePreset.js";
-import { usePresetFileHandlers } from "../../hooks/usePresetFileHandlers.js";
-import { useSelectPreset } from "../../hooks/useSelectPreset.js";
-import ManageColumnForm_default from "../ManageColumnForm/index.js";
-import { PresetsModalBody } from "../PresetsModalBody/index.js";
-import "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Trans } from "@lingui/react";
-//#region packages/ui/Blocks/CommonGrid/components/GridModals/index.tsx
-const GridModals = ({ manageColumnFormVisible, onCloseForm, resetColumnConfig, onConfirmForm, manageColumnsFormDefinitions, columnsConfigValues, setColumnsConfigOptions, handleDragEnd, gridName, gridSelectors, gridActions, isPresetsModalOpen, onClosePresetsModal, selectedPresetName, setSelectedPresetName }) => {
-	const { handleSelectPreset } = useSelectPreset({
-		gridName,
-		gridActions,
-		setSelectedPresetName,
-		onClosePresetsModal,
-		gridSelectors
-	});
-	const { isCreatePresetModalOpen, handleCloseCreatePresetModal, onOpenCreatePresetModal, handleCreatePreset, presetName, handleChangePresetName } = useCreatePreset({
-		gridName,
-		gridActions,
-		onClosePresetsModal,
-		setSelectedPresetName,
-		filters: gridSelectors.filter
-	});
-	const { handleOpenDeletePresetModal, handleDeletePreset, onCloseDeletePresetModal, presetNameToDelete, isDeletePresetModalOpen } = useDeletePreset({
-		gridName,
-		selectedPresetName,
-		gridActions,
-		setSelectedPresetName
-	});
-	const { fileInputRef, handleImportPresets, handleExportPresets, handleImportButtonClick } = usePresetFileHandlers({
-		gridName,
-		gridActions,
-		gridSelectors
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Modal, {
-			title: /* @__PURE__ */ jsx(Trans, {
-				id: "manageColumn.title",
-				message: "Manage columns"
-			}),
-			onClose: onCloseForm,
-			onCancel: onCloseForm,
-			onExtraAction: resetColumnConfig,
-			onConfirm: onConfirmForm,
-			isShown: manageColumnFormVisible,
-			width: "auto",
-			minWidth: "350px",
-			hasFooter: true,
-			extraActionLabel: /* @__PURE__ */ jsx(Trans, {
-				id: "dataGrid.buttonClearConfig",
-				message: "Reset config"
-			}),
-			cancelLabel: /* @__PURE__ */ jsx(Trans, {
-				id: "form.buttonCancel",
-				message: "Cancel"
-			}),
-			confirmLabel: /* @__PURE__ */ jsx(Trans, {
-				id: "form.buttonConfirm",
-				message: "Confirm"
-			}),
-			children: /* @__PURE__ */ jsx(ManageColumnForm_default, {
-				columns: manageColumnsFormDefinitions,
-				columnsConfigValues,
-				setColumnsConfigOptions,
-				handleDragEnd
-			})
-		}),
-		/* @__PURE__ */ jsx(Modal, {
-			isShown: isPresetsModalOpen,
-			title: /* @__PURE__ */ jsx(Trans, {
-				id: "dataGrid.presets.title",
-				message: "Presets"
-			}),
-			onClose: onClosePresetsModal,
-			width: "narrow",
-			children: /* @__PURE__ */ jsx(PresetsModalBody, {
-				onOpenCreatePresetModal,
-				gridPresets: gridSelectors.presets,
-				handleSelectPreset,
-				handleOpenDeletePresetModal,
-				selectedPresetName,
-				handleExportPresets,
-				handleImportPresets,
-				handleImportButtonClick,
-				fileInputRef,
-				filters: gridSelectors.filter
-			})
-		}),
-		/* @__PURE__ */ jsx(Modal, {
-			isShown: isCreatePresetModalOpen,
-			title: /* @__PURE__ */ jsx(Trans, {
-				id: "dataGrid.createNewPreset.title",
-				message: "Create new preset"
-			}),
-			onCancel: handleCloseCreatePresetModal,
-			onConfirm: handleCreatePreset,
-			isConfirmDisabled: !presetName,
-			width: "narrow",
-			children: /* @__PURE__ */ jsx(Input, {
-				type: "text",
-				onChange: handleChangePresetName,
-				value: presetName,
-				label: /* @__PURE__ */ jsx(Trans, {
-					id: "dataGrid.presetName.title",
-					message: "Preset name"
-				})
-			})
-		}),
-		/* @__PURE__ */ jsx(Modal, {
-			isShown: isDeletePresetModalOpen,
-			title: /* @__PURE__ */ jsx(Trans, {
-				id: "dataGrid.deletePreset.title",
-				message: "Delete preset"
-			}),
-			onCancel: onCloseDeletePresetModal,
-			onConfirm: handleDeletePreset,
-			isConfirmDisabled: !presetNameToDelete,
-			width: "narrow",
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(Trans, {
-					id: "dataGrid.deletePreset.confirm",
-					message: "Are you sure you want to delete preset"
-				}),
-				" \"",
-				presetNameToDelete,
-				"\" ?"
-			] })
-		})
-	] });
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from '../../../../Forms/Input/Input';
+import { Modal } from '../../../Modal/Modal';
+import { useCreatePreset } from '../../hooks/useCreatePreset';
+import { useDeletePreset } from '../../hooks/useDeletePreset';
+import { usePresetFileHandlers } from '../../hooks/usePresetFileHandlers';
+import { useSelectPreset } from '../../hooks/useSelectPreset';
+import ManageColumnForm from '../ManageColumnForm';
+import { PresetsModalBody } from '../PresetsModalBody';
+import { Trans } from '@lingui/react';
+export var GridModals = function (_a) {
+    var manageColumnFormVisible = _a.manageColumnFormVisible, onCloseForm = _a.onCloseForm, resetColumnConfig = _a.resetColumnConfig, onConfirmForm = _a.onConfirmForm, manageColumnsFormDefinitions = _a.manageColumnsFormDefinitions, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd, gridName = _a.gridName, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, isPresetsModalOpen = _a.isPresetsModalOpen, onClosePresetsModal = _a.onClosePresetsModal, selectedPresetName = _a.selectedPresetName, setSelectedPresetName = _a.setSelectedPresetName;
+    var handleSelectPreset = useSelectPreset({
+        gridName: gridName,
+        gridActions: gridActions,
+        setSelectedPresetName: setSelectedPresetName,
+        onClosePresetsModal: onClosePresetsModal,
+        gridSelectors: gridSelectors
+    }).handleSelectPreset;
+    var _b = useCreatePreset({ gridName: gridName, gridActions: gridActions, onClosePresetsModal: onClosePresetsModal, setSelectedPresetName: setSelectedPresetName, filters: gridSelectors.filter }), isCreatePresetModalOpen = _b.isCreatePresetModalOpen, handleCloseCreatePresetModal = _b.handleCloseCreatePresetModal, onOpenCreatePresetModal = _b.onOpenCreatePresetModal, handleCreatePreset = _b.handleCreatePreset, presetName = _b.presetName, handleChangePresetName = _b.handleChangePresetName;
+    var _c = useDeletePreset({ gridName: gridName, selectedPresetName: selectedPresetName, gridActions: gridActions, setSelectedPresetName: setSelectedPresetName }), handleOpenDeletePresetModal = _c.handleOpenDeletePresetModal, handleDeletePreset = _c.handleDeletePreset, onCloseDeletePresetModal = _c.onCloseDeletePresetModal, presetNameToDelete = _c.presetNameToDelete, isDeletePresetModalOpen = _c.isDeletePresetModalOpen;
+    var _d = usePresetFileHandlers({
+        gridName: gridName,
+        gridActions: gridActions,
+        gridSelectors: gridSelectors
+    }), fileInputRef = _d.fileInputRef, handleImportPresets = _d.handleImportPresets, handleExportPresets = _d.handleExportPresets, handleImportButtonClick = _d.handleImportButtonClick;
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, isShown: manageColumnFormVisible, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd }) }), _jsx(Modal, { isShown: isPresetsModalOpen, title: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }), onClose: onClosePresetsModal, width: "narrow", children: _jsx(PresetsModalBody, { onOpenCreatePresetModal: onOpenCreatePresetModal, gridPresets: gridSelectors.presets, handleSelectPreset: handleSelectPreset, handleOpenDeletePresetModal: handleOpenDeletePresetModal, selectedPresetName: selectedPresetName, handleExportPresets: handleExportPresets, handleImportPresets: handleImportPresets, handleImportButtonClick: handleImportButtonClick, fileInputRef: fileInputRef, filters: gridSelectors.filter }) }), _jsx(Modal, { isShown: isCreatePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.createNewPreset.title", message: "Create new preset" }), onCancel: handleCloseCreatePresetModal, onConfirm: handleCreatePreset, isConfirmDisabled: !presetName, width: "narrow", children: _jsx(Input, { type: "text", onChange: handleChangePresetName, value: presetName, label: _jsx(Trans, { id: "dataGrid.presetName.title", message: "Preset name" }) }) }), _jsx(Modal, { isShown: isDeletePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), onCancel: onCloseDeletePresetModal, onConfirm: handleDeletePreset, isConfirmDisabled: !presetNameToDelete, width: "narrow", children: _jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }), " \"", presetNameToDelete, "\" ?"] }) })] }));
 };
-//#endregion
-export { GridModals };

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

@@ -1,4 +1,5 @@
-import type { FC } from 'react';
+import { FC } from 'react';
+
 type Props = {
     isLoading?: boolean;
     isEmpty?: boolean;

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

@@ -1,27 +1,9 @@
-import { MessageCell, MessageCellBody, Row } from "../Table.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Trans } from "@lingui/react";
-//#region packages/ui/Blocks/CommonGrid/components/GridStatus/index.tsx
-const GridStatus = ({ isLoading, isEmpty, errorMessage }) => {
-	const hasError = !isLoading && errorMessage;
-	return /* @__PURE__ */ jsx(Row, {
-		className: "dataRow",
-		align: "center",
-		children: /* @__PURE__ */ jsx(MessageCell, { children: /* @__PURE__ */ jsxs(MessageCellBody, {
-			variant: hasError ? "error" : "info",
-			children: [
-				isLoading && /* @__PURE__ */ jsx(Trans, {
-					id: "dataGrid.status.loadingData",
-					message: "... loading data ..."
-				}),
-				hasError && errorMessage,
-				isEmpty && /* @__PURE__ */ jsx(Trans, {
-					id: "dataGrid.status.noDataFound",
-					message: "No data found."
-				})
-			]
-		}) })
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row, MessageCell, MessageCellBody } from '../Table';
+import { Trans } from '@lingui/react';
+export var GridStatus = function (_a) {
+    var isLoading = _a.isLoading, isEmpty = _a.isEmpty, errorMessage = _a.errorMessage;
+    var hasError = !isLoading && errorMessage;
+    var variant = hasError ? 'error' : 'info';
+    return (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { children: _jsxs(MessageCellBody, { variant: variant, children: [isLoading && _jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), hasError && errorMessage, isEmpty && _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." })] }) }) }));
 };
-//#endregion
-export { GridStatus };

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

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import type { ActionColumn, Group, ColumnDefinition, GridSelectorsType } from '../types';
+import { FC } from 'react';
+import { ActionColumn, Group, ColumnDefinition, GridSelectorsType } from '../types';
+
 type GroupRowProps = {
     groups: Group[];
     actionColumn?: ActionColumn;

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

@@ -1,29 +1,25 @@
-import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from "../utils/index.js";
-import { Cell, Row } from "./Table.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/GroupRow.tsx
-const GroupCell = ({ column, group, displayColumnWidth }) => {
-	const cellSizeProps = getCellSizeProps(column, displayColumnWidth);
-	return /* @__PURE__ */ jsx(Cell, {
-		className: `cell${getStickyCollClassNames(!!column.sticky, column.stickTo)} ${getGroupClassNames(group)}`,
-		...cellSizeProps,
-		children: group.start && /* @__PURE__ */ jsx(Fragment, { children: group.name })
-	});
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-const GroupRow = ({ actionColumn, columns, groups, displayColumnsWidth }) => {
-	return /* @__PURE__ */ jsxs(Row, {
-		className: "group-row",
-		children: [actionColumn && /* @__PURE__ */ jsx(Cell, {
-			className: "cell",
-			flexBasis: actionColumn.flexBasis,
-			flexGrow: 0,
-			flexShrink: 0
-		}, "actions"), groups.map((group, key) => /* @__PURE__ */ jsx(GroupCell, {
-			column: columns[key],
-			group,
-			displayColumnWidth: displayColumnsWidth[columns[key].name]
-		}, key))]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
+import { Row, Cell } from './Table';
+var GroupCell = function (_a) {
+    var column = _a.column, group = _a.group, displayColumnWidth = _a.displayColumnWidth;
+    var cellSizeProps = getCellSizeProps(column, displayColumnWidth);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo), " ").concat(getGroupClassNames(group));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: group.start && _jsx(_Fragment, { children: group.name }) })));
 };
-//#endregion
-export { GroupRow as default };
+var GroupRow = function (_a) {
+    var actionColumn = _a.actionColumn, columns = _a.columns, groups = _a.groups, displayColumnsWidth = _a.displayColumnsWidth;
+    return (_jsxs(Row, { className: "group-row", children: [actionColumn && _jsx(Cell, { className: "cell", flexBasis: actionColumn.flexBasis, flexGrow: 0, flexShrink: 0 }, "actions"), groups.map(function (group, key) { return (_jsx(GroupCell, { column: columns[key], group: group, displayColumnWidth: displayColumnsWidth[columns[key].name] }, key)); })] }));
+};
+export default GroupRow;

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

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import type { Group, Settings, ColumnDefinition, SortingValueType } from '../types';
+import { FC } from 'react';
+import { Group, Settings, ColumnDefinition, SortingValueType } from '../types';
+
 type HeadCellProps = {
     column: ColumnDefinition;
     isDragDisabled: boolean;

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

@@ -1,37 +1,29 @@
-import { getCellSizeProps, getGroupClassNames, getSortName, getStickyCollClassNames } from "../utils/index.js";
-import { Cell } from "./Table.js";
-import ColumnTitle_default from "./ColumnTitle.js";
-import Resize from "./Resize.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-//#region packages/ui/Blocks/CommonGrid/components/HeadCell.tsx
-const HeadCell = ({ column, isDragDisabled, displayColumnsWidth, onResizeOut, onResizeOver, onResize, sortingValues, onSetSort, group, hasResize, isSortTerminated }) => {
-	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-		id: column.name,
-		disabled: isDragDisabled || !!column.sticky,
-		animateLayoutChanges: () => false
-	});
-	const cellClassName = `cell${getStickyCollClassNames(!!column?.sticky, column?.stickTo)} ${getGroupClassNames(group)}`;
-	return /* @__PURE__ */ jsxs(Cell, {
-		...getCellSizeProps(column, displayColumnsWidth[column.name]),
-		...attributes,
-		...listeners,
-		className: cellClassName,
-		transition,
-		transform: CSS.Transform.toString(transform),
-		ref: setNodeRef,
-		children: [/* @__PURE__ */ jsx(ColumnTitle_default, {
-			title: column?.title,
-			isSortable: !!column.sorting && !isSortTerminated,
-			onSetSort: onSetSort(column.name, column.systemName),
-			sortValue: sortingValues.find((sorting) => sorting.column === getSortName(column))?.direction || null
-		}), hasResize && onResizeOut && onResizeOver && /* @__PURE__ */ jsx(Resize, {
-			onResize: onResize(column.name),
-			onResizeOver,
-			onResizeOut
-		})]
-	});
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getCellSizeProps, getGroupClassNames, getSortName, getStickyCollClassNames } from '../utils';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import ColumnTitle from './ColumnTitle';
+import Resize from './Resize';
+import { Cell } from './Table';
+export var HeadCell = function (_a) {
+    var _b;
+    var column = _a.column, isDragDisabled = _a.isDragDisabled, displayColumnsWidth = _a.displayColumnsWidth, onResizeOut = _a.onResizeOut, onResizeOver = _a.onResizeOver, onResize = _a.onResize, sortingValues = _a.sortingValues, onSetSort = _a.onSetSort, group = _a.group, hasResize = _a.hasResize, isSortTerminated = _a.isSortTerminated;
+    var _c = useSortable({
+        id: column.name,
+        disabled: isDragDisabled || !!column.sticky,
+        animateLayoutChanges: function () { return false; }
+    }), attributes = _c.attributes, listeners = _c.listeners, setNodeRef = _c.setNodeRef, transform = _c.transform, transition = _c.transition;
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!(column === null || column === void 0 ? void 0 : column.sticky), column === null || column === void 0 ? void 0 : column.stickTo), " ").concat(getGroupClassNames(group));
+    return (_jsxs(Cell, __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), attributes, listeners, { className: cellClassName, transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: [_jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: !!column.sorting && !isSortTerminated, onSetSort: onSetSort(column.name, column.systemName), sortValue: ((_b = sortingValues.find(function (sorting) { return sorting.column === getSortName(column); })) === null || _b === void 0 ? void 0 : _b.direction) || null }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize(column.name), onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
 };
-//#endregion
-export { HeadCell };

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

@@ -1,6 +1,7 @@
-import { type FC } from 'react';
-import type { Settings, ColumnDefinition, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
-import type { DragEndEvent } from '@dnd-kit/core';
+import { FC } from 'react';
+import { Settings, ColumnDefinition, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
+import { DragEndEvent } from '@dnd-kit/core';
+
 type HeadRowProps = {
     columns: ColumnDefinition[];
     onAddSort: GridActionsType['addSorting'];

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

@@ -1,72 +1,54 @@
-import { getCellSizeProps, getStickyCollClassNames } from "../utils/index.js";
-import { Cell, Row } from "./Table.js";
-import ColumnTitle_default from "./ColumnTitle.js";
-import { HeadCell } from "./HeadCell.js";
-import React, { useEffect, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
-import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
-//#region packages/ui/Blocks/CommonGrid/components/HeadRow.tsx
-const getStickyComponent = (columns, stickyTo, displayColumnsWidth) => columns?.filter((item) => item.sticky && item.stickTo === stickyTo)?.map((column) => {
-	const cellClassName = `cell${getStickyCollClassNames(!!column.sticky, column.stickTo)}`;
-	return /* @__PURE__ */ jsx(Cell, {
-		...getCellSizeProps(column, displayColumnsWidth[column.name]),
-		className: cellClassName,
-		children: /* @__PURE__ */ jsx(ColumnTitle_default, {
-			title: column?.title,
-			isSortable: false,
-			sortValue: null
-		})
-	}, column.name);
-});
-const HeadRow = ({ columns, onAddSort, handleDragEnd, sortingValues = [], displayColumnsWidth, columnLayout, handleResizeDrag, groups, isSortTerminated }) => {
-	const [showUIElements, setShowUIElements] = useState(false);
-	useEffect(() => {
-		setShowUIElements(true);
-	}, []);
-	const [isDragDisabled, setIsDragDisabled] = useState(false);
-	const onResizeOver = React.useCallback(() => {
-		setIsDragDisabled(true);
-	}, [setIsDragDisabled]);
-	const onResizeOut = React.useCallback(() => {
-		setIsDragDisabled(false);
-	}, [setIsDragDisabled]);
-	const onResize = React.useCallback((name) => (width) => {
-		handleResizeDrag?.(name, width);
-	}, [handleResizeDrag]);
-	const onSetSort = React.useCallback((name, systemName) => (value) => {
-		onAddSort?.(systemName || name, value);
-	}, [onAddSort]);
-	const sensors = useSensors(useSensor(PointerSensor));
-	return /* @__PURE__ */ jsx(Fragment, { children: showUIElements && /* @__PURE__ */ jsx(DndContext, {
-		sensors,
-		collisionDetection: closestCenter,
-		onDragEnd: handleDragEnd,
-		children: /* @__PURE__ */ jsx(SortableContext, {
-			items: columns.map(({ name }) => name),
-			strategy: horizontalListSortingStrategy,
-			children: /* @__PURE__ */ jsxs(Row, {
-				className: "headRow",
-				children: [
-					getStickyComponent(columns, "left", displayColumnsWidth),
-					columns.filter((item) => !item.sticky).map((column, index) => /* @__PURE__ */ jsx(HeadCell, {
-						column,
-						isDragDisabled,
-						displayColumnsWidth,
-						onResizeOut,
-						onResizeOver,
-						onResize,
-						sortingValues,
-						onSetSort,
-						group: groups[index],
-						hasResize: columnLayout === "normal" || !!columns[index + 1],
-						isSortTerminated
-					}, column.name)),
-					getStickyComponent(columns, "right", displayColumnsWidth)
-				]
-			})
-		})
-	}) });
+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 { HeadRow as default };
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { getCellSizeProps, getStickyCollClassNames } from '../utils';
+import { closestCenter, useSensor, useSensors, DndContext, PointerSensor } from '@dnd-kit/core';
+import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import ColumnTitle from './ColumnTitle';
+import { HeadCell } from './HeadCell';
+import { Row, Cell } from './Table';
+var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
+    var _a;
+    return (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) { return item.sticky && item.stickTo === stickyTo; })) === null || _a === void 0 ? void 0 : _a.map(function (column) {
+        var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo));
+        return (_jsx(Cell, __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), { className: cellClassName, children: _jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: false, sortValue: null }) }), column.name));
+    });
+};
+var HeadRow = function (_a) {
+    var columns = _a.columns, onAddSort = _a.onAddSort, handleDragEnd = _a.handleDragEnd, _b = _a.sortingValues, sortingValues = _b === void 0 ? [] : _b, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups, isSortTerminated = _a.isSortTerminated;
+    var _c = useState(false), showUIElements = _c[0], setShowUIElements = _c[1];
+    useEffect(function () {
+        setShowUIElements(true);
+    }, []);
+    var _d = useState(false), isDragDisabled = _d[0], setIsDragDisabled = _d[1];
+    var onResizeOver = React.useCallback(function () {
+        setIsDragDisabled(true);
+    }, [setIsDragDisabled]);
+    var onResizeOut = React.useCallback(function () {
+        setIsDragDisabled(false);
+    }, [setIsDragDisabled]);
+    var onResize = React.useCallback(function (name) { return function (width) {
+        handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
+    }; }, [handleResizeDrag]);
+    var onSetSort = React.useCallback(function (name, systemName) { return function (value) {
+        onAddSort === null || onAddSort === void 0 ? void 0 : onAddSort(systemName || name, value);
+    }; }, [onAddSort]);
+    var sensors = useSensors(useSensor(PointerSensor));
+    return (_jsx(_Fragment, { children: showUIElements && (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns.map(function (_a) {
+                    var name = _a.name;
+                    return name;
+                }), strategy: horizontalListSortingStrategy, children: _jsxs(Row, { className: "headRow", children: [getStickyComponent(columns, 'left', displayColumnsWidth), columns
+                            .filter(function (item) { return !item.sticky; })
+                            .map(function (column, index) { return (_jsx(HeadCell, { column: column, isDragDisabled: isDragDisabled, displayColumnsWidth: displayColumnsWidth, onResizeOut: onResizeOut, onResizeOver: onResizeOver, onResize: onResize, sortingValues: sortingValues, onSetSort: onSetSort, group: groups[index], hasResize: columnLayout === 'normal' || !!columns[index + 1], isSortTerminated: isSortTerminated }, column.name)); }), getStickyComponent(columns, 'right', displayColumnsWidth)] }) }) })) }));
+};
+export default HeadRow;

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

@@ -1,10 +1,11 @@
-import type { FC } from 'react';
-export declare const List: import("styled-components").StyledComponent<"ul", import("@xstyled/system").Theme, {}, never>;
-export declare const ListItem: import("styled-components").StyledComponent<"li", import("@xstyled/system").Theme, {}, never>;
-export declare const ListItemContent: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
-    selected?: boolean;
+import { FC } from 'react';
+
+export declare const List: import('styled-components').StyledComponent<"ul", import('@xstyled/system').Theme, {}, never>;
+export declare const ListItem: import('styled-components').StyledComponent<"li", import('@xstyled/system').Theme, {}, never>;
+export declare const ListItemContent: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
+    selected?: boolean | undefined;
 }, never>;
-export declare const ListItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItemIcon: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
 type Item = {
     value: string;
     icon?: string;

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

@@ -1,63 +1,31 @@
-import Icon from "../../../../Elements/Icon/Icon.js";
-import React from "react";
-import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/components/IconList/IconList.tsx
-const List = styled$1.ul`
-  background-color: white;
-  box-shadow: dropShadow;
-  border-radius: 10px;
-  padding: 2;
-  min-width: 130px;
-`;
-const ListItem = styled$1.li`
-  border-bottom: 1px solid ${th$1("colors.bgLightGray1")};
-  padding: 1 0;
-  cursor: pointer;
-`;
-const ListItemContent = styled$1.span`
-  display: flex;
-  align-items: center;
-  padding: 8px 10px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 400;
-  color: ${({ selected }) => selected ? th$1("colors.red1") : "auto"};
-  background-color: ${({ selected }) => selected ? th$1("colors.red20") : "transparent"};
-  :hover {
-    background-color: ${({ selected }) => selected ? th$1("colors.red30") : th$1("colors.bgLightGray1")};
-  }
-`;
-const ListItemIcon = styled$1.span`
-  display: inline-block;
-  border: 1px solid;
-  border-color: blue2;
-  border-radius: 2px;
-  margin-right: 2;
-  width: 12px;
-  height: 12px;
-  line-height: 6px;
-  padding-top: 1px;
-`;
-const IconList = ({ list, selected, onClick }) => {
-	const handleClick = React.useCallback((item) => () => {
-		onClick(item);
-	}, [onClick]);
-	return /* @__PURE__ */ jsx(List, {
-		className: "ignore-element-for-closing-hook",
-		children: list.map((item) => /* @__PURE__ */ jsx(ListItem, {
-			onClick: handleClick(item),
-			children: /* @__PURE__ */ jsxs(ListItemContent, {
-				selected: selected === item.value,
-				children: [item.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Icon, {
-					icon: item.icon,
-					fill: "red1",
-					size: "8px"
-				}) }), item.label]
-			})
-		}, item.value))
-	});
+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 { List, ListItem, ListItemContent, ListItemIcon, IconList as default };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Icon from '../../../../Elements/Icon/Icon';
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+export var List = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"], ["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"])));
+export var ListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n"], ["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n"])), th('colors.bgLightGray1'));
+export var ListItemContent = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  background-color: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  background-color: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var selected = _a.selected;
+    return (selected ? th('colors.red1') : 'auto');
+}, function (_a) {
+    var selected = _a.selected;
+    return (selected ? th('colors.red20') : 'transparent');
+}, function (_a) {
+    var selected = _a.selected;
+    return (selected ? th('colors.red30') : th('colors.bgLightGray1'));
+});
+export var ListItemIcon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  border: 1px solid;\n  border-color: blue2;\n  border-radius: 2px;\n  margin-right: 2;\n  width: 12px;\n  height: 12px;\n  line-height: 6px;\n  padding-top: 1px;\n"], ["\n  display: inline-block;\n  border: 1px solid;\n  border-color: blue2;\n  border-radius: 2px;\n  margin-right: 2;\n  width: 12px;\n  height: 12px;\n  line-height: 6px;\n  padding-top: 1px;\n"])));
+var IconList = function (_a) {
+    var list = _a.list, selected = _a.selected, onClick = _a.onClick;
+    var handleClick = React.useCallback(function (item) { return function () {
+        onClick(item);
+    }; }, [onClick]);
+    return (_jsx(List, { className: "ignore-element-for-closing-hook", children: list.map(function (item) { return (_jsx(ListItem, { onClick: handleClick(item), children: _jsxs(ListItemContent, { selected: selected === item.value, children: [item.icon && (_jsx(ListItemIcon, { children: _jsx(Icon, { icon: item.icon, fill: "red1", size: "8px" }) })), item.label] }) }, item.value)); }) }));
+};
+export default IconList;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

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

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