@vchasno/ui-kit 0.2.9 → 0.2.11
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 +19 -0
- package/dist/Datepicker/index.cjs.js +3 -3
- package/dist/Datepicker/index.cjs.js.map +1 -1
- package/dist/Datepicker/index.js +3 -3
- package/dist/Datepicker/index.js.map +1 -1
- package/dist/Datepicker/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/Datepicker/types/components/Select/Select.d.ts +27 -0
- package/dist/Datepicker/types/components/Select/index.d.ts +1 -1
- package/dist/Datepicker/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/Datepicker/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/Datepicker/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/Datepicker/types/components/index.d.ts +3 -1
- package/dist/Datepicker/types/index.d.ts +1 -0
- package/dist/Select/index.cjs.js +8 -4
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.d.ts +34 -2
- package/dist/Select/index.js +5 -4
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/Select/types/components/Select/Select.d.ts +27 -0
- package/dist/Select/types/components/Select/index.d.ts +1 -1
- package/dist/Select/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/Select/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/Select/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/Select/types/components/index.d.ts +3 -1
- package/dist/Select/types/index.d.ts +1 -0
- package/dist/SelectCreatable/index.cjs.js +3 -3
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +3 -3
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/SelectCreatable/types/components/Select/Select.d.ts +27 -0
- package/dist/SelectCreatable/types/components/Select/index.d.ts +1 -1
- package/dist/SelectCreatable/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/SelectCreatable/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/SelectCreatable/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/SelectCreatable/types/components/index.d.ts +3 -1
- package/dist/SelectCreatable/types/index.d.ts +1 -0
- package/dist/index.d.ts +26 -1
- package/dist/index.js +83 -40
- package/dist/index.js.map +1 -1
- package/dist/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/types/components/Select/Select.d.ts +27 -0
- package/dist/types/components/Select/index.d.ts +1 -1
- package/dist/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/types/components/index.d.ts +3 -1
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
- /package/dist/Datepicker/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
- /package/dist/Select/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
- /package/dist/SelectCreatable/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
- /package/dist/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
|
@@ -9,4 +9,31 @@ export interface SelectProps extends ReactSelectProps, Partial<WithLabel & WithH
|
|
|
9
9
|
dataQa?: string;
|
|
10
10
|
}
|
|
11
11
|
declare const Select: React.FC<SelectProps>;
|
|
12
|
+
export declare const SelectComponents: {
|
|
13
|
+
ClearIndicator: <Option_1, IsMulti extends boolean, Group extends import("react-select").GroupBase<Option_1>>(props: import("react-select").ClearIndicatorProps<Option_1, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element;
|
|
14
|
+
Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends import("react-select").GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
|
|
15
|
+
DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends import("react-select").GroupBase<Option_2>>(props: import("react-select").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
|
|
16
|
+
DownChevron: (props: import("react-select/dist/declarations/src/components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
|
|
17
|
+
CrossIcon: (props: import("react-select/dist/declarations/src/components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
|
|
18
|
+
Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends import("react-select").GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
|
|
19
|
+
GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends import("react-select").GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
|
|
20
|
+
IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends import("react-select").GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
|
|
21
|
+
IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends import("react-select").GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
|
|
22
|
+
Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends import("react-select").GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
|
|
23
|
+
LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends import("react-select").GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
|
|
24
|
+
Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("react-select").GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
|
|
25
|
+
MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends import("react-select").GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
|
|
26
|
+
MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends import("react-select").GroupBase<Option_11>>(props: import("react-select/dist/declarations/src/components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
|
|
27
|
+
LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends import("react-select").GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
|
|
28
|
+
NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends import("react-select").GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
|
|
29
|
+
MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends import("react-select").GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
|
|
30
|
+
MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("react-select").GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
|
|
31
|
+
MultiValueLabel: <Option_15_1, IsMulti_15_1 extends boolean, Group_15_1 extends import("react-select").GroupBase<Option_15_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15_1, IsMulti_15_1, Group_15_1>) => import("@emotion/react").jsx.JSX.Element;
|
|
32
|
+
MultiValueRemove: typeof import("react-select/dist/declarations/src/components/MultiValue").MultiValueRemove;
|
|
33
|
+
Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends import("react-select").GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
|
|
34
|
+
Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("react-select").GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
|
|
35
|
+
SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("react-select").GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
|
|
36
|
+
SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends import("react-select").GroupBase<Option_19>>(props: import("react-select").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
|
|
37
|
+
ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends import("react-select").GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
|
|
38
|
+
};
|
|
12
39
|
export default Select;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './SvgBorder.global.css';
|
|
3
|
+
export interface SvgBorderProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
svgClassName?: string;
|
|
5
|
+
strokeDasharray?: string;
|
|
6
|
+
strokeWidth?: number;
|
|
7
|
+
color?: string;
|
|
8
|
+
borderRadius?: number;
|
|
9
|
+
animation?: 'border-offset';
|
|
10
|
+
animationPlay?: boolean;
|
|
11
|
+
animationDurationSec?: number;
|
|
12
|
+
dashoffset?: number | string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* @link <https://css-tricks.com/svg-line-animation-works/>
|
|
16
|
+
*/
|
|
17
|
+
declare const SvgBorder: React.FC<SvgBorderProps>;
|
|
18
|
+
export default SvgBorder;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const composeRoundedBorderPath: (width: number, height: number, radiusOffset: number) => string;
|
|
@@ -32,5 +32,7 @@ export { default as Checkbox } from './Checkbox';
|
|
|
32
32
|
export type { CheckboxProps } from './Checkbox';
|
|
33
33
|
export { default as PulseDot } from './PulseDot';
|
|
34
34
|
export type { PulseDotProps } from './PulseDot';
|
|
35
|
-
export { default as BubbleBox } from './BubbleBox';
|
|
35
|
+
export { default as BubbleBox, composeBubblePath } from './BubbleBox';
|
|
36
36
|
export type { BubbleBoxProps } from './BubbleBox';
|
|
37
|
+
export { default as SvgBorder, composeRoundedBorderPath } from './SvgBorder';
|
|
38
|
+
export type { SvgBorderProps } from './SvgBorder';
|
package/dist/Select/index.cjs.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
var reactDom = require('react-dom');
|
|
5
7
|
|
|
@@ -7674,7 +7676,7 @@ function styleInject(css, ref) {
|
|
|
7674
7676
|
}
|
|
7675
7677
|
}
|
|
7676
7678
|
|
|
7677
|
-
var css_248z$3 = ".vchasno-ui-meta {\n display: block;\n 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 color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--vchasno-ui-input-color-error);\n}\n";
|
|
7679
|
+
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";
|
|
7678
7680
|
styleInject(css_248z$3);
|
|
7679
7681
|
|
|
7680
7682
|
var InputMeta = function (_a) {
|
|
@@ -7684,7 +7686,7 @@ var InputMeta = function (_a) {
|
|
|
7684
7686
|
error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
7685
7687
|
};
|
|
7686
7688
|
|
|
7687
|
-
var css_248z$2 = ".vchasno-ui-label-text {\n position: relative;\n display: inline-flex;\n height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n align-self: flex-start;\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 text-overflow: ellipsis;\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n white-space: nowrap;\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).--required .vchasno-ui-label-text:hover {\n cursor: pointer;\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";
|
|
7689
|
+
var css_248z$2 = ".vchasno-ui-label-text {\n position: relative;\n display: inline-flex;\n max-width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n align-self: flex-start;\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 text-overflow: ellipsis;\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n white-space: nowrap;\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).--required .vchasno-ui-label-text:hover {\n cursor: pointer;\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";
|
|
7688
7690
|
styleInject(css_248z$2);
|
|
7689
7691
|
|
|
7690
7692
|
var LabelText = function (_a) {
|
|
@@ -7693,7 +7695,7 @@ var LabelText = function (_a) {
|
|
|
7693
7695
|
React.createElement("svg", { className: "vchasno-ui-label-text__title-icon", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
7694
7696
|
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6422 11.6423 15 7.5 15C3.3577 15 0 11.6422 0 7.5C0 3.35781 3.3577 0 7.5 0C11.6423 0 15 3.35781 15 7.5ZM5.87799 5.82184H8.52997V11.4711C8.52997 12.0179 8.08667 12.4612 7.53983 12.4612C6.99299 12.4612 6.54968 12.0179 6.54968 11.4711V7.57782H5.87799C5.39309 7.57782 5 7.18473 5 6.69983C5 6.21493 5.39309 5.82184 5.87799 5.82184ZM6.26221 3.66559C6.26221 3.50973 6.2899 3.36436 6.34483 3.22949C6.40431 3.09045 6.48466 2.97036 6.58636 2.86924C6.68805 2.76812 6.80655 2.6881 6.94229 2.62907C7.00404 2.603 7.06759 2.58269 7.13342 2.56813C7.21696 2.54984 7.30367 2.54059 7.39356 2.54059C7.54611 2.54059 7.69002 2.57004 7.82577 2.62907C7.86254 2.64499 7.89795 2.66248 7.932 2.68144C8.02416 2.73279 8.10724 2.79543 8.1817 2.86924C8.28339 2.97036 8.36375 3.09045 8.42322 3.22949C8.4541 3.29981 8.47725 3.37294 8.49178 3.44889C8.5054 3.51876 8.51221 3.59099 8.51221 3.66559C8.51221 3.74956 8.50358 3.83116 8.48633 3.91027C8.4718 3.97799 8.45046 4.0439 8.42322 4.108C8.36375 4.24287 8.28339 4.36081 8.1817 4.46194C8.12949 4.51374 8.07319 4.56001 8.01236 4.60076C7.95425 4.63947 7.89205 4.67333 7.82577 4.70211C7.69002 4.76113 7.54611 4.79059 7.39356 4.79059C7.31411 4.79059 7.23739 4.78348 7.16339 4.76914C7.08666 4.75447 7.01311 4.73213 6.94229 4.70211C6.80655 4.64308 6.68805 4.56306 6.58636 4.46194C6.48466 4.36081 6.40431 4.24287 6.34483 4.108C6.2899 3.96896 6.26221 3.82145 6.26221 3.66559Z", fill: "currentColor" })),
|
|
7695
7697
|
' ',
|
|
7696
|
-
children,
|
|
7698
|
+
React.createElement("span", { className: "vchasno-ui-label-text__content" }, children),
|
|
7697
7699
|
" ",
|
|
7698
7700
|
React.createElement("sup", null, "*")));
|
|
7699
7701
|
};
|
|
@@ -7741,6 +7743,8 @@ var Select = function (_a) {
|
|
|
7741
7743
|
React.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign({}, customComponents), components), classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest)),
|
|
7742
7744
|
React.createElement(InputMeta, { hint: hint, error: error })));
|
|
7743
7745
|
};
|
|
7746
|
+
var SelectComponents = components;
|
|
7744
7747
|
|
|
7745
|
-
|
|
7748
|
+
exports.SelectComponents = SelectComponents;
|
|
7749
|
+
exports.default = Select;
|
|
7746
7750
|
//# sourceMappingURL=index.cjs.js.map
|