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

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

@@ -1,28 +1,136 @@
-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, "\" ?"] }) })] }));
+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,
+				"\" ?"
+			] })
+		})
+	] });
 };
+//#endregion
+export { GridModals };

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

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

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

@@ -1,9 +1,27 @@
-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." })] }) }) }));
+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."
+				})
+			]
+		}) })
+	});
 };
+//#endregion
+export { GridStatus };

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

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

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

@@ -1,25 +1,29 @@
-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 { 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 })
+	});
 };
-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 }) })));
+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))]
+	});
 };
-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;
+//#endregion
+export { GroupRow as default };

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

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

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

@@ -1,29 +1,37 @@
-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 }))] })));
+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
+		})]
+	});
 };
+//#endregion
+export { HeadCell };

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

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

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

@@ -1,54 +1,72 @@
-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 { 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)
+				]
+			})
+		})
+	}) });
 };
-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;
+//#endregion
+export { HeadRow as default };

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

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

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

@@ -1,31 +1,63 @@
-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 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))
+	});
 };
-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;
+//#endregion
+export { List, ListItem, ListItemContent, ListItemIcon, IconList as default };

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

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

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

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