@vchasno/ui-kit 0.3.22 → 0.3.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/Datepicker/types/components/Select/Label.d.ts +1 -2
- package/dist/Datepicker/types/components/Select/customComponents.d.ts +0 -2
- package/dist/Menu/types/components/Select/Label.d.ts +1 -2
- package/dist/Menu/types/components/Select/customComponents.d.ts +0 -2
- package/dist/ProjectsPopover/types/components/Select/Label.d.ts +1 -2
- package/dist/ProjectsPopover/types/components/Select/customComponents.d.ts +0 -2
- package/dist/Select/index.cjs.js +27 -24
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +27 -24
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Select/Label.d.ts +1 -2
- package/dist/Select/types/components/Select/customComponents.d.ts +0 -2
- package/dist/SelectCreatable/index.cjs.js +28 -25
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +28 -25
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/Select/Label.d.ts +1 -2
- package/dist/SelectCreatable/types/components/Select/customComponents.d.ts +0 -2
- package/dist/Snackbar/types/components/Select/Label.d.ts +1 -2
- package/dist/Snackbar/types/components/Select/customComponents.d.ts +0 -2
- package/dist/css/Select.global.css +26 -4
- package/dist/css/_theme.css +1 -1
- package/dist/types/components/Select/Label.d.ts +1 -2
- package/dist/types/components/Select/customComponents.d.ts +0 -2
- package/package.json +1 -1
package/dist/Select/index.js
CHANGED
|
@@ -4599,7 +4599,7 @@ var css$1 = function css(_ref, unstyled) {
|
|
|
4599
4599
|
}
|
|
4600
4600
|
});
|
|
4601
4601
|
};
|
|
4602
|
-
var Control
|
|
4602
|
+
var Control = function Control(props) {
|
|
4603
4603
|
var children = props.children,
|
|
4604
4604
|
isDisabled = props.isDisabled,
|
|
4605
4605
|
isFocused = props.isFocused,
|
|
@@ -4617,7 +4617,7 @@ var Control$1 = function Control(props) {
|
|
|
4617
4617
|
"aria-disabled": isDisabled || undefined
|
|
4618
4618
|
}), children);
|
|
4619
4619
|
};
|
|
4620
|
-
var Control$1
|
|
4620
|
+
var Control$1 = Control;
|
|
4621
4621
|
|
|
4622
4622
|
var _excluded$1 = ["data"];
|
|
4623
4623
|
var groupCSS = function groupCSS(_ref, unstyled) {
|
|
@@ -4949,7 +4949,7 @@ var SingleValue$1 = SingleValue;
|
|
|
4949
4949
|
|
|
4950
4950
|
var components = {
|
|
4951
4951
|
ClearIndicator: ClearIndicator$1,
|
|
4952
|
-
Control: Control$1
|
|
4952
|
+
Control: Control$1,
|
|
4953
4953
|
DropdownIndicator: DropdownIndicator$1,
|
|
4954
4954
|
DownChevron: DownChevron,
|
|
4955
4955
|
CrossIcon: CrossIcon,
|
|
@@ -7693,19 +7693,9 @@ var InputMeta = function (_a) {
|
|
|
7693
7693
|
error && React__default.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
7694
7694
|
};
|
|
7695
7695
|
|
|
7696
|
-
var css_248z$2 = ".vchasno-ui-
|
|
7696
|
+
var css_248z$2 = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 0 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n pointer-events: none;\n text-overflow: ellipsis;\n transform: translate(0, -50%);\n transition:\n color var(--vchasno-ui-transition-duration-sec, 0.3s),\n top 0.3s,\n font-size 0.3s;\n white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
7697
7697
|
styleInject(css_248z$2);
|
|
7698
7698
|
|
|
7699
|
-
var Spinner = function (_a) {
|
|
7700
|
-
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
7701
|
-
return (React__default.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7702
|
-
React__default.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7703
|
-
React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7704
|
-
};
|
|
7705
|
-
|
|
7706
|
-
var css_248z$1 = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 0 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n pointer-events: none;\n text-overflow: ellipsis;\n transform: translate(0, -50%);\n transition:\n color var(--vchasno-ui-transition-duration-sec, 0.3s),\n top 0.3s,\n font-size 0.3s;\n white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
7707
|
-
styleInject(css_248z$1);
|
|
7708
|
-
|
|
7709
7699
|
var LabelText = function (_a) {
|
|
7710
7700
|
var className = _a.className, children = _a.children;
|
|
7711
7701
|
if (!children) {
|
|
@@ -7721,8 +7711,18 @@ var LabelText = function (_a) {
|
|
|
7721
7711
|
};
|
|
7722
7712
|
|
|
7723
7713
|
var Label = function (_a) {
|
|
7724
|
-
var label = _a.label
|
|
7725
|
-
return
|
|
7714
|
+
var label = _a.label;
|
|
7715
|
+
return React__default.createElement(LabelText, null, label);
|
|
7716
|
+
};
|
|
7717
|
+
|
|
7718
|
+
var css_248z$1 = ".vchasno-ui-spinner {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n}\n\n.vchasno-ui-spinner__svg {\n position: absolute;\n width: 100%;\n height: 100%;\n margin: auto;\n animation: spinner-rotate 1.3s linear infinite;\n inset: 0;\n transform-origin: center center;\n}\n\n.vchasno-ui-spinner__svg__circle {\n animation: spinner-rotate-dash 2s ease-in-out infinite;\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n stroke-linecap: round;\n stroke-width: 5px;\n}\n\n@keyframes spinner-rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinner-rotate-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n";
|
|
7719
|
+
styleInject(css_248z$1);
|
|
7720
|
+
|
|
7721
|
+
var Spinner = function (_a) {
|
|
7722
|
+
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
7723
|
+
return (React__default.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7724
|
+
React__default.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7725
|
+
React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7726
7726
|
};
|
|
7727
7727
|
|
|
7728
7728
|
var IndicatorSeparator = function () { return null; };
|
|
@@ -7737,31 +7737,34 @@ var ClearIndicator = function (props) {
|
|
|
7737
7737
|
React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
7738
7738
|
React__default.createElement("path", { d: "M9.41406 8L15.707 1.70703C16.0977 1.31641 16.0977 0.683593 15.707 0.292969C15.3164 -0.0976552 14.6836 -0.0976562 14.293 0.292969L8 6.58594L1.70703 0.292969C1.31641 -0.0976562 0.683593 -0.0976562 0.292969 0.292969C-0.0976552 0.683594 -0.0976562 1.31641 0.292969 1.70703L6.58594 8L0.292969 14.293C-0.0976562 14.6836 -0.0976562 15.3164 0.292969 15.707C0.488281 15.9023 0.744141 16 1 16C1.25586 16 1.51172 15.9023 1.70703 15.707L8 9.41406L14.293 15.707C14.4883 15.9023 14.7441 16 15 16C15.2559 16 15.5117 15.9023 15.707 15.707C16.0977 15.3164 16.0977 14.6836 15.707 14.293L9.41406 8Z", fill: "#333333" }))));
|
|
7739
7739
|
};
|
|
7740
|
-
var
|
|
7741
|
-
return (React__default.createElement(React__default.Fragment, null,
|
|
7742
|
-
props.label && (React__default.createElement(Label, { isFloating: props.isFocused || props.hasValue, label: props.label })),
|
|
7743
|
-
React__default.createElement(components.Control, __assign({}, props))));
|
|
7744
|
-
};
|
|
7745
|
-
var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator, Control: Control };
|
|
7740
|
+
var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator };
|
|
7746
7741
|
|
|
7747
7742
|
var noOptionsMessageDefault = function () { return React__default.createElement("span", null, "\u041D\u0435 \u043C\u0430\u0454 \u043E\u043F\u0446\u0456\u0439"); };
|
|
7748
7743
|
var loadingMessageDefault = function () { return React__default.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7749
7744
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7750
7745
|
|
|
7751
|
-
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,
|
|
7746
|
+
var css_248z = ".vchasno-ui-select {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n transform: translate(0, -18px);\n transition:\n font-size 0.3s,\n transform 0.3s;\n}\n\n.vchasno-ui-select.--with-value .vchasno-ui-label-text,\n.vchasno-ui-select:focus-within .vchasno-ui-label-text {\n font-size: 12px;\n transform: translate(0, -42px);\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 border-radius: 8px;\n background-color: var(--vchasno-ui-select-option-bg-selected);\n outline: 1px solid var(--vchasno-ui-select-menu-border-color, transparent);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n padding: 0;\n padding-right: 3px;\n background-color: transparent;\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg {\n width: 16px;\n height: 16px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n background-color: transparent;\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";
|
|
7752
7747
|
styleInject(css_248z);
|
|
7753
7748
|
|
|
7754
7749
|
var Select = function (_a) {
|
|
7755
7750
|
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
|
|
7756
7751
|
_f = _a.components, //need "space" for correct label working
|
|
7757
7752
|
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"]);
|
|
7753
|
+
var _j = React__default.useState(Boolean(rest.value || rest.defaultValue || rest.inputValue)), internalValueExist = _j[0], setInternalValueExist = _j[1];
|
|
7758
7754
|
return (React__default.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-select', {
|
|
7755
|
+
'--with-value': internalValueExist,
|
|
7759
7756
|
'--required': required,
|
|
7760
7757
|
'--disabled': isDisabled,
|
|
7761
7758
|
'--wide': wide,
|
|
7762
7759
|
'--error': error,
|
|
7763
7760
|
}, className) },
|
|
7764
|
-
|
|
7761
|
+
label && React__default.createElement(Label, { label: label }),
|
|
7762
|
+
React__default.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign({}, CustomComponents), components), closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest, { onChange: function (value, actionMeta) {
|
|
7763
|
+
setInternalValueExist(Boolean(value));
|
|
7764
|
+
if (rest.onChange) {
|
|
7765
|
+
rest.onChange(value, actionMeta);
|
|
7766
|
+
}
|
|
7767
|
+
}, styles: {
|
|
7765
7768
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7766
7769
|
control: function (_a) {
|
|
7767
7770
|
_a.outline; var provided = __rest(_a, ["outline"]);
|