@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
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
|
|
3
|
-
import { CustomControlProps } from './types';
|
|
4
3
|
declare const _default: {
|
|
5
4
|
DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
|
|
6
5
|
LoadingIndicator: () => React.JSX.Element;
|
|
7
6
|
IndicatorSeparator: () => null;
|
|
8
7
|
ClearIndicator: (props: ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
|
|
9
|
-
Control: (props: CustomControlProps) => React.JSX.Element;
|
|
10
8
|
};
|
|
11
9
|
export default _default;
|
|
@@ -4552,7 +4552,7 @@ var css$1 = function css(_ref, unstyled) {
|
|
|
4552
4552
|
}
|
|
4553
4553
|
});
|
|
4554
4554
|
};
|
|
4555
|
-
var Control
|
|
4555
|
+
var Control = function Control(props) {
|
|
4556
4556
|
var children = props.children,
|
|
4557
4557
|
isDisabled = props.isDisabled,
|
|
4558
4558
|
isFocused = props.isFocused,
|
|
@@ -4570,7 +4570,7 @@ var Control$1 = function Control(props) {
|
|
|
4570
4570
|
"aria-disabled": isDisabled || undefined
|
|
4571
4571
|
}), children);
|
|
4572
4572
|
};
|
|
4573
|
-
var Control$1
|
|
4573
|
+
var Control$1 = Control;
|
|
4574
4574
|
|
|
4575
4575
|
var _excluded$1$1 = ["data"];
|
|
4576
4576
|
var groupCSS = function groupCSS(_ref, unstyled) {
|
|
@@ -4902,7 +4902,7 @@ var SingleValue$1 = SingleValue;
|
|
|
4902
4902
|
|
|
4903
4903
|
var components = {
|
|
4904
4904
|
ClearIndicator: ClearIndicator$1,
|
|
4905
|
-
Control: Control$1
|
|
4905
|
+
Control: Control$1,
|
|
4906
4906
|
DropdownIndicator: DropdownIndicator$1,
|
|
4907
4907
|
DownChevron: DownChevron,
|
|
4908
4908
|
CrossIcon: CrossIcon,
|
|
@@ -7802,19 +7802,9 @@ var InputMeta = function (_a) {
|
|
|
7802
7802
|
error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
7803
7803
|
};
|
|
7804
7804
|
|
|
7805
|
-
var css_248z$2 = ".vchasno-ui-
|
|
7805
|
+
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";
|
|
7806
7806
|
styleInject(css_248z$2);
|
|
7807
7807
|
|
|
7808
|
-
var Spinner = function (_a) {
|
|
7809
|
-
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
7810
|
-
return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7811
|
-
React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7812
|
-
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7813
|
-
};
|
|
7814
|
-
|
|
7815
|
-
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";
|
|
7816
|
-
styleInject(css_248z$1);
|
|
7817
|
-
|
|
7818
7808
|
var LabelText = function (_a) {
|
|
7819
7809
|
var className = _a.className, children = _a.children;
|
|
7820
7810
|
if (!children) {
|
|
@@ -7830,8 +7820,18 @@ var LabelText = function (_a) {
|
|
|
7830
7820
|
};
|
|
7831
7821
|
|
|
7832
7822
|
var Label = function (_a) {
|
|
7833
|
-
var label = _a.label
|
|
7834
|
-
return
|
|
7823
|
+
var label = _a.label;
|
|
7824
|
+
return React.createElement(LabelText, null, label);
|
|
7825
|
+
};
|
|
7826
|
+
|
|
7827
|
+
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";
|
|
7828
|
+
styleInject(css_248z$1);
|
|
7829
|
+
|
|
7830
|
+
var Spinner = function (_a) {
|
|
7831
|
+
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
7832
|
+
return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7833
|
+
React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7834
|
+
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7835
7835
|
};
|
|
7836
7836
|
|
|
7837
7837
|
var IndicatorSeparator = function () { return null; };
|
|
@@ -7846,37 +7846,50 @@ var ClearIndicator = function (props) {
|
|
|
7846
7846
|
React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
7847
7847
|
React.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" }))));
|
|
7848
7848
|
};
|
|
7849
|
-
var
|
|
7850
|
-
return (React.createElement(React.Fragment, null,
|
|
7851
|
-
props.label && (React.createElement(Label, { isFloating: props.isFocused || props.hasValue, label: props.label })),
|
|
7852
|
-
React.createElement(components.Control, __assign({}, props))));
|
|
7853
|
-
};
|
|
7854
|
-
var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator, Control: Control };
|
|
7849
|
+
var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator };
|
|
7855
7850
|
|
|
7856
7851
|
var noOptionsMessageDefault = function () { return React.createElement("span", null, "\u041D\u0435 \u043C\u0430\u0454 \u043E\u043F\u0446\u0456\u0439"); };
|
|
7857
7852
|
var loadingMessageDefault = function () { return React.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7858
7853
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7859
7854
|
|
|
7860
|
-
var
|
|
7855
|
+
var useCheckValueExists = function (props) {
|
|
7856
|
+
var checkValueExist = function () {
|
|
7857
|
+
return Boolean([props.value || props.defaultValue || props.inputValue || props.defaultInputValue]
|
|
7858
|
+
.flat()
|
|
7859
|
+
.filter(Boolean).length);
|
|
7860
|
+
};
|
|
7861
|
+
var _a = React.useState(checkValueExist), internalValueExist = _a[0], setInternalValueExist = _a[1];
|
|
7862
|
+
return [internalValueExist, setInternalValueExist];
|
|
7863
|
+
};
|
|
7864
|
+
|
|
7865
|
+
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";
|
|
7861
7866
|
styleInject(css_248z);
|
|
7862
7867
|
|
|
7863
7868
|
var SelectCreatable = function (_a) {
|
|
7864
7869
|
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
|
|
7865
7870
|
_f = _a.components, //need "space" for correct label working
|
|
7866
7871
|
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"]);
|
|
7872
|
+
var _g = useCheckValueExists(rest), internalValueExist = _g[0], setInternalValueExist = _g[1];
|
|
7867
7873
|
return (React.createElement("label", __assign({}, labelProps, { "data-qa": dataQa, className: cn('vchasno-ui-select', {
|
|
7874
|
+
'--with-value': internalValueExist,
|
|
7868
7875
|
'--required': required,
|
|
7869
7876
|
'--disabled': isDisabled,
|
|
7870
7877
|
'--wide': wide,
|
|
7871
7878
|
'--error': error,
|
|
7872
7879
|
}, className) }),
|
|
7873
|
-
|
|
7880
|
+
label && React.createElement(Label, { label: label }),
|
|
7881
|
+
React.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) {
|
|
7882
|
+
setInternalValueExist(Boolean(value));
|
|
7883
|
+
if (rest.onChange) {
|
|
7884
|
+
rest.onChange(value, actionMeta);
|
|
7885
|
+
}
|
|
7886
|
+
}, styles: {
|
|
7874
7887
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7875
7888
|
control: function (_a) {
|
|
7876
7889
|
_a.outline; var provided = __rest(_a, ["outline"]);
|
|
7877
7890
|
return provided;
|
|
7878
7891
|
}, // Removes `outline` with "!important" from the styling
|
|
7879
|
-
} }
|
|
7892
|
+
} })),
|
|
7880
7893
|
React.createElement(InputMeta, { error: error, hint: hint })));
|
|
7881
7894
|
};
|
|
7882
7895
|
|