@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
package/dist/Select/index.d.ts
CHANGED
|
@@ -27,6 +27,10 @@ interface DataQa {
|
|
|
27
27
|
/** для тестування */
|
|
28
28
|
dataQa?: string;
|
|
29
29
|
}
|
|
30
|
+
interface HideEmptyMeta {
|
|
31
|
+
/** приховувати пустий блок під інпутом - якщо не має повідомлень щоб не займав місце */
|
|
32
|
+
hideEmptyMeta?: boolean;
|
|
33
|
+
}
|
|
30
34
|
|
|
31
35
|
interface Option {
|
|
32
36
|
readonly label: string;
|
|
@@ -34,7 +38,7 @@ interface Option {
|
|
|
34
38
|
}
|
|
35
39
|
|
|
36
40
|
type SelectOption = Option;
|
|
37
|
-
interface SelectProps extends Props<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
|
|
41
|
+
interface SelectProps extends Props<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa & HideEmptyMeta> {
|
|
38
42
|
wide?: boolean;
|
|
39
43
|
}
|
|
40
44
|
declare const Select: React.FC<SelectProps>;
|
package/dist/Select/index.js
CHANGED
|
@@ -7759,13 +7759,13 @@ var composeStyles = {
|
|
|
7759
7759
|
},
|
|
7760
7760
|
};
|
|
7761
7761
|
|
|
7762
|
-
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-
|
|
7762
|
+
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";
|
|
7763
7763
|
styleInject(css_248z);
|
|
7764
7764
|
|
|
7765
7765
|
var Select = function (_a) {
|
|
7766
7766
|
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
|
|
7767
7767
|
_f = _a.components, //need "space" for correct label working
|
|
7768
|
-
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"]);
|
|
7768
|
+
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, _j = _a.hideEmptyMeta, hideEmptyMeta = _j === void 0 ? false : _j, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "error", "dataQa", "closeMenuOnSelect", "hideEmptyMeta"]);
|
|
7769
7769
|
return (React__default.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-select', {
|
|
7770
7770
|
'--required': required,
|
|
7771
7771
|
'--disabled': isDisabled,
|
|
@@ -7774,7 +7774,7 @@ var Select = function (_a) {
|
|
|
7774
7774
|
}, className) },
|
|
7775
7775
|
label && React__default.createElement(Label, { label: label }),
|
|
7776
7776
|
React__default.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, { styles: __assign(__assign({}, composeStyles), rest.styles) })),
|
|
7777
|
-
React__default.createElement(InputMeta, { hint: hint, error: error })));
|
|
7777
|
+
hideEmptyMeta && !error && !hint ? null : React__default.createElement(InputMeta, { hint: hint, error: error })));
|
|
7778
7778
|
};
|
|
7779
7779
|
var SelectComponents = components;
|
|
7780
7780
|
|