@mailstep/design-system 0.7.78 → 0.7.79-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.78",
+  "version": "0.7.79-beta.2",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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'];
+    options?: Option[];
     value?: string | string[];
     checkAllButton?: boolean;
+    asyncLoadKey?: string;
 };
 declare const SelectFilter: FC<Props>;
 export default SelectFilter;

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

@@ -1,19 +1,74 @@
+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 };
+    }
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import MultiSelect from '../../../../../Elements/MultiSelect';
+import { useCallback, useState } from 'react';
+import Select from '../../../../../Elements/Select';
 import SingleSelect from '../../../../../Elements/SingleSelect';
+import { i18n } from '@lingui/core';
 import isArray from 'lodash/isArray';
 var emptyValue = [];
 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([]), asyncOptions = _b[0], setAsyncOptions = _b[1];
     var handleOnMultiChange = useCallback(function (options) {
+        console.log('options', 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]);
+    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:
+                    setAsyncOptions(data);
+                    return [2 /*return*/, data];
+            }
+        });
+    }); }, [options]);
     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: value || emptyValue, options: isAsync ? asyncOptions : options, showSelectAllButton: !isAsync && checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, noOptionsMessage: function () { return i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }); }, 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/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

@@ -1,4 +1,3 @@
-import { ComplexCell } from '../components/ComplexCell';
 import { EnumCellExample } from '../components/EnumCellExample';
 import { enumValues } from './utils';
 export var oversizedArrayColumns = 25;
@@ -18,86 +17,99 @@ export var enumColumn = {
     cellComponent: EnumCellExample
 };
 export var columnDefinitions = [
+    /*
     {
-        name: 'hiddenColumn',
-        title: 'Hidden column',
-        flexBasis: 160,
-        filtering: true,
-        sorting: true,
-        defaultHidden: true
+      name: 'hiddenColumn',
+      title: 'Hidden column',
+      flexBasis: 160,
+      filtering: true,
+      sorting: true,
+      defaultHidden: true
     },
     {
-        name: 'textColumn',
-        title: 'Text column',
-        flexBasis: 160,
-        filtering: true,
-        sorting: true
+      name: 'textColumn',
+      title: 'Text column',
+      flexBasis: 160,
+      filtering: true,
+      sorting: true
     },
     enumColumn,
+    */
     {
-        name: 'numberColumn',
-        title: 'Number Column',
+        name: 'enumColumnAsync',
+        title: 'Enum Column Async',
         flexBasis: 160,
+        filterExtraProps: { isMulti: false },
         filtering: true,
-        filteringType: 'number',
-        filterExtraProps: {
-            decimals: 2
-        },
-        sorting: true
+        sorting: true,
+        asyncLoadKey: 'enumColumnAsync'
     },
+    /*
     {
-        name: 'numberFloatColumn',
-        title: 'Number Float Column',
-        flexBasis: 160,
-        filtering: true,
-        filteringType: 'number',
-        sorting: true,
-        filterExtraProps: {
-            isFloat: true
-        }
+      name: 'numberColumn',
+      title: 'Number Column',
+      flexBasis: 160,
+      filtering: true,
+      filteringType: 'number',
+      filterExtraProps: {
+        decimals: 2
+      },
+      sorting: true
     },
     {
-        name: 'dateColumn',
-        title: 'Date Column',
-        flexBasis: 160,
-        filtering: true,
-        filteringType: 'date',
-        sorting: true,
-        filterExtraProps: {
-            filterTime: true
-        }
+      name: 'numberFloatColumn',
+      title: 'Number Float Column',
+      flexBasis: 160,
+      filtering: true,
+      filteringType: 'number',
+      sorting: true,
+      filterExtraProps: {
+        isFloat: true
+      }
     },
     {
-        name: 'boolColumn',
-        title: 'Bool Column',
-        flexBasis: 160,
-        filtering: true,
-        filteringType: 'flag',
-        sorting: true,
-        formatRowValue: function (row) {
-            return row.boolColumn ? 'Yes' : 'No';
-        }
+      name: 'dateColumn',
+      title: 'Date Column',
+      flexBasis: 160,
+      filtering: true,
+      filteringType: 'date',
+      sorting: true,
+      filterExtraProps: {
+        filterTime: true
+      }
     },
     {
-        name: 'advancedColumn',
-        title: 'Advanced Column',
-        flexBasis: 160,
-        formatRowValue: function (row) {
-            return "".concat((row.numberColumn / 4) * row.textColumn.length);
-        }
+      name: 'boolColumn',
+      title: 'Bool Column',
+      flexBasis: 160,
+      filtering: true,
+      filteringType: 'flag',
+      sorting: true,
+      formatRowValue: (row: { boolColumn: boolean }): RowValueType => {
+        return row.boolColumn ? 'Yes' : 'No'
+      }
     },
     {
-        name: 'complexColumn',
-        title: 'Complex Column',
-        flexBasis: 350,
-        cellComponent: ComplexCell
+      name: 'advancedColumn',
+      title: 'Advanced Column',
+      flexBasis: 160,
+      formatRowValue: (row: { numberColumn: number; textColumn: string }): RowValueType => {
+        return `${(row.numberColumn / 4) * row.textColumn.length}`
+      }
     },
     {
-        name: 'stickyColumn',
-        title: 'Sticky Column',
-        flexBasis: 160,
-        alwaysOn: true,
-        sticky: true,
-        stickTo: 'right'
+      name: 'complexColumn',
+      title: 'Complex Column',
+      flexBasis: 350,
+      cellComponent: ComplexCell
+    },
+    {
+      name: 'stickyColumn',
+      title: 'Sticky Column',
+      flexBasis: 160,
+      alwaysOn: true,
+      sticky: true,
+      stickTo: 'right'
     }
+      */
 ];

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

@@ -18,3 +18,7 @@ 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<{
+    label: string;
+    value: string;
+}[]>;

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

@@ -72,3 +72,11 @@ export var extraControlButtons = [
     { label: 'Reload', position: ExtraControlButtonPosition.TopLeft },
     { label: 'Export all', position: ExtraControlButtonPosition.TopRight }
 ];
+export var onAsyncLoadFilterOptions = function (key, value) {
+    return Promise.resolve([
+        { label: 'test1', value: 'test1' },
+        { label: 'test2', value: 'test2' },
+        { label: 'test3', value: 'test3' },
+        { label: 'test4', value: 'test4' },
+    ]);
+};

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/Elements/Select/Select.js

@@ -105,6 +105,6 @@ var Select = function (_a) {
             }
         }); }); } : undefined;
     }, [loadOptions]);
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, shortValues: shortValues }))] }), error && _jsx(ErrorMessage, { children: error })] }));
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined, noOptionsMessage: noOptionsMessage }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues }))] }), error && _jsx(ErrorMessage, { children: error })] }));
 };
 export default Select;

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -85,12 +85,11 @@ var SingleSelect = function (props) {
     var _e = useState(false), isCreating = _e[0], setIsCreating = _e[1];
     var asAsync = !!loadOptions || !!onCreateOption;
     var noOptionsMessage = useCallback(function (inputValue) {
-        return loadOptions && inputValue.length < asyncLoadMinChars
-            ? i18n._({
-                id: 'components.dropdown.writeMoreChars',
-                message: 'Write at least ${asyncLoadMinChars} characters.'
-            })
-            : i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
+        if (!loadOptions)
+            return i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
+        if (inputValue.length < asyncLoadMinChars)
+            return i18n._({ id: 'components.dropdown.writeMoreChars', message: 'Write at least ${asyncLoadMinChars} characters.' });
+        return i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
     }, [loadOptions, asyncLoadMinChars]);
     var handleLoadOptions = useCallback(function (inputValue) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {

package/ui/index.d.ts

@@ -27,7 +27,6 @@ import { default as Label } from './Elements/Label';
 import { default as Line } from './Elements/Line';
 import { default as Link } from './Elements/Link';
 import { default as Logo } from './Elements/Logo';
-import { default as MultiSelect } from './Elements/MultiSelect';
 import { default as Pagination } from './Elements/Pagination';
 import { default as Portal } from './Elements/Portal';
 import { default as ProgressBar } from './Elements/ProgressBar';
@@ -47,7 +46,7 @@ import { default as TextArea } from './Forms/TextArea';
 import { default as ThemeProvider } from './ThemeProvider';
 import { default as utils } from './utils';
 
-export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, AsyncSelect, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, LoginPage, LanguageSwitch, SideMenu, Stepper, Scheduler };
+export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, AsyncSelect, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, LoginPage, LanguageSwitch, SideMenu, Stepper, Scheduler };
 export * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';
 export * from './Blocks/LightBox';
@@ -87,7 +86,6 @@ export * from './Elements/DatePicker';
 export * from './Blocks/CommonGrid';
 export * from './Blocks/Popover';
 export * from './Elements/SingleSelect';
-export * from './Elements/MultiSelect';
 export * from './Elements/Select';
 export * from './Elements/DropdownSelect';
 export * from './Forms/TextArea';