@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
|
@@ -4532,7 +4532,7 @@ var css$1 = function css(_ref, unstyled) {
|
|
|
4532
4532
|
}
|
|
4533
4533
|
});
|
|
4534
4534
|
};
|
|
4535
|
-
var Control
|
|
4535
|
+
var Control = function Control(props) {
|
|
4536
4536
|
var children = props.children,
|
|
4537
4537
|
isDisabled = props.isDisabled,
|
|
4538
4538
|
isFocused = props.isFocused,
|
|
@@ -4550,7 +4550,7 @@ var Control$1 = function Control(props) {
|
|
|
4550
4550
|
"aria-disabled": isDisabled || undefined
|
|
4551
4551
|
}), children);
|
|
4552
4552
|
};
|
|
4553
|
-
var Control$1
|
|
4553
|
+
var Control$1 = Control;
|
|
4554
4554
|
|
|
4555
4555
|
var _excluded$1$1 = ["data"];
|
|
4556
4556
|
var groupCSS = function groupCSS(_ref, unstyled) {
|
|
@@ -4882,7 +4882,7 @@ var SingleValue$1 = SingleValue;
|
|
|
4882
4882
|
|
|
4883
4883
|
var components = {
|
|
4884
4884
|
ClearIndicator: ClearIndicator$1,
|
|
4885
|
-
Control: Control$1
|
|
4885
|
+
Control: Control$1,
|
|
4886
4886
|
DropdownIndicator: DropdownIndicator$1,
|
|
4887
4887
|
DownChevron: DownChevron,
|
|
4888
4888
|
CrossIcon: CrossIcon,
|
|
@@ -7782,19 +7782,9 @@ var InputMeta = function (_a) {
|
|
|
7782
7782
|
error && React__default.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
7783
7783
|
};
|
|
7784
7784
|
|
|
7785
|
-
var css_248z$2 = ".vchasno-ui-
|
|
7785
|
+
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";
|
|
7786
7786
|
styleInject(css_248z$2);
|
|
7787
7787
|
|
|
7788
|
-
var Spinner = function (_a) {
|
|
7789
|
-
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
7790
|
-
return (React__default.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7791
|
-
React__default.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7792
|
-
React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7793
|
-
};
|
|
7794
|
-
|
|
7795
|
-
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";
|
|
7796
|
-
styleInject(css_248z$1);
|
|
7797
|
-
|
|
7798
7788
|
var LabelText = function (_a) {
|
|
7799
7789
|
var className = _a.className, children = _a.children;
|
|
7800
7790
|
if (!children) {
|
|
@@ -7810,8 +7800,18 @@ var LabelText = function (_a) {
|
|
|
7810
7800
|
};
|
|
7811
7801
|
|
|
7812
7802
|
var Label = function (_a) {
|
|
7813
|
-
var label = _a.label
|
|
7814
|
-
return
|
|
7803
|
+
var label = _a.label;
|
|
7804
|
+
return React__default.createElement(LabelText, null, label);
|
|
7805
|
+
};
|
|
7806
|
+
|
|
7807
|
+
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";
|
|
7808
|
+
styleInject(css_248z$1);
|
|
7809
|
+
|
|
7810
|
+
var Spinner = function (_a) {
|
|
7811
|
+
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
7812
|
+
return (React__default.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7813
|
+
React__default.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7814
|
+
React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7815
7815
|
};
|
|
7816
7816
|
|
|
7817
7817
|
var IndicatorSeparator = function () { return null; };
|
|
@@ -7826,37 +7826,50 @@ var ClearIndicator = function (props) {
|
|
|
7826
7826
|
React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
7827
7827
|
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" }))));
|
|
7828
7828
|
};
|
|
7829
|
-
var
|
|
7830
|
-
return (React__default.createElement(React__default.Fragment, null,
|
|
7831
|
-
props.label && (React__default.createElement(Label, { isFloating: props.isFocused || props.hasValue, label: props.label })),
|
|
7832
|
-
React__default.createElement(components.Control, __assign({}, props))));
|
|
7833
|
-
};
|
|
7834
|
-
var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator, Control: Control };
|
|
7829
|
+
var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator };
|
|
7835
7830
|
|
|
7836
7831
|
var noOptionsMessageDefault = function () { return React__default.createElement("span", null, "\u041D\u0435 \u043C\u0430\u0454 \u043E\u043F\u0446\u0456\u0439"); };
|
|
7837
7832
|
var loadingMessageDefault = function () { return React__default.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7838
7833
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7839
7834
|
|
|
7840
|
-
var
|
|
7835
|
+
var useCheckValueExists = function (props) {
|
|
7836
|
+
var checkValueExist = function () {
|
|
7837
|
+
return Boolean([props.value || props.defaultValue || props.inputValue || props.defaultInputValue]
|
|
7838
|
+
.flat()
|
|
7839
|
+
.filter(Boolean).length);
|
|
7840
|
+
};
|
|
7841
|
+
var _a = React__default.useState(checkValueExist), internalValueExist = _a[0], setInternalValueExist = _a[1];
|
|
7842
|
+
return [internalValueExist, setInternalValueExist];
|
|
7843
|
+
};
|
|
7844
|
+
|
|
7845
|
+
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";
|
|
7841
7846
|
styleInject(css_248z);
|
|
7842
7847
|
|
|
7843
7848
|
var SelectCreatable = function (_a) {
|
|
7844
7849
|
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
|
|
7845
7850
|
_f = _a.components, //need "space" for correct label working
|
|
7846
7851
|
components = _f === void 0 ? {} : _f, isClearable = _a.isClearable, dataQa = _a.dataQa, labelProps = _a.labelProps, error = _a.error, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "isClearable", "dataQa", "labelProps", "error"]);
|
|
7852
|
+
var _g = useCheckValueExists(rest), internalValueExist = _g[0], setInternalValueExist = _g[1];
|
|
7847
7853
|
return (React__default.createElement("label", __assign({}, labelProps, { "data-qa": dataQa, className: cn('vchasno-ui-select', {
|
|
7854
|
+
'--with-value': internalValueExist,
|
|
7848
7855
|
'--required': required,
|
|
7849
7856
|
'--disabled': isDisabled,
|
|
7850
7857
|
'--wide': wide,
|
|
7851
7858
|
'--error': error,
|
|
7852
7859
|
}, className) }),
|
|
7853
|
-
|
|
7860
|
+
label && React__default.createElement(Label, { label: label }),
|
|
7861
|
+
React__default.createElement(CreatableSelect$1, __assign({ isClearable: isClearable, required: required, isLoading: loading, components: __assign(__assign({}, CustomComponents), components), classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest, { onChange: function (value, actionMeta) {
|
|
7862
|
+
setInternalValueExist(Boolean(value));
|
|
7863
|
+
if (rest.onChange) {
|
|
7864
|
+
rest.onChange(value, actionMeta);
|
|
7865
|
+
}
|
|
7866
|
+
}, styles: {
|
|
7854
7867
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7855
7868
|
control: function (_a) {
|
|
7856
7869
|
_a.outline; var provided = __rest(_a, ["outline"]);
|
|
7857
7870
|
return provided;
|
|
7858
7871
|
}, // Removes `outline` with "!important" from the styling
|
|
7859
|
-
} }
|
|
7872
|
+
} })),
|
|
7860
7873
|
React__default.createElement(InputMeta, { error: error, hint: hint })));
|
|
7861
7874
|
};
|
|
7862
7875
|
|