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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.78-beta.1",
+  "version": "0.7.79-beta.1",
   "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 { useCallback, useState } from 'react';
 import MultiSelect from '../../../../../Elements/MultiSelect';
 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(MultiSelect, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: value || emptyValue, options: isAsync ? asyncOptions : options, checkAllButton: !isAsync && checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined }));
     }
+    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 }));
 };
 export default SelectFilter;

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

@@ -99,9 +99,7 @@ var NumberRange = function (props) {
                 return;
             }
         }
-        console.log('event.target.value', event.target.value);
         var number = normalizeValue(event.target.value, isFloat, decimals);
-        console.log('number', number);
         var isValid = number || number === 0;
         onChange({ comparator: comparator, value: isValid ? number : '' });
     });

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: false },
+        filtering: true,
+        sorting: true,
+        asyncLoadKey: 'enumColumnAsync'
+    },
     {
         name: 'numberColumn',
         title: 'Number Column',

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';