@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/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.3.24] - 2024-08-15
|
|
11
|
+
|
|
12
|
+
## Fixed
|
|
13
|
+
|
|
14
|
+
- `Select` label behaviour - internal check value exists
|
|
15
|
+
|
|
16
|
+
## [0.3.23] - 2024-08-14
|
|
17
|
+
|
|
18
|
+
## Fixed
|
|
19
|
+
|
|
20
|
+
- Rewrite `Select` label implementation - (input values issue)
|
|
21
|
+
|
|
10
22
|
## [0.3.22] - 2024-08-14
|
|
11
23
|
|
|
12
24
|
## Added
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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;
|
package/dist/Select/index.cjs.js
CHANGED
|
@@ -4621,7 +4621,7 @@ var css$1 = function css(_ref, unstyled) {
|
|
|
4621
4621
|
}
|
|
4622
4622
|
});
|
|
4623
4623
|
};
|
|
4624
|
-
var Control
|
|
4624
|
+
var Control = function Control(props) {
|
|
4625
4625
|
var children = props.children,
|
|
4626
4626
|
isDisabled = props.isDisabled,
|
|
4627
4627
|
isFocused = props.isFocused,
|
|
@@ -4639,7 +4639,7 @@ var Control$1 = function Control(props) {
|
|
|
4639
4639
|
"aria-disabled": isDisabled || undefined
|
|
4640
4640
|
}), children);
|
|
4641
4641
|
};
|
|
4642
|
-
var Control$1
|
|
4642
|
+
var Control$1 = Control;
|
|
4643
4643
|
|
|
4644
4644
|
var _excluded$1 = ["data"];
|
|
4645
4645
|
var groupCSS = function groupCSS(_ref, unstyled) {
|
|
@@ -4971,7 +4971,7 @@ var SingleValue$1 = SingleValue;
|
|
|
4971
4971
|
|
|
4972
4972
|
var components = {
|
|
4973
4973
|
ClearIndicator: ClearIndicator$1,
|
|
4974
|
-
Control: Control$1
|
|
4974
|
+
Control: Control$1,
|
|
4975
4975
|
DropdownIndicator: DropdownIndicator$1,
|
|
4976
4976
|
DownChevron: DownChevron,
|
|
4977
4977
|
CrossIcon: CrossIcon,
|
|
@@ -7715,19 +7715,9 @@ var InputMeta = function (_a) {
|
|
|
7715
7715
|
error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
7716
7716
|
};
|
|
7717
7717
|
|
|
7718
|
-
var css_248z$2 = ".vchasno-ui-
|
|
7718
|
+
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";
|
|
7719
7719
|
styleInject(css_248z$2);
|
|
7720
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.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7724
|
-
React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7725
|
-
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7726
|
-
};
|
|
7727
|
-
|
|
7728
|
-
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";
|
|
7729
|
-
styleInject(css_248z$1);
|
|
7730
|
-
|
|
7731
7721
|
var LabelText = function (_a) {
|
|
7732
7722
|
var className = _a.className, children = _a.children;
|
|
7733
7723
|
if (!children) {
|
|
@@ -7743,8 +7733,18 @@ var LabelText = function (_a) {
|
|
|
7743
7733
|
};
|
|
7744
7734
|
|
|
7745
7735
|
var Label = function (_a) {
|
|
7746
|
-
var label = _a.label
|
|
7747
|
-
return
|
|
7736
|
+
var label = _a.label;
|
|
7737
|
+
return React.createElement(LabelText, null, label);
|
|
7738
|
+
};
|
|
7739
|
+
|
|
7740
|
+
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";
|
|
7741
|
+
styleInject(css_248z$1);
|
|
7742
|
+
|
|
7743
|
+
var Spinner = function (_a) {
|
|
7744
|
+
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
7745
|
+
return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7746
|
+
React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7747
|
+
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7748
7748
|
};
|
|
7749
7749
|
|
|
7750
7750
|
var IndicatorSeparator = function () { return null; };
|
|
@@ -7759,31 +7759,44 @@ var ClearIndicator = function (props) {
|
|
|
7759
7759
|
React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
7760
7760
|
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" }))));
|
|
7761
7761
|
};
|
|
7762
|
-
var
|
|
7763
|
-
return (React.createElement(React.Fragment, null,
|
|
7764
|
-
props.label && (React.createElement(Label, { isFloating: props.isFocused || props.hasValue, label: props.label })),
|
|
7765
|
-
React.createElement(components.Control, __assign({}, props))));
|
|
7766
|
-
};
|
|
7767
|
-
var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator, Control: Control };
|
|
7762
|
+
var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator };
|
|
7768
7763
|
|
|
7769
7764
|
var noOptionsMessageDefault = function () { return React.createElement("span", null, "\u041D\u0435 \u043C\u0430\u0454 \u043E\u043F\u0446\u0456\u0439"); };
|
|
7770
7765
|
var loadingMessageDefault = function () { return React.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7771
7766
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7772
7767
|
|
|
7773
|
-
var
|
|
7768
|
+
var useCheckValueExists = function (props) {
|
|
7769
|
+
var checkValueExist = function () {
|
|
7770
|
+
return Boolean([props.value || props.defaultValue || props.inputValue || props.defaultInputValue]
|
|
7771
|
+
.flat()
|
|
7772
|
+
.filter(Boolean).length);
|
|
7773
|
+
};
|
|
7774
|
+
var _a = React.useState(checkValueExist), internalValueExist = _a[0], setInternalValueExist = _a[1];
|
|
7775
|
+
return [internalValueExist, setInternalValueExist];
|
|
7776
|
+
};
|
|
7777
|
+
|
|
7778
|
+
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";
|
|
7774
7779
|
styleInject(css_248z);
|
|
7775
7780
|
|
|
7776
7781
|
var Select = function (_a) {
|
|
7777
7782
|
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
|
|
7778
7783
|
_f = _a.components, //need "space" for correct label working
|
|
7779
7784
|
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"]);
|
|
7785
|
+
var _j = useCheckValueExists(rest), internalValueExist = _j[0], setInternalValueExist = _j[1];
|
|
7780
7786
|
return (React.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-select', {
|
|
7787
|
+
'--with-value': internalValueExist,
|
|
7781
7788
|
'--required': required,
|
|
7782
7789
|
'--disabled': isDisabled,
|
|
7783
7790
|
'--wide': wide,
|
|
7784
7791
|
'--error': error,
|
|
7785
7792
|
}, className) },
|
|
7786
|
-
|
|
7793
|
+
label && React.createElement(Label, { label: label }),
|
|
7794
|
+
React.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) {
|
|
7795
|
+
setInternalValueExist(Boolean(value));
|
|
7796
|
+
if (rest.onChange) {
|
|
7797
|
+
rest.onChange(value, actionMeta);
|
|
7798
|
+
}
|
|
7799
|
+
}, styles: {
|
|
7787
7800
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7788
7801
|
control: function (_a) {
|
|
7789
7802
|
_a.outline; var provided = __rest(_a, ["outline"]);
|