@mailstep/design-system 0.4.21 → 0.5.0-beta.10

package/ui/Elements/Select/types.d.ts

@@ -0,0 +1,54 @@
+import { RefObject } from 'react';
+import { SpaceAround } from '../SpaceAround/types';
+import { Theme } from 'react-select';
+export type Option<Value = string | number> = {
+    value: Value;
+    label: string | number;
+    isDisabled?: boolean;
+    isFixed?: boolean;
+    color?: string;
+    index?: number;
+    inputValue?: string;
+};
+export type ValueType = Option | Option[] | null;
+export type SelectProps = {
+    label?: string;
+    name?: string;
+    value?: number | string | string[] | Option | Option[];
+    placeholder?: string;
+    loadingMessage?: (inputValue: string) => string | JSX.Element;
+    noOptionsMessage?: (inputValue: string) => string | JSX.Element;
+    filterOption?: (option: Option) => boolean;
+    options?: Option[];
+    loadOptions?: (text: string) => Promise<Option[]>;
+    defaultOptions?: Option[];
+    onChange: (value: ValueType) => void;
+    onBlur?: Function;
+    error?: string;
+    index?: [];
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    spaceAround?: SpaceAround;
+    disabled?: boolean;
+    onInputChange?: Function;
+    useSimplifiedOptions?: boolean;
+    showSelectAllButton?: boolean;
+    showResetGridButton?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    menuIsOpen?: boolean;
+    defaultMenuIsOpen?: boolean;
+    isDarkPlaceholderText?: boolean;
+    style?: 'form' | 'leftMenu' | 'heading' | 'gridFilter';
+    optionVariant?: 'default' | 'checkbox' | 'toggle';
+    multiLabelVariant?: 'default' | 'count';
+    containerVariant?: 'default' | 'search';
+    placeholderIcon?: string;
+    innerRef?: RefObject<HTMLElement>;
+    className?: string;
+    maxMenuHeight?: number;
+    resetGrid?: Function;
+    getOptionValue?: Function;
+    systemTheme?: Theme;
+};

package/ui/Elements/Select/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Elements/SingleSelect/SingleSelect.d.ts

@@ -0,0 +1,20 @@
+import { SelectProps, Option } from '../Select/types';
+type FieldValueType = string | number | (string | number)[] | null;
+export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
+    onChange: (event: {
+        target: {
+            [key: string]: FieldValueType;
+        };
+    }) => void;
+    onValueChange?: Function;
+    asyncLoadMinChars?: number;
+    preload?: boolean;
+    isLocked?: boolean;
+    lockedText?: string;
+    onCreateOption?: (label: string) => Promise<Option<string>>;
+    initialOptions?: Option[];
+    loadOptions?: (fulltext: string, byId: boolean) => Promise<Option[]>;
+    form?: any;
+};
+declare const SingleSelect: (props: Props) => JSX.Element;
+export default SingleSelect;

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -0,0 +1,197 @@
+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 __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 };
+    }
+};
+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, useEffect, useMemo, useState } from 'react';
+import { createFilter } from 'react-select';
+import Select from '../Select';
+import omit from 'lodash/fp/omit';
+import { t } from '@lingui/macro';
+import { nanoid } from 'nanoid';
+var CREATE = "_create_".concat(nanoid(), "_");
+var defaultFilterOption = createFilter();
+var creatableFilterOption = function (option, rawInput) {
+    if ((option === null || option === void 0 ? void 0 : option.value) == CREATE)
+        return true;
+    return defaultFilterOption(option, rawInput);
+};
+var getOptionValue = function (selectedOption) {
+    if (selectedOption === null) {
+        return null;
+    }
+    else if (Array.isArray(selectedOption)) {
+        return selectedOption.map(function (option) { return option.value; });
+    }
+    else {
+        return selectedOption.value;
+    }
+};
+var SingleSelect = function (props) {
+    var name = props.name, onChange = props.onChange, onBlur = props.onBlur, onValueChange = props.onValueChange, loadOptions = props.loadOptions, _a = props.asyncLoadMinChars, asyncLoadMinChars = _a === void 0 ? 0 : _a, isLocked = props.isLocked, _b = props.lockedText, lockedText = _b === void 0 ? t({ id: 'components.dropdown.notReact', message: 'Select related values first...' }) : _b, disabled = props.disabled, _c = props.placeholder, placeholder = _c === void 0 ? t({ id: 'components.dropdown.placeholder', message: 'Select...' }) : _c, preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption;
+    var _d = useState(false), isCreating = _d[0], setIsCreating = _d[1];
+    var asAsync = !!loadOptions || !!onCreateOption;
+    var loadingMessage = useCallback(function () { return t({ id: 'components.dropdown.loading', message: 'Loading...' }); }, []);
+    var noOptionsMessage = useCallback(function (inputValue) {
+        return loadOptions && inputValue.length < asyncLoadMinChars
+            ? t({
+                id: 'components.dropdown.writeMoreChars',
+                message: 'Write at least ${asyncLoadMinChars} characters.',
+            })
+            : t({ id: 'components.dropdown.noOptions', message: 'No options' });
+    }, [loadOptions, asyncLoadMinChars]);
+    var handleLoadOptions = useCallback(function (inputValue) {
+        if (onCreateOption) {
+            if (!inputValue.trim())
+                return Promise.resolve(options || []);
+            return Promise.resolve(__spreadArray(__spreadArray([], (options || []), true), [
+                {
+                    value: CREATE,
+                    label: "".concat(inputValue, " (").concat(t({ id: 'components.dropdown.newOption', message: 'new value' }), ")"),
+                    inputValue: inputValue,
+                },
+            ], false));
+        }
+        else if (!loadOptions || inputValue.length < asyncLoadMinChars) {
+            return Promise.resolve([]);
+        }
+        else {
+            return loadOptions(inputValue, false);
+        }
+    }, [onCreateOption, loadOptions, asyncLoadMinChars, options]);
+    var _e = useState(options || []), loadedDefaultOptions = _e[0], setLoadedDefaultOptions = _e[1];
+    useEffect(function () {
+        if (loadOptions && preload && !props.value)
+            loadOptions('', false).then(setLoadedDefaultOptions);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loadOptions]); // this is intentional
+    var _f = useState(null), storedSelectedOption = _f[0], setStoredSelectedOption = _f[1];
+    useEffect(function () {
+        if (initialOptions && initialOptions.length) {
+            var selectedOption = initialOptions.find(function (option) { return option.value == props.value; }) || null;
+            setStoredSelectedOption(selectedOption);
+        }
+        if (loadOptions && !initialOptions && props.value) {
+            loadOptions(String(props.value), true).then(function (selectedOptions) { return setStoredSelectedOption((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) || null); });
+        }
+        // ignored because of props.value, this only finds option for initial value
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialOptions, setStoredSelectedOption]);
+    var handleChange = useCallback(function (option) { return __awaiter(void 0, void 0, void 0, function () {
+        var value, newOption;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    if (!(onCreateOption && (option === null || option === void 0 ? void 0 : option.value) == CREATE)) return [3 /*break*/, 4];
+                    if (!((option === null || option === void 0 ? void 0 : option.inputValue) && ((_b = (_a = option === null || option === void 0 ? void 0 : option.inputValue) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) < 2)) return [3 /*break*/, 1];
+                    props === null || props === void 0 ? void 0 : props.form.setFieldTouched(name, true, true);
+                    props === null || props === void 0 ? void 0 : props.form.setFieldError(name, t({ id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
+                    return [2 /*return*/];
+                case 1:
+                    setIsCreating(true);
+                    return [4 /*yield*/, onCreateOption((_d = (_c = option === null || option === void 0 ? void 0 : option.inputValue) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '')];
+                case 2:
+                    newOption = _e.sent();
+                    value = getOptionValue(newOption);
+                    setIsCreating(false);
+                    _e.label = 3;
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    value = getOptionValue(option);
+                    loadOptions && setStoredSelectedOption(option);
+                    _e.label = 5;
+                case 5:
+                    if (onChange) {
+                        onChange({
+                            target: {
+                                name: name !== null && name !== void 0 ? name : '',
+                                type: 'change',
+                                value: value,
+                            },
+                        });
+                    }
+                    if (onValueChange) {
+                        onValueChange(value);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [onCreateOption, loadOptions, onChange, onValueChange, props === null || props === void 0 ? void 0 : props.form, name]);
+    var handleBlur = useCallback(function (option) {
+        if (onBlur) {
+            onBlur({
+                target: {
+                    name: name,
+                    type: 'blur',
+                    value: getOptionValue(option),
+                },
+            });
+        }
+    }, [name, onBlur]);
+    var omitted = ['onValueChange', 'placeholder', 'options', 'loadOptions', 'asyncLoadMinChars'];
+    var displayLockedText = isLocked && !disabled;
+    var placeholderValue = displayLockedText ? lockedText : placeholder;
+    var defaultOptions = useMemo(function () {
+        if (!asAsync)
+            return undefined; // relates only to asAsync true
+        var staticOptions = onCreateOption ? options : loadedDefaultOptions;
+        if (!storedSelectedOption)
+            return staticOptions || undefined;
+        return staticOptions ? __spreadArray(__spreadArray([], staticOptions, true), [storedSelectedOption], false) : [storedSelectedOption];
+    }, [asAsync, loadedDefaultOptions, onCreateOption, options, storedSelectedOption]);
+    return (_jsx(Select, __assign({}, omit(omitted, props), { filterOption: (filterOption || creatableFilterOption), disabled: disabled || isLocked, onChange: handleChange, onBlur: handleBlur, placeholder: placeholderValue, loadingMessage: loadingMessage, noOptionsMessage: noOptionsMessage, loadOptions: asAsync ? handleLoadOptions : undefined, containerVariant: asAsync ? 'search' : undefined, defaultOptions: defaultOptions, options: !asAsync ? options : undefined, isLoading: isCreating || props.isLoading })));
+};
+export default SingleSelect;

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

@@ -0,0 +1,2 @@
+import SingleSelect from './SingleSelect';
+export default SingleSelect;

package/ui/Elements/SingleSelect/index.js

@@ -0,0 +1,2 @@
+import SingleSelect from './SingleSelect';
+export default SingleSelect;

package/ui/Forms/Input/types.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactNode, RefObject, SetStateAction } from 'react';
+import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
 export type SpaceAround = boolean | SpaceAroundProps;
 export type SpaceAroundProps = {
     marginTop?: number;
@@ -27,7 +27,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     onEnter?: () => void;
     onClear?: () => void;
     alwaysShowClear?: boolean;
-    error?: string;
+    error?: string | ReactElement;
     isInvalid?: boolean;
     spaceAround?: SpaceAround;
     isLoading?: boolean;