@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.
Files changed (54) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/Datepicker/index.cjs.js +3 -3
  3. package/dist/Datepicker/index.cjs.js.map +1 -1
  4. package/dist/Datepicker/index.js +3 -3
  5. package/dist/Datepicker/index.js.map +1 -1
  6. package/dist/Datepicker/types/components/BubbleBox/index.d.ts +1 -0
  7. package/dist/Datepicker/types/components/Select/Select.d.ts +27 -0
  8. package/dist/Datepicker/types/components/Select/index.d.ts +1 -1
  9. package/dist/Datepicker/types/components/SvgBorder/SvgBorder.d.ts +18 -0
  10. package/dist/Datepicker/types/components/SvgBorder/index.d.ts +3 -0
  11. package/dist/Datepicker/types/components/SvgBorder/utils.d.ts +1 -0
  12. package/dist/Datepicker/types/components/index.d.ts +3 -1
  13. package/dist/Datepicker/types/index.d.ts +1 -0
  14. package/dist/Select/index.cjs.js +8 -4
  15. package/dist/Select/index.cjs.js.map +1 -1
  16. package/dist/Select/index.d.ts +34 -2
  17. package/dist/Select/index.js +5 -4
  18. package/dist/Select/index.js.map +1 -1
  19. package/dist/Select/types/components/BubbleBox/index.d.ts +1 -0
  20. package/dist/Select/types/components/Select/Select.d.ts +27 -0
  21. package/dist/Select/types/components/Select/index.d.ts +1 -1
  22. package/dist/Select/types/components/SvgBorder/SvgBorder.d.ts +18 -0
  23. package/dist/Select/types/components/SvgBorder/index.d.ts +3 -0
  24. package/dist/Select/types/components/SvgBorder/utils.d.ts +1 -0
  25. package/dist/Select/types/components/index.d.ts +3 -1
  26. package/dist/Select/types/index.d.ts +1 -0
  27. package/dist/SelectCreatable/index.cjs.js +3 -3
  28. package/dist/SelectCreatable/index.cjs.js.map +1 -1
  29. package/dist/SelectCreatable/index.js +3 -3
  30. package/dist/SelectCreatable/index.js.map +1 -1
  31. package/dist/SelectCreatable/types/components/BubbleBox/index.d.ts +1 -0
  32. package/dist/SelectCreatable/types/components/Select/Select.d.ts +27 -0
  33. package/dist/SelectCreatable/types/components/Select/index.d.ts +1 -1
  34. package/dist/SelectCreatable/types/components/SvgBorder/SvgBorder.d.ts +18 -0
  35. package/dist/SelectCreatable/types/components/SvgBorder/index.d.ts +3 -0
  36. package/dist/SelectCreatable/types/components/SvgBorder/utils.d.ts +1 -0
  37. package/dist/SelectCreatable/types/components/index.d.ts +3 -1
  38. package/dist/SelectCreatable/types/index.d.ts +1 -0
  39. package/dist/index.d.ts +26 -1
  40. package/dist/index.js +83 -40
  41. package/dist/index.js.map +1 -1
  42. package/dist/types/components/BubbleBox/index.d.ts +1 -0
  43. package/dist/types/components/Select/Select.d.ts +27 -0
  44. package/dist/types/components/Select/index.d.ts +1 -1
  45. package/dist/types/components/SvgBorder/SvgBorder.d.ts +18 -0
  46. package/dist/types/components/SvgBorder/index.d.ts +3 -0
  47. package/dist/types/components/SvgBorder/utils.d.ts +1 -0
  48. package/dist/types/components/index.d.ts +3 -1
  49. package/dist/types/index.d.ts +1 -0
  50. package/package.json +1 -1
  51. /package/dist/Datepicker/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
  52. /package/dist/Select/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
  53. /package/dist/SelectCreatable/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
  54. /package/dist/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
@@ -1,2 +1,3 @@
1
1
  export { default } from './BubbleBox';
2
2
  export type { BubbleBoxProps } from './BubbleBox';
3
+ export * from './utils';
@@ -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;
@@ -1,4 +1,4 @@
1
- export { default } from './Select';
1
+ 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';
@@ -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,3 @@
1
+ export { default } from './SvgBorder';
2
+ export type { SvgBorderProps } from './SvgBorder';
3
+ export * from './utils';
@@ -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';
@@ -1 +1,2 @@
1
1
  export * from './components';
2
+ export * from './hooks/useClientRect';
@@ -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
- module.exports = Select;
7748
+ exports.SelectComponents = SelectComponents;
7749
+ exports.default = Select;
7746
7750
  //# sourceMappingURL=index.cjs.js.map