@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -0,0 +1,370 @@
+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 _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 _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 _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;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useMemo, useState } from "react";
+import { Pagination } from "../../Elements/Pagination";
+import { useCheckDeviceWidth } from "../../utils/CheckDeviceWidth/checkDeviceWidth";
+import HidePrint from "../HidePrint/HidePrint";
+import { useModal } from "../Modal/hooks/useModal";
+import ActionHead from "./components/ActionHead";
+import ControlButtons from "./components/ControlButtons";
+import { GridInfo } from "./components/GridInfo";
+import { GridModals } from "./components/GridModals";
+import MobileFilterModal from "./components/MobileFilterModal";
+import MobileSortModal from "./components/MobileSortModal";
+import TablePagination from "./components/TablePagination";
+import useEditReadAsColumn from "./hooks/useEditReadAsColumn";
+import { useGridAutoRowsPerPage } from "./hooks/useGridAutoRowsPerPage";
+import useManageColumn from "./hooks/useManageColumn";
+import { usePresetState } from "./hooks/usePresetsState";
+import { getExtendedExtraControlButtons } from "./utils/getExtendedExtraControlButtons";
+import { getRowsPerPage } from "./utils/getRowsPerPage";
+import { hasSortTerminated } from "./utils/hasSortTerminated";
+import { x } from "@xstyled/styled-components";
+import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip } from "./styles";
+import { getFilters } from "./utils";
+var CommonGridContainer = function CommonGridContainer(props) {
+    var _actionColumnDefinition_actionOptions;
+    var _props_optimizeFilters = props.optimizeFilters, optimizeFilters = _props_optimizeFilters === void 0 ? false : _props_optimizeFilters, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _props_autoHeight = props.autoHeight, autoHeight = _props_autoHeight === void 0 ? true : _props_autoHeight, gridName = props.gridName, _props_withPresets = props.withPresets, withPresets = _props_withPresets === void 0 ? true : _props_withPresets, _props_withManageColumnButton = props.withManageColumnButton, withManageColumnButton = _props_withManageColumnButton === void 0 ? true : _props_withManageColumnButton, _props_withPagination = props.withPagination, withPagination = _props_withPagination === void 0 ? true : _props_withPagination, allowSortingOnlyUnderTotalRows = props.allowSortingOnlyUnderTotalRows, onReload = props.onReload, passDownProps = _object_without_properties(props, [
+        "optimizeFilters",
+        "extraControlButtons",
+        "onBatchAction",
+        "processCheckedValues",
+        "processCheckedValuesTitle",
+        "hideControlButtons",
+        "quickFilter",
+        "floatingButtonProps",
+        "queryRowsParam",
+        "customPaginationHandler",
+        "autoHeight",
+        "gridName",
+        "withPresets",
+        "withManageColumnButton",
+        "withPagination",
+        "allowSortingOnlyUnderTotalRows",
+        "onReload"
+    ]);
+    var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
+    var extendedExtraControlButtons = useMemo(function() {
+        return getExtendedExtraControlButtons(extraControlButtons, onReload);
+    }, [
+        extraControlButtons,
+        onReload
+    ]);
+    var _useState = _sliced_to_array(useState(false), 2), displayManageColumnButton = _useState[0], setDisplayManageColumnButton = _useState[1];
+    var gridRef = useRef(null);
+    var withButtonStrip = !!(extendedExtraControlButtons === null || extendedExtraControlButtons === void 0 ? void 0 : extendedExtraControlButtons.length) || !hideControlButtons || !!withPresets || !!withManageColumnButton;
+    var hasGroups = !!props.columnsDefinitions.find(function(col) {
+        return col.group;
+    });
+    var hasFilters = !!props.columnsDefinitions.find(function(col) {
+        return col.filtering;
+    });
+    var hasGroupsOrFilters = hasGroups || hasFilters;
+    var autoRowsPerPage = getRowsPerPage(gridRef, withPagination, withButtonStrip, hasGroupsOrFilters);
+    var isMobile = useCheckDeviceWidth().isMobile;
+    useGridAutoRowsPerPage({
+        autoHeight: autoHeight,
+        gridActions: gridActions,
+        queryRowsParam: queryRowsParam,
+        selectedRowsPerPage: gridSelectors.rowsPerPage,
+        autoRowsPerPage: autoRowsPerPage
+    });
+    var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
+    var filters = useMemo(function() {
+        return getFilters(optimizeFilters);
+    }, [
+        optimizeFilters
+    ]);
+    var columns = modifiedPassDownProps.columnsDefinitions;
+    var _useModal = useModal(), openManageColumnForm = _useModal.onOpen, manageColumnFormVisible = _useModal.isOpen, onClose = _useModal.onClose;
+    var _useManageColumn = useManageColumn({
+        columns: columns,
+        gridActions: gridActions,
+        gridSelectors: gridSelectors,
+        onClose: onClose
+    }), columnsConfigValues = _useManageColumn.columnsConfigValues, setColumnsConfigOptions = _useManageColumn.setColumnsConfigOptions, onConfirmForm = _useManageColumn.onConfirmForm, resetColumnConfig = _useManageColumn.resetColumnConfig, handleDragEnd = _useManageColumn.handleDragEnd, onCloseForm = _useManageColumn.onCloseForm, displayColumnsDefinitions = _useManageColumn.displayColumnsDefinitions, manageColumnsFormDefinitions = _useManageColumn.manageColumnsFormDefinitions;
+    var _usePresetState = usePresetState(), isPresetsModalOpen = _usePresetState.isPresetsModalOpen, onClosePresetsModal = _usePresetState.onClosePresetsModal, onOpenPresetsModal = _usePresetState.onOpenPresetsModal, setSelectedPresetName = _usePresetState.setSelectedPresetName, selectedPresetName = _usePresetState.selectedPresetName;
+    var _useModal1 = useModal(), isMobileFilterOpen = _useModal1.isOpen, onOpenMobileFilter = _useModal1.onOpen, closeMobileFilter = _useModal1.onClose;
+    var _useModal2 = useModal(), isMobileSortOpen = _useModal2.isOpen, onOpenMobileSort = _useModal2.onOpen, closeMobileSort = _useModal2.onClose;
+    var _hasSortTerminated = hasSortTerminated({
+        allowSortingOnlyUnderTotalRows: allowSortingOnlyUnderTotalRows,
+        totalRowsCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount
+    }), isSortTerminatedAppeal = _hasSortTerminated.isSortTerminatedAppeal, isSortTerminated = _hasSortTerminated.isSortTerminated;
+    return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+            /* @__PURE__ */ jsxs(ContentContainer, {
+                ref: gridRef,
+                children: [
+                    /* @__PURE__ */ jsxs(CommonGridWrap, {
+                        withPagination: withPagination,
+                        children: [
+                            withButtonStrip && /* @__PURE__ */ jsx(HidePrint, {
+                                children: /* @__PURE__ */ jsx(StyledButtonStrip, {
+                                    className: "buttonsStrip",
+                                    children: /* @__PURE__ */ jsx(ControlButtons, {
+                                        hideControlButtons: hideControlButtons,
+                                        extraControlButtons: extendedExtraControlButtons,
+                                        gridActions: gridActions,
+                                        gridSelectors: gridSelectors,
+                                        quickFilter: quickFilter,
+                                        columns: columns,
+                                        filters: filters,
+                                        setDisplayManageColumnButton: setDisplayManageColumnButton,
+                                        displayManageColumnButton: displayManageColumnButton,
+                                        openManageColumnForm: openManageColumnForm,
+                                        onOpenPresetsModal: onOpenPresetsModal,
+                                        selectedPresetName: selectedPresetName,
+                                        withPresets: withPresets,
+                                        gridName: gridName,
+                                        withManageColumnButton: withManageColumnButton,
+                                        onOpenMobileFilters: onOpenMobileFilter,
+                                        onOpenMobileSorting: onOpenMobileSort,
+                                        isSortTerminated: isSortTerminated
+                                    })
+                                })
+                            }),
+                            /* @__PURE__ */ jsx(CommonGridWithStyles, _object_spread_props(_object_spread({}, passDownProps, modifiedPassDownProps), {
+                                withButtonStrip: withButtonStrip,
+                                hasGroupsOrFilters: hasGroupsOrFilters,
+                                filters: filters,
+                                floatingButtonProps: floatingButtonProps,
+                                handleDragEnd: handleDragEnd(false),
+                                displayColumnsDefinitions: displayColumnsDefinitions,
+                                hasFilters: hasFilters,
+                                hasGroups: hasGroups,
+                                isSortTerminated: isSortTerminated,
+                                hasColouredRows: true
+                            }))
+                        ]
+                    }),
+                    /* @__PURE__ */ jsxs(BottomWrapper, {
+                        withPagination: withPagination,
+                        children: [
+                            (processCheckedValues || !!(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : (_actionColumnDefinition_actionOptions = actionColumnDefinition.actionOptions) === null || _actionColumnDefinition_actionOptions === void 0 ? void 0 : _actionColumnDefinition_actionOptions.length)) && /* @__PURE__ */ jsx(ActionHead, {
+                                rowsData: rowsData,
+                                onBatchAction: onBatchAction,
+                                gridActions: gridActions,
+                                gridSelectors: gridSelectors,
+                                actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions,
+                                processCheckedValues: processCheckedValues,
+                                processCheckedValuesTitle: processCheckedValuesTitle
+                            }),
+                            /* @__PURE__ */ jsxs(x.div, {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                alignItems: "center",
+                                w: "100%",
+                                children: [
+                                    !isMobile && /* @__PURE__ */ jsx(GridInfo, {
+                                        isSortTerminatedAppeal: isSortTerminatedAppeal,
+                                        isSortTerminated: isSortTerminated
+                                    }),
+                                    withPagination && /* @__PURE__ */ jsxs(x.div, {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        className: "paginatorWrapper",
+                                        w: "100%",
+                                        justifyContent: "flex-end",
+                                        gap: "16px",
+                                        children: [
+                                            /* @__PURE__ */ jsx(Pagination, {
+                                                page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page,
+                                                itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount,
+                                                itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10,
+                                                onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage,
+                                                customPaginationHandler: customPaginationHandler,
+                                                radius: isMobile ? 3 : 5,
+                                                rate: isMobile ? 1 : 4
+                                            }),
+                                            /* @__PURE__ */ jsx(TablePagination, {
+                                                gridActions: gridActions,
+                                                gridSelectors: gridSelectors,
+                                                customPaginationHandler: customPaginationHandler,
+                                                autoRowsPerPage: autoRowsPerPage
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /* @__PURE__ */ jsx(GridModals, {
+                manageColumnFormVisible: manageColumnFormVisible,
+                onCloseForm: onCloseForm,
+                resetColumnConfig: resetColumnConfig,
+                onConfirmForm: onConfirmForm,
+                manageColumnsFormDefinitions: manageColumnsFormDefinitions,
+                columnsConfigValues: columnsConfigValues,
+                setColumnsConfigOptions: setColumnsConfigOptions,
+                handleDragEnd: handleDragEnd(true),
+                gridName: gridName,
+                gridActions: gridActions,
+                gridSelectors: gridSelectors,
+                onClosePresetsModal: onClosePresetsModal,
+                isPresetsModalOpen: isPresetsModalOpen,
+                selectedPresetName: selectedPresetName,
+                setSelectedPresetName: setSelectedPresetName
+            }),
+            isMobileFilterOpen && gridActions.setFilters && /* @__PURE__ */ jsx(MobileFilterModal, {
+                isShown: isMobileFilterOpen,
+                onClose: closeMobileFilter,
+                columns: displayColumnsDefinitions,
+                filters: filters,
+                comparators: passDownProps.comparators,
+                filterValues: gridSelectors.filter,
+                setFilters: gridActions.setFilters,
+                rowsData: rowsData,
+                uxState: gridSelectors.uxState || {},
+                handleUxChange: gridActions.handleUxChange,
+                onAsyncLoadFilterOptions: passDownProps.onAsyncLoadFilterOptions,
+                actionColumn: actionColumnDefinition,
+                onClearSettings: gridActions.clearSettings
+            }),
+            isMobileSortOpen && gridActions.addSorting && /* @__PURE__ */ jsx(MobileSortModal, {
+                isShown: isMobileSortOpen,
+                onClose: closeMobileSort,
+                columns: displayColumnsDefinitions,
+                sortingValues: gridSelectors.sorting,
+                onAddSorting: gridActions.addSorting,
+                onResetSorting: gridActions.resetSorting
+            })
+        ]
+    });
+};
+var CommonGridContainer_default = CommonGridContainer;
+export { CommonGridContainer_default as default };

package/ui/Blocks/CommonGrid/HoC/withProps.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-
+import type { FC } from 'react';
 declare const withProps: (input: any) => <P>(Component: FC<P>) => FC<P>;
 export default withProps;

package/ui/Blocks/CommonGrid/HoC/withProps.js

@@ -0,0 +1,39 @@
+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 { jsx } from "react/jsx-runtime";
+var withProps = function withProps(input) {
+    return function(Component) {
+        return function ComponentWithProps(props) {
+            var additinalProps = typeof input === "function" ? input(props) : input;
+            return /* @__PURE__ */ jsx(Component, _object_spread({}, props, additinalProps));
+        };
+    };
+};
+var withProps_default = withProps;
+export { withProps_default as default };

package/ui/Blocks/CommonGrid/HoC/withReduxActions.d.ts

@@ -1,2 +1,2 @@
-declare const withReduxActions: (gridName: string, prefix?: string) => import('react-redux').InferableComponentEnhancerWithProps<{}, {}>;
+declare const withReduxActions: (gridName: string, prefix?: string) => import("react-redux").InferableComponentEnhancerWithProps<{}, {}>;
 export default withReduxActions;

package/ui/Blocks/CommonGrid/HoC/withReduxActions.js

@@ -0,0 +1,49 @@
+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 { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { createActions, createFullSelector } from "../store";
+var withReduxActions = function withReduxActions(gridName) {
+    var prefix = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "grid";
+    var actions = createActions(gridName);
+    var selectors = createFullSelector(gridName);
+    return connect(function(state) {
+        return _define_property({}, "".concat(prefix, "Selectors"), selectors(state));
+    }, function(dispatch) {
+        return _define_property({}, "".concat(prefix, "Actions"), bindActionCreators({
+            init: actions.init,
+            clearUxState: actions.clearUxState,
+            handleUxChange: actions.handleUxChange,
+            openConfigForm: actions.openConfigForm,
+            closeConfigForm: actions.closeConfigForm,
+            setColumnConfig: actions.setColumnConfig,
+            setPage: actions.setPage,
+            setPresets: actions.setPresets,
+            createPreset: actions.createPreset,
+            deletePreset: actions.deletePreset,
+            setRowsPerPage: actions.setRowsPerPage,
+            addFilter: actions.addFilter,
+            setFilters: actions.setFilters,
+            resetFilters: actions.resetFilters,
+            addSorting: actions.addSorting,
+            resetSorting: actions.resetSorting,
+            clearSettings: actions.clearSettings,
+            setColumnWidth: actions.setColumnWidth,
+            resetGrid: actions.resetGrid,
+            setColumnsOrder: actions.setColumnsOrder
+        }, dispatch));
+    });
+};
+var withReduxActions_default = withReduxActions;
+export { withReduxActions_default as default };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { GridActionsType, GridSelectorsType, OnBatchActionFn, RowProps, ActionColumn } from '../../types';
-
+import { type FC } from 'react';
+import { type GridActionsType, type GridSelectorsType, type OnBatchActionFn, type RowProps, type ActionColumn } from '../../types';
 type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;