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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.79-beta.1",
+  "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 MultiSelect from '../../../../../Elements/MultiSelect';
+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,15 +58,14 @@ 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(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(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 }));
+    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/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,95 +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: 'enumColumnAsync',
         title: 'Enum Column Async',
         flexBasis: 160,
-        filterExtraProps: { isMulti: false },
+        filterExtraProps: { isMulti: true },
         filtering: true,
         sorting: true,
         asyncLoadKey: 'enumColumnAsync'
     },
+    /*
     {
-        name: 'numberColumn',
-        title: 'Number Column',
-        flexBasis: 160,
-        filtering: true,
-        filteringType: 'number',
-        filterExtraProps: {
-            decimals: 2
-        },
-        sorting: true
+      name: 'numberColumn',
+      title: 'Number Column',
+      flexBasis: 160,
+      filtering: true,
+      filteringType: 'number',
+      filterExtraProps: {
+        decimals: 2
+      },
+      sorting: true
     },
     {
-        name: 'numberFloatColumn',
-        title: 'Number Float Column',
-        flexBasis: 160,
-        filtering: true,
-        filteringType: 'number',
-        sorting: true,
-        filterExtraProps: {
-            isFloat: true
-        }
+      name: 'numberFloatColumn',
+      title: 'Number Float Column',
+      flexBasis: 160,
+      filtering: true,
+      filteringType: 'number',
+      sorting: true,
+      filterExtraProps: {
+        isFloat: true
+      }
     },
     {
-        name: 'dateColumn',
-        title: 'Date Column',
-        flexBasis: 160,
-        filtering: true,
-        filteringType: 'date',
-        sorting: true,
-        filterExtraProps: {
-            filterTime: true
-        }
+      name: 'dateColumn',
+      title: 'Date Column',
+      flexBasis: 160,
+      filtering: true,
+      filteringType: 'date',
+      sorting: true,
+      filterExtraProps: {
+        filterTime: true
+      }
     },
     {
-        name: 'boolColumn',
-        title: 'Bool Column',
-        flexBasis: 160,
-        filtering: true,
-        filteringType: 'flag',
-        sorting: true,
-        formatRowValue: function (row) {
-            return row.boolColumn ? 'Yes' : 'No';
-        }
+      name: 'boolColumn',
+      title: 'Bool Column',
+      flexBasis: 160,
+      filtering: true,
+      filteringType: 'flag',
+      sorting: true,
+      formatRowValue: (row: { boolColumn: boolean }): RowValueType => {
+        return row.boolColumn ? 'Yes' : 'No'
+      }
     },
     {
-        name: 'advancedColumn',
-        title: 'Advanced Column',
-        flexBasis: 160,
-        formatRowValue: function (row) {
-            return "".concat((row.numberColumn / 4) * row.textColumn.length);
-        }
+      name: 'advancedColumn',
+      title: 'Advanced Column',
+      flexBasis: 160,
+      formatRowValue: (row: { numberColumn: number; textColumn: string }): RowValueType => {
+        return `${(row.numberColumn / 4) * row.textColumn.length}`
+      }
     },
     {
-        name: 'complexColumn',
-        title: 'Complex Column',
-        flexBasis: 350,
-        cellComponent: ComplexCell
+      name: 'complexColumn',
+      title: 'Complex Column',
+      flexBasis: 350,
+      cellComponent: ComplexCell
     },
     {
-        name: 'stickyColumn',
-        title: 'Sticky Column',
-        flexBasis: 160,
-        alwaysOn: true,
-        sticky: true,
-        stickTo: 'right'
+      name: 'stickyColumn',
+      title: 'Sticky Column',
+      flexBasis: 160,
+      alwaysOn: true,
+      sticky: true,
+      stickTo: 'right'
     }
+      */
 ];

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