@mailstep/design-system 0.8.26-beta.7 → 0.8.27-beta.0

package/ui/Blocks/CommonGrid/hooks/useColumnSizes.js

@@ -1,121 +1,87 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
 import React from "react";
-import sum from "lodash/sum";
-var useColumnSizes = function useColumnSizes(displayColumnsDefinitions, storeColumnsWidth, storeColumnsWidthVariant, setColumnWidth, columnLayout) {
-    var minColumnWidth = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 50;
-    var handleSetColumnWidth = React.useCallback(function(columnWidth) {
-        return setColumnWidth(columnWidth, columnLayout);
-    }, [
-        columnLayout,
-        setColumnWidth
-    ]);
-    React.useEffect(function() {
-        if (storeColumnsWidthVariant != columnLayout) handleSetColumnWidth(null);
-    }, [
-        columnLayout,
-        storeColumnsWidthVariant,
-        handleSetColumnWidth
-    ]);
-    var displayColumnsWidth = React.useMemo(function() {
-        var displayColumnsWidth2 = {};
-        displayColumnsDefinitions.forEach(function(column) {
-            return displayColumnsWidth2[column.name] = (storeColumnsWidth === null || storeColumnsWidth === void 0 ? void 0 : storeColumnsWidth[column.name]) || column.flexBasis;
-        });
-        return displayColumnsWidth2;
-    }, [
-        displayColumnsDefinitions,
-        storeColumnsWidth
-    ]);
-    var totalColumnsWidth = React.useMemo(function() {
-        return sum(Object.values(displayColumnsWidth));
-    }, [
-        displayColumnsWidth
-    ]);
-    var gridBoxRef = React.useRef(null);
-    var testAdjustLastColumn = React.useCallback(function() {
-        var _gridBoxRef_current;
-        var gridWidth = (gridBoxRef === null || gridBoxRef === void 0 ? void 0 : (_gridBoxRef_current = gridBoxRef.current) === null || _gridBoxRef_current === void 0 ? void 0 : _gridBoxRef_current.clientWidth) || null;
-        if ((columnLayout == "normal" || columnLayout == "sticky") && gridWidth && totalColumnsWidth < gridWidth) {
-            var lastColumn = displayColumnsDefinitions[displayColumnsDefinitions.length - 1];
-            if (lastColumn) {
-                var change = _define_property({}, lastColumn.name, displayColumnsWidth[lastColumn.name] + gridWidth - totalColumnsWidth);
-                handleSetColumnWidth(change);
-            }
-        }
-    }, [
-        columnLayout,
-        displayColumnsDefinitions,
-        displayColumnsWidth,
-        gridBoxRef,
-        handleSetColumnWidth,
-        totalColumnsWidth
-    ]);
-    React.useEffect(function() {
-        testAdjustLastColumn();
-    }, [
-        testAdjustLastColumn
-    ]);
-    React.useLayoutEffect(function() {
-        window.addEventListener("resize", testAdjustLastColumn);
-        return function() {
-            return window.removeEventListener("resize", testAdjustLastColumn);
-        };
-    }, [
-        testAdjustLastColumn
-    ]);
-    var handleResizeDrag = React.useCallback(function(columnName, width) {
-        var i = displayColumnsDefinitions.findIndex(function(param) {
-            var name = param.name;
-            return name == columnName;
-        });
-        var nextColumn = displayColumnsDefinitions[i + 1];
-        if (columnLayout == "normal" || columnLayout == "sticky") {
-            var _gridBoxRef_current;
-            var gridWidth = (gridBoxRef === null || gridBoxRef === void 0 ? void 0 : (_gridBoxRef_current = gridBoxRef.current) === null || _gridBoxRef_current === void 0 ? void 0 : _gridBoxRef_current.clientWidth) || null;
-            var lastColumnWidth = displayColumnsWidth[displayColumnsDefinitions[displayColumnsDefinitions.length - 1].name];
-            var lastColumnMinWidth = gridWidth && gridWidth - (totalColumnsWidth - lastColumnWidth) || 0;
-            var minWidth = !nextColumn ? Math.max(lastColumnMinWidth, minColumnWidth) : minColumnWidth;
-            var origin = displayColumnsWidth[columnName];
-            var newWidth = origin + width < minWidth ? minWidth : origin + width;
-            handleSetColumnWidth(_define_property({}, columnName, newWidth));
-        } else if (columnLayout == "no-scroll") {
-            var nextColumnWidth = displayColumnsWidth[nextColumn.name];
-            var origin1 = displayColumnsWidth[columnName];
-            var addedColumnWidth = origin1 + width < minColumnWidth ? minColumnWidth - origin1 : width;
-            var addedNextColumnWidth = nextColumnWidth - addedColumnWidth < minColumnWidth ? nextColumnWidth - minColumnWidth : addedColumnWidth;
-            var addedWidth = Math.min(addedColumnWidth, addedNextColumnWidth);
-            var columnsWidth = _define_property({}, columnName, origin1 + addedWidth);
-            if (nextColumn) {
-                columnsWidth[nextColumn.name] = nextColumnWidth - addedWidth;
-            }
-            handleSetColumnWidth(columnsWidth);
-        }
-    }, [
-        displayColumnsDefinitions,
-        columnLayout,
-        displayColumnsWidth,
-        totalColumnsWidth,
-        minColumnWidth,
-        handleSetColumnWidth
-    ]);
-    return {
-        totalColumnsWidth: totalColumnsWidth,
-        gridBoxRef: gridBoxRef,
-        displayColumnsWidth: displayColumnsWidth,
-        handleResizeDrag: handleResizeDrag
-    };
+import sum from "lodash/sum.js";
+//#region packages/ui/Blocks/CommonGrid/hooks/useColumnSizes.tsx
+const useColumnSizes = (displayColumnsDefinitions, storeColumnsWidth, storeColumnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth = 50) => {
+	/**
+	* decorate grid resize with layout and reset grid widths if layout changes
+	*/
+	const handleSetColumnWidth = React.useCallback((columnWidth) => setColumnWidth(columnWidth, columnLayout), [columnLayout, setColumnWidth]);
+	React.useEffect(() => {
+		if (storeColumnsWidthVariant != columnLayout) handleSetColumnWidth(null);
+	}, [
+		columnLayout,
+		storeColumnsWidthVariant,
+		handleSetColumnWidth
+	]);
+	/**
+	* base width of each displayed column and of all displayed columns put together
+	*/
+	const displayColumnsWidth = React.useMemo(() => {
+		const displayColumnsWidth = {};
+		displayColumnsDefinitions.forEach((column) => displayColumnsWidth[column.name] = storeColumnsWidth?.[column.name] || column.flexBasis);
+		return displayColumnsWidth;
+	}, [displayColumnsDefinitions, storeColumnsWidth]);
+	const totalColumnsWidth = React.useMemo(() => {
+		return sum(Object.values(displayColumnsWidth));
+	}, [displayColumnsWidth]);
+	/**
+	* handling of remaining space
+	*/
+	const gridBoxRef = React.useRef(null);
+	const testAdjustLastColumn = React.useCallback(() => {
+		const gridWidth = gridBoxRef?.current?.clientWidth || null;
+		if ((columnLayout == "normal" || columnLayout == "sticky") && gridWidth && totalColumnsWidth < gridWidth) {
+			const lastColumn = displayColumnsDefinitions[displayColumnsDefinitions.length - 1];
+			if (lastColumn) handleSetColumnWidth({ [lastColumn.name]: displayColumnsWidth[lastColumn.name] + gridWidth - totalColumnsWidth });
+		}
+	}, [
+		columnLayout,
+		displayColumnsDefinitions,
+		displayColumnsWidth,
+		gridBoxRef,
+		handleSetColumnWidth,
+		totalColumnsWidth
+	]);
+	React.useEffect(() => {
+		testAdjustLastColumn();
+	}, [testAdjustLastColumn]);
+	React.useLayoutEffect(() => {
+		window.addEventListener("resize", testAdjustLastColumn);
+		return () => window.removeEventListener("resize", testAdjustLastColumn);
+	}, [testAdjustLastColumn]);
+	return {
+		totalColumnsWidth,
+		gridBoxRef,
+		displayColumnsWidth,
+		handleResizeDrag: React.useCallback((columnName, width) => {
+			const nextColumn = displayColumnsDefinitions[displayColumnsDefinitions.findIndex(({ name }) => name == columnName) + 1];
+			if (columnLayout == "normal" || columnLayout == "sticky") {
+				const gridWidth = gridBoxRef?.current?.clientWidth || null;
+				const lastColumnWidth = displayColumnsWidth[displayColumnsDefinitions[displayColumnsDefinitions.length - 1].name];
+				const lastColumnMinWidth = gridWidth && gridWidth - (totalColumnsWidth - lastColumnWidth) || 0;
+				const minWidth = !nextColumn ? Math.max(lastColumnMinWidth, minColumnWidth) : minColumnWidth;
+				const origin = displayColumnsWidth[columnName];
+				const newWidth = origin + width < minWidth ? minWidth : origin + width;
+				handleSetColumnWidth({ [columnName]: newWidth });
+			} else if (columnLayout == "no-scroll") {
+				const nextColumnWidth = displayColumnsWidth[nextColumn.name];
+				const origin = displayColumnsWidth[columnName];
+				const addedColumnWidth = origin + width < minColumnWidth ? minColumnWidth - origin : width;
+				const addedNextColumnWidth = nextColumnWidth - addedColumnWidth < minColumnWidth ? nextColumnWidth - minColumnWidth : addedColumnWidth;
+				const addedWidth = Math.min(addedColumnWidth, addedNextColumnWidth);
+				const columnsWidth = { [columnName]: origin + addedWidth };
+				if (nextColumn) columnsWidth[nextColumn.name] = nextColumnWidth - addedWidth;
+				handleSetColumnWidth(columnsWidth);
+			}
+		}, [
+			displayColumnsDefinitions,
+			columnLayout,
+			displayColumnsWidth,
+			totalColumnsWidth,
+			minColumnWidth,
+			handleSetColumnWidth
+		])
+	};
 };
-var useColumnSizes_default = useColumnSizes;
-export { useColumnSizes_default as default };
+//#endregion
+export { useColumnSizes as default };

package/ui/Blocks/CommonGrid/hooks/useCreatePreset.js

@@ -1,80 +1,32 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
+import { useModal } from "../../Modal/hooks/useModal.js";
+import { useEvent } from "./useEvent.js";
 import { useCallback, useState } from "react";
-import { useModal } from "../../Modal/hooks/useModal";
-import isEmpty from "lodash/isEmpty";
-import { useEvent } from "./useEvent";
-var useCreatePreset = function useCreatePreset(param) {
-    var gridName = param.gridName, filters = param.filters, onClosePresetsModal = param.onClosePresetsModal, setSelectedPresetName = param.setSelectedPresetName, gridActions = param.gridActions;
-    var _useModal = useModal(), isCreatePresetModalOpen = _useModal.isOpen, onOpenCreatePresetModal = _useModal.onOpen, onCloseCreatePresetModal = _useModal.onClose;
-    var _useState = _sliced_to_array(useState(""), 2), presetName = _useState[0], setPresetName = _useState[1];
-    var handleChangePresetName = useCallback(function(event) {
-        setPresetName(event.target.value);
-    }, []);
-    var handleCloseCreatePresetModal = useCallback(function() {
-        setPresetName("");
-        onCloseCreatePresetModal();
-    }, []);
-    var handleCreatePreset = useEvent(function() {
-        var _gridActions_createPreset;
-        setPresetName("");
-        onCloseCreatePresetModal();
-        onClosePresetsModal();
-        if (isEmpty(filters) || !gridName) return;
-        (_gridActions_createPreset = gridActions.createPreset) === null || _gridActions_createPreset === void 0 ? void 0 : _gridActions_createPreset.call(gridActions, presetName, filters);
-        setSelectedPresetName(presetName);
-    });
-    return {
-        isCreatePresetModalOpen: isCreatePresetModalOpen,
-        onOpenCreatePresetModal: onOpenCreatePresetModal,
-        handleCloseCreatePresetModal: handleCloseCreatePresetModal,
-        presetName: presetName,
-        handleChangePresetName: handleChangePresetName,
-        handleCreatePreset: handleCreatePreset
-    };
+import isEmpty from "lodash/isEmpty.js";
+//#region packages/ui/Blocks/CommonGrid/hooks/useCreatePreset.ts
+const useCreatePreset = ({ gridName, filters, onClosePresetsModal, setSelectedPresetName, gridActions }) => {
+	const { isOpen: isCreatePresetModalOpen, onOpen: onOpenCreatePresetModal, onClose: onCloseCreatePresetModal } = useModal();
+	const [presetName, setPresetName] = useState("");
+	const handleChangePresetName = useCallback((event) => {
+		setPresetName(event.target.value);
+	}, []);
+	return {
+		isCreatePresetModalOpen,
+		onOpenCreatePresetModal,
+		handleCloseCreatePresetModal: useCallback(() => {
+			setPresetName("");
+			onCloseCreatePresetModal();
+		}, []),
+		presetName,
+		handleChangePresetName,
+		handleCreatePreset: useEvent(() => {
+			setPresetName("");
+			onCloseCreatePresetModal();
+			onClosePresetsModal();
+			if (isEmpty(filters) || !gridName) return;
+			gridActions.createPreset?.(presetName, filters);
+			setSelectedPresetName(presetName);
+		})
+	};
 };
+//#endregion
 export { useCreatePreset };

package/ui/Blocks/CommonGrid/hooks/useDeletePreset.js

@@ -1,35 +1,24 @@
+import { useModal } from "../../Modal/hooks/useModal.js";
 import { useCallback } from "react";
-import { useModal } from "../../Modal/hooks/useModal";
-var useDeletePreset = function useDeletePreset(param) {
-    var selectedPresetName = param.selectedPresetName, gridName = param.gridName, gridActions = param.gridActions, setSelectedPresetName = param.setSelectedPresetName;
-    var _useModal = useModal(), isDeletePresetModalOpen = _useModal.isOpen, onOpenDeletePresetModal = _useModal.onOpen, onCloseDeletePresetModal = _useModal.onClose, presetNameToDelete = _useModal.data;
-    var handleOpenDeletePresetModal = useCallback(function(presetName) {
-        return function(e) {
-            if (!presetName) return;
-            e.stopPropagation();
-            onOpenDeletePresetModal(presetName);
-        };
-    }, [
-        selectedPresetName
-    ]);
-    var handleDeletePreset = useCallback(function() {
-        var _gridActions_deletePreset;
-        if (!gridName || !presetNameToDelete) return;
-        (_gridActions_deletePreset = gridActions.deletePreset) === null || _gridActions_deletePreset === void 0 ? void 0 : _gridActions_deletePreset.call(gridActions, presetNameToDelete);
-        if (selectedPresetName === presetNameToDelete) {
-            setSelectedPresetName("");
-        }
-        onCloseDeletePresetModal();
-    }, [
-        gridName,
-        presetNameToDelete
-    ]);
-    return {
-        handleOpenDeletePresetModal: handleOpenDeletePresetModal,
-        isDeletePresetModalOpen: isDeletePresetModalOpen,
-        handleDeletePreset: handleDeletePreset,
-        onCloseDeletePresetModal: onCloseDeletePresetModal,
-        presetNameToDelete: presetNameToDelete
-    };
+//#region packages/ui/Blocks/CommonGrid/hooks/useDeletePreset.ts
+const useDeletePreset = ({ selectedPresetName, gridName, gridActions, setSelectedPresetName }) => {
+	const { isOpen: isDeletePresetModalOpen, onOpen: onOpenDeletePresetModal, onClose: onCloseDeletePresetModal, data: presetNameToDelete } = useModal();
+	return {
+		handleOpenDeletePresetModal: useCallback((presetName) => (e) => {
+			if (!presetName) return;
+			e.stopPropagation();
+			onOpenDeletePresetModal(presetName);
+		}, [selectedPresetName]),
+		isDeletePresetModalOpen,
+		handleDeletePreset: useCallback(() => {
+			if (!gridName || !presetNameToDelete) return;
+			gridActions.deletePreset?.(presetNameToDelete);
+			if (selectedPresetName === presetNameToDelete) setSelectedPresetName("");
+			onCloseDeletePresetModal();
+		}, [gridName, presetNameToDelete]),
+		onCloseDeletePresetModal,
+		presetNameToDelete
+	};
 };
+//#endregion
 export { useDeletePreset };

package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js

@@ -1,93 +1,58 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _non_iterable_spread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
+import "../types.js";
+import withProps from "../HoC/withProps.js";
+import { RowActionsCell } from "../components/gridCells/RowActionsCell.js";
+import "../components/gridCells/index.js";
 import { useCallback, useMemo } from "react";
-import withProps from "../HoC/withProps";
-import { RowActionsCell } from "../components/gridCells";
-import { EditReadPosition } from "../types";
-var useEditReadAsColumn = function useEditReadAsColumn(props) {
-    var _actionColumnDefinition_actionOptions;
-    var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, gridSelectors = props.gridSelectors, gridActions = props.gridActions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
-    var modifiedOnRowAction = useCallback(function(id, field, value, rowData) {
-        if (field === "row_edit" || field === "row_read") {
-            if (field === "row_edit" && onRowEditClick) onRowEditClick(id, value);
-            if (field === "row_read" && onRowReadClick) onRowReadClick(id, value);
-        } else if (onRowAction) {
-            return onRowAction(id, field, value, rowData);
-        }
-    }, [
-        onRowAction,
-        onRowEditClick,
-        onRowReadClick
-    ]);
-    var _ref = actionColumnDefinition || {}, canRowEdit = _ref.canRowEdit, canRowRead = _ref.canRowRead, addRowNumbers = _ref.addRowNumbers, _ref_stickTo = _ref.stickTo, stickTo = _ref_stickTo === void 0 ? "left" : _ref_stickTo, _ref_flexBasis = _ref.flexBasis, flexBasis = _ref_flexBasis === void 0 ? 20 : _ref_flexBasis;
-    var withCheckboxes = !!(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : (_actionColumnDefinition_actionOptions = actionColumnDefinition.actionOptions) === null || _actionColumnDefinition_actionOptions === void 0 ? void 0 : _actionColumnDefinition_actionOptions.length) || (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes);
-    var hasActions = canRowEdit || canRowRead || withCheckboxes || addRowNumbers;
-    var modifiedColumnsDefinitions = useMemo(function() {
-        var _gridSelectors_uxState;
-        var editReadColumnDefinition = {
-            name: "actions-cell-cg",
-            flexBasis: flexBasis,
-            filtering: withCheckboxes || addRowNumbers,
-            filteringType: "actions",
-            sorting: false,
-            sticky: !!hasActions,
-            stickTo: stickTo,
-            alwaysOn: true,
-            cellComponent: withProps({
-                actionColumnDefinition: actionColumnDefinition,
-                withCheckboxes: withCheckboxes,
-                addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers,
-                checkedRows: gridSelectors === null || gridSelectors === void 0 ? void 0 : (_gridSelectors_uxState = gridSelectors.uxState) === null || _gridSelectors_uxState === void 0 ? void 0 : _gridSelectors_uxState.checkedRows,
-                onUxChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
-            })(RowActionsCell)
-        };
-        if (stickTo === EditReadPosition.Left) {
-            return [
-                editReadColumnDefinition
-            ].concat(_to_consumable_array(columnsDefinitions));
-        } else {
-            return _to_consumable_array(columnsDefinitions).concat([
-                editReadColumnDefinition
-            ]);
-        }
-    }, [
-        addRowNumbers,
-        flexBasis,
-        stickTo,
-        hasActions,
-        columnsDefinitions,
-        withCheckboxes,
-        gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
-        actionColumnDefinition,
-        gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
-    ]);
-    return {
-        columnsDefinitions: modifiedColumnsDefinitions,
-        onRowAction: modifiedOnRowAction
-    };
+//#region packages/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.tsx
+const useEditReadAsColumn = (props) => {
+	const { onRowAction, actionColumnDefinition, columnsDefinitions, gridSelectors, gridActions, onRowEditClick, onRowReadClick } = props;
+	const modifiedOnRowAction = useCallback((id, field, value, rowData) => {
+		if (field === "row_edit" || field === "row_read") {
+			if (field === "row_edit" && onRowEditClick) onRowEditClick(id, value);
+			if (field === "row_read" && onRowReadClick) onRowReadClick(id, value);
+		} else if (onRowAction) return onRowAction(id, field, value, rowData);
+	}, [
+		onRowAction,
+		onRowEditClick,
+		onRowReadClick
+	]);
+	const { canRowEdit, canRowRead, addRowNumbers, stickTo = "left", flexBasis = 20 } = actionColumnDefinition || {};
+	const withCheckboxes = !!actionColumnDefinition?.actionOptions?.length || actionColumnDefinition?.forceCheckboxes;
+	const hasActions = canRowEdit || canRowRead || withCheckboxes || addRowNumbers;
+	return {
+		columnsDefinitions: useMemo(() => {
+			const editReadColumnDefinition = {
+				name: "actions-cell-cg",
+				flexBasis,
+				filtering: withCheckboxes || addRowNumbers,
+				filteringType: "actions",
+				sorting: false,
+				sticky: !!hasActions,
+				stickTo,
+				alwaysOn: true,
+				cellComponent: withProps({
+					actionColumnDefinition,
+					withCheckboxes,
+					addRowNumbers: actionColumnDefinition?.addRowNumbers,
+					checkedRows: gridSelectors?.uxState?.checkedRows,
+					onUxChange: gridActions?.handleUxChange
+				})(RowActionsCell)
+			};
+			if (stickTo === "left") return [editReadColumnDefinition, ...columnsDefinitions];
+			else return [...columnsDefinitions, editReadColumnDefinition];
+		}, [
+			addRowNumbers,
+			flexBasis,
+			stickTo,
+			hasActions,
+			columnsDefinitions,
+			withCheckboxes,
+			gridSelectors?.uxState,
+			actionColumnDefinition,
+			gridActions?.handleUxChange
+		]),
+		onRowAction: modifiedOnRowAction
+	};
 };
-var useEditReadAsColumn_default = useEditReadAsColumn;
-export { useEditReadAsColumn_default as default };
+//#endregion
+export { useEditReadAsColumn as default };

package/ui/Blocks/CommonGrid/hooks/useEvent.js

@@ -1,17 +1,13 @@
 import { useCallback, useLayoutEffect, useRef } from "react";
-var useEvent = function useEvent(callback) {
-    var ref = useRef(function() {
-        throw new Error("Cannot call an event handler while rendering.");
-    });
-    useLayoutEffect(function() {
-        ref.current = callback;
-    });
-    return useCallback(function() {
-        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
-            args[_key] = arguments[_key];
-        }
-        var _ref_current;
-        return (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.apply(null, args);
-    }, []);
+//#region packages/ui/Blocks/CommonGrid/hooks/useEvent.ts
+const useEvent = (callback) => {
+	const ref = useRef(() => {
+		throw new Error("Cannot call an event handler while rendering.");
+	});
+	useLayoutEffect(() => {
+		ref.current = callback;
+	});
+	return useCallback((...args) => ref.current?.apply(null, args), []);
 };
+//#endregion
 export { useEvent };

package/ui/Blocks/CommonGrid/hooks/useFloatingButton.js

@@ -1,16 +1,15 @@
 import { useMemo } from "react";
-var useFloatingButton = function useFloatingButton(hasPermission, onClick, options) {
-    return useMemo(function() {
-        if (!hasPermission) return;
-        return {
-            onClick: onClick,
-            options: options
-        };
-    }, [
-        hasPermission,
-        onClick,
-        options
-    ]);
-};
-var useFloatingButton_default = useFloatingButton;
-export { useFloatingButton_default as default };
+//#region packages/ui/Blocks/CommonGrid/hooks/useFloatingButton.ts
+const useFloatingButton = (hasPermission, onClick, options) => useMemo(() => {
+	if (!hasPermission) return;
+	return {
+		onClick,
+		options
+	};
+}, [
+	hasPermission,
+	onClick,
+	options
+]);
+//#endregion
+export { useFloatingButton as default };