@vchasno/ui-kit 0.3.22 → 0.3.24
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 +12 -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/Datepicker/types/components/Select/useCheckValueExists.d.ts +3 -0
- package/dist/Menu/types/components/Select/Label.d.ts +1 -2
- package/dist/Menu/types/components/Select/customComponents.d.ts +0 -2
- package/dist/Menu/types/components/Select/useCheckValueExists.d.ts +3 -0
- package/dist/ProjectsPopover/types/components/Select/Label.d.ts +1 -2
- package/dist/ProjectsPopover/types/components/Select/customComponents.d.ts +0 -2
- package/dist/ProjectsPopover/types/components/Select/useCheckValueExists.d.ts +3 -0
- package/dist/Select/index.cjs.js +37 -24
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +37 -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/Select/types/components/Select/useCheckValueExists.d.ts +3 -0
- package/dist/SelectCreatable/index.cjs.js +38 -25
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +38 -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/SelectCreatable/types/components/Select/useCheckValueExists.d.ts +3 -0
- package/dist/Snackbar/types/components/Select/Label.d.ts +1 -2
- package/dist/Snackbar/types/components/Select/customComponents.d.ts +0 -2
- package/dist/Snackbar/types/components/Select/useCheckValueExists.d.ts +3 -0
- 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/dist/types/components/Select/useCheckValueExists.d.ts +3 -0
- 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,44 @@ 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
|
|
7746
|
+
var useCheckValueExists = function (props) {
|
|
7747
|
+
var checkValueExist = function () {
|
|
7748
|
+
return Boolean([props.value || props.defaultValue || props.inputValue || props.defaultInputValue]
|
|
7749
|
+
.flat()
|
|
7750
|
+
.filter(Boolean).length);
|
|
7751
|
+
};
|
|
7752
|
+
var _a = React__default.useState(checkValueExist), internalValueExist = _a[0], setInternalValueExist = _a[1];
|
|
7753
|
+
return [internalValueExist, setInternalValueExist];
|
|
7754
|
+
};
|
|
7755
|
+
|
|
7756
|
+
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
7757
|
styleInject(css_248z);
|
|
7753
7758
|
|
|
7754
7759
|
var Select = function (_a) {
|
|
7755
7760
|
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
7761
|
_f = _a.components, //need "space" for correct label working
|
|
7757
7762
|
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"]);
|
|
7763
|
+
var _j = useCheckValueExists(rest), internalValueExist = _j[0], setInternalValueExist = _j[1];
|
|
7758
7764
|
return (React__default.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-select', {
|
|
7765
|
+
'--with-value': internalValueExist,
|
|
7759
7766
|
'--required': required,
|
|
7760
7767
|
'--disabled': isDisabled,
|
|
7761
7768
|
'--wide': wide,
|
|
7762
7769
|
'--error': error,
|
|
7763
7770
|
}, className) },
|
|
7764
|
-
|
|
7771
|
+
label && React__default.createElement(Label, { label: label }),
|
|
7772
|
+
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) {
|
|
7773
|
+
setInternalValueExist(Boolean(value));
|
|
7774
|
+
if (rest.onChange) {
|
|
7775
|
+
rest.onChange(value, actionMeta);
|
|
7776
|
+
}
|
|
7777
|
+
}, styles: {
|
|
7765
7778
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7766
7779
|
control: function (_a) {
|
|
7767
7780
|
_a.outline; var provided = __rest(_a, ["outline"]);
|