@vchasno/ui-kit 0.3.19 → 0.3.20

package/dist/Select/index.js

@@ -7748,20 +7748,20 @@ var noOptionsMessageDefault = function () { return React__default.createElement(
 var loadingMessageDefault = function () { return React__default.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
 var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
 
-var css_248z = ".vchasno-ui-select {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n    min-width: 200px;\n    min-height: 50px;\n    border-color: var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n    outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n    opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n    transition:\n        opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n    background-color: #f3f6f8;\n    opacity: 0.8;\n    pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n    z-index: 100;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    margin-top: 4px;\n    margin-bottom: 6px;\n    box-shadow: none;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n    border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n    border: 1px solid #ff5937;\n    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n    border-color: #ff5937;\n}\n\n.vchasno-ui-select\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control:hover\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n    border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    box-shadow: none;\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n    padding: 3px;\n    border-radius: 3px;\n    color: var(--vchasno-ui-input-font-color);\n    outline: 3px solid transparent;\n    transition:\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n    background-color: rgb(0 0 0 / 10%);\n    cursor: pointer;\n    outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n    transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n    cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n    padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n    padding: 10px 14px;\n}\n";
+var css_248z = ".vchasno-ui-select {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n    min-width: 200px;\n    min-height: 50px;\n    border-color: var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n    outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n    opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n    transition:\n        opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n    background-color: #f3f6f8;\n    opacity: 0.8;\n    pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n    z-index: 100;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    margin-top: 4px;\n    margin-bottom: 6px;\n    box-shadow: none;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n    border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n    border: 1px solid #ff5937;\n    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n    border-color: #ff5937;\n}\n\n.vchasno-ui-select\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control:hover\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n    border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    box-shadow: none;\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n    padding: 3px;\n    border-radius: 3px;\n    color: var(--vchasno-ui-input-font-color);\n    outline: 3px solid transparent;\n    transition:\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n    background-color: rgb(0 0 0 / 10%);\n    cursor: pointer;\n    outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n    transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n    cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n    padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n    padding: 5px 14px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__label {\n    padding: 6px;\n    font-size: 14px;\n}\n\n.vchasno-ui-select .vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n    padding: 6px;\n    font-size: 14px;\n}\n";
 styleInject(css_248z);
 
 var Select = function (_a) {
     var className = _a.className, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, isDisabled = _a.isDisabled, _b = _a.menuPlacement, menuPlacement = _b === void 0 ? 'auto' : _b, _c = _a.noOptionsMessage, noOptionsMessage = _c === void 0 ? defaultProps.noOptionsMessageDefault : _c, _d = _a.loadingMessage, loadingMessage = _d === void 0 ? defaultProps.loadingMessageDefault : _d, _e = _a.placeholder, placeholder = _e === void 0 ? ' ' : _e, //need "space" for correct label working
     _f = _a.components, //need "space" for correct label working
-    components = _f === void 0 ? {} : _f, _g = _a.error, error = _g === void 0 ? '' : _g, dataQa = _a.dataQa, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "error", "dataQa"]);
+    components = _f === void 0 ? {} : _f, _g = _a.error, error = _g === void 0 ? '' : _g, dataQa = _a.dataQa, _h = _a.closeMenuOnSelect, closeMenuOnSelect = _h === void 0 ? true : _h, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "error", "dataQa", "closeMenuOnSelect"]);
     return (React__default.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-select', {
             '--required': required,
             '--disabled': isDisabled,
             '--wide': wide,
             '--error': error,
         }, className) },
-        React__default.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign(__assign({}, CustomComponents), { Control: function (props) { return React__default.createElement(CustomComponents.Control, __assign({}, props, { label: label })); } }), components), classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest, { styles: {
+        React__default.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign(__assign({}, CustomComponents), { Control: function (props) { return React__default.createElement(CustomComponents.Control, __assign({}, props, { label: label })); } }), components), closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest, { styles: {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 control: function (_a) {
                     _a.outline; var provided = __rest(_a, ["outline"]);