@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Blocks/CommonGrid/components/gridCells/SwitchInCell.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { Props } from '../../../../Elements/Toggle/types';
-
+import type { FC } from 'react';
+import { type Props } from '../../../../Elements/Toggle/types';
 export declare const SwitchInCell: FC<Props>;

package/ui/Blocks/CommonGrid/components/gridCells/SwitchInCell.js

@@ -0,0 +1,60 @@
+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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { jsx } from "react/jsx-runtime";
+import Toggle from "../../../../Elements/Toggle/Toggle";
+var SwitchInCell = function SwitchInCell(props) {
+    return /* @__PURE__ */ jsx(Toggle, _object_spread_props(_object_spread({}, props), {
+        variant: "grid"
+    }));
+};
+export { SwitchInCell };

package/ui/Blocks/CommonGrid/components/gridCells/ToggleCell.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type SwitchData = {
     id: string;
 };

package/ui/Blocks/CommonGrid/components/gridCells/ToggleCell.js

@@ -0,0 +1,85 @@
+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 { jsx } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import get from "lodash/fp/get";
+import { SwitchInCell } from "./SwitchInCell";
+var ToggleCell = function ToggleCell(param) {
+    var rowData = param.rowData, column = param.column, onRowAction = param.onRowAction;
+    var _column_passProps;
+    var inverse = !!(column === null || column === void 0 ? void 0 : (_column_passProps = column.passProps) === null || _column_passProps === void 0 ? void 0 : _column_passProps.inverse);
+    var rawValue = get(column.name, rowData);
+    var value = inverse ? !rawValue : !!rawValue;
+    var actionName = "toggle_".concat(column.name);
+    var _React_useState = _sliced_to_array(React.useState(value), 2), isChecked = _React_useState[0], setIsChecked = _React_useState[1];
+    React.useEffect(function() {
+        setIsChecked(value);
+    }, [
+        rowData.id
+    ]);
+    var onSwitchChange = useCallback(function() {
+        if (!onRowAction) return;
+        var ret = onRowAction(rowData.id, actionName, !isChecked, rowData);
+        if (ret) {
+            ret.then(function() {
+                setIsChecked(!isChecked);
+            });
+        } else {
+            setIsChecked(!isChecked);
+        }
+    }, [
+        onRowAction,
+        rowData.id,
+        actionName,
+        isChecked
+    ]);
+    return /* @__PURE__ */ jsx(SwitchInCell, {
+        checked: isChecked,
+        onChange: onSwitchChange
+    });
+};
+export { ToggleCell };

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

@@ -0,0 +1,15 @@
+import { DateCell } from "./Date";
+import { DateTimeCell } from "./DateTime";
+import { StringJoinCell } from "./StringJoin";
+import { BoolIconCell } from "./BoolIcon";
+import { RemoveCell } from "./RemoveItem";
+import { LinkInCell } from "./LinkInCell";
+import { ButtonInCell } from "./ButtonInCell";
+import { IconButtonInCell } from "./IconButtonInCell";
+import { SwitchInCell } from "./SwitchInCell";
+import { ImageCell } from "./ImageCell";
+import { EnumInCell } from "./EnumInCell";
+import { HoverBubble } from "./HoverBubble";
+import { RowActionsCell } from "./RowActionsCell";
+import { ToggleCell } from "./ToggleCell";
+export { BoolIconCell, ButtonInCell, DateCell, DateTimeCell, EnumInCell, HoverBubble, IconButtonInCell, ImageCell, LinkInCell, RemoveCell, RowActionsCell, StringJoinCell, SwitchInCell, ToggleCell };

package/ui/Blocks/CommonGrid/components/icons/Edit.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 declare const Edit: FC<any>;
 export default Edit;

package/ui/Blocks/CommonGrid/components/icons/Edit.js

@@ -0,0 +1,66 @@
+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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { jsx } from "react/jsx-runtime";
+var Edit = function Edit(props) {
+    return /* @__PURE__ */ jsx("svg", _object_spread_props(_object_spread({
+        "data-icon": "edit",
+        viewBox: "0 0 16 16"
+    }, props), {
+        children: /* @__PURE__ */ jsx("path", {
+            d: "M3.25 10.26l2.47 2.47 6.69-6.69-2.46-2.48-6.7 6.7zM.99 14.99l3.86-1.39-2.46-2.44-1.4 3.83zm12.25-14c-.48 0-.92.2-1.24.51l-1.44 1.44 2.47 2.47 1.44-1.44c.32-.32.51-.75.51-1.24.01-.95-.77-1.74-1.74-1.74z",
+            fillRule: "evenodd"
+        })
+    }));
+};
+var Edit_default = Edit;
+export { Edit_default as default };

package/ui/Blocks/CommonGrid/components/icons/EyeOpen.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-
+import type { FC } from 'react';
 declare const EyeOpen: FC<any>;
 export default EyeOpen;

package/ui/Blocks/CommonGrid/components/icons/EyeOpen.js

@@ -0,0 +1,66 @@
+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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { jsx } from "react/jsx-runtime";
+var EyeOpen = function EyeOpen(props) {
+    return /* @__PURE__ */ jsx("svg", _object_spread_props(_object_spread({
+        "data-icon": "eye-open",
+        viewBox: "0 0 16 16"
+    }, props), {
+        children: /* @__PURE__ */ jsx("path", {
+            d: "M8.002 7.003a1.003 1.003 0 000 2.005 1.003 1.003 0 000-2.005zm7.988.972v-.02-.01-.02-.02a.675.675 0 00-.17-.36c-.509-.673-1.118-1.264-1.737-1.806-1.328-1.173-2.846-2.155-4.523-2.546a6.702 6.702 0 00-2.925-.06c-.889.18-1.738.541-2.546.992C2.84 4.837 1.692 5.81.694 6.902c-.18.211-.36.411-.53.632a.742.742 0 000 .932c.51.672 1.119 1.264 1.738 1.805 1.328 1.173 2.846 2.156 4.523 2.547.968.23 1.947.24 2.925.04.889-.18 1.738-.542 2.546-.993 1.248-.712 2.397-1.684 3.395-2.777.18-.2.37-.411.54-.632.09-.1.149-.23.169-.36v-.02-.02-.01-.02-.03c0-.01-.01-.01-.01-.02zm-7.988 3.038a2.998 2.998 0 01-2.995-3.008 2.998 2.998 0 012.995-3.008 2.998 2.998 0 012.996 3.008 2.998 2.998 0 01-2.996 3.008z",
+            fillRule: "evenodd"
+        })
+    }));
+};
+var EyeOpen_default = EyeOpen;
+export { EyeOpen_default as default };

package/ui/Blocks/CommonGrid/components/icons/Sorting.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 export declare const SortingUp: FC<any>;
 export declare const SortingDown: FC<any>;

package/ui/Blocks/CommonGrid/components/icons/Sorting.js

@@ -0,0 +1,74 @@
+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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { jsx } from "react/jsx-runtime";
+var SortingUp = function SortingUp(props) {
+    return /* @__PURE__ */ jsx("svg", _object_spread_props(_object_spread({
+        viewBox: "0 0 16 16"
+    }, props), {
+        children: /* @__PURE__ */ jsx("path", {
+            d: "M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z",
+            fillRule: "evenodd"
+        })
+    }));
+};
+var SortingDown = function SortingDown(props) {
+    return /* @__PURE__ */ jsx("svg", _object_spread_props(_object_spread({
+        viewBox: "0 0 16 16"
+    }, props), {
+        children: /* @__PURE__ */ jsx("path", {
+            d: "M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z",
+            fillRule: "evenodd"
+        })
+    }));
+};
+export { SortingDown, SortingUp };

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

@@ -1,5 +1,4 @@
 import { MouseEvent } from 'react';
-
 type Props = {
     handleRowClick: (e: MouseEvent<HTMLDivElement>) => void;
 };

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

@@ -0,0 +1,70 @@
+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 { useState } from "react";
+var useTimeMeasurement = function useTimeMeasurement(param) {
+    var handleRowClick = param.handleRowClick;
+    var _useState = _sliced_to_array(useState(0), 2), startTime = _useState[0], setStartTime = _useState[1];
+    var handleMouseDown = function handleMouseDown() {
+        var start = Date.now();
+        setStartTime(start);
+    };
+    var handleMouseUp = function handleMouseUp(e) {
+        if (startTime !== 0) {
+            var endTime = Date.now();
+            var duration = endTime - startTime;
+            if (duration > 0 && duration < 200) {
+                handleRowClick(e);
+            }
+            setStartTime(0);
+        }
+    };
+    return {
+        handleMouseDown: handleMouseDown,
+        handleMouseUp: handleMouseUp
+    };
+};
+export { useTimeMeasurement };

package/ui/Blocks/CommonGrid/hooks/useAddFilter.d.ts

@@ -1,5 +1,4 @@
-import { GridActionsType, ColumnDefinition } from '../types';
-
+import type { GridActionsType, ColumnDefinition } from '../types';
 type AddFilterRet = (value: any, column: ColumnDefinition, others?: any) => void;
 export declare const useAddFilter: (onChange: Required<GridActionsType>["addFilter"]) => AddFilterRet;
 export {};

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

@@ -0,0 +1,17 @@
+import { useCallback } from "react";
+import { createFilterType, getFilterName } from "../utils";
+var useAddFilter = function useAddFilter(onChange) {
+    return useCallback(function(value, column, others) {
+        if (onChange) {
+            var filterProps = {
+                type: createFilterType(column),
+                filterExtraProps: column.filterExtraProps || {},
+                computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null
+            };
+            onChange(getFilterName(column), value, filterProps, others);
+        }
+    }, [
+        onChange
+    ]);
+};
+export { useAddFilter };

package/ui/Blocks/CommonGrid/hooks/useColumnSizes.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
+import React from 'react';
 import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
-
 type ReturnProps = {
     displayColumnsWidth: {
         [anyColumn: string]: number;

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

@@ -0,0 +1,121 @@
+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
+    };
+};
+var useColumnSizes_default = useColumnSizes;
+export { useColumnSizes_default as default };

package/ui/Blocks/CommonGrid/hooks/useCreatePreset.d.ts

@@ -1,6 +1,5 @@
 import { ChangeEvent } from 'react';
 import { Filtering, GridActionsType } from '../types';
-
 type Props = {
     gridName?: string;
     filters?: Filtering;