@mailstep/design-system 0.7.25-beta.5 → 0.7.25-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.25-beta.5",
+  "version": "0.7.25-beta.7",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -92,7 +92,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-script": "^2.0.5",
-    "react-select": "^5.8.0",
+    "react-select": "^5.10.0",
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
@@ -134,7 +134,7 @@
     "react-redux": ">=4.0.5",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-select": "^5.8.0",
+    "react-select": "^5.10.0",
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",

package/ui/Blocks/Scheduler/components/Groups/styles.js

@@ -12,5 +12,5 @@ export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __make
     var groupsCount = _a.groupsCount;
     return "calc((100% / ".concat(groupsCount, ") - (").concat(timeIntervalWidth, "px / ").concat(groupsCount, "))");
 }, th.color('lightGray6'));
-export var Gap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"])), th.color('bgLightGray1'), timeIntervalWidth, th.color('lightGray6'));
+export var Gap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  width: ", "px;\n  min-width: ", "px;\n  border-right: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  width: ", "px;\n  min-width: ", "px;\n  border-right: 1px solid ", ";\n"])), th.color('bgLightGray1'), timeIntervalWidth, timeIntervalWidth, th.color('lightGray6'));
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/Scheduler/components/TimeSlots/styles.js

@@ -18,7 +18,7 @@ export var EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __
     var isSlotSelected = _a.isSlotSelected, activeTime = _a.activeTime;
     return (!isSlotSelected && activeTime ? th.color('blue10') : '');
 });
-export var TimeInterval = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n"], ["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n"])), minuteHeight * stepInMinutes, timeIntervalWidth, th.color('lightGray6'));
+export var TimeInterval = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n  min-width: ", "px;\n"], ["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n  min-width: ", "px;\n"])), minuteHeight * stepInMinutes, timeIntervalWidth, th.color('lightGray6'), timeIntervalWidth);
 export var TimeRow = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? th.color('lightGray7') : 'white');

package/ui/Elements/AsyncSelect/AsyncSelect.d.ts

@@ -0,0 +1,16 @@
+import { type FC } from 'react';
+import { type Option } from '../Select/types';
+import { type SpaceAround } from '../SpaceAround';
+import { type AsyncProps } from 'react-select/async';
+export type AsyncSelectProps = {
+    name?: string;
+    error?: string;
+    label?: string;
+    spaceAround?: SpaceAround;
+    className?: string;
+    style?: 'form' | 'gridFilter';
+    optionVariant?: 'default' | 'checkbox' | 'toggle';
+    multiLabelVariant?: 'default' | 'count';
+    containerVariant?: 'default' | 'search';
+} & AsyncProps<Option, boolean, any>;
+export declare const AsyncSelect: FC<AsyncSelectProps>;

package/ui/Elements/AsyncSelect/AsyncSelect.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import { FieldLabel } from '../Label';
+import { StyledAsyncSelect, Wrapper } from '../Select/styles';
+import { useStylesAndComponents } from '../Select/themes';
+import SpaceAroundWrap from '../SpaceAround';
+import { i18n } from '@lingui/core';
+export var AsyncSelect = function (_a) {
+    var error = _a.error, label = _a.label, className = _a.className, spaceAround = _a.spaceAround, name = _a.name, placeholder = _a.placeholder, _b = _a.style, style = _b === void 0 ? 'form' : _b, _c = _a.optionVariant, optionVariant = _c === void 0 ? 'checkbox' : _c, _d = _a.multiLabelVariant, multiLabelVariant = _d === void 0 ? 'count' : _d, props = __rest(_a, ["error", "label", "className", "spaceAround", "name", "placeholder", "style", "optionVariant", "multiLabelVariant"]);
+    var _e = useStylesAndComponents(style, optionVariant, multiLabelVariant), customComponents = _e[0], customTheme = _e[1], customStyles = _e[2];
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(StyledAsyncSelect, __assign({ id: name, name: name, theme: customTheme, components: customComponents, styles: customStyles, classNamePrefix: "react-select", placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }) }, props))] }), error && _jsx(ErrorMessage, { children: error })] }));
+};

package/ui/Elements/AsyncSelect/index.d.ts

@@ -0,0 +1,3 @@
+import { AsyncSelect, type AsyncSelectProps } from './AsyncSelect';
+export default AsyncSelect;
+export type { AsyncSelectProps };

package/ui/Elements/AsyncSelect/index.js

@@ -0,0 +1,2 @@
+import { AsyncSelect } from './AsyncSelect';
+export default AsyncSelect;

package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../AsyncSelect").AsyncSelectProps>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.js

@@ -0,0 +1,83 @@
+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;
+    return g = { next: verb(0), "throw": verb(1), "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 { AsyncSelect } from '../AsyncSelect';
+var colors = [
+    'red',
+    'blue',
+    'green',
+    'yellow',
+    'purple',
+    'orange',
+    'pink',
+    'brown',
+    'black',
+    'white',
+    'gray',
+    'cyan',
+    'magenta',
+    'teal',
+    'lime',
+    'indigo',
+    'violet',
+    'gold',
+    'silver',
+    'beige'
+];
+var filterColors = function (inputValue) { return colors.filter(function (value) { return value.includes(inputValue.toLowerCase()); }); };
+var loadOptions = function (inputValue) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, new Promise(function (resolve) {
+                    setTimeout(function () {
+                        resolve(filterColors(inputValue).map(function (color) { return ({ value: color, label: color }); }));
+                    }, 1000);
+                })];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    });
+}); };
+var meta = {
+    title: 'Elements/AsyncSelect',
+    component: AsyncSelect,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = function () {
+    return _jsx(AsyncSelect, { loadOptions: loadOptions, isMulti: true, defaultOptions: true, cacheOptions: true });
+};

package/ui/Elements/Select/themes/index.d.ts

@@ -1,3 +1,3 @@
-import { StylesConfig, SelectComponentsConfig } from 'react-select';
-import { SelectProps } from '../types';
-export declare const useStylesAndComponents: (style: SelectProps['style'], optionVariant: SelectProps['optionVariant'], multiLabelVariant: SelectProps['multiLabelVariant'], containerVariant: SelectProps['containerVariant'], useSimplifiedOptions: SelectProps['useSimplifiedOptions'], showSelectAllButton: SelectProps['showSelectAllButton'], showResetGridButton: SelectProps['showResetGridButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];
+import { type StylesConfig, type SelectComponentsConfig } from 'react-select';
+import { type SelectProps } from '../types';
+export declare const useStylesAndComponents: (style?: SelectProps['style'], optionVariant?: SelectProps['optionVariant'], multiLabelVariant?: SelectProps['multiLabelVariant'], containerVariant?: SelectProps['containerVariant'], useSimplifiedOptions?: SelectProps['useSimplifiedOptions'], showSelectAllButton?: SelectProps['showSelectAllButton'], showResetGridButton?: SelectProps['showResetGridButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];

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

@@ -1,22 +1,25 @@
+import { useMemo } from 'react';
+import ChevronOption from '../components/ChevronOption';
 import ConnectedMenu from '../components/ConnectedMenu';
-import IconValueContainer from '../components/IconValueContainer';
-import SimplifiedOption from '../components/SimplifiedOption';
 import CountMultiValue from '../components/CountMultiValue';
-import ChevronOption from '../components/ChevronOption';
-import DropdownIndicator from '../components/DropdownIndicator';
 import CustomInput from '../components/CustomInput';
-import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from './selectStyles';
+import DropdownIndicator from '../components/DropdownIndicator';
+import IconValueContainer from '../components/IconValueContainer';
+import SimplifiedOption from '../components/SimplifiedOption';
 import { useTheme } from '@xstyled/styled-components';
-import { useMemo } from 'react';
+import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from './selectStyles';
 export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton) {
     if (style === void 0) { style = 'form'; }
     if (optionVariant === void 0) { optionVariant = 'default'; }
     if (multiLabelVariant === void 0) { multiLabelVariant = 'default'; }
     if (containerVariant === void 0) { containerVariant = 'default'; }
+    if (useSimplifiedOptions === void 0) { useSimplifiedOptions = false; }
+    if (showSelectAllButton === void 0) { showSelectAllButton = false; }
+    if (showResetGridButton === void 0) { showResetGridButton = false; }
     var systemTheme = useTheme();
     return useMemo(function () {
         var components = {
-            ValueContainer: IconValueContainer,
+            ValueContainer: IconValueContainer
         };
         if (multiLabelVariant === 'count') {
             components.MultiValue = CountMultiValue;
@@ -44,6 +47,6 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
         style,
         useSimplifiedOptions,
         systemTheme,
-        optionVariant,
+        optionVariant
     ]);
 };

package/ui/index.d.ts

@@ -11,6 +11,7 @@ import SideMenu from './Blocks/SideMenu';
 import Stepper from './Blocks/Stepper';
 import Tabs from './Blocks/Tabs';
 import Alert from './Elements/Alert';
+import AsyncSelect from './Elements/AsyncSelect';
 import Avatar from './Elements/Avatar';
 import Badge from './Elements/Badge';
 import BorderedBox from './Elements/BorderedBox';
@@ -45,7 +46,7 @@ import RadioButton from './Forms/RadioButton';
 import TextArea from './Forms/TextArea';
 import ThemeProvider from './ThemeProvider';
 import utils from './utils';
-export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, 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, 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 * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';
 export * from './Blocks/LightBox';
@@ -54,6 +55,7 @@ export * from './Blocks/Modal';
 export * from './Blocks/Tabs';
 export * from './Elements/Alert';
 export * from './Elements/Avatar';
+export * from './Elements/AsyncSelect';
 export * from './Elements/Badge';
 export * from './Elements/BorderedBox';
 export * from './Elements/Button';