@stenajs-webui/select 17.4.1 → 17.7.0

package/dist/index.js

@@ -1,533 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var SelectComponent = require('react-select');
-var AsyncComponent = require('react-select/async');
-var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
-var core = require('@stenajs-webui/core');
-var elements = require('@stenajs-webui/elements');
-var lodash = require('lodash');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var SelectComponent__default = /*#__PURE__*/_interopDefaultLegacy(SelectComponent);
-var AsyncComponent__default = /*#__PURE__*/_interopDefaultLegacy(AsyncComponent);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(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);
-};
-
-function __rest(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;
-}
-
-function __spreadArray(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));
-}
-
-var defaultSelectTheme = {
-    arrowColor: {
-        focused: {
-            hover: "var(--lhds-color-ui-500)",
-            standard: "var(--lhds-color-ui-500)",
-        },
-        closed: {
-            hover: "var(--lhds-color-ui-500)",
-            standard: "var(--lhds-color-ui-500)",
-        },
-    },
-    clearButtonColor: {
-        hover: "var(--lhds-color-ui-600)",
-        standard: "var(--lhds-color-ui-500)",
-    },
-    input: {
-        backgroundColor: "var(--swui-field-bg-enabled)",
-        border: "1px solid var(--swui-select-border-color)",
-        borderColor: "var(--swui-field-border-color)",
-        borderColorFocused: "var(--swui-field-border-color-hover)",
-        disabledBackgroundColor: "var(--swui-field-bg-disabled)",
-        warningBackgroundColor: "var(--swui-state-alert-light-color)",
-        errorBackgroundColor: "var(--swui-state-error-light-color)",
-        successBackgroundColor: "var(--swui-state-success-light-color)",
-        warningBorderColor: "var(--swui-state-alert-color)",
-        errorBorderColor: "var(--swui-state-error-color)",
-        successBorderColor: "var(--swui-state-success-color)",
-        boxShadowFocused: "var(--swui-field-focus-shadow)",
-        fontFamily: "var(--swui-font-primary)",
-        fontSize: "var(--swui-font-size-inputs)",
-        height: "32px",
-        minHeight: "32px",
-        placeholderColor: "var(--swui-field-border-color-disabled)",
-        textColor: "var(--swui-field-text-color)",
-        borderRadius: "var(--swui-field-border-radius)",
-    },
-    loadingIndicator: {
-        textColor: "var(--swui-field-text-color)",
-    },
-    menu: {
-        activeBackgroundColor: "var(--lhds-color-blue-100)",
-        activeTextColor: "var(--swui-field-text-color)",
-        selectedItemActiveBackgroundColor: "var(--lhds-color-blue-500)",
-        selectedItemActiveTextColor: "var(--lhds-color-blue-50)",
-        disabledTextColor: "var(--swui-field-text-color-disabled)",
-        disabledBackgroundColor: "var(--swui-field-bg-disabled)",
-        textColor: "var(--swui-field-text-color)",
-        backgroundColor: "var(--swui-field-bg-enabled)",
-        hoverTextColor: "var(--swui-field-text-color)",
-        hoverBackgroundColor: "var(--lhds-color-blue-200)",
-        selectedItemTextColor: "var(--lhds-color-blue-500)",
-        selectedItemIconColor: "var(--lhds-color-blue-500)",
-        selectedItemHoverTextColor: "var(--swui-field-text-color)",
-        selectedItemHoverIconColor: "var(--swui-field-text-color)",
-        selectedItemBackgroundColor: "var(--lhds-color-blue-50)",
-        selectedItemHoverBackgroundColor: "var(--lhds-color-blue-50)",
-        zIndex: 1,
-        width: "auto",
-        minWidth: "100%",
-        whiteSpace: "nowrap",
-    },
-    menuPortal: {
-        zIndex: 1,
-    },
-    multiSelect: {
-        backgroundColor: "var(--swui-primary-action-color)",
-        textColor: "var(--lhds-color-blue-50)",
-        removeButtonBackgroundColor: "transparent",
-        removeButtonTextColor: "var(--swui-white)",
-        removeButtonHoverBackgroundColor: "var(--swui-primary-action-color-hover)",
-        removeButtonHoverTextColor: "var(--swui-white)",
-    },
-};
-
-var resolveOptionBackgroundColor = function (colors, isDisabled, isSelected, isFocused) {
-    if (isDisabled) {
-        return colors.disabledBackgroundColor;
-    }
-    else if (isSelected && isFocused) {
-        return colors.selectedItemHoverBackgroundColor;
-    }
-    else if (isSelected) {
-        return colors.selectedItemBackgroundColor;
-    }
-    else if (isFocused) {
-        return colors.hoverBackgroundColor;
-    }
-    else {
-        return undefined;
-    }
-};
-var resolveOptionColor = function (colors, isDisabled, isSelected, isFocused) {
-    if (isDisabled) {
-        return colors.disabledTextColor;
-    }
-    else if (isSelected && isFocused) {
-        return colors.selectedItemHoverTextColor;
-    }
-    else if (isSelected) {
-        return colors.selectedItemTextColor;
-    }
-    else if (isFocused) {
-        return colors.hoverTextColor;
-    }
-    else {
-        return undefined;
-    }
-};
-var resolveInputBackgroundColor = function (colors, isDisabled, isFocused, variant) {
-    if (isDisabled) {
-        return colors.disabledBackgroundColor;
-    }
-    else if (isFocused) {
-        return colors.backgroundColor;
-    }
-    else if (variant === "warning") {
-        return colors.warningBackgroundColor;
-    }
-    else if (variant === "success") {
-        return colors.successBackgroundColor;
-    }
-    else if (variant === "error") {
-        return colors.errorBackgroundColor;
-    }
-    else {
-        return colors.backgroundColor;
-    }
-};
-var resolveInputBorderColor = function (colors, isDisabled, isFocused, isHovered, variant) {
-    if (isDisabled) {
-        return colors.borderColor;
-    }
-    else if (isFocused) {
-        return colors.borderColorFocused;
-    }
-    else if (variant === "warning") {
-        return colors.warningBorderColor;
-    }
-    else if (variant === "success") {
-        return colors.successBorderColor;
-    }
-    else if (variant === "error") {
-        return colors.errorBorderColor;
-    }
-    else if (isHovered) {
-        return colors.borderColorFocused;
-    }
-    else {
-        return colors.borderColor;
-    }
-};
-/**
- * @deprecated
- */
-var createStylesFromTheme = function (_a, variant) {
-    var menu = _a.menu, menuPortal = _a.menuPortal, input = _a.input, multiSelect = _a.multiSelect, clearButtonColor = _a.clearButtonColor, arrowColor = _a.arrowColor, loadingIndicator = _a.loadingIndicator;
-    return ({
-        option: function (base, _a) {
-            var isDisabled = _a.isDisabled, isFocused = _a.isFocused, isSelected = _a.isSelected;
-            return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize, backgroundColor: resolveOptionBackgroundColor(menu, isDisabled, isSelected, isFocused), color: resolveOptionColor(menu, isDisabled, isSelected, isFocused), cursor: isDisabled ? "not-allowed" : "default", whiteSpace: menu.whiteSpace || base.whiteSpace, ":active": {
-                    backgroundColor: isDisabled
-                        ? undefined
-                        : isSelected
-                            ? menu.selectedItemActiveBackgroundColor
-                            : menu.activeBackgroundColor,
-                    color: isDisabled
-                        ? undefined
-                        : isSelected
-                            ? menu.selectedItemActiveTextColor
-                            : menu.activeTextColor,
-                } }));
-        },
-        control: function (base, _a) {
-            var isFocused = _a.isFocused, isDisabled = _a.isDisabled, menuIsOpen = _a.menuIsOpen;
-            return (__assign(__assign({}, base), { 
-                // none of react-selects styles are passed to <View />
-                fontFamily: input.fontFamily, fontSize: input.fontSize, minHeight: input.minHeight, backgroundColor: resolveInputBackgroundColor(input, isDisabled, isFocused, variant), borderRadius: input.borderRadius, border: input.border, "--swui-select-border-color": resolveInputBorderColor(input, isDisabled, isFocused || menuIsOpen, false, variant), boxShadow: isFocused ? input.boxShadowFocused : undefined, "&:hover": {
-                    "--swui-select-border-color": resolveInputBorderColor(input, false, isFocused || menuIsOpen, true, variant),
-                } }));
-        },
-        singleValue: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize, color: input.textColor })); },
-        noOptionsMessage: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize })); },
-        input: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize, color: input.textColor })); },
-        groupHeading: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily })); },
-        multiValueLabel: function (base) { return (__assign(__assign({}, base), { backgroundColor: multiSelect.backgroundColor, color: multiSelect.textColor, fontFamily: input.fontFamily, fontSize: "12px" })); },
-        indicatorSeparator: function (base) { return (__assign(__assign({}, base), { display: "none" })); },
-        clearIndicator: function (base) { return (__assign(__assign({}, base), { padding: "5px", color: clearButtonColor.standard, "&:hover": {
-                color: clearButtonColor.hover,
-            }, cursor: "pointer" })); },
-        placeholder: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize, color: input.placeholderColor })); },
-        container: function (base) { return (__assign({}, base)); },
-        valueContainer: function (base) { return (__assign(__assign({}, base), { padding: "0 8px" })); },
-        dropdownIndicator: function (base, _a) {
-            var isFocused = _a.isFocused;
-            return (__assign(__assign({}, base), { padding: "5px", color: isFocused ? arrowColor.focused.standard : arrowColor.closed.standard, "&:hover": {
-                    color: isFocused ? arrowColor.focused.hover : arrowColor.closed.hover,
-                }, svg: {
-                    width: 14,
-                    height: 14,
-                } }));
-        },
-        menu: function (base) { return (__assign(__assign({}, base), { backgroundColor: menu.backgroundColor, color: menu.textColor, minWidth: menu.minWidth || base.minWidth, zIndex: menu.zIndex, width: menu.width || base.width, border: input.border, borderColor: input.borderColorFocused })); },
-        menuPortal: function (base) { return (__assign(__assign({}, base), { zIndex: menuPortal.zIndex })); },
-        multiValueRemove: function (styles) { return (__assign(__assign({}, styles), { backgroundColor: multiSelect.removeButtonBackgroundColor, ":hover": {
-                color: multiSelect.removeButtonHoverTextColor,
-                backgroundColor: multiSelect.removeButtonHoverBackgroundColor,
-            }, color: multiSelect.removeButtonTextColor, borderRadius: "50%", width: 16, height: 16, padding: 0, margin: 3, marginTop: 4, display: "flex", justifyContent: "center", alignItems: "center", cursor: "pointer" })); },
-        multiValue: function (base) { return (__assign(__assign({}, base), { backgroundColor: multiSelect.backgroundColor, color: multiSelect.textColor, fontFamily: input.fontFamily, fontSize: "12px", alignItems: "center", margin: 0, marginRight: 2 })); },
-        loadingMessage: function (base) { return (__assign(__assign({}, base), { color: loadingIndicator.textColor, fontFamily: input.fontFamily, fontSize: input.fontSize })); },
-    });
-};
-var createStylesFromVariant = function (variant) {
-    return createStylesFromTheme(defaultSelectTheme, variant);
-};
-
-var AsyncMultiSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
-    var selectStyles = React.useMemo(function () {
-        var sourceStyles = createStylesFromVariant(variant);
-        return styles ? SelectComponent.mergeStyles(sourceStyles, styles) : sourceStyles;
-    }, [variant, styles]);
-    return (React__namespace.createElement(AsyncComponent__default["default"], __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
-};
-
-var AsyncSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
-    var selectStyles = React.useMemo(function () {
-        var sourceStyles = createStylesFromVariant(variant);
-        return styles ? SelectComponent.mergeStyles(sourceStyles, styles) : sourceStyles;
-    }, [variant, styles]);
-    return (React__namespace.createElement(AsyncComponent__default["default"], __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
-};
-
-var MultiSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
-    var selectStyles = React.useMemo(function () {
-        var sourceStyles = createStylesFromVariant(variant);
-        return styles ? SelectComponent.mergeStyles(sourceStyles, styles) : sourceStyles;
-    }, [variant, styles]);
-    return (React__namespace.createElement(SelectComponent__default["default"], __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
-};
-
-var Select = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
-    var selectStyles = React.useMemo(function () {
-        var sourceStyles = createStylesFromVariant(variant);
-        return styles ? SelectComponent.mergeStyles(sourceStyles, styles) : sourceStyles;
-    }, [variant, styles]);
-    return (React__namespace.createElement(SelectComponent__default["default"], __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
-};
-
-var removeGroupedOptionsType = function (removedValue, selectedInternalOptions) {
-    return lodash.differenceWith(selectedInternalOptions, __spreadArray(__spreadArray([], removedValue.internalOptions, true), [removedValue], false), lodash.isEqual).map(convertInternalOptionToDropdownOption);
-};
-var removeInternalOptions = function (selectedInternalOption) { return !("internalOptions" in selectedInternalOption); };
-var removeOptionHeaders = function (selectedInternalOptions) {
-    return selectedInternalOptions
-        .filter(removeInternalOptions)
-        .map(convertInternalOptionToDropdownOption);
-};
-var createOnChange = function (onChange) {
-    return function (incomingSelectedInternalOptions, meta) {
-        var selectedInternalOptions = incomingSelectedInternalOptions !== null && incomingSelectedInternalOptions !== void 0 ? incomingSelectedInternalOptions : [];
-        switch (meta.action) {
-            case "select-option":
-                if (meta.option && "internalOptions" in meta.option) {
-                    var selectedOptions = lodash.uniqWith(selectedInternalOptions.reduce(function (previousValue, currentValue) {
-                        if ("internalOptions" in currentValue) {
-                            return __spreadArray(__spreadArray([], previousValue, true), currentValue.internalOptions, true);
-                        }
-                        else {
-                            return __spreadArray(__spreadArray([], previousValue, true), [
-                                convertInternalOptionToDropdownOption(currentValue),
-                            ], false);
-                        }
-                    }, []), lodash.isEqual);
-                    onChange(selectedOptions, meta);
-                }
-                else {
-                    onChange(removeOptionHeaders(selectedInternalOptions), meta);
-                }
-                break;
-            case "deselect-option":
-                if (meta.option && "internalOptions" in meta.option) {
-                    onChange(removeGroupedOptionsType(meta.option, removeOptionHeaders(selectedInternalOptions)), meta);
-                }
-                else {
-                    onChange(removeOptionHeaders(selectedInternalOptions), meta);
-                }
-                break;
-            case "remove-value":
-            case "pop-value":
-                if (meta.removedValue && "internalOptions" in meta.removedValue) {
-                    onChange(removeGroupedOptionsType(meta.removedValue, removeOptionHeaders(selectedInternalOptions)), meta);
-                }
-                else {
-                    onChange(removeOptionHeaders(selectedInternalOptions), meta);
-                }
-                break;
-            case "clear":
-                onChange(selectedInternalOptions.map(convertInternalOptionToDropdownOption), meta);
-                break;
-            case "create-option":
-                onChange(selectedInternalOptions.map(convertInternalOptionToDropdownOption), meta);
-                break;
-        }
-    };
-};
-var convertGroupedDropdownOptionsToInternalOptions = function (options) {
-    return options.reduce(function (previousValue, currentValue) {
-        return __spreadArray(__spreadArray(__spreadArray([], previousValue, true), [
-            convertGroupedDropdownOptionToInternalOption(currentValue)
-        ], false), currentValue.options.map(convertDropdownOptionToInternalOption), true);
-    }, []);
-};
-var convertValueToInternalValue = function (options, values) {
-    if (!values) {
-        return [];
-    }
-    var selectedOptions = [];
-    options.forEach(function (option) {
-        if (allOptionsExists(option.options, values)) {
-            selectedOptions.push(convertGroupedDropdownOptionToInternalOption(option));
-        }
-        selectedOptions.push.apply(selectedOptions, lodash.intersectionWith(option.options, values, lodash.isEqual).map(function (option) {
-            return convertDropdownOptionToInternalOption(option);
-        }));
-    });
-    return selectedOptions;
-};
-var allOptionsExists = function (options, selectedValues) {
-    if (!selectedValues) {
-        return false;
-    }
-    return (lodash.intersectionWith(options, selectedValues, lodash.isEqual).length === options.length);
-};
-var convertDropdownOptionToInternalOption = function (option) { return ({
-    data: option.data,
-    label: option.label,
-    value: option.value,
-}); };
-// TODO: can this be done `any` other way
-var convertGroupedDropdownOptionToInternalOption = function (option) { return ({
-    data: option.label,
-    label: option.label,
-    value: option.label,
-    internalOptions: option.options,
-}); };
-var convertInternalOptionToDropdownOption = function (option) { return ({
-    data: option.data,
-    label: option.label,
-    value: option.value,
-}); };
-
-var resolveIconColor = function (theme, isFocused) {
-    return isFocused
-        ? theme.menu.selectedItemHoverIconColor
-        : theme.menu.selectedItemIconColor;
-};
-function formatInnerOptionLabel(props) {
-    var _a;
-    var _b = props.selectProps, formatGroupLabel = _b.formatGroupLabel, formatOptionLabel = _b.formatOptionLabel;
-    if ("internalOptions" in props.data) {
-        return formatGroupLabel
-            ? formatGroupLabel({
-                label: props.data.label,
-                options: props.data.internalOptions,
-            })
-            : props.label;
-    }
-    return formatOptionLabel
-        ? formatOptionLabel(props.data, {
-            context: "menu",
-            inputValue: (_a = props.selectProps.inputValue) !== null && _a !== void 0 ? _a : "",
-            selectValue: props.getValue(),
-        })
-        : props.label;
-}
-var GroupedMultiSelect = function (_a) {
-    var onChange = _a.onChange, options = _a.options, value = _a.value, _b = _a.variant, variant = _b === void 0 ? "standard" : _b; _a.formatGroupLabel; _a.formatOptionLabel; var selectProps = __rest(_a, ["onChange", "options", "value", "variant", "formatGroupLabel", "formatOptionLabel"]);
-    var Option = function (props) {
-        var label = formatInnerOptionLabel(props);
-        var isGroupOption = "internalOptions" in props.data;
-        return (React__namespace.createElement(SelectComponent.components.Option, __assign({}, props),
-            React__namespace.createElement(core.Row, null,
-                !isGroupOption && React__namespace.createElement(core.Space, null),
-                React__namespace.createElement(InnerOption, { theme: defaultSelectTheme, size: !isGroupOption ? "small" : undefined, label: label, selected: props.isSelected, focused: props.isFocused }))));
-    };
-    var MultiValue = function (props) {
-        return !("internalOptions" in props.data) ? (React__namespace.createElement(SelectComponent.components.MultiValue, __assign({}, props))) : null;
-    };
-    var internalValue = options
-        ? convertValueToInternalValue(options, value)
-        : undefined;
-    var internalOptions = options
-        ? convertGroupedDropdownOptionsToInternalOptions(options)
-        : undefined;
-    return (React__namespace.createElement(MultiSelect, __assign({}, selectProps, { onChange: onChange ? createOnChange(onChange) : undefined, hideSelectedOptions: false, components: __assign(__assign({}, selectProps.components), { MultiValue: MultiValue, Option: Option }), isMulti: true, options: internalOptions, value: internalValue, variant: variant })));
-};
-var InnerOption = function (_a) {
-    var focused = _a.focused, label = _a.label, selected = _a.selected, size = _a.size, theme = _a.theme;
-    return (React__namespace.createElement(core.Row, { alignItems: "center", justifyContent: "space-between", flexGrow: 1 },
-        React__namespace.createElement(core.Text, { tabIndex: -1, size: size, color: "currentColor" }, label),
-        selected && (React__namespace.createElement(elements.Icon, { color: resolveIconColor(theme, focused), icon: faCheck.faCheck, size: 12 }))));
-};
-
-function ChipRow(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.noneSelectedLabel, noneSelectedLabel = _b === void 0 ? "None" : _b, children = _a.children;
-    return (React__namespace.createElement(core.Column, { flex: 1 },
-        React__namespace.createElement(core.Row, { flexWrap: "wrap" }, value === null || value === void 0 ? void 0 :
-            value.map(function (v) { return (React__namespace.createElement(core.Row, { key: v.value },
-                React__namespace.createElement(core.Spacing, { num: 0.5 },
-                    React__namespace.createElement(elements.Chip, { label: v.label, onClickRemove: function () {
-                            var _a;
-                            return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_a = value === null || value === void 0 ? void 0 : value.filter(function (f) { return f.value !== v.value; })) !== null && _a !== void 0 ? _a : []);
-                        } })),
-                React__namespace.createElement(core.Space, null))); }),
-            (value === null || value === void 0 ? void 0 : value.length) ? (React__namespace.createElement(core.Spacing, { num: 0.5 },
-                React__namespace.createElement(elements.FlatButton, { size: "small", label: "Clear", onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([]); } }))) : (React__namespace.createElement(core.Spacing, { num: 0.5 },
-                React__namespace.createElement(elements.Chip, { variant: "secondary", label: noneSelectedLabel })))),
-        React__namespace.createElement(core.Space, { num: 0.5 }),
-        children));
-}
-
-function _ChipMultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Type to search" : _b, loading = _a.loading, inputValue = _a.inputValue, onInputChange = _a.onInputChange, _c = _a.noneSelectedLabel, noneSelectedLabel = _c === void 0 ? "None" : _c, selectProps = __rest(_a, ["value", "onValueChange", "placeholder", "loading", "inputValue", "onInputChange", "noneSelectedLabel"]);
-    return (React__namespace.createElement(ChipRow, { noneSelectedLabel: noneSelectedLabel, onValueChange: onValueChange, value: value },
-        React__namespace.createElement(MultiSelect, __assign({}, selectProps, { isClearable: false, value: value, onChange: onValueChange ? function (value) { return onValueChange(__spreadArray([], value, true)); } : undefined, backspaceRemovesValue: false, hideSelectedOptions: true, controlShouldRenderValue: false, placeholder: placeholder, isLoading: loading, inputValue: inputValue, onInputChange: onInputChange }))));
-}
-var ChipMultiSelect = React__namespace.memo(_ChipMultiSelect);
-
-function _GroupedChipMultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Type to search" : _b, loading = _a.loading, inputValue = _a.inputValue, onInputChange = _a.onInputChange, _c = _a.noneSelectedLabel, noneSelectedLabel = _c === void 0 ? "None" : _c, selectProps = __rest(_a, ["value", "onValueChange", "placeholder", "loading", "inputValue", "onInputChange", "noneSelectedLabel"]);
-    return (React__namespace.createElement(ChipRow, { noneSelectedLabel: noneSelectedLabel, onValueChange: onValueChange, value: value },
-        React__namespace.createElement(GroupedMultiSelect, __assign({}, selectProps, { isClearable: false, value: value, onChange: onValueChange ? function (value) { return onValueChange(__spreadArray([], value, true)); } : undefined, backspaceRemovesValue: false, hideSelectedOptions: true, controlShouldRenderValue: false, placeholder: placeholder, isLoading: loading, inputValue: inputValue, onInputChange: onInputChange }))));
-}
-var GroupedChipMultiSelect = React__namespace.memo(_GroupedChipMultiSelect);
-
-exports.AsyncMultiSelect = AsyncMultiSelect;
-exports.AsyncSelect = AsyncSelect;
-exports.ChipMultiSelect = ChipMultiSelect;
-exports.GroupedChipMultiSelect = GroupedChipMultiSelect;
-exports.GroupedMultiSelect = GroupedMultiSelect;
-exports.MultiSelect = MultiSelect;
-exports.Select = Select;
-exports.createStylesFromTheme = createStylesFromTheme;
-exports.createStylesFromVariant = createStylesFromVariant;
-exports.defaultSelectTheme = defaultSelectTheme;
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var x=require("react"),m=require("react-select"),q=require("react-select/async"),i=require("react/jsx-runtime"),u=require("@stenajs-webui/core"),C=require("@stenajs-webui/elements"),v=require("lodash");function B(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}function G(e){if(e&&e.__esModule)return e;var r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return e&&Object.keys(e).forEach(function(o){if(o!=="default"){var t=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,t.get?t:{enumerable:!0,get:function(){return e[o]}})}}),r.default=e,Object.freeze(r)}var j=G(x),I=B(m),M=B(q);const w={arrowColor:{focused:{hover:"var(--lhds-color-ui-500)",standard:"var(--lhds-color-ui-500)"},closed:{hover:"var(--lhds-color-ui-500)",standard:"var(--lhds-color-ui-500)"}},clearButtonColor:{hover:"var(--lhds-color-ui-600)",standard:"var(--lhds-color-ui-500)"},input:{backgroundColor:"var(--swui-field-bg-enabled)",border:"1px solid var(--swui-select-border-color)",borderColor:"var(--swui-field-border-color)",borderColorFocused:"var(--swui-field-border-color-hover)",disabledBackgroundColor:"var(--swui-field-bg-disabled)",warningBackgroundColor:"var(--swui-state-alert-light-color)",errorBackgroundColor:"var(--swui-state-error-light-color)",successBackgroundColor:"var(--swui-state-success-light-color)",warningBorderColor:"var(--swui-state-alert-color)",errorBorderColor:"var(--swui-state-error-color)",successBorderColor:"var(--swui-state-success-color)",boxShadowFocused:"var(--swui-field-focus-shadow)",fontFamily:"var(--swui-font-primary)",fontSize:"var(--swui-font-size-inputs)",height:"32px",minHeight:"32px",placeholderColor:"var(--swui-field-border-color-disabled)",textColor:"var(--swui-field-text-color)",borderRadius:"var(--swui-field-border-radius)"},loadingIndicator:{textColor:"var(--swui-field-text-color)"},menu:{activeBackgroundColor:"var(--lhds-color-blue-100)",activeTextColor:"var(--swui-field-text-color)",selectedItemActiveBackgroundColor:"var(--lhds-color-blue-500)",selectedItemActiveTextColor:"var(--lhds-color-blue-50)",disabledTextColor:"var(--swui-field-text-color-disabled)",disabledBackgroundColor:"var(--swui-field-bg-disabled)",textColor:"var(--swui-field-text-color)",backgroundColor:"var(--swui-field-bg-enabled)",hoverTextColor:"var(--swui-field-text-color)",hoverBackgroundColor:"var(--lhds-color-blue-200)",selectedItemTextColor:"var(--lhds-color-blue-500)",selectedItemIconColor:"var(--lhds-color-blue-500)",selectedItemHoverTextColor:"var(--swui-field-text-color)",selectedItemHoverIconColor:"var(--swui-field-text-color)",selectedItemBackgroundColor:"var(--lhds-color-blue-50)",selectedItemHoverBackgroundColor:"var(--lhds-color-blue-50)",zIndex:1,width:"auto",minWidth:"100%",whiteSpace:"nowrap"},menuPortal:{zIndex:1},multiSelect:{backgroundColor:"var(--swui-primary-action-color)",textColor:"var(--lhds-color-blue-50)",removeButtonBackgroundColor:"transparent",removeButtonTextColor:"var(--swui-white)",removeButtonHoverBackgroundColor:"var(--swui-primary-action-color-hover)",removeButtonHoverTextColor:"var(--swui-white)"}},A=(e,r,o,t)=>r?e.disabledBackgroundColor:o&&t?e.selectedItemHoverBackgroundColor:o?e.selectedItemBackgroundColor:t?e.hoverBackgroundColor:void 0,L=(e,r,o,t)=>r?e.disabledTextColor:o&&t?e.selectedItemHoverTextColor:o?e.selectedItemTextColor:t?e.hoverTextColor:void 0,W=(e,r,o,t)=>r?e.disabledBackgroundColor:o?e.backgroundColor:t==="warning"?e.warningBackgroundColor:t==="success"?e.successBackgroundColor:t==="error"?e.errorBackgroundColor:e.backgroundColor,k=(e,r,o,t,n)=>r?e.borderColor:o?e.borderColorFocused:n==="warning"?e.warningBorderColor:n==="success"?e.successBorderColor:n==="error"?e.errorBorderColor:t?e.borderColorFocused:e.borderColor,T=({menu:e,menuPortal:r,input:o,multiSelect:t,clearButtonColor:n,arrowColor:a,loadingIndicator:d},f)=>({option:(l,{isDisabled:c,isFocused:b,isSelected:s})=>({...l,fontFamily:o.fontFamily,fontSize:o.fontSize,backgroundColor:A(e,c,s,b),color:L(e,c,s,b),cursor:c?"not-allowed":"default",whiteSpace:e.whiteSpace||l.whiteSpace,":active":{backgroundColor:c?void 0:s?e.selectedItemActiveBackgroundColor:e.activeBackgroundColor,color:c?void 0:s?e.selectedItemActiveTextColor:e.activeTextColor}}),control:(l,{isFocused:c,isDisabled:b,menuIsOpen:s})=>({...l,fontFamily:o.fontFamily,fontSize:o.fontSize,minHeight:o.minHeight,backgroundColor:W(o,b,c,f),borderRadius:o.borderRadius,border:o.border,"--swui-select-border-color":k(o,b,c||s,!1,f),boxShadow:c?o.boxShadowFocused:void 0,"&:hover":{"--swui-select-border-color":k(o,!1,c||s,!0,f)}}),singleValue:l=>({...l,fontFamily:o.fontFamily,fontSize:o.fontSize,color:o.textColor}),noOptionsMessage:l=>({...l,fontFamily:o.fontFamily,fontSize:o.fontSize}),input:l=>({...l,fontFamily:o.fontFamily,fontSize:o.fontSize,color:o.textColor}),groupHeading:l=>({...l,fontFamily:o.fontFamily}),multiValueLabel:l=>({...l,backgroundColor:t.backgroundColor,color:t.textColor,fontFamily:o.fontFamily,fontSize:"12px"}),indicatorSeparator:l=>({...l,display:"none"}),clearIndicator:l=>({...l,padding:"5px",color:n.standard,"&:hover":{color:n.hover},cursor:"pointer"}),placeholder:l=>({...l,fontFamily:o.fontFamily,fontSize:o.fontSize,color:o.placeholderColor}),container:l=>({...l}),valueContainer:l=>({...l,padding:"0 8px"}),dropdownIndicator:(l,{isFocused:c})=>({...l,padding:"5px",color:c?a.focused.standard:a.closed.standard,"&:hover":{color:c?a.focused.hover:a.closed.hover},svg:{width:14,height:14}}),menu:l=>({...l,backgroundColor:e.backgroundColor,color:e.textColor,minWidth:e.minWidth||l.minWidth,zIndex:e.zIndex,width:e.width||l.width,border:o.border,borderColor:o.borderColorFocused}),menuPortal:l=>({...l,zIndex:r.zIndex}),multiValueRemove:l=>({...l,backgroundColor:t.removeButtonBackgroundColor,":hover":{color:t.removeButtonHoverTextColor,backgroundColor:t.removeButtonHoverBackgroundColor},color:t.removeButtonTextColor,borderRadius:"50%",width:16,height:16,padding:0,margin:3,marginTop:4,display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer"}),multiValue:l=>({...l,backgroundColor:t.backgroundColor,color:t.textColor,fontFamily:o.fontFamily,fontSize:"12px",alignItems:"center",margin:0,marginRight:2}),loadingMessage:l=>({...l,color:d.textColor,fontFamily:o.fontFamily,fontSize:o.fontSize})}),g=e=>T(w,e),E=({variant:e="standard",styles:r,isMulti:o,...t})=>{const n=x.useMemo(()=>{const a=g(e);return r?m.mergeStyles(a,r):a},[e,r]);return i.jsx(M.default,{styles:n,...t,isMulti:!0})},P=({variant:e="standard",styles:r,isMulti:o,...t})=>{const n=x.useMemo(()=>{const a=g(e);return r?m.mergeStyles(a,r):a},[e,r]);return i.jsx(M.default,{styles:n,...t,isMulti:!1})},S=({variant:e="standard",styles:r,isMulti:o,...t})=>{const n=x.useMemo(()=>{const a=g(e);return r?m.mergeStyles(a,r):a},[e,r]);return i.jsx(I.default,{styles:n,...t,isMulti:!0})},N=({variant:e="standard",styles:r,isMulti:o,...t})=>{const n=x.useMemo(()=>{const a=g(e);return r?m.mergeStyles(a,r):a},[e,r]);return i.jsx(I.default,{styles:n,...t,isMulti:!1})},O=(e,r)=>v.differenceWith(r,[...e.internalOptions,e],v.isEqual).map(p),V=e=>!("internalOptions"in e),h=e=>e.filter(V).map(p),D=e=>(r,o)=>{const t=r!=null?r:[];switch(o.action){case"select-option":if(o.option&&"internalOptions"in o.option){const n=v.uniqWith(t.reduce((a,d)=>"internalOptions"in d?[...a,...d.internalOptions]:[...a,p(d)],[]),v.isEqual);e(n,o)}else e(h(t),o);break;case"deselect-option":o.option&&"internalOptions"in o.option?e(O(o.option,h(t)),o):e(h(t),o);break;case"remove-value":case"pop-value":o.removedValue&&"internalOptions"in o.removedValue?e(O(o.removedValue,h(t)),o):e(h(t),o);break;case"clear":e(t.map(p),o);break;case"create-option":e(t.map(p),o);break}},J=e=>e.reduce((r,o)=>[...r,F(o),...o.options.map(z)],[]),K=(e,r)=>{if(!r)return[];const o=[];return e.forEach(t=>{Q(t.options,r)&&o.push(F(t)),o.push(...v.intersectionWith(t.options,r,v.isEqual).map(n=>z(n)))}),o},Q=(e,r)=>r?v.intersectionWith(e,r,v.isEqual).length===e.length:!1,z=e=>({data:e.data,label:e.label,value:e.value}),F=e=>({data:e.label,label:e.label,value:e.label,internalOptions:e.options}),p=e=>({data:e.data,label:e.label,value:e.value}),U=(e,r)=>r?e.menu.selectedItemHoverIconColor:e.menu.selectedItemIconColor;function X(e){var t;const{formatGroupLabel:r,formatOptionLabel:o}=e.selectProps;return"internalOptions"in e.data?r?r({label:e.data.label,options:e.data.internalOptions}):e.label:o?o(e.data,{context:"menu",inputValue:(t=e.selectProps.inputValue)!=null?t:"",selectValue:e.getValue()}):e.label}const R=({onChange:e,options:r,value:o,variant:t="standard",formatGroupLabel:n,formatOptionLabel:a,...d})=>{const f=s=>{const _=X(s),y="internalOptions"in s.data;return i.jsx(m.components.Option,{...s,children:i.jsxs(u.Row,{children:[!y&&i.jsx(u.Space,{}),i.jsx(Y,{theme:w,size:y?void 0:"small",label:_,selected:s.isSelected,focused:s.isFocused})]})})},l=s=>"internalOptions"in s.data?null:i.jsx(m.components.MultiValue,{...s}),c=r?K(r,o):void 0,b=r?J(r):void 0;return i.jsx(S,{...d,onChange:e?D(e):void 0,hideSelectedOptions:!1,components:{...d.components,MultiValue:l,Option:f},isMulti:!0,options:b,value:c,variant:t})},Y=({focused:e,label:r,selected:o,size:t,theme:n})=>i.jsxs(u.Row,{alignItems:"center",justifyContent:"space-between",flexGrow:1,children:[i.jsx(u.Text,{tabIndex:-1,size:t,color:"currentColor",children:r}),o&&i.jsx(C.Icon,{color:U(n,e),icon:C.stenaCheck,size:12})]});function H({value:e,onValueChange:r,noneSelectedLabel:o="None",children:t}){return i.jsxs(u.Column,{flex:1,children:[i.jsxs(u.Row,{flexWrap:"wrap",children:[e==null?void 0:e.map(n=>i.jsxs(u.Row,{children:[i.jsx(u.Spacing,{num:.5,children:i.jsx(C.Chip,{label:n.label,onClickRemove:()=>{var a;return r==null?void 0:r((a=e==null?void 0:e.filter(d=>d.value!==n.value))!=null?a:[])}})}),i.jsx(u.Space,{})]},n.value)),e!=null&&e.length?i.jsx(u.Spacing,{num:.5,children:i.jsx(C.FlatButton,{size:"small",label:"Clear",onClick:()=>r==null?void 0:r([])})}):i.jsx(u.Spacing,{num:.5,children:i.jsx(C.Chip,{variant:"secondary",label:o})})]}),i.jsx(u.Space,{num:.5}),t]})}function Z({value:e,onValueChange:r,placeholder:o="Type to search",loading:t,inputValue:n,onInputChange:a,noneSelectedLabel:d="None",...f}){return i.jsx(H,{noneSelectedLabel:d,onValueChange:r,value:e,children:i.jsx(S,{...f,isClearable:!1,value:e,onChange:r?l=>r([...l]):void 0,backspaceRemovesValue:!1,hideSelectedOptions:!0,controlShouldRenderValue:!1,placeholder:o,isLoading:t,inputValue:n,onInputChange:a})})}const $=j.memo(Z);function ee({value:e,onValueChange:r,placeholder:o="Type to search",loading:t,inputValue:n,onInputChange:a,noneSelectedLabel:d="None",...f}){return i.jsx(H,{noneSelectedLabel:d,onValueChange:r,value:e,children:i.jsx(R,{...f,isClearable:!1,value:e,onChange:r?l=>r([...l]):void 0,backspaceRemovesValue:!1,hideSelectedOptions:!0,controlShouldRenderValue:!1,placeholder:o,isLoading:t,inputValue:n,onInputChange:a})})}const oe=j.memo(ee);exports.AsyncMultiSelect=E;exports.AsyncSelect=P;exports.ChipMultiSelect=$;exports.GroupedChipMultiSelect=oe;exports.GroupedMultiSelect=R;exports.MultiSelect=S;exports.Select=N;exports.createStylesFromTheme=T;exports.createStylesFromVariant=g;exports.defaultSelectTheme=w;
 //# sourceMappingURL=index.js.map