@mailstep/design-system 0.7.79-beta.4 → 0.7.79-beta.6

package/package.json

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

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

@@ -34,15 +34,26 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         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 { useCallback, useState } from 'react';
 import Select from '../../../../../Elements/Select';
 import SingleSelect from '../../../../../Elements/SingleSelect';
 import { i18n } from '@lingui/core';
 import isArray from 'lodash/isArray';
 import { isOptionArray } from './guards';
+import uniqBy from 'lodash/uniqBy';
 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([]), 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);
     }, [onChange]);
@@ -58,12 +69,15 @@ var SelectFilter = function (_a) {
                 case 1:
                     data = (_a.sent()) || [];
                     _a.label = 2;
-                case 2: return [2 /*return*/, data];
+                case 2:
+                    setLoadedOptions(data);
+                    return [2 /*return*/, data];
             }
         });
     }); }, [options]);
     if (isMulti) {
-        return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: isOptionArray(value) ? value.map(function (option) { return String(option.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 }));
+        var defaultOptions = isAsync && isOptionArray(value) ? uniqBy(__spreadArray(__spreadArray([], loadedOptions, true), value, true), 'value') : undefined;
+        return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value, options: isAsync && isOptionArray(value) ? 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 }));
 };

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

@@ -17,29 +17,27 @@ 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: 'enumColumnAsync',
         title: 'Enum Column Async',
         flexBasis: 160,
-        filterExtraProps: { isMulti: true },
+        filterExtraProps: { isMulti: true, checkAllButton: true },
         filtering: true,
         sorting: true,
         asyncLoadKey: 'enumColumnAsync'

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

@@ -18,7 +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<{
-    label: string;
-    value: string;
-}[]>;
+export declare const onAsyncLoadFilterOptions: (key: string, value: string) => Promise<unknown>;

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

@@ -73,10 +73,21 @@ export var extraControlButtons = [
     { 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' },
-    ]);
+    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/Elements/Select/Select.js

@@ -71,7 +71,7 @@ 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 () {

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

@@ -15,7 +15,7 @@ import SelectAll from '../components/SelectAll';
 import ResetAll from '../components/ResetAll';
 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, options = _a.options, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
+    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: options, maxMenuHeight: maxMenuHeight })), props.children, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
 };
 export default ConnectedMenu;

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 });