@vchasno/ui-kit 0.3.24 → 0.3.26
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 +18 -0
- package/dist/Datepicker/index.cjs.js +1 -1
- package/dist/Datepicker/index.js +1 -1
- package/dist/Datepicker/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/Datepicker/types/components/Select/utils.d.ts +2 -0
- package/dist/Datepicker/types/components/TextAreaInput/TextAreaInput.d.ts +3 -2
- package/dist/Menu/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/Menu/types/components/Select/utils.d.ts +2 -0
- package/dist/Menu/types/components/TextAreaInput/TextAreaInput.d.ts +3 -2
- package/dist/ProjectsPopover/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/ProjectsPopover/types/components/Select/utils.d.ts +2 -0
- package/dist/ProjectsPopover/types/components/TextAreaInput/TextAreaInput.d.ts +3 -2
- package/dist/Select/index.cjs.js +8 -24
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +8 -24
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/Select/types/components/Select/utils.d.ts +2 -0
- package/dist/Select/types/components/TextAreaInput/TextAreaInput.d.ts +3 -2
- package/dist/SelectCreatable/index.cjs.js +8 -24
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +8 -24
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/SelectCreatable/types/components/Select/utils.d.ts +2 -0
- package/dist/SelectCreatable/types/components/TextAreaInput/TextAreaInput.d.ts +3 -2
- package/dist/Snackbar/index.cjs.js +626 -444
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +628 -446
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/Snackbar/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/Snackbar/types/components/Select/utils.d.ts +2 -0
- package/dist/Snackbar/types/components/TextAreaInput/TextAreaInput.d.ts +3 -2
- package/dist/css/Input.global.css +1 -1
- package/dist/css/LabelText.global.css +1 -0
- package/dist/css/Paragraph.global.css +8 -0
- package/dist/css/Select.global.css +1 -1
- package/dist/css/Text.global.css +4 -0
- package/dist/css/TextAreaInput.global.css +7 -9
- package/dist/index.d.ts +4 -2
- package/dist/index.js +1065 -883
- package/dist/index.js.map +1 -1
- package/dist/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/types/components/Select/utils.d.ts +2 -0
- package/dist/types/components/TextAreaInput/TextAreaInput.d.ts +3 -2
- package/package.json +1 -2
- package/dist/Datepicker/types/components/Select/useCheckValueExists.d.ts +0 -3
- package/dist/Menu/types/components/Select/useCheckValueExists.d.ts +0 -3
- package/dist/ProjectsPopover/types/components/Select/useCheckValueExists.d.ts +0 -3
- package/dist/Select/types/components/Select/useCheckValueExists.d.ts +0 -3
- package/dist/SelectCreatable/types/components/Select/useCheckValueExists.d.ts +0 -3
- package/dist/Snackbar/types/components/Select/useCheckValueExists.d.ts +0 -3
- package/dist/types/components/Select/useCheckValueExists.d.ts +0 -3
|
@@ -7782,7 +7782,7 @@ 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-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";
|
|
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 border-radius: 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
7788
|
var LabelText = function (_a) {
|
|
@@ -7832,44 +7832,28 @@ var noOptionsMessageDefault = function () { return React__default.createElement(
|
|
|
7832
7832
|
var loadingMessageDefault = function () { return React__default.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7833
7833
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7834
7834
|
|
|
7835
|
-
var
|
|
7836
|
-
|
|
7837
|
-
|
|
7838
|
-
|
|
7839
|
-
|
|
7840
|
-
};
|
|
7841
|
-
var _a = React__default.useState(checkValueExist), internalValueExist = _a[0], setInternalValueExist = _a[1];
|
|
7842
|
-
return [internalValueExist, setInternalValueExist];
|
|
7835
|
+
var composeStyles = {
|
|
7836
|
+
control: function (styles) {
|
|
7837
|
+
delete styles.outline;
|
|
7838
|
+
return styles;
|
|
7839
|
+
},
|
|
7843
7840
|
};
|
|
7844
7841
|
|
|
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
|
|
7842
|
+
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:has(.vchasno-ui-select__value-container--has-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";
|
|
7846
7843
|
styleInject(css_248z);
|
|
7847
7844
|
|
|
7848
7845
|
var SelectCreatable = function (_a) {
|
|
7849
7846
|
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
|
|
7850
7847
|
_f = _a.components, //need "space" for correct label working
|
|
7851
7848
|
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];
|
|
7853
7849
|
return (React__default.createElement("label", __assign({}, labelProps, { "data-qa": dataQa, className: cn('vchasno-ui-select', {
|
|
7854
|
-
'--with-value': internalValueExist,
|
|
7855
7850
|
'--required': required,
|
|
7856
7851
|
'--disabled': isDisabled,
|
|
7857
7852
|
'--wide': wide,
|
|
7858
7853
|
'--error': error,
|
|
7859
7854
|
}, className) }),
|
|
7860
7855
|
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, {
|
|
7862
|
-
setInternalValueExist(Boolean(value));
|
|
7863
|
-
if (rest.onChange) {
|
|
7864
|
-
rest.onChange(value, actionMeta);
|
|
7865
|
-
}
|
|
7866
|
-
}, styles: {
|
|
7867
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7868
|
-
control: function (_a) {
|
|
7869
|
-
_a.outline; var provided = __rest(_a, ["outline"]);
|
|
7870
|
-
return provided;
|
|
7871
|
-
}, // Removes `outline` with "!important" from the styling
|
|
7872
|
-
} })),
|
|
7856
|
+
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, { styles: __assign(__assign({}, composeStyles), rest.styles) })),
|
|
7873
7857
|
React__default.createElement(InputMeta, { error: error, hint: hint })));
|
|
7874
7858
|
};
|
|
7875
7859
|
|