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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.0-beta.1",
+  "version": "0.8.1",
   "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/BooleanSelect/BooleanSelect.js

@@ -20,6 +20,6 @@ var getFlagOptions = function () { return [
 ]; };
 var SelectFilter = function (props) {
     var options = useMemo(function () { return getFlagOptions(); }, []);
-    return _jsx(GridSelect, __assign({ options: options }, props));
+    return _jsx(GridSelect, __assign({ options: options }, props, { isClearable: false }));
 };
 export default SelectFilter;

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

@@ -1,12 +1,16 @@
 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;
+    isClearable?: boolean;
 };
 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, _b = _a.isClearable, isClearable = _b === void 0 ? true : _b, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton, asyncLoadKey = _a.asyncLoadKey, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions;
+    var _c = useState([]), loadedOptions = _c[0], setLoadedOptions = _c[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: isClearable }));
 };
 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/SideMenu/styles.js

@@ -140,7 +140,7 @@ export var TooltipWrap = styled.div(templateObject_16 || (templateObject_16 = __
     return ($lightMode ? th.color('red20') : th.color('blue2'));
 });
 export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 7;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"], ["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 7;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"])), function (_a) {
+export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 5;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"], ["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 5;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"])), function (_a) {
     var lightMode = _a.lightMode;
     return (lightMode ? 'white' : th('colors.blue3'));
 }, th('colors.lightGray6'), function (_a) {
@@ -158,5 +158,5 @@ export var BodyWrap = styled.div(templateObject_20 || (templateObject_20 = __mak
     var isCompact = _a.isCompact;
     return (isCompact ? '24px 9px' : '24px 22px');
 });
-export var Overlay = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  z-index: 6;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  z-index: 6;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), createRgba('blue2', 0.6));
+export var Overlay = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  z-index: 4;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  z-index: 4;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), createRgba('blue2', 0.6));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;

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/stories/BadgeIcon.stories.d.ts

@@ -1,11 +1,11 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
     component: import('react').FC<{
         badge: "warning";
     } & import('..').IconProps>;
-    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         badge: "warning";
         icon: string;
         style?: "normal" | "light" | "solid" | undefined;

package/ui/Elements/Icon/stories/Icon.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/Image/stories/Image.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/Label/stories/Label.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/Line/stories/Line.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/Link/stories/Link.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/Logo/stories/Logo.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/Pagination/stories/Pagination.stories.d.ts

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

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

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