@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -1,514 +1,150 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-    try {
-        var info = gen[key](arg);
-        var value = info.value;
-    } catch (error) {
-        reject(error);
-        return;
-    }
-    if (info.done) {
-        resolve(value);
-    } else {
-        Promise.resolve(value).then(_next, _throw);
-    }
-}
-function _async_to_generator(fn) {
-    return function() {
-        var self = this, args = arguments;
-        return new Promise(function(resolve, reject) {
-            var gen = fn.apply(self, args);
-            function _next(value) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-            }
-            function _throw(err) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-            }
-            _next(undefined);
-        });
-    };
-}
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _non_iterable_spread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-function _ts_generator(thisArg, body) {
-    var f, y, t, _ = {
-        label: 0,
-        sent: function() {
-            if (t[0] & 1) throw t[1];
-            return t[1];
-        },
-        trys: [],
-        ops: []
-    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype), d = Object.defineProperty;
-    return d(g, "next", {
-        value: verb(0)
-    }), d(g, "throw", {
-        value: verb(1)
-    }), d(g, "return", {
-        value: verb(2)
-    }), typeof Symbol === "function" && d(g, Symbol.iterator, {
-        value: 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 } from "react/jsx-runtime";
+import Select_default from "../Select/index.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { nanoid } from "nanoid";
-import { createFilter } from "react-select";
-import Select from "../Select";
+import { jsx } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
-import omit from "lodash/fp/omit";
-var CREATE = "_create_".concat(nanoid(), "_");
-var defaultFilterOption = createFilter();
-var creatableFilterOption = function creatableFilterOption(option, rawInput) {
-    if ((option === null || option === void 0 ? void 0 : option.value) === CREATE) return true;
-    return defaultFilterOption(option, rawInput);
-};
-var getOptionValue = function getOptionValue(selectedOption) {
-    if (selectedOption === null) {
-        return null;
-    } else if (Array.isArray(selectedOption)) {
-        return selectedOption.map(function(option) {
-            return option.value;
-        });
-    } else {
-        return selectedOption.value;
-    }
+import { createFilter } from "react-select";
+import { nanoid } from "/home/linomorfed/Projects/design-system/node_modules/nanoid/index.js";
+import omit from "lodash/fp/omit.js";
+//#region packages/ui/Elements/SingleSelect/SingleSelect.tsx
+const CREATE = `_create_${nanoid()}_`;
+const defaultFilterOption = createFilter();
+const creatableFilterOption = (option, rawInput) => {
+	if (option?.value === CREATE) return true;
+	return defaultFilterOption(option, rawInput);
 };
-var loadingMessage = function loadingMessage() {
-    return i18n._({
-        id: "components.dropdown.loading",
-        message: "Loading..."
-    });
+const getOptionValue = (selectedOption) => {
+	if (selectedOption === null) return null;
+	else if (Array.isArray(selectedOption)) return selectedOption.map((option) => option.value);
+	else return selectedOption.value;
 };
-var SingleSelect = function SingleSelect(props) {
-    var name = props.name, onChange = props.onChange, onBlur = props.onBlur, onValueChange = props.onValueChange, loadOptions = props.loadOptions, _props_asyncLoadMinChars = props.asyncLoadMinChars, asyncLoadMinChars = _props_asyncLoadMinChars === void 0 ? 0 : _props_asyncLoadMinChars, isLocked = props.isLocked, _props_lockedText = props.lockedText, lockedText = _props_lockedText === void 0 ? i18n._({
-        id: "components.dropdown.notReact",
-        message: "Select related values first..."
-    }) : _props_lockedText, disabled = props.disabled, _props_placeholder = props.placeholder, placeholder = _props_placeholder === void 0 ? i18n._({
-        id: "components.dropdown.placeholder",
-        message: "Select..."
-    }) : _props_placeholder, preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption, _props_shouldReloadOptions = props.shouldReloadOptions, shouldReloadOptions = _props_shouldReloadOptions === void 0 ? false : _props_shouldReloadOptions;
-    var _useState = _sliced_to_array(useState(false), 2), isCreating = _useState[0], setIsCreating = _useState[1];
-    var asAsync = !!loadOptions || !!onCreateOption;
-    var noOptionsMessage = useCallback(function(inputValue) {
-        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 ".concat(asyncLoadMinChars, " characters.")
-        });
-        return i18n._({
-            id: "dataGrid.filterCell",
-            message: "Type to filter"
-        });
-    }, [
-        loadOptions,
-        asyncLoadMinChars
-    ]);
-    var handleLoadOptions = useCallback(function(inputValue) {
-        return _async_to_generator(function() {
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!onCreateOption) return [
-                            3,
-                            4
-                        ];
-                        if (!!inputValue.trim()) return [
-                            3,
-                            2
-                        ];
-                        return [
-                            4,
-                            Promise.resolve(options || [])
-                        ];
-                    case 1:
-                        return [
-                            2,
-                            _state.sent()
-                        ];
-                    case 2:
-                        return [
-                            4,
-                            Promise.resolve(_to_consumable_array(options || []).concat([
-                                {
-                                    value: CREATE,
-                                    label: "".concat(inputValue, " (").concat(i18n._({
-                                        id: "components.dropdown.newOption",
-                                        message: "new value"
-                                    }), ")"),
-                                    inputValue: inputValue
-                                }
-                            ]))
-                        ];
-                    case 3:
-                        return [
-                            2,
-                            _state.sent()
-                        ];
-                    case 4:
-                        if (!(!loadOptions || inputValue.length < asyncLoadMinChars)) return [
-                            3,
-                            6
-                        ];
-                        return [
-                            4,
-                            Promise.resolve([])
-                        ];
-                    case 5:
-                        return [
-                            2,
-                            _state.sent()
-                        ];
-                    case 6:
-                        return [
-                            4,
-                            loadOptions(inputValue, false)
-                        ];
-                    case 7:
-                        return [
-                            2,
-                            _state.sent()
-                        ];
-                    case 8:
-                        return [
-                            2
-                        ];
-                }
-            });
-        })();
-    }, [
-        onCreateOption,
-        loadOptions,
-        asyncLoadMinChars,
-        options
-    ]);
-    var _useState1 = _sliced_to_array(useState(options || []), 2), loadedDefaultOptions = _useState1[0], setLoadedDefaultOptions = _useState1[1];
-    useEffect(function() {
-        if (loadOptions && preload && !props.value) loadOptions("", false).then(setLoadedDefaultOptions).catch(console.error);
-    }, [
-        loadOptions
-    ]);
-    var _useState2 = _sliced_to_array(useState(null), 2), storedSelectedOption = _useState2[0], setStoredSelectedOption = _useState2[1];
-    useEffect(function() {
-        if (initialOptions === null || initialOptions === void 0 ? void 0 : 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) {
-                setStoredSelectedOption((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) || null);
-            }).catch(console.error);
-        }
-    }, [
-        initialOptions,
-        setStoredSelectedOption
-    ]);
-    useEffect(function() {
-        if (shouldReloadOptions) {
-            setLoadedDefaultOptions(options || []);
-        }
-    }, [
-        options
-    ]);
-    var handleChange = useCallback(function(option) {
-        return _async_to_generator(function() {
-            var value, _option_inputValue_trim, _option_inputValue, _ref, _option_inputValue1, newOption;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!(onCreateOption && (option === null || option === void 0 ? void 0 : option.value) === CREATE)) return [
-                            3,
-                            4
-                        ];
-                        if (!((option === null || option === void 0 ? void 0 : option.inputValue) && (option === null || option === void 0 ? void 0 : (_option_inputValue = option.inputValue) === null || _option_inputValue === void 0 ? void 0 : (_option_inputValue_trim = _option_inputValue.trim()) === null || _option_inputValue_trim === void 0 ? void 0 : _option_inputValue_trim.length) < 2)) return [
-                            3,
-                            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, i18n._({
-                            id: "form.general.min2Chars",
-                            message: "Minimal length is 2 characters."
-                        }));
-                        return [
-                            2
-                        ];
-                    case 1:
-                        setIsCreating(true);
-                        return [
-                            4,
-                            onCreateOption((_ref = option === null || option === void 0 ? void 0 : (_option_inputValue1 = option.inputValue) === null || _option_inputValue1 === void 0 ? void 0 : _option_inputValue1.trim()) !== null && _ref !== void 0 ? _ref : "")
-                        ];
-                    case 2:
-                        newOption = _state.sent();
-                        value = getOptionValue(newOption);
-                        setIsCreating(false);
-                        _state.label = 3;
-                    case 3:
-                        return [
-                            3,
-                            5
-                        ];
-                    case 4:
-                        value = getOptionValue(option);
-                        loadOptions && setStoredSelectedOption(option);
-                        _state.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
-                        ];
-                }
-            });
-        })();
-    }, [
-        onCreateOption,
-        loadOptions,
-        onChange,
-        onValueChange,
-        props === null || props === void 0 ? void 0 : props.form,
-        name
-    ]);
-    var omitted = [
-        "onValueChange",
-        "placeholder",
-        "options",
-        "loadOptions",
-        "asyncLoadMinChars"
-    ];
-    var displayLockedText = isLocked && !disabled;
-    var placeholderValue = displayLockedText ? lockedText : placeholder;
-    var defaultOptions = useMemo(function() {
-        if (!asAsync) return void 0;
-        var staticOptions = onCreateOption ? options : loadedDefaultOptions;
-        if (!storedSelectedOption) return staticOptions || void 0;
-        return staticOptions ? _to_consumable_array(staticOptions).concat([
-            storedSelectedOption
-        ]) : [
-            storedSelectedOption
-        ];
-    }, [
-        asAsync,
-        loadedDefaultOptions,
-        onCreateOption,
-        options,
-        storedSelectedOption
-    ]);
-    return /* @__PURE__ */ jsx(Select, _object_spread_props(_object_spread({}, omit(omitted, props)), {
-        filterOption: filterOption || creatableFilterOption,
-        disabled: disabled || isLocked,
-        onChange: handleChange,
-        onBlur: onBlur,
-        placeholder: placeholderValue,
-        loadingMessage: loadingMessage,
-        noOptionsMessage: noOptionsMessage,
-        loadOptions: asAsync ? handleLoadOptions : void 0,
-        containerVariant: asAsync ? "search" : void 0,
-        defaultOptions: defaultOptions,
-        options: !asAsync ? options : void 0,
-        isLoading: isCreating || props.isLoading
-    }));
+const loadingMessage = () => i18n._({
+	id: "components.dropdown.loading",
+	message: "Loading..."
+});
+const SingleSelect = (props) => {
+	const { name, onChange, onBlur, onValueChange, loadOptions, asyncLoadMinChars = 0, isLocked, lockedText = i18n._({
+		id: "components.dropdown.notReact",
+		message: "Select related values first..."
+	}), disabled, placeholder = i18n._({
+		id: "components.dropdown.placeholder",
+		message: "Select..."
+	}), preload, initialOptions, onCreateOption, options, filterOption, shouldReloadOptions = false } = props;
+	const [isCreating, setIsCreating] = useState(false);
+	const asAsync = !!loadOptions || !!onCreateOption;
+	const noOptionsMessage = useCallback((inputValue) => {
+		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]);
+	const handleLoadOptions = useCallback(async (inputValue) => {
+		if (onCreateOption) {
+			if (!inputValue.trim()) return await Promise.resolve(options || []);
+			return await Promise.resolve([...options || [], {
+				value: CREATE,
+				label: `${inputValue} (${i18n._({
+					id: "components.dropdown.newOption",
+					message: "new value"
+				})})`,
+				inputValue
+			}]);
+		} else if (!loadOptions || inputValue.length < asyncLoadMinChars) return await Promise.resolve([]);
+		else return await loadOptions(inputValue, false);
+	}, [
+		onCreateOption,
+		loadOptions,
+		asyncLoadMinChars,
+		options
+	]);
+	const [loadedDefaultOptions, setLoadedDefaultOptions] = useState(options || []);
+	useEffect(() => {
+		if (loadOptions && preload && !props.value) loadOptions("", false).then(setLoadedDefaultOptions).catch(console.error);
+	}, [loadOptions]);
+	const [storedSelectedOption, setStoredSelectedOption] = useState(null);
+	useEffect(() => {
+		if (initialOptions?.length) setStoredSelectedOption(initialOptions.find((option) => option.value === props.value) || null);
+		if (loadOptions && !initialOptions && props.value) loadOptions(String(props.value), true).then((selectedOptions) => {
+			setStoredSelectedOption(selectedOptions?.[0] || null);
+		}).catch(console.error);
+	}, [initialOptions, setStoredSelectedOption]);
+	useEffect(() => {
+		if (shouldReloadOptions) setLoadedDefaultOptions(options || []);
+	}, [options]);
+	const handleChange = useCallback(async (option) => {
+		let value;
+		if (onCreateOption && option?.value === CREATE) if (option?.inputValue && option?.inputValue?.trim()?.length < 2) {
+			props?.form.setFieldTouched(name, true, true);
+			props?.form.setFieldError(name, i18n._({
+				id: "form.general.min2Chars",
+				message: "Minimal length is 2 characters."
+			}));
+			return;
+		} else {
+			setIsCreating(true);
+			value = getOptionValue(await onCreateOption(option?.inputValue?.trim() ?? ""));
+			setIsCreating(false);
+		}
+		else {
+			value = getOptionValue(option);
+			loadOptions && setStoredSelectedOption(option);
+		}
+		if (onChange) onChange({ target: {
+			name: name ?? "",
+			type: "change",
+			value
+		} });
+		if (onValueChange) onValueChange(value);
+	}, [
+		onCreateOption,
+		loadOptions,
+		onChange,
+		onValueChange,
+		props?.form,
+		name
+	]);
+	const omitted = [
+		"onValueChange",
+		"placeholder",
+		"options",
+		"loadOptions",
+		"asyncLoadMinChars"
+	];
+	const placeholderValue = isLocked && !disabled ? lockedText : placeholder;
+	const defaultOptions = useMemo(() => {
+		if (!asAsync) return void 0;
+		const staticOptions = onCreateOption ? options : loadedDefaultOptions;
+		if (!storedSelectedOption) return staticOptions || void 0;
+		return staticOptions ? [...staticOptions, storedSelectedOption] : [storedSelectedOption];
+	}, [
+		asAsync,
+		loadedDefaultOptions,
+		onCreateOption,
+		options,
+		storedSelectedOption
+	]);
+	return /* @__PURE__ */ jsx(Select_default, {
+		...omit(omitted, props),
+		filterOption: filterOption || creatableFilterOption,
+		disabled: disabled || isLocked,
+		onChange: handleChange,
+		onBlur,
+		placeholder: placeholderValue,
+		loadingMessage,
+		noOptionsMessage,
+		loadOptions: asAsync ? handleLoadOptions : void 0,
+		containerVariant: asAsync ? "search" : void 0,
+		defaultOptions,
+		options: !asAsync ? options : void 0,
+		isLoading: isCreating || props.isLoading
+	});
 };
-var SingleSelect_default = SingleSelect;
-export { SingleSelect_default as default };
+//#endregion
+export { SingleSelect as default };

package/ui/Elements/SingleSelect/index.js

@@ -1,3 +1,5 @@
-import SingleSelect from "./SingleSelect";
+import SingleSelect from "./SingleSelect.js";
+//#region packages/ui/Elements/SingleSelect/index.ts
 var SingleSelect_default = SingleSelect;
+//#endregion
 export { SingleSelect_default as default };