@vchasno/ui-kit 0.3.32 → 0.3.34
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/index.cjs.js +4 -3
- package/dist/Datepicker/index.cjs.js.map +1 -1
- package/dist/Datepicker/index.d.ts +6 -1
- package/dist/Datepicker/index.js +4 -3
- package/dist/Datepicker/index.js.map +1 -1
- package/dist/Datepicker/types/components/Datepicker/DatePicker.d.ts +3 -2
- package/dist/Datepicker/types/components/Input/Input.d.ts +2 -3
- package/dist/Datepicker/types/components/Select/Select.d.ts +2 -2
- package/dist/Datepicker/types/components/Select/SelectCreatable.d.ts +2 -2
- package/dist/Datepicker/types/components/types.d.ts +4 -0
- package/dist/Menu/types/components/Datepicker/DatePicker.d.ts +3 -2
- package/dist/Menu/types/components/Input/Input.d.ts +2 -3
- package/dist/Menu/types/components/Select/Select.d.ts +2 -2
- package/dist/Menu/types/components/Select/SelectCreatable.d.ts +2 -2
- package/dist/Menu/types/components/types.d.ts +4 -0
- package/dist/ProjectsPopover/types/components/Datepicker/DatePicker.d.ts +3 -2
- package/dist/ProjectsPopover/types/components/Input/Input.d.ts +2 -3
- package/dist/ProjectsPopover/types/components/Select/Select.d.ts +2 -2
- package/dist/ProjectsPopover/types/components/Select/SelectCreatable.d.ts +2 -2
- package/dist/ProjectsPopover/types/components/types.d.ts +4 -0
- package/dist/Select/index.cjs.js +3 -3
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.d.ts +5 -1
- package/dist/Select/index.js +3 -3
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Datepicker/DatePicker.d.ts +3 -2
- package/dist/Select/types/components/Input/Input.d.ts +2 -3
- package/dist/Select/types/components/Select/Select.d.ts +2 -2
- package/dist/Select/types/components/Select/SelectCreatable.d.ts +2 -2
- package/dist/Select/types/components/types.d.ts +4 -0
- package/dist/SelectCreatable/index.cjs.js +3 -3
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.d.ts +5 -1
- package/dist/SelectCreatable/index.js +3 -3
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/Datepicker/DatePicker.d.ts +3 -2
- package/dist/SelectCreatable/types/components/Input/Input.d.ts +2 -3
- package/dist/SelectCreatable/types/components/Select/Select.d.ts +2 -2
- package/dist/SelectCreatable/types/components/Select/SelectCreatable.d.ts +2 -2
- package/dist/SelectCreatable/types/components/types.d.ts +4 -0
- package/dist/Snackbar/index.cjs.js +6 -6
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +6 -6
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/Snackbar/types/components/Datepicker/DatePicker.d.ts +3 -2
- package/dist/Snackbar/types/components/Input/Input.d.ts +2 -3
- package/dist/Snackbar/types/components/Select/Select.d.ts +2 -2
- package/dist/Snackbar/types/components/Select/SelectCreatable.d.ts +2 -2
- package/dist/Snackbar/types/components/types.d.ts +4 -0
- package/dist/css/DatePicker.global.css +4 -0
- package/dist/css/Input.global.css +1 -1
- package/dist/css/MaskInput.global.css +1 -1
- package/dist/css/Select.global.css +1 -1
- package/dist/css/TextAreaInput.global.css +1 -1
- package/dist/css/TextInput.global.css +1 -1
- package/dist/css/_theme.css +1 -0
- package/dist/index.d.ts +5 -2
- package/dist/index.js +8 -8
- package/dist/index.js.map +1 -1
- package/dist/types/components/Datepicker/DatePicker.d.ts +3 -2
- package/dist/types/components/Input/Input.d.ts +2 -3
- package/dist/types/components/Select/Select.d.ts +2 -2
- package/dist/types/components/Select/SelectCreatable.d.ts +2 -2
- package/dist/types/components/types.d.ts +4 -0
- package/package.json +1 -1
|
@@ -22,6 +22,10 @@ interface DataQa {
|
|
|
22
22
|
/** для тестування */
|
|
23
23
|
dataQa?: string;
|
|
24
24
|
}
|
|
25
|
+
interface HideEmptyMeta {
|
|
26
|
+
/** приховувати пустий блок під інпутом - якщо не має повідомлень щоб не займав місце */
|
|
27
|
+
hideEmptyMeta?: boolean;
|
|
28
|
+
}
|
|
25
29
|
|
|
26
30
|
interface Option {
|
|
27
31
|
readonly label: string;
|
|
@@ -29,7 +33,7 @@ interface Option {
|
|
|
29
33
|
}
|
|
30
34
|
|
|
31
35
|
type SelectOption = Option;
|
|
32
|
-
interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
|
|
36
|
+
interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa & HideEmptyMeta> {
|
|
33
37
|
wide?: boolean;
|
|
34
38
|
labelProps?: InputHTMLAttributes<HTMLLabelElement>;
|
|
35
39
|
}
|
|
@@ -7848,13 +7848,13 @@ var composeStyles = {
|
|
|
7848
7848
|
},
|
|
7849
7849
|
};
|
|
7850
7850
|
|
|
7851
|
-
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-input-border-color-focused, #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-
|
|
7851
|
+
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-input-border-color-focused, #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-placeholder-color);\n font-size: var(--vchasno-ui-input-font-size);\n font-weight: 400;\n}\n\n.vchasno-ui-select:not(:focus-within, :not(:has(.vchasno-ui-label-text)))\n .vchasno-ui-select__placeholder {\n visibility: hidden;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n padding: 0;\n border-radius: 4px;\n color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n cursor: pointer;\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 color: var(--vchasno-ui-label-color-default);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n background-color: transparent;\n color: var(--vchasno-ui-input-color-error);\n cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg {\n width: 20px;\n height: 20px;\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 0 6px 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";
|
|
7852
7852
|
styleInject(css_248z);
|
|
7853
7853
|
|
|
7854
7854
|
var SelectCreatable = function (_a) {
|
|
7855
7855
|
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
|
|
7856
7856
|
_f = _a.components, //need "space" for correct label working
|
|
7857
|
-
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"]);
|
|
7857
|
+
components = _f === void 0 ? {} : _f, isClearable = _a.isClearable, dataQa = _a.dataQa, labelProps = _a.labelProps, _g = _a.hideEmptyMeta, hideEmptyMeta = _g === void 0 ? false : _g, error = _a.error, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "isClearable", "dataQa", "labelProps", "hideEmptyMeta", "error"]);
|
|
7858
7858
|
return (React__default.createElement("label", __assign({}, labelProps, { "data-qa": dataQa, className: cn('vchasno-ui-select', {
|
|
7859
7859
|
'--required': required,
|
|
7860
7860
|
'--disabled': isDisabled,
|
|
@@ -7863,7 +7863,7 @@ var SelectCreatable = function (_a) {
|
|
|
7863
7863
|
}, className) }),
|
|
7864
7864
|
label && React__default.createElement(Label, { label: label }),
|
|
7865
7865
|
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) })),
|
|
7866
|
-
React__default.createElement(InputMeta, {
|
|
7866
|
+
hideEmptyMeta && !error && !hint ? null : React__default.createElement(InputMeta, { hint: hint, error: error })));
|
|
7867
7867
|
};
|
|
7868
7868
|
|
|
7869
7869
|
export { SelectCreatable as default };
|