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

package/package.json

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

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

@@ -7,7 +7,7 @@ type Props = {
     onAsyncLoadFilterOptions?: CommonGridProps['onAsyncLoadFilterOptions'];
     isMulti?: boolean;
     options?: Option[];
-    value?: string | string[];
+    value?: string | string[] | Option[];
     checkAllButton?: boolean;
     asyncLoadKey?: string;
 };

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

@@ -35,18 +35,16 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback } 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 { isOptionArray } from './guards';
 var SelectFilter = function (_a) {
     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 === 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 () {
@@ -60,14 +58,13 @@ var SelectFilter = function (_a) {
                 case 1:
                     data = (_a.sent()) || [];
                     _a.label = 2;
-                case 2:
-                    setAsyncOptions(data);
-                    return [2 /*return*/, data];
+                case 2: return [2 /*return*/, data];
             }
         });
     }); }, [options]);
+    console.log('value', value);
     if (isMulti) {
-        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(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: value, options: isAsync && isOptionArray(value) ? value : 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 }));
 };

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/utils/columnDefinition.js

@@ -39,7 +39,7 @@ export var columnDefinitions = [
         name: 'enumColumnAsync',
         title: 'Enum Column Async',
         flexBasis: 160,
-        filterExtraProps: { isMulti: false },
+        filterExtraProps: { isMulti: true },
         filtering: true,
         sorting: true,
         asyncLoadKey: 'enumColumnAsync'