@mailstep/design-system 0.8.27 → 0.8.28-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.27",
+  "version": "0.8.28-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -12,8 +12,8 @@
   ],
   "scripts": {
     "storybook": "storybook dev -p 6006",
-    "build": "rm -rf ./build && tsup && tsc --emitDeclarationOnly && cp package.json build && cp README.md build",
-    "build:win": "tsup && tsc --emitDeclarationOnly && copy package.json build && copy README.md build",
+    "build": "rm -rf ./build && tsdown && tsc --emitDeclarationOnly && cp package.json build && cp README.md build",
+    "build:win": "tsdown && tsc --emitDeclarationOnly && copy package.json build && copy README.md build",
     "build-storybook": "storybook build",
     "deploy": "npm run build && npm publish ./build",
     "deploy:win": "npm run build:win && npm publish ./build",
@@ -98,8 +98,8 @@
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
+    "tsdown": "^0.21.9",
     "tslib": "^2.6.2",
-    "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "webpack": "^5.82.1"
   },

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -1,155 +1,107 @@
-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;
-}
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getGroups } from "./utils/index.js";
+import DataRow from "./components/DataRow.js";
+import FilterRow from "./components/FilterRow.js";
+import FloatingButton from "./components/FloatingButton/FloatingButton.js";
+import { GridStatus } from "./components/GridStatus/index.js";
+import GroupRow from "./components/GroupRow.js";
+import HeadRow from "./components/HeadRow.js";
+import OversizedScroll from "./components/OversizedScroll.js";
+import useColumnSizes from "./hooks/useColumnSizes.js";
+import useRowsKeyControls from "./hooks/useRowsKeyControls.js";
+import useUxReset from "./hooks/useUxReset.js";
+import { initialState } from "./store/index.js";
 import { useCallback, useMemo } from "react";
-import DataRow from "./components/DataRow";
-import FilterRow from "./components/FilterRow";
-import FloatingButton from "./components/FloatingButton/FloatingButton";
-import { GridStatus } from "./components/GridStatus";
-import GroupRow from "./components/GroupRow";
-import HeadRow from "./components/HeadRow";
-import OversizedScroll from "./components/OversizedScroll";
-import useColumnSizes from "./hooks/useColumnSizes";
-import useRowsKeyControls from "./hooks/useRowsKeyControls";
-import useUxReset from "./hooks/useUxReset";
 import { x } from "@xstyled/styled-components";
-import { initialState } from "./store";
-import { getGroups } from "./utils";
-var rowsStyles = {
-    outline: "none"
-};
-var defaultVoidFunction = function defaultVoidFunction() {
-    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
-        args[_key] = arguments[_key];
-    }
-    return null;
-};
-var defaultUxState = initialState.uxState;
-var defaultColumnsWidth = {};
-var CommonGrid = function CommonGrid(param) {
-    var filters = param.filters, comparators = param.comparators, handleDragEnd = param.handleDragEnd, // redux props
-    gridSelectors = param.gridSelectors, gridActions = param.gridActions, // input props
-    isLoading = param.isLoading, rowsData = param.rowsData, hasColouredRows = param.hasColouredRows, actionColumnDefinition = param.actionColumnDefinition, allowRowSelect = param.allowRowSelect, allowRowSelectOnAction = param.allowRowSelectOnAction, onRowAction = param.onRowAction, onRowClick = param.onRowClick, onAsyncLoadFilterOptions = param.onAsyncLoadFilterOptions, _param_columnLayout = param.columnLayout, columnLayout = _param_columnLayout === void 0 ? "normal" : _param_columnLayout, displayColumnsDefinitions = param.displayColumnsDefinitions, className = param.className, minColumnWidth = param.minColumnWidth, errorMessage = param.errorMessage, floatingButtonProps = param.floatingButtonProps, hasGroups = param.hasGroups, hasFilters = param.hasFilters, isSortTerminated = param.isSortTerminated;
-    var _gridSelectors_uxState = gridSelectors.uxState, uxState = _gridSelectors_uxState === void 0 ? defaultUxState : _gridSelectors_uxState, _gridSelectors_columnsWidth = gridSelectors.columnsWidth, columnsWidth = _gridSelectors_columnsWidth === void 0 ? defaultColumnsWidth : _gridSelectors_columnsWidth, columnsWidthVariant = gridSelectors.columnsWidthVariant, _gridSelectors_page = gridSelectors.page, page = _gridSelectors_page === void 0 ? 1 : _gridSelectors_page, filter = gridSelectors.filter, sorting = gridSelectors.sorting, _gridSelectors_rowsPerPage = gridSelectors.rowsPerPage, rowsPerPage = _gridSelectors_rowsPerPage === void 0 ? 10 : _gridSelectors_rowsPerPage;
-    var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _gridActions_addFilter = gridActions.addFilter, addFilter = _gridActions_addFilter === void 0 ? defaultVoidFunction : _gridActions_addFilter, _gridActions_addSorting = gridActions.addSorting, addSorting = _gridActions_addSorting === void 0 ? defaultVoidFunction : _gridActions_addSorting, _gridActions_setColumnWidth = gridActions.setColumnWidth, setColumnWidth = _gridActions_setColumnWidth === void 0 ? defaultVoidFunction : _gridActions_setColumnWidth;
-    var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
-    useUxReset(rowsData, uxState, clearUxState);
-    var _useColumnSizes = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth), displayColumnsWidth = _useColumnSizes.displayColumnsWidth, totalColumnsWidth = _useColumnSizes.totalColumnsWidth, gridBoxRef = _useColumnSizes.gridBoxRef, handleResizeDrag = _useColumnSizes.handleResizeDrag;
-    var groups = useMemo(function() {
-        return getGroups(displayColumnsDefinitions);
-    }, [
-        displayColumnsDefinitions
-    ]);
-    var commonGridRef = useCallback(function(node) {
-        gridBoxRef.current = node;
-    }, []);
-    var isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
-    var hasFloatingChildren = isLoading || errorMessage || isEmpty;
-    return /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-            /* @__PURE__ */ jsx(x.div, {
-                className: className || "",
-                children: /* @__PURE__ */ jsxs(OversizedScroll, {
-                    columnLayout: columnLayout,
-                    totalColumnsWidth: totalColumnsWidth,
-                    floatingChildren: hasFloatingChildren && /* @__PURE__ */ jsx(GridStatus, {
-                        isLoading: isLoading,
-                        isEmpty: isEmpty,
-                        errorMessage: errorMessage
-                    }),
-                    ref: commonGridRef,
-                    children: [
-                        /* @__PURE__ */ jsxs("div", {
-                            className: "gridHead",
-                            children: [
-                                hasGroups && /* @__PURE__ */ jsx(GroupRow, {
-                                    actionColumn: actionColumnDefinition,
-                                    columns: displayColumnsDefinitions,
-                                    displayColumnsWidth: displayColumnsWidth,
-                                    groups: groups
-                                }),
-                                /* @__PURE__ */ jsx(HeadRow, {
-                                    columns: displayColumnsDefinitions,
-                                    onAddSort: addSorting,
-                                    columnLayout: columnLayout,
-                                    sortingValues: sorting,
-                                    displayColumnsWidth: displayColumnsWidth,
-                                    handleResizeDrag: handleResizeDrag,
-                                    groups: groups,
-                                    handleDragEnd: handleDragEnd,
-                                    isSortTerminated: isSortTerminated
-                                }),
-                                hasFilters && /* @__PURE__ */ jsx(FilterRow, {
-                                    filters: filters,
-                                    comparators: comparators,
-                                    columns: displayColumnsDefinitions,
-                                    actionColumn: actionColumnDefinition,
-                                    onChange: addFilter,
-                                    filterValues: filter,
-                                    displayColumnsWidth: displayColumnsWidth,
-                                    groups: groups,
-                                    rowsData: rowsData,
-                                    uxState: uxState,
-                                    handleUxChange: handleUxChange,
-                                    onAsyncLoadFilterOptions: onAsyncLoadFilterOptions
-                                })
-                            ]
-                        }),
-                        /* @__PURE__ */ jsx("div", {
-                            className: "body flx_1",
-                            style: rowsStyles,
-                            tabIndex: -1,
-                            onKeyDown: handleRowsKeyDown,
-                            children: !isLoading && rowsData && displayColumnsDefinitions && rowsData.map(function(row, index) {
-                                var rowIndex = rowsPerPage * page + (index + 1) - rowsPerPage;
-                                return /* @__PURE__ */ jsx(DataRow, {
-                                    rowData: row,
-                                    rowIndex: rowIndex,
-                                    uxState: uxState,
-                                    isEven: hasColouredRows && (index + 1) % 2 === 0,
-                                    allowRowSelect: allowRowSelect,
-                                    allowRowSelectOnAction: allowRowSelectOnAction,
-                                    onRowAction: onRowAction,
-                                    onUxChange: handleUxChange,
-                                    onRowClick: onRowClick,
-                                    columns: displayColumnsDefinitions,
-                                    displayColumnsWidth: displayColumnsWidth,
-                                    groups: groups
-                                }, row.id);
-                            })
-                        })
-                    ]
-                })
-            }),
-            floatingButtonProps && /* @__PURE__ */ jsx(FloatingButton, _object_spread({}, floatingButtonProps))
-        ]
-    });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/CommonGrid.tsx
+const rowsStyles = { outline: "none" };
+const defaultVoidFunction = (...args) => null;
+const defaultUxState = initialState.uxState;
+const defaultColumnsWidth = {};
+const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, onAsyncLoadFilterOptions, columnLayout = "normal", displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters, isSortTerminated }) => {
+	const { uxState = defaultUxState, columnsWidth = defaultColumnsWidth, columnsWidthVariant, page = 1, filter, sorting, rowsPerPage = 10 } = gridSelectors;
+	const { clearUxState, handleUxChange, addFilter = defaultVoidFunction, addSorting = defaultVoidFunction, setColumnWidth = defaultVoidFunction } = gridActions;
+	const handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
+	useUxReset(rowsData, uxState, clearUxState);
+	const { displayColumnsWidth, totalColumnsWidth, gridBoxRef, handleResizeDrag } = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth);
+	const groups = useMemo(() => {
+		return getGroups(displayColumnsDefinitions);
+	}, [displayColumnsDefinitions]);
+	const commonGridRef = useCallback((node) => {
+		gridBoxRef.current = node;
+	}, []);
+	const isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
+	const hasFloatingChildren = isLoading || errorMessage || isEmpty;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(x.div, {
+		className: className || "",
+		children: /* @__PURE__ */ jsxs(OversizedScroll, {
+			columnLayout,
+			totalColumnsWidth,
+			floatingChildren: hasFloatingChildren && /* @__PURE__ */ jsx(GridStatus, {
+				isLoading,
+				isEmpty,
+				errorMessage
+			}),
+			ref: commonGridRef,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "gridHead",
+				children: [
+					hasGroups && /* @__PURE__ */ jsx(GroupRow, {
+						actionColumn: actionColumnDefinition,
+						columns: displayColumnsDefinitions,
+						displayColumnsWidth,
+						groups
+					}),
+					/* @__PURE__ */ jsx(HeadRow, {
+						columns: displayColumnsDefinitions,
+						onAddSort: addSorting,
+						columnLayout,
+						sortingValues: sorting,
+						displayColumnsWidth,
+						handleResizeDrag,
+						groups,
+						handleDragEnd,
+						isSortTerminated
+					}),
+					hasFilters && /* @__PURE__ */ jsx(FilterRow, {
+						filters,
+						comparators,
+						columns: displayColumnsDefinitions,
+						actionColumn: actionColumnDefinition,
+						onChange: addFilter,
+						filterValues: filter,
+						displayColumnsWidth,
+						groups,
+						rowsData,
+						uxState,
+						handleUxChange,
+						onAsyncLoadFilterOptions
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "body flx_1",
+				style: rowsStyles,
+				tabIndex: -1,
+				onKeyDown: handleRowsKeyDown,
+				children: !isLoading && rowsData && displayColumnsDefinitions && rowsData.map((row, index) => {
+					return /* @__PURE__ */ jsx(DataRow, {
+						rowData: row,
+						rowIndex: rowsPerPage * page + (index + 1) - rowsPerPage,
+						uxState,
+						isEven: hasColouredRows && (index + 1) % 2 === 0,
+						allowRowSelect,
+						allowRowSelectOnAction,
+						onRowAction,
+						onUxChange: handleUxChange,
+						onRowClick,
+						columns: displayColumnsDefinitions,
+						displayColumnsWidth,
+						groups
+					}, row.id);
+				})
+			})]
+		})
+	}), floatingButtonProps && /* @__PURE__ */ jsx(FloatingButton, { ...floatingButtonProps })] });
 };
-var CommonGrid_default = CommonGrid;
-export { CommonGrid_default as default };
+//#endregion
+export { CommonGrid as default };