@vchasno/ui-kit 0.2.13 → 0.3.0
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 +7 -0
- package/dist/Datepicker/index.cjs.js +2 -2
- package/dist/Datepicker/index.js +2 -2
- package/dist/Datepicker/types/components/Select/Label.d.ts +7 -0
- package/dist/Datepicker/types/components/Select/customComponents.d.ts +2 -0
- package/dist/Datepicker/types/components/Select/index.d.ts +1 -1
- package/dist/Datepicker/types/components/Select/types.d.ts +4 -0
- package/dist/Select/index.cjs.js +32 -17
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +32 -17
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Select/Label.d.ts +7 -0
- package/dist/Select/types/components/Select/customComponents.d.ts +2 -0
- package/dist/Select/types/components/Select/index.d.ts +1 -1
- package/dist/Select/types/components/Select/types.d.ts +4 -0
- package/dist/SelectCreatable/index.cjs.js +26 -17
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +26 -17
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/Select/Label.d.ts +7 -0
- package/dist/SelectCreatable/types/components/Select/customComponents.d.ts +2 -0
- package/dist/SelectCreatable/types/components/Select/index.d.ts +1 -1
- package/dist/SelectCreatable/types/components/Select/types.d.ts +4 -0
- package/dist/css/_theme.css +3 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/dist/types/components/Select/Label.d.ts +7 -0
- package/dist/types/components/Select/customComponents.d.ts +2 -0
- package/dist/types/components/Select/index.d.ts +1 -1
- package/dist/types/components/Select/types.d.ts +4 -0
- package/package.json +1 -1
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
|
|
3
|
+
import { CustomControlProps } from './types';
|
|
3
4
|
declare const _default: {
|
|
4
5
|
DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
|
|
5
6
|
LoadingIndicator: () => React.JSX.Element;
|
|
6
7
|
IndicatorSeparator: () => null;
|
|
7
8
|
ClearIndicator: (props: ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
|
|
9
|
+
Control: (props: CustomControlProps) => React.JSX.Element;
|
|
8
10
|
};
|
|
9
11
|
export default _default;
|
|
@@ -2,4 +2,4 @@ export { default, SelectComponents } from './Select';
|
|
|
2
2
|
export type { SelectProps } from './Select';
|
|
3
3
|
export { default as SelectCreatable } from './SelectCreatable';
|
|
4
4
|
export type { SelectCreatableProps } from './SelectCreatable';
|
|
5
|
-
export type { Option } from './types';
|
|
5
|
+
export type { Option, CustomControlProps } from './types';
|
|
@@ -4543,7 +4543,7 @@ var css$1 = function css(_ref, unstyled) {
|
|
|
4543
4543
|
}
|
|
4544
4544
|
});
|
|
4545
4545
|
};
|
|
4546
|
-
var Control = function Control(props) {
|
|
4546
|
+
var Control$1 = function Control(props) {
|
|
4547
4547
|
var children = props.children,
|
|
4548
4548
|
isDisabled = props.isDisabled,
|
|
4549
4549
|
isFocused = props.isFocused,
|
|
@@ -4559,7 +4559,7 @@ var Control = function Control(props) {
|
|
|
4559
4559
|
'control--menu-is-open': menuIsOpen
|
|
4560
4560
|
}), innerProps), children);
|
|
4561
4561
|
};
|
|
4562
|
-
var Control$1 = Control;
|
|
4562
|
+
var Control$1$1 = Control$1;
|
|
4563
4563
|
|
|
4564
4564
|
var _excluded$1$1 = ["data"];
|
|
4565
4565
|
var groupCSS = function groupCSS(_ref, unstyled) {
|
|
@@ -4891,7 +4891,7 @@ var SingleValue$1 = SingleValue;
|
|
|
4891
4891
|
|
|
4892
4892
|
var components = {
|
|
4893
4893
|
ClearIndicator: ClearIndicator$1,
|
|
4894
|
-
Control: Control$1,
|
|
4894
|
+
Control: Control$1$1,
|
|
4895
4895
|
DropdownIndicator: DropdownIndicator$1,
|
|
4896
4896
|
DownChevron: DownChevron,
|
|
4897
4897
|
CrossIcon: CrossIcon,
|
|
@@ -7763,7 +7763,7 @@ function styleInject(css, ref) {
|
|
|
7763
7763
|
}
|
|
7764
7764
|
}
|
|
7765
7765
|
|
|
7766
|
-
var css_248z$3 = ".vchasno-ui-meta {\n display: block;\n max-width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint,\n.vchasno-ui-meta__error {\n display: inline-block;\n overflow: hidden;\n max-width: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-meta__hint {\n color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--vchasno-ui-input-color-error);\n}\n";
|
|
7766
|
+
var css_248z$3 = ".vchasno-ui-meta {\n display: block;\n max-width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n padding-left: 16px;\n font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint,\n.vchasno-ui-meta__error {\n display: inline-block;\n overflow: hidden;\n max-width: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-meta__hint {\n color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--vchasno-ui-input-color-error);\n}\n";
|
|
7767
7767
|
styleInject(css_248z$3);
|
|
7768
7768
|
|
|
7769
7769
|
var InputMeta = function (_a) {
|
|
@@ -7773,9 +7773,19 @@ var InputMeta = function (_a) {
|
|
|
7773
7773
|
error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
7774
7774
|
};
|
|
7775
7775
|
|
|
7776
|
-
var css_248z$2 = ".vchasno-ui-
|
|
7776
|
+
var css_248z$2 = ".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";
|
|
7777
7777
|
styleInject(css_248z$2);
|
|
7778
7778
|
|
|
7779
|
+
var Spinner = function (_a) {
|
|
7780
|
+
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
7781
|
+
return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7782
|
+
React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7783
|
+
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7784
|
+
};
|
|
7785
|
+
|
|
7786
|
+
var css_248z$1 = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 4px;\n background-color: #fff;\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: color var(--vchasno-ui-transition-duration-sec, 0.3s), top 0.3s, 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\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\n[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\n[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";
|
|
7787
|
+
styleInject(css_248z$1);
|
|
7788
|
+
|
|
7779
7789
|
var LabelText = function (_a) {
|
|
7780
7790
|
var className = _a.className, children = _a.children;
|
|
7781
7791
|
return (React.createElement("span", { className: cn('vchasno-ui-label-text', className) },
|
|
@@ -7787,14 +7797,9 @@ var LabelText = function (_a) {
|
|
|
7787
7797
|
React.createElement("sup", null, "*")));
|
|
7788
7798
|
};
|
|
7789
7799
|
|
|
7790
|
-
var
|
|
7791
|
-
|
|
7792
|
-
|
|
7793
|
-
var Spinner = function (_a) {
|
|
7794
|
-
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
7795
|
-
return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
7796
|
-
React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
7797
|
-
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7800
|
+
var Label = function (_a) {
|
|
7801
|
+
var label = _a.label, isFloating = _a.isFloating;
|
|
7802
|
+
return (React.createElement(LabelText, { className: cn(isFloating && 'vchasno-ui-select__floating-label') }, label));
|
|
7798
7803
|
};
|
|
7799
7804
|
|
|
7800
7805
|
var IndicatorSeparator = function () { return null; };
|
|
@@ -7809,13 +7814,18 @@ var ClearIndicator = function (props) {
|
|
|
7809
7814
|
React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
7810
7815
|
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" }))));
|
|
7811
7816
|
};
|
|
7812
|
-
var
|
|
7817
|
+
var Control = function (props) {
|
|
7818
|
+
return (React.createElement(React.Fragment, null,
|
|
7819
|
+
props.label && (React.createElement(Label, { isFloating: props.isFocused || props.hasValue, label: props.label })),
|
|
7820
|
+
React.createElement(components.Control, __assign({}, props))));
|
|
7821
|
+
};
|
|
7822
|
+
var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator, Control: Control };
|
|
7813
7823
|
|
|
7814
7824
|
var noOptionsMessageDefault = function () { return React.createElement("span", null, "\u041D\u0435 \u043C\u0430\u0454 \u043E\u043F\u0446\u0456\u0439"); };
|
|
7815
7825
|
var loadingMessageDefault = function () { return React.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7816
7826
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7817
7827
|
|
|
7818
|
-
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:
|
|
7828
|
+
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 border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom: -1px;\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, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\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 .vchasno-ui-select__multi-value__remove:hover {\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: 15px 14px;\n}\n";
|
|
7819
7829
|
styleInject(css_248z);
|
|
7820
7830
|
|
|
7821
7831
|
var SelectCreatable = function (_a) {
|
|
@@ -7826,8 +7836,7 @@ var SelectCreatable = function (_a) {
|
|
|
7826
7836
|
'--wide': wide,
|
|
7827
7837
|
'--error': error,
|
|
7828
7838
|
}, className) }),
|
|
7829
|
-
React.createElement(
|
|
7830
|
-
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)),
|
|
7839
|
+
React.createElement(CreatableSelect$1, __assign({ isClearable: isClearable, required: required, isLoading: loading, components: __assign(__assign(__assign({}, CustomComponents), { Control: function (props) { return React.createElement(CustomComponents.Control, __assign({}, props, { label: label })); } }), components), classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest)),
|
|
7831
7840
|
React.createElement(InputMeta, { error: error, hint: hint })));
|
|
7832
7841
|
};
|
|
7833
7842
|
|