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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.83-beta.1",
+  "version": "0.8.0",
   "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'];
-    value?: string | string[];
+    options?: Option[];
+    value?: string | string[] | Option[];
     checkAllButton?: boolean;
+    asyncLoadKey?: string;
 };
 declare const SelectFilter: FC<Props>;
 export default SelectFilter;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/ui/Elements/Icon/Icon.js

@@ -265,7 +265,7 @@ var Icon = function (_a) {
     }, [icon, style, namedIcon]);
     var flipProp = (namedIcon && Array.isArray(namedIcon) && namedIcon[1]) || undefined;
     var IconComponent = icons[icon];
-    return (_jsx(FaIconSizing, { size: size, className: className !== null && className !== void 0 ? className : '', "$colorSecondary": colorSecondary, "$fixedWidth": fixedWidth, children: IconComponent ? _jsx(IconComponent, { fill: colorFill, stroke: colorStroke, width: size, height: size }) : (_jsx(FontAwesomeIcon, { color: colorFill, flip: flipProp, icon: iconProp, className: "faIcon ".concat(fixedWidth ? 'fa-fw' : '', " ").concat(spinning ? 'fa-spin' : '') })) }));
+    return (_jsx(FaIconSizing, { size: size, className: className !== null && className !== void 0 ? className : '', "$colorSecondary": colorSecondary, "$fixedWidth": fixedWidth, children: IconComponent ? _jsx(IconComponent, { fill: colorFill, stroke: colorStroke }) : (_jsx(FontAwesomeIcon, { color: colorFill, flip: flipProp, icon: iconProp, className: "faIcon ".concat(fixedWidth ? 'fa-fw' : '', " ").concat(spinning ? 'fa-spin' : '') })) }));
 };
 export default Icon;
 var templateObject_1;

package/ui/Elements/Select/Select.js

@@ -71,10 +71,11 @@ var loadingMessage = function () { return i18n._({ id: 'components.dropdown.load
 var Select = function (_a) {
     var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.showResetGridButton, showResetGridButton = _g === void 0 ? false : _g, _h = _a.shortValues, shortValues = _h === void 0 ? true : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, resetGrid = _a.resetGrid, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "showResetGridButton", "shortValues", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid"]);
     var isAsync = !!loadOptions;
-    if (showSelectAllButton && (loadOptions || !isMulti)) {
+    if (showSelectAllButton && !isMulti) {
         console.error('CheckboxSelect incompatible props');
     }
-    var setAllOptions = useCallback(function () {
+    var setAllOptions = useCallback(function (_a) {
+        var options = _a.options;
         onChange === null || onChange === void 0 ? void 0 : onChange((options || []));
     }, [onChange, options]);
     var unsetAllOptions = useCallback(function () {
@@ -105,6 +106,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/Select/components/ConnectedMenu.js

@@ -10,12 +10,19 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { components as selectComponents } from 'react-select';
-import SelectAll from '../components/SelectAll';
 import ResetAll from '../components/ResetAll';
+import SelectAll from '../components/SelectAll';
 var ConnectedMenu = function (props) {
     var theme = props.theme;
-    var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, options = _a.options, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight;
-    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: options, maxMenuHeight: maxMenuHeight })), props.children, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
+    var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
+    // because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
+    // we need to specify them here by children
+    var filteredOptions = useMemo(function () { var _a, _b; return (_b = (_a = props.children) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
+        var _b = _a.props, value = _b.value, label = _b.label;
+        return ({ label: label, value: value });
+    }); }, [props.children]);
+    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
 };
 export default ConnectedMenu;

package/ui/Elements/Select/components/SelectAll.d.ts

@@ -1,12 +1,14 @@
-import { SelectProps, CustomTheme } from '../types';
+import { SelectProps, CustomTheme, Option } from '../types';
 
 type Props = {
-    onCustomSelectAll: () => void;
+    onCustomSelectAll: ({ options }: {
+        options?: Option[];
+    }) => void;
     onCustomDeselectAll: () => void;
     value: SelectProps['value'];
     options: SelectProps['options'];
     maxMenuHeight: number;
     theme: CustomTheme;
 };
-declare const SelectAll: ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const SelectAll: ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default SelectAll;

package/ui/Elements/Select/components/SelectAll.js

@@ -4,11 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState, useEffect, useRef } from 'react';
-import styled, { th } from '@xstyled/styled-components';
-import { Trans } from '@lingui/react';
 import Checkbox from '../../../Forms/Checkbox/Checkbox';
 import Toggle from '../../Toggle/Toggle';
 import SelectedIndicator from '../components/SelectedIndicator';
+import { Trans } from '@lingui/react';
+import styled, { th } from '@xstyled/styled-components';
 var SelectAllWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin: 0px 2px 1px 0px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  cursor: pointer;\n\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  margin: 0px 2px 1px 0px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  cursor: pointer;\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var additionalPadding = _a.additionalPadding;
     return (additionalPadding ? '8px 27px 8px 10px' : '10px 10px');
@@ -32,13 +32,13 @@ var SelectAll = function (_a) {
     var handleSelectAll = useCallback(function () {
         if (!isSelected) {
             setIsSelected(true);
-            onCustomSelectAll();
+            onCustomSelectAll({ options: options });
         }
         else if (isSelected) {
             setIsSelected(false);
             onCustomDeselectAll();
         }
-    }, [isSelected, onCustomDeselectAll, onCustomSelectAll]);
+    }, [isSelected, onCustomDeselectAll, onCustomSelectAll, options]);
     useEffect(function () {
         var _a;
         // if the height of all options is higher than maxMenuHeight and the slider is displayed => the indentation needs to be increased
@@ -50,7 +50,10 @@ var SelectAll = function (_a) {
             (options === null || options === void 0 ? void 0 : options.length) !== value.length && setIsSelected(false);
         }
     }, [maxMenuHeight, options === null || options === void 0 ? void 0 : options.length, value]);
-    return (_jsxs(SelectAllWrap, { isSelected: isSelected, onClick: handleSelectAll, ref: ref, additionalPadding: additionalPadding, children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' })] }));
+    if (!(options === null || options === void 0 ? void 0 : options.length)) {
+        return null;
+    }
+    return (_jsxs(SelectAllWrap, { isSelected: isSelected, onClick: handleSelectAll, ref: ref, additionalPadding: additionalPadding, children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' }), " (", options === null || options === void 0 ? void 0 : options.length, ")"] }));
 };
 export default SelectAll;
 var templateObject_1;

package/ui/Elements/Select/themes/index.js

@@ -21,6 +21,7 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
         var components = {
             ValueContainer: IconValueContainer
         };
+        components.DropdownIndicator = DropdownIndicator;
         if (multiLabelVariant === 'count') {
             components.MultiValue = CountMultiValue;
         }
@@ -34,7 +35,6 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
         var themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');
         var styles = SelectCustomStyles;
         components.Option = ChevronOption;
-        components.DropdownIndicator = DropdownIndicator;
         // performance reasons
         if (useSimplifiedOptions)
             components.Option = SimplifiedOption;

package/ui/Elements/Select/themes/selectStyles.js

@@ -122,8 +122,11 @@ export var CustomStyles = {
     },
     clearIndicator: function (styles, state) {
         var theme = state.theme;
-        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators ? '0px 0px 0px 2px' : '0px 4px', color: theme.colors.dropdownIndicatorColor });
+        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators ? '0px 4px 0px 0px' : '0px 4px', color: theme.colors.dropdownIndicatorColor });
     },
+    indicatorSeparator: function () { return ({
+        display: 'none',
+    }); }
 };
 export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
     var inputTextColor = th.color('blue2')({ theme: theme });

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