@mailstep/design-system 0.8.0-beta.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.0-beta.1",
+  "version": "0.8.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -39,9 +39,16 @@
     "@lingui/core": "3.17.2",
     "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-designs": "^11.1.2",
-    "@storybook/addon-links": "10.2.8",
-    "@storybook/react-webpack5": "10.2.8",
+    "@storybook/addon-controls": "^8.4.7",
+    "@storybook/addon-designs": "^8.0.4",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/types": "^8.4.7",
     "@svgr/rollup": "^8.0.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/faker": "^4.1.11",
@@ -72,7 +79,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "10.2.8",
+    "eslint-plugin-storybook": "^0.11.1",
     "faker": "^5.1.0",
     "immer": "9.0.7",
     "lodash": "^4.17.21",
@@ -93,7 +100,7 @@
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
-    "storybook": "10.2.8",
+    "storybook": "^8.4.7",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
@@ -102,8 +109,7 @@
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1",
-    "@storybook/addon-docs": "10.2.8"
+    "webpack": "^5.82.1"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -39,7 +39,7 @@ var CommonGrid = function (_a) {
     // redux props
     gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, 
     // input props
-    isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowClick = _a.onRowClick, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps, hasGroups = _a.hasGroups, hasFilters = _a.hasFilters, isSortTerminated = _a.isSortTerminated;
+    isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowClick = _a.onRowClick, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps, hasGroups = _a.hasGroups, hasFilters = _a.hasFilters, isSortTerminated = _a.isSortTerminated;
     var _c = gridSelectors.uxState, uxState = _c === void 0 ? defaultUxState : _c, _d = gridSelectors.columnsWidth, columnsWidth = _d === void 0 ? defaultColumnsWidth : _d, columnsWidthVariant = gridSelectors.columnsWidthVariant, _e = gridSelectors.page, page = _e === void 0 ? 1 : _e, filter = gridSelectors.filter, sorting = gridSelectors.sorting, _f = gridSelectors.rowsPerPage, rowsPerPage = _f === void 0 ? 10 : _f;
     var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _g = gridActions.addFilter, addFilter = _g === void 0 ? defaultVoidFunction : _g, _h = gridActions.addSorting, addSorting = _h === void 0 ? defaultVoidFunction : _h, _j = gridActions.setColumnWidth, setColumnWidth = _j === void 0 ? defaultVoidFunction : _j;
     var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
@@ -53,7 +53,7 @@ var CommonGrid = function (_a) {
     }, []);
     var isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
     var hasFloatingChildren = isLoading || errorMessage || isEmpty;
-    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, floatingChildren: hasFloatingChildren && _jsx(GridStatus, { isLoading: isLoading, isEmpty: isEmpty, errorMessage: errorMessage }), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd, isSortTerminated: isSortTerminated }), hasFilters && (_jsx(FilterRow, { filters: filters, comparators: comparators, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, floatingChildren: hasFloatingChildren && _jsx(GridStatus, { isLoading: isLoading, isEmpty: isEmpty, errorMessage: errorMessage }), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd, isSortTerminated: isSortTerminated }), hasFilters && (_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 }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

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

@@ -14,6 +14,7 @@ type Props = {
     rowsData: RowProps[];
     uxState: UxState;
     handleUxChange: GridActionsType['handleUxChange'];
+    onAsyncLoadFilterOptions?: (key: string, value: string) => void;
 };
 declare const ColumnFilterCell: FC<Props>;
 export default ColumnFilterCell;

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

@@ -17,7 +17,7 @@ import { x } from '@xstyled/styled-components';
 import OverlayComponent from './FilterDropdown';
 import { Cell } from './Table';
 var ColumnFilterCell = function (_a) {
-    var onChange = _a.onChange, value = _a.value, others = _a.others, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group, comparators = _a.comparators, actionColumn = _a.actionColumn, rowsData = _a.rowsData, uxState = _a.uxState, handleUxChange = _a.handleUxChange;
+    var onChange = _a.onChange, value = _a.value, others = _a.others, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group, comparators = _a.comparators, actionColumn = _a.actionColumn, rowsData = _a.rowsData, uxState = _a.uxState, handleUxChange = _a.handleUxChange, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions;
     var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
     var handleAddFilter = useAddFilter(onChange);
     var handleChange = React.useCallback(function (event, others) {
@@ -35,6 +35,6 @@ var ColumnFilterCell = function (_a) {
         console.error("ERROR, using unknown filter type ".concat(filterType));
         return (_jsx(x.div, { children: _jsx("span", { children: "".concat(filterType, " filter") }) }));
     }
-    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, others: others, OverlayComponent: OverlayComponent, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }))) }) })));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ asyncLoadKey: columnDefinition.asyncLoadKey, "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, others: others, OverlayComponent: OverlayComponent, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }))) }) })));
 };
 export default ColumnFilterCell;

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

@@ -11,6 +11,7 @@ type Props = {
     comparators?: CustomComparators;
     groups?: Group[];
     handleUxChange?: GridActionsType['handleUxChange'];
+    onAsyncLoadFilterOptions?: (key: string, value: string) => void;
     rowsData: RowProps[];
     uxState: UxState;
 };

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

@@ -5,8 +5,8 @@ import throttle from 'lodash/throttle';
 import ColumnFilterCell from './ColumnFilterCell';
 import { Row } from './Table';
 var FilterRow = function (_a) {
-    var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _b = _a.filterValues, filterValues = _b === void 0 ? {} : _b, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, comparators = _a.comparators, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
+    var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _b = _a.filterValues, filterValues = _b === void 0 ? {} : _b, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, comparators = _a.comparators, handleUxChange = _a.handleUxChange, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions, rowsData = _a.rowsData, uxState = _a.uxState;
     var handleOnChange = throttle(onChange, 500);
-    return (_jsx(Row, { className: "filterRow", children: columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), others: get([getFilterName(column), 'others'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, comparators: comparators, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); }) }));
+    return (_jsx(Row, { className: "filterRow", children: columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), others: get([getFilterName(column), 'others'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, comparators: comparators, group: groups === null || groups === void 0 ? void 0 : groups[index], onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, index)); }) }));
 };
 export default FilterRow;

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.d.ts

@@ -1,12 +1,15 @@
 import { FC } from 'react';
-import { ColumnDefinition } from '../../../types';
+import { Option } from '../../../../../Elements/Select/types';
+import { CommonGridProps } from '../../../types';
 
 type Props = {
     onChange: (data: any) => void;
+    onAsyncLoadFilterOptions?: CommonGridProps['onAsyncLoadFilterOptions'];
     isMulti?: boolean;
-    options?: ColumnDefinition['filterOptions'];
-    value?: string | string[];
+    options?: Option[];
+    value?: string | string[] | Option[];
     checkAllButton?: boolean;
+    asyncLoadKey?: string;
 };
 declare const SelectFilter: FC<Props>;
 export default SelectFilter;

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js

@@ -1,19 +1,84 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import MultiSelect from '../../../../../Elements/MultiSelect';
+import { useCallback, useState, useMemo } from 'react';
+import Select from '../../../../../Elements/Select';
 import SingleSelect from '../../../../../Elements/SingleSelect';
+import { i18n } from '@lingui/core';
 import isArray from 'lodash/isArray';
-var emptyValue = [];
+import uniqBy from 'lodash/uniqBy';
+import { isOptionArray } from './guards';
 var SelectFilter = function (_a) {
-    var onChange = _a.onChange, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton;
+    var onChange = _a.onChange, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton, asyncLoadKey = _a.asyncLoadKey, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions;
+    var _b = useState([]), loadedOptions = _b[0], setLoadedOptions = _b[1];
     var handleOnMultiChange = useCallback(function (options) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(!isArray(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options.map(function (option) { return option.value; }));
+        onChange === null || onChange === void 0 ? void 0 : onChange(!isArray(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options);
     }, [onChange]);
+    var isAsync = !!asyncLoadKey;
+    var handleLoadOptions = useCallback(function (fulltext) { return __awaiter(void 0, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    data = [];
+                    if (!asyncLoadKey) return [3 /*break*/, 2];
+                    return [4 /*yield*/, (onAsyncLoadFilterOptions === null || onAsyncLoadFilterOptions === void 0 ? void 0 : onAsyncLoadFilterOptions(asyncLoadKey, fulltext))];
+                case 1:
+                    data = (_a.sent()) || [];
+                    _a.label = 2;
+                case 2:
+                    setLoadedOptions(data);
+                    return [2 /*return*/, data];
+            }
+        });
+    }); }, [asyncLoadKey, onAsyncLoadFilterOptions]);
+    var defaultOptions = useMemo(function () { return (isMulti && isAsync && isOptionArray(value) ? uniqBy(__spreadArray(__spreadArray([], loadedOptions, true), value, true), 'value') : undefined); }, [isAsync, value, loadedOptions]);
     if (isMulti) {
-        return (_jsx(MultiSelect, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: value || emptyValue, options: options, checkAllButton: checkAllButton, style: "gridFilter" }));
-    }
-    else {
-        return _jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter" });
+        return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true }));
     }
+    return (_jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, isClearable: true }));
 };
 export default SelectFilter;

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/guards.d.ts

@@ -0,0 +1,3 @@
+import { Option } from '../../../../../Elements/Select/types';
+
+export declare const isOptionArray: (value: unknown) => value is Option[];

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/guards.js

@@ -0,0 +1,3 @@
+export var isOptionArray = function (value) {
+    return Array.isArray(value) && value.every(function (v) { return typeof v === 'object' && v !== null && 'label' in v && 'value' in v; });
+};

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -6,7 +6,7 @@ import { useAddFilter } from '../../hooks/useAddFilter';
 import { ExtraControlButtonPosition } from '../../types';
 import { onRowEditClick, onRowReadClick, onRowAction, onRowClick, onBatchAction } from '../utils/actions';
 import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
-import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
+import { ReduxGrid, createRandomData, enumValues, gridDummyActions, onAsyncLoadFilterOptions } from '../utils/utils';
 import withRedux from '../utils/withRedux';
 var ActionColumnButtons = {
     flexBasis: 80,
@@ -47,7 +47,7 @@ export default {
     title: 'Blocks/CommonGrid',
     decorators: [withRedux]
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -34,6 +34,15 @@ export var columnDefinitions = [
         sorting: true
     },
     enumColumn,
+    {
+        name: 'enumColumnAsync',
+        title: 'Enum Column Async',
+        flexBasis: 160,
+        filterExtraProps: { isMulti: true, checkAllButton: true },
+        filtering: true,
+        sorting: true,
+        asyncLoadKey: 'enumColumnAsync'
+    },
     {
         name: 'numberColumn',
         title: 'Number Column',

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

@@ -18,3 +18,4 @@ export declare const gridDummyActions: Required<GridActionsType>;
 export declare const createOversizedRandomData: (count: number) => any[];
 export declare const ReduxGrid: FC<any>;
 export declare const extraControlButtons: ExtraControlButton[];
+export declare const onAsyncLoadFilterOptions: (key: string, value: string) => Promise<unknown>;

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

@@ -72,3 +72,22 @@ export var extraControlButtons = [
     { label: 'Reload', position: ExtraControlButtonPosition.TopLeft },
     { label: 'Export all', position: ExtraControlButtonPosition.TopRight }
 ];
+export var onAsyncLoadFilterOptions = function (key, value) {
+    return new Promise(function (resolve) {
+        setTimeout(function () {
+            resolve([
+                { label: 'Apple', value: 'apple' },
+                { label: 'Banana', value: 'banana' },
+                { label: 'Cherry', value: 'cherry' },
+                { label: 'Date', value: 'date' },
+                { label: 'Elderberry', value: 'elderberry' },
+                { label: 'Fig', value: 'fig' },
+                { label: 'Grape', value: 'grape' },
+                { label: 'Honeydew', value: 'honeydew' },
+                { label: 'Kiwi', value: 'kiwi' },
+                { label: 'Lemon', value: 'lemon' },
+                { label: 'Lime', value: 'lime' },
+            ]);
+        }, 1000);
+    });
+};

package/ui/Blocks/CommonGrid/types.d.ts

@@ -92,6 +92,7 @@ type ColumnBaseProps = {
 };
 export type RowValueType = string | React.ReactNode | number | void;
 export type ColumnDefinition<ColumnName extends string = string> = ColumnBaseProps & {
+    asyncLoadKey?: string;
     name: ColumnName;
     group?: Group['name'];
     systemName?: string;
@@ -248,6 +249,7 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     onRowReadClick?: (id: string, props: TData) => void;
     onRowClick?: (id: string, props: TData) => void;
     onBatchAction?: OnBatchActionFn;
+    onAsyncLoadFilterOptions?: (key: string, value: string) => Promise<Option[]>;
     columnLayout?: ColumnLayout;
     quickFilter?: string;
     confirmOnReset?: () => boolean;

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

@@ -8,10 +8,7 @@ export declare const calculatePaginator: (page: number, rowsPerPage: number) =>
     offset: number;
     limit: number;
 };
-export declare const createFilterType: (columnDefinition: {
-    filterOptions?: ColumnDefinition["filterOptions"];
-    filteringType?: ColumnDefinition["filteringType"];
-}) => FilterProps["type"];
+export declare const createFilterType: (columnDefinition: ColumnDefinition) => FilterProps["type"];
 export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
 export declare const getGroupClassNames: (group?: Group) => string;
 export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;

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

@@ -39,7 +39,7 @@ export var calculatePaginator = function (page, rowsPerPage) { return ({
     limit: rowsPerPage
 }); };
 export var createFilterType = function (columnDefinition) {
-    if (columnDefinition.filterOptions)
+    if (columnDefinition.filterOptions || columnDefinition.asyncLoadKey)
         return 'options';
     else
         return columnDefinition.filteringType || 'text';

package/ui/Blocks/CornerDialog/stories/CornerDialog.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Blocks/ImageList/stories/ImageList.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Blocks/LightBox/stories/LightBox.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Blocks/Modal/stories/Modal.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Blocks/Tabs/stories/Tabs.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/Alert/stories/Alert.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: import('react').FC<import('..').AsyncSelectProps>;
+    component: import('react').FC<import('../AsyncSelect').AsyncSelectProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Avatar/stories/Avatar.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/Badge/stories/Badge.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/BarChartSymbol/stories/BarChartSymbol.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/BorderedBox/stories/BorderedBox.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/Button/stories/Button.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/Card/stories/Card.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/Dropdown/stories/Dropdown.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/ErrorMessage/stories/ErrorMessage.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;

package/ui/Elements/Icon/icons/CircleHalfStroke.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const CircleHalfStroke: FC<SvgProps>;

package/ui/Elements/Icon/icons/CircleHalfStroke.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var CircleHalfStroke = function (props) { return (_jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 512 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M448 256c0-106-86-192-192-192l0 384c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" }) }))); };

package/ui/Elements/Icon/icons/Moon.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const Moon: FC<SvgProps>;

package/ui/Elements/Icon/icons/Moon.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Moon = function (props) { return (_jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 384 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" }) }))); };

package/ui/Elements/Icon/icons/ShieldUser.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const ShieldUser: FC<SvgProps>;

package/ui/Elements/Icon/icons/ShieldUser.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ShieldUser = function (props) { return (_jsx("svg", __assign({ viewBox: "0 0 640 640" }, props, { children: _jsx("path", { d: "M320.3 64C322.3 64 324.3 64.2 326.2 64.6C326.4 64.6 326.7 64.7 326.9 64.8C327.7 65 328.5 65.2 329.3 65.4C329.5 65.5 329.8 65.6 330 65.6C330.7 65.8 331.4 66.1 332.1 66.4L332.4 66.5L521.7 146.7L525.7 148.6C544.3 158.1 558.1 176.6 559.8 199L560 203.9C559.5 303.1 518.7 484.6 346.3 567.1C331.7 574.1 315 574.9 299.9 569.7L293.5 567.1C121.3 484.7 80.5 303.2 80 204C79.9 177.8 96.4 156.1 118.3 146.8L307.6 66.5C307.7 66.5 307.8 66.4 307.9 66.4C308.6 66.1 309.3 65.9 310 65.6C310.2 65.5 310.5 65.4 310.7 65.4C311.5 65.1 312.4 65 313.2 64.8C313.4 64.8 313.6 64.7 313.9 64.6C315.8 64.2 317.8 64 319.8 64L320.4 64zM288 336C243.8 336 208 371.8 208 416C208 424.8 215.2 432 224 432L416 432C424.8 432 432 424.8 432 416C432 371.8 396.2 336 352 336L288 336zM320 184C289.1 184 264 209.1 264 240C264 270.9 289.1 296 320 296C350.9 296 376 270.9 376 240C376 209.1 350.9 184 320 184z" }) }))); };

package/ui/Elements/Icon/icons/Sun.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const Sun: FC<SvgProps>;

package/ui/Elements/Icon/icons/Sun.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Sun = function (props) { return (_jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 512 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) }))); };

package/ui/Elements/Icon/icons/UserCowboy.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const UserCowboy: FC<SvgProps>;

package/ui/Elements/Icon/icons/UserCowboy.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var UserCowboy = function (props) { return (_jsx("svg", __assign({ viewBox: "0 0 640 640" }, props, { children: _jsx("path", { d: "M516.7 100.7C506.1 111.3 478.1 130.3 433.7 143.9C423.9 90.2 403.8 32 369.7 32C360.8 32 352 35.8 344.2 40C336.5 44.2 326.8 48 320.1 48C313.4 48 303.7 44.2 296 40C288.1 35.7 279.4 32 270.5 32C236.4 32 216.3 90.2 206.5 143.9C162.1 130.3 134.1 111.4 123.5 100.7C118 95.2 109.2 94.4 102.8 99C96.4 103.6 94.3 112.1 97.8 119.1C109.4 142.2 139.8 176.1 192.1 199.1L192.1 208C192.1 278.7 249.4 336 320.1 336C390.8 336 448.1 278.7 448.1 208L448.1 199.1C500.4 176.2 530.9 142.3 542.4 119.1C545.9 112.1 543.8 103.6 537.4 99C531 94.4 522.3 95.1 516.7 100.7zM399.7 215.2C396.1 256 361.8 288 320 288C278.2 288 243.9 256 240.3 215.1C263.8 220.7 290.3 224 320 224C349.7 224 376.2 220.7 399.7 215.1zM276.6 384C185.7 384 112 457.7 112 548.6C112 563.7 124.3 576 139.4 576L500.5 576C515.6 576 527.9 563.7 527.9 548.6C527.9 457.7 454.2 384 363.3 384L276.4 384z" }) }))); };

package/ui/Elements/Icon/icons/index.d.ts

@@ -78,3 +78,8 @@ export { MachinePackingForbidden } from './MachinePackingForbidden';
 export { Valuable } from './Valuable';
 export { MobilePhone } from './MobilePhone';
 export { Reload } from './Reload';
+export { Sun } from './Sun';
+export { Moon } from './Moon';
+export { CircleHalfStroke } from './CircleHalfStroke';
+export { ShieldUser } from './ShieldUser';
+export { UserCowboy } from './UserCowboy';