@alfalab/core-components-picker-button 11.1.3 → 11.1.5
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/Component-1a4fbd11.d.ts +4 -274
- package/Component-63dec22f.d.ts +184 -0
- package/Component-dd8ca091.d.ts +70 -3
- package/Component-ebda875c.d.ts +9 -98
- package/Component.desktop.d.ts +1 -1
- package/Component.desktop.js +1 -1
- package/Component.mobile.d.ts +1 -1
- package/Component.modal.mobile-dd8ca091.d.ts +60 -0
- package/Component.responsive.d.ts +1 -1
- package/component-1a4fbd11.d.ts +44 -0
- package/esm/Component.desktop.js +1 -1
- package/esm/field/Component.js +1 -1
- package/esm/field/index.css +6 -6
- package/esm/index.css +5 -5
- package/esm/option/Component.js +1 -1
- package/esm/option/index.css +4 -4
- package/field/Component.js +1 -1
- package/field/index.css +6 -6
- package/hook-8abfea97.d.ts +4 -4
- package/index-1a4fbd11.d.ts +2 -2
- package/index-bdb4c6b9.d.ts +2 -180
- package/index-c44170fe.d.ts +145 -3
- package/index-ebda875c.d.ts +53 -191
- package/index-f12ee135.d.ts +3 -324
- package/index.css +5 -5
- package/modern/Component.desktop.js +1 -1
- package/modern/field/Component.js +1 -1
- package/modern/field/index.css +6 -6
- package/modern/index.css +5 -5
- package/modern/option/Component.js +1 -1
- package/modern/option/index.css +4 -4
- package/option/Component.js +1 -1
- package/option/index.css +4 -4
- package/package.json +2 -2
- package/shared-4cd3936b.d.ts +59 -1
- package/types-e40becc7.d.ts +276 -0
- package/utils-1574ad8b.d.ts +29 -0
- package/utils-49cc3c24.d.ts +8 -0
- package/Component-72dda473.d.ts +0 -53
- package/Component-aed0af6e.d.ts +0 -11
- package/Component-f12ee135.d.ts +0 -72
- package/Component.mobile-96988a65.d.ts +0 -6
- package/hook-ebda875c.d.ts +0 -48
- /package/{Component.responsive-d7e9f69d.d.ts → Component.responsive-3109f463.d.ts} +0 -0
- /package/{useSkeleton-1b036d4b.d.ts → useSkeleton-ebda875c.d.ts} +0 -0
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ModalMobile } from "./Component.mobile-f1f15074";
|
|
4
|
+
import { UseSelectWithApplyProps } from "./hook-8abfea97";
|
|
5
|
+
import { BaseSelectProps } from "./typings-dd8ca091";
|
|
6
|
+
type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
|
|
7
|
+
/**
|
|
8
|
+
* Показывать кнопку очистки
|
|
9
|
+
*/
|
|
10
|
+
showClear?: UseSelectWithApplyProps['showClear'];
|
|
11
|
+
/**
|
|
12
|
+
* Показывать пункт "Выбрать все"
|
|
13
|
+
*/
|
|
14
|
+
showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
|
|
15
|
+
/**
|
|
16
|
+
* Дополнительные пропсы шапки модалки
|
|
17
|
+
*/
|
|
18
|
+
modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
|
|
19
|
+
/**
|
|
20
|
+
* Дополнительные пропсы модалки
|
|
21
|
+
*/
|
|
22
|
+
modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
|
|
23
|
+
/**
|
|
24
|
+
* Дополнительные пропсы футера модалки
|
|
25
|
+
*/
|
|
26
|
+
modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
|
|
27
|
+
showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
|
|
28
|
+
/**
|
|
29
|
+
* Использовать ли хук useSelectWithApply
|
|
30
|
+
*/
|
|
31
|
+
useWithApplyHook?: boolean;
|
|
32
|
+
};
|
|
33
|
+
declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
|
|
34
|
+
/**
|
|
35
|
+
* Показывать кнопку очистки
|
|
36
|
+
*/
|
|
37
|
+
showClear?: UseSelectWithApplyProps['showClear'];
|
|
38
|
+
/**
|
|
39
|
+
* Показывать пункт "Выбрать все"
|
|
40
|
+
*/
|
|
41
|
+
showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
|
|
42
|
+
/**
|
|
43
|
+
* Дополнительные пропсы шапки модалки
|
|
44
|
+
*/
|
|
45
|
+
modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
|
|
46
|
+
/**
|
|
47
|
+
* Дополнительные пропсы модалки
|
|
48
|
+
*/
|
|
49
|
+
modalProps?: Partial<import("./typings-bdb4c6b9").ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
|
|
50
|
+
/**
|
|
51
|
+
* Дополнительные пропсы футера модалки
|
|
52
|
+
*/
|
|
53
|
+
modalFooterProps?: Partial<import("./Component.mobile-f1f15074").FooterProps> | undefined;
|
|
54
|
+
showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
|
|
55
|
+
/**
|
|
56
|
+
* Использовать ли хук useSelectWithApply
|
|
57
|
+
*/
|
|
58
|
+
useWithApplyHook?: boolean | undefined;
|
|
59
|
+
} & React.RefAttributes<unknown>>;
|
|
60
|
+
export { SelectModalMobileProps, SelectModalMobile };
|
|
@@ -11,7 +11,7 @@ type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalMobilePr
|
|
|
11
11
|
*/
|
|
12
12
|
breakpoint?: number;
|
|
13
13
|
};
|
|
14
|
-
declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("./shared-4cd3936b").BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "
|
|
14
|
+
declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("./shared-4cd3936b").BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
|
|
15
15
|
options: ((import("./shared-4cd3936b").OptionShape | import("./shared-4cd3936b").GroupShape) & {
|
|
16
16
|
icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
|
|
17
17
|
})[];
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FC, ReactNode, RefObject } from "react";
|
|
4
|
+
import { NavigationBarProps } from "./index-c76d6398";
|
|
5
|
+
import { SwipeableHandlers } from "react-swipeable";
|
|
6
|
+
import { BackdropProps } from "./index-ebda875c";
|
|
7
|
+
import { BottomSheetProps } from "./types-e40becc7";
|
|
8
|
+
type FooterProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Контент футера
|
|
11
|
+
*/
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Фиксирует футер
|
|
15
|
+
*/
|
|
16
|
+
sticky?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Дополнительный класс
|
|
19
|
+
*/
|
|
20
|
+
className?: string;
|
|
21
|
+
};
|
|
22
|
+
declare const Footer: FC<FooterProps>;
|
|
23
|
+
type HeaderProps = Omit<NavigationBarProps, "view" | "size"> & {
|
|
24
|
+
headerRef: RefObject<HTMLDivElement>;
|
|
25
|
+
headerOffset: number;
|
|
26
|
+
};
|
|
27
|
+
declare const Header: FC<HeaderProps>;
|
|
28
|
+
type SwipeableBackdropProps = BackdropProps & {
|
|
29
|
+
/**
|
|
30
|
+
* Прозрачность бэкдропа
|
|
31
|
+
*/
|
|
32
|
+
opacity?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Обработчики свайпа
|
|
35
|
+
*/
|
|
36
|
+
handlers?: SwipeableHandlers;
|
|
37
|
+
/**
|
|
38
|
+
* Время анимации opacity
|
|
39
|
+
*/
|
|
40
|
+
opacityTimeout?: number;
|
|
41
|
+
};
|
|
42
|
+
declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
|
|
43
|
+
declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
|
|
44
|
+
export { FooterProps, Footer, HeaderProps, Header, SwipeableBackdropProps, SwipeableBackdrop, BottomSheet };
|
package/esm/Component.desktop.js
CHANGED
|
@@ -11,7 +11,7 @@ import '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
|
11
11
|
import '@alfalab/icons-glyph/MoreMIcon';
|
|
12
12
|
import '@alfalab/icons-glyph/MoreSIcon';
|
|
13
13
|
|
|
14
|
-
var styles = {"container":"picker-
|
|
14
|
+
var styles = {"container":"picker-button__container_an5lv","optionsPopover":"picker-button__optionsPopover_an5lv","sideGap":"picker-button__sideGap_an5lv","option":"picker-button__option_an5lv"};
|
|
15
15
|
require('./index.css')
|
|
16
16
|
|
|
17
17
|
var SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
|
package/esm/field/Component.js
CHANGED
|
@@ -8,7 +8,7 @@ import '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
|
8
8
|
import '@alfalab/icons-glyph/MoreMIcon';
|
|
9
9
|
import '@alfalab/icons-glyph/MoreSIcon';
|
|
10
10
|
|
|
11
|
-
var styles = {"iconContainer":"picker-
|
|
11
|
+
var styles = {"iconContainer":"picker-button__iconContainer_w6yyy","addonsContainer":"picker-button__addonsContainer_w6yyy","showControlIcon":"picker-button__showControlIcon_w6yyy","open":"picker-button__open_w6yyy","linkOpen":"picker-button__linkOpen_w6yyy"};
|
|
12
12
|
require('./index.css')
|
|
13
13
|
|
|
14
14
|
var Field = function (_a) {
|
package/esm/field/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: hzlg0 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -17,15 +17,15 @@
|
|
|
17
17
|
} :root {
|
|
18
18
|
} :root {
|
|
19
19
|
--arrow-transform: rotate(180deg);
|
|
20
|
-
} .picker-
|
|
20
|
+
} .picker-button__iconContainer_w6yyy {
|
|
21
21
|
display: flex;
|
|
22
22
|
transition: transform 0.15s ease-in-out;
|
|
23
|
-
} .picker-
|
|
23
|
+
} .picker-button__addonsContainer_w6yyy {
|
|
24
24
|
display: flex
|
|
25
|
-
} .picker-
|
|
25
|
+
} .picker-button__addonsContainer_w6yyy.picker-button__showControlIcon_w6yyy {
|
|
26
26
|
margin-right: var(--gap-2xs);
|
|
27
|
-
} .picker-
|
|
27
|
+
} .picker-button__open_w6yyy {
|
|
28
28
|
transform: var(--arrow-transform);
|
|
29
|
-
} .picker-
|
|
29
|
+
} .picker-button__linkOpen_w6yyy:not(:hover) {
|
|
30
30
|
background-color: var(--color-light-specialbg-secondary-transparent);
|
|
31
31
|
}
|
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: l9udy */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
--gap-m: 16px;
|
|
17
17
|
} :root {
|
|
18
18
|
} :root {
|
|
19
|
-
} .picker-
|
|
19
|
+
} .picker-button__container_an5lv {
|
|
20
20
|
min-width: auto;
|
|
21
|
-
} .cc-picker-button.picker-
|
|
21
|
+
} .cc-picker-button.picker-button__optionsPopover_an5lv.picker-button__sideGap_an5lv {
|
|
22
22
|
padding: 0 var(--gap-xs);
|
|
23
|
-
} .cc-picker-button .picker-
|
|
23
|
+
} .cc-picker-button .picker-button__option_an5lv {
|
|
24
24
|
padding: 0 var(--gap-m)
|
|
25
|
-
} .cc-picker-button .picker-
|
|
25
|
+
} .cc-picker-button .picker-button__option_an5lv:before {
|
|
26
26
|
/* Удаляем разделители у опций выпадающего списка. */
|
|
27
27
|
display: none;
|
|
28
28
|
}
|
package/esm/option/Component.js
CHANGED
|
@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Option as Option$1 } from '@alfalab/core-components-select/esm/shared';
|
|
4
4
|
|
|
5
|
-
var styles = {"container":"picker-
|
|
5
|
+
var styles = {"container":"picker-button__container_d2xz0","icon":"picker-button__icon_d2xz0","content":"picker-button__content_d2xz0"};
|
|
6
6
|
require('./index.css')
|
|
7
7
|
|
|
8
8
|
var Option = function (_a) {
|
package/esm/option/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1o6dd */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
--gap-s: 12px;
|
|
16
16
|
} :root {
|
|
17
17
|
} :root {
|
|
18
|
-
} .picker-
|
|
18
|
+
} .picker-button__container_d2xz0 {
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: center;
|
|
21
|
-
} .picker-
|
|
21
|
+
} .picker-button__icon_d2xz0 {
|
|
22
22
|
display: flex;
|
|
23
23
|
margin-right: var(--gap-s);
|
|
24
|
-
} .picker-
|
|
24
|
+
} .picker-button__content_d2xz0 {
|
|
25
25
|
overflow: hidden;
|
|
26
26
|
flex: 1;
|
|
27
27
|
text-overflow: ellipsis;
|
package/field/Component.js
CHANGED
|
@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
17
17
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
18
18
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
19
19
|
|
|
20
|
-
var styles = {"iconContainer":"picker-
|
|
20
|
+
var styles = {"iconContainer":"picker-button__iconContainer_w6yyy","addonsContainer":"picker-button__addonsContainer_w6yyy","showControlIcon":"picker-button__showControlIcon_w6yyy","open":"picker-button__open_w6yyy","linkOpen":"picker-button__linkOpen_w6yyy"};
|
|
21
21
|
require('./index.css')
|
|
22
22
|
|
|
23
23
|
var Field = function (_a) {
|
package/field/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: hzlg0 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -17,15 +17,15 @@
|
|
|
17
17
|
} :root {
|
|
18
18
|
} :root {
|
|
19
19
|
--arrow-transform: rotate(180deg);
|
|
20
|
-
} .picker-
|
|
20
|
+
} .picker-button__iconContainer_w6yyy {
|
|
21
21
|
display: flex;
|
|
22
22
|
transition: transform 0.15s ease-in-out;
|
|
23
|
-
} .picker-
|
|
23
|
+
} .picker-button__addonsContainer_w6yyy {
|
|
24
24
|
display: flex
|
|
25
|
-
} .picker-
|
|
25
|
+
} .picker-button__addonsContainer_w6yyy.picker-button__showControlIcon_w6yyy {
|
|
26
26
|
margin-right: var(--gap-2xs);
|
|
27
|
-
} .picker-
|
|
27
|
+
} .picker-button__open_w6yyy {
|
|
28
28
|
transform: var(--arrow-transform);
|
|
29
|
-
} .picker-
|
|
29
|
+
} .picker-button__linkOpen_w6yyy:not(:hover) {
|
|
30
30
|
background-color: var(--color-light-specialbg-secondary-transparent);
|
|
31
31
|
}
|
package/hook-8abfea97.d.ts
CHANGED
|
@@ -51,9 +51,9 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
|
|
|
51
51
|
*/
|
|
52
52
|
selectedDraft?: OptionShape[] | undefined;
|
|
53
53
|
OptionsList?: import("react").FC<import("./typings-dd8ca091").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
|
|
54
|
-
Footer?: import("react").FC<import("./Component-
|
|
55
|
-
Header?: import("react").FC<import("./Component-
|
|
56
|
-
headerProps?: import("./Component-
|
|
54
|
+
Footer?: import("react").FC<import("./Component-dd8ca091").FooterProps> | undefined;
|
|
55
|
+
Header?: import("react").FC<import("./Component-ebda875c").HeaderProps> | undefined;
|
|
56
|
+
headerProps?: import("./Component-ebda875c").HeaderProps | undefined;
|
|
57
57
|
showHeaderWithSelectAll?: boolean | undefined;
|
|
58
58
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
59
59
|
optionsListProps: {
|
|
@@ -86,5 +86,5 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
|
|
|
86
86
|
accessor?: ((option: OptionShape) => string) | undefined;
|
|
87
87
|
} | undefined;
|
|
88
88
|
};
|
|
89
|
-
export * from "./Component-
|
|
89
|
+
export * from "./Component-dd8ca091";
|
|
90
90
|
export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };
|
package/index-1a4fbd11.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { PaddingType } from "./index-72dda473";
|
|
4
|
+
declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
|
|
4
5
|
declare const isClient: () => boolean;
|
|
5
6
|
declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
|
|
6
|
-
declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
|
|
7
7
|
declare function easeInOutQuad(x: number): number;
|
|
8
8
|
declare const easingFns: {
|
|
9
9
|
easeInOutQuad: typeof easeInOutQuad;
|
|
@@ -19,4 +19,4 @@ declare function isNil(value: unknown): boolean;
|
|
|
19
19
|
declare const fnUtils: {
|
|
20
20
|
isNil: typeof isNil;
|
|
21
21
|
};
|
|
22
|
-
export { isClient, getDataTestId,
|
|
22
|
+
export { createPaddingStyle, isClient, getDataTestId, easingFns, inputUtils, fnUtils };
|
package/index-bdb4c6b9.d.ts
CHANGED
|
@@ -1,180 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
4
|
-
import React from "react";
|
|
5
|
-
import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
|
|
6
|
-
import { TransitionProps } from "react-transition-group/Transition";
|
|
7
|
-
import { BackdropProps, PortalProps } from "./index-ebda875c";
|
|
8
|
-
type BaseModalProps = {
|
|
9
|
-
/**
|
|
10
|
-
* Контент
|
|
11
|
-
*/
|
|
12
|
-
children?: ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* Компонент бэкдропа
|
|
15
|
-
*/
|
|
16
|
-
Backdrop?: FC<BackdropProps>;
|
|
17
|
-
/**
|
|
18
|
-
* Свойства для Бэкдропа
|
|
19
|
-
*/
|
|
20
|
-
backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
|
|
21
|
-
/**
|
|
22
|
-
* Нода, компонент или функция возвращающая их
|
|
23
|
-
*
|
|
24
|
-
* Контейнер к которому будут добавляться порталы
|
|
25
|
-
*/
|
|
26
|
-
container?: PortalProps["getPortalContainer"];
|
|
27
|
-
/**
|
|
28
|
-
* Отключает автоматический перевод фокуса на модалку при открытии
|
|
29
|
-
* @default false
|
|
30
|
-
*/
|
|
31
|
-
disableAutoFocus?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Отключает ловушку фокуса
|
|
34
|
-
* @default false
|
|
35
|
-
*/
|
|
36
|
-
disableFocusLock?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
|
|
39
|
-
* @default false
|
|
40
|
-
*/
|
|
41
|
-
disableRestoreFocus?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* Отключает вызов `callback` при нажатии Escape
|
|
44
|
-
* @default false
|
|
45
|
-
*/
|
|
46
|
-
disableEscapeKeyDown?: boolean;
|
|
47
|
-
/**
|
|
48
|
-
* Отключает вызов `callback` при клике на бэкдроп
|
|
49
|
-
* @default false
|
|
50
|
-
*/
|
|
51
|
-
disableBackdropClick?: boolean;
|
|
52
|
-
/**
|
|
53
|
-
* Отключает блокировку скролла при открытии модального окна
|
|
54
|
-
* @default false
|
|
55
|
-
*/
|
|
56
|
-
disableBlockingScroll?: boolean;
|
|
57
|
-
/**
|
|
58
|
-
* Содержимое модалки всегда в DOM
|
|
59
|
-
* @default false
|
|
60
|
-
*/
|
|
61
|
-
keepMounted?: boolean;
|
|
62
|
-
/**
|
|
63
|
-
* Управление видимостью модалки
|
|
64
|
-
*/
|
|
65
|
-
open: boolean;
|
|
66
|
-
/**
|
|
67
|
-
* Дополнительный класс
|
|
68
|
-
*/
|
|
69
|
-
className?: string;
|
|
70
|
-
/**
|
|
71
|
-
* Дополнительный класс
|
|
72
|
-
*/
|
|
73
|
-
contentClassName?: string;
|
|
74
|
-
/**
|
|
75
|
-
* Дополнительные пропсы на обертку контента
|
|
76
|
-
*/
|
|
77
|
-
contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
78
|
-
/**
|
|
79
|
-
* Дополнительные пропсы на компонентную обертку контента
|
|
80
|
-
*/
|
|
81
|
-
componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
82
|
-
/**
|
|
83
|
-
* Дополнительный класс для обертки (Modal)
|
|
84
|
-
*/
|
|
85
|
-
wrapperClassName?: string;
|
|
86
|
-
/**
|
|
87
|
-
* Обработчик скролла контента
|
|
88
|
-
*/
|
|
89
|
-
scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
|
|
90
|
-
/**
|
|
91
|
-
* Пропсы для анимации (CSSTransition)
|
|
92
|
-
*/
|
|
93
|
-
transitionProps?: Partial<TransitionProps>;
|
|
94
|
-
/**
|
|
95
|
-
* Рендерить ли в контейнер через портал.
|
|
96
|
-
* @default true
|
|
97
|
-
*/
|
|
98
|
-
usePortal?: boolean;
|
|
99
|
-
/**
|
|
100
|
-
* Обработчик события нажатия на бэкдроп
|
|
101
|
-
*/
|
|
102
|
-
onBackdropClick?: (event: MouseEvent) => void;
|
|
103
|
-
/**
|
|
104
|
-
* Обработчик события нажатия на Escape
|
|
105
|
-
*
|
|
106
|
-
* Если `disableEscapeKeyDown` - false и модальное окно в фокусе
|
|
107
|
-
*/
|
|
108
|
-
onEscapeKeyDown?: (event: KeyboardEvent) => void;
|
|
109
|
-
/**
|
|
110
|
-
* Обработчик закрытия
|
|
111
|
-
*/
|
|
112
|
-
onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
|
|
113
|
-
/**
|
|
114
|
-
* Обработчик события onEntered компонента Transition
|
|
115
|
-
*/
|
|
116
|
-
onMount?: () => void;
|
|
117
|
-
/**
|
|
118
|
-
* Обработчик события onExited компонента Transition
|
|
119
|
-
*/
|
|
120
|
-
onUnmount?: () => void;
|
|
121
|
-
/**
|
|
122
|
-
* Идентификатор для систем автоматизированного тестирования
|
|
123
|
-
*/
|
|
124
|
-
dataTestId?: string;
|
|
125
|
-
/**
|
|
126
|
-
* z-index компонента
|
|
127
|
-
*/
|
|
128
|
-
zIndex?: number;
|
|
129
|
-
/**
|
|
130
|
-
* Реф, который должен быть установлен компонентной области
|
|
131
|
-
*/
|
|
132
|
-
componentRef?: MutableRefObject<HTMLDivElement | null>;
|
|
133
|
-
};
|
|
134
|
-
type BaseModalContext = {
|
|
135
|
-
parentRef: React.RefObject<HTMLDivElement>;
|
|
136
|
-
componentRef: React.RefObject<HTMLDivElement>;
|
|
137
|
-
hasFooter?: boolean;
|
|
138
|
-
hasHeader?: boolean;
|
|
139
|
-
hasScroll?: boolean;
|
|
140
|
-
headerHighlighted?: boolean;
|
|
141
|
-
footerHighlighted?: boolean;
|
|
142
|
-
headerOffset?: number;
|
|
143
|
-
setHeaderOffset: (offset: number) => void;
|
|
144
|
-
contentRef: Ref<HTMLElement>;
|
|
145
|
-
setHasHeader: (exists: boolean) => void;
|
|
146
|
-
setHasFooter: (exists: boolean) => void;
|
|
147
|
-
onClose: Required<BaseModalProps>["onClose"];
|
|
148
|
-
};
|
|
149
|
-
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
150
|
-
declare const BaseModalContext: React.Context<BaseModalContext>;
|
|
151
|
-
declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
152
|
-
declare function isScrolledToTop(target: HTMLElement): boolean;
|
|
153
|
-
declare function isScrolledToBottom(target: HTMLElement): boolean;
|
|
154
|
-
declare function hasScrollbar(target: HTMLElement): boolean;
|
|
155
|
-
declare const getScrollbarSize: () => number;
|
|
156
|
-
declare const restoreContainerStyles: (container: HTMLElement) => void;
|
|
157
|
-
declare const handleContainer: (container?: HTMLElement) => void;
|
|
158
|
-
type SavedStyle = {
|
|
159
|
-
value: string;
|
|
160
|
-
key: string;
|
|
161
|
-
el: HTMLElement;
|
|
162
|
-
};
|
|
163
|
-
type RestoreStyle = {
|
|
164
|
-
container: HTMLElement;
|
|
165
|
-
modals: number;
|
|
166
|
-
styles: SavedStyle[];
|
|
167
|
-
};
|
|
168
|
-
declare class ModalStore {
|
|
169
|
-
private readonly restoreStyles;
|
|
170
|
-
constructor();
|
|
171
|
-
getRestoreStyles: () => RestoreStyle[];
|
|
172
|
-
}
|
|
173
|
-
declare const getModalStore: () => ModalStore;
|
|
174
|
-
declare class GlobalStore {
|
|
175
|
-
private readonly modalStore;
|
|
176
|
-
constructor();
|
|
177
|
-
getModalStore: () => ModalStore;
|
|
178
|
-
}
|
|
179
|
-
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer, getModalStore, GlobalStore };
|
|
180
|
-
export type { SavedStyle };
|
|
1
|
+
export * from "./Component-ebda875c";
|
|
2
|
+
export * from "./utils-1574ad8b";
|
package/index-c44170fe.d.ts
CHANGED
|
@@ -1,6 +1,146 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { ChangeEvent, ElementType, InputHTMLAttributes, MouseEvent, ReactNode } from "react";
|
|
4
|
+
type StyleColors = {
|
|
5
|
+
default: {
|
|
6
|
+
[key: string]: string;
|
|
7
|
+
};
|
|
8
|
+
inverted: {
|
|
9
|
+
[key: string]: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "enterKeyHint"> & {
|
|
13
|
+
/**
|
|
14
|
+
* Значение поля ввода
|
|
15
|
+
*/
|
|
16
|
+
value?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Начальное значение поля
|
|
19
|
+
*/
|
|
20
|
+
defaultValue?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Растягивает компонент на ширину контейнера
|
|
23
|
+
*/
|
|
24
|
+
block?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Крестик для очистки поля
|
|
27
|
+
*/
|
|
28
|
+
clear?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Размер компонента
|
|
31
|
+
*/
|
|
32
|
+
size?: "s" | "m" | "l" | "xl";
|
|
33
|
+
/**
|
|
34
|
+
* Набор цветов для компонента
|
|
35
|
+
*/
|
|
36
|
+
colors?: "default" | "inverted";
|
|
37
|
+
/**
|
|
38
|
+
* Отображение ошибки
|
|
39
|
+
*/
|
|
40
|
+
error?: ReactNode | boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Отображение иконки успеха
|
|
43
|
+
*/
|
|
44
|
+
success?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Текст подсказки
|
|
47
|
+
*/
|
|
48
|
+
hint?: ReactNode;
|
|
49
|
+
/**
|
|
50
|
+
* Лейбл компонента
|
|
51
|
+
*/
|
|
52
|
+
label?: React.ReactNode;
|
|
53
|
+
/**
|
|
54
|
+
* Вид лейбла внутри / снаружи
|
|
55
|
+
*/
|
|
56
|
+
labelView?: "inner" | "outer";
|
|
57
|
+
/**
|
|
58
|
+
* Атрибут type
|
|
59
|
+
*/
|
|
60
|
+
type?: "number" | "card" | "email" | "money" | "password" | "tel" | "text";
|
|
61
|
+
/**
|
|
62
|
+
* Ref для обертки input
|
|
63
|
+
*/
|
|
64
|
+
wrapperRef?: React.Ref<HTMLDivElement> | null;
|
|
65
|
+
/**
|
|
66
|
+
* Слот слева
|
|
67
|
+
*/
|
|
68
|
+
leftAddons?: React.ReactNode;
|
|
69
|
+
/**
|
|
70
|
+
* Слот справа
|
|
71
|
+
*/
|
|
72
|
+
rightAddons?: React.ReactNode;
|
|
73
|
+
/**
|
|
74
|
+
* Слот под инпутом
|
|
75
|
+
*/
|
|
76
|
+
bottomAddons?: React.ReactNode;
|
|
77
|
+
/**
|
|
78
|
+
* Дополнительный класс
|
|
79
|
+
*/
|
|
80
|
+
className?: string;
|
|
81
|
+
/**
|
|
82
|
+
* Дополнительный класс для поля
|
|
83
|
+
*/
|
|
84
|
+
fieldClassName?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Дополнительный класс инпута
|
|
87
|
+
*/
|
|
88
|
+
inputClassName?: string;
|
|
89
|
+
/**
|
|
90
|
+
* Дополнительный класс для лейбла
|
|
91
|
+
*/
|
|
92
|
+
labelClassName?: string;
|
|
93
|
+
/**
|
|
94
|
+
* Дополнительный класс для аддонов
|
|
95
|
+
*/
|
|
96
|
+
addonsClassName?: string;
|
|
97
|
+
/**
|
|
98
|
+
* Класс, который будет установлен при фокусе
|
|
99
|
+
*/
|
|
100
|
+
focusedClassName?: string;
|
|
101
|
+
/**
|
|
102
|
+
* Класс, который будет установлен, если в поле есть значение
|
|
103
|
+
*/
|
|
104
|
+
filledClassName?: string;
|
|
105
|
+
/**
|
|
106
|
+
* Обработчик поля ввода
|
|
107
|
+
*/
|
|
108
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
|
|
109
|
+
value: string;
|
|
110
|
+
}) => void;
|
|
111
|
+
/**
|
|
112
|
+
* Обработчик нажатия на кнопку очистки
|
|
113
|
+
*/
|
|
114
|
+
onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
115
|
+
/**
|
|
116
|
+
* Обработчик клика по полю
|
|
117
|
+
*/
|
|
118
|
+
onClick?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
119
|
+
/**
|
|
120
|
+
* Обработчик MouseDown по полю
|
|
121
|
+
*/
|
|
122
|
+
onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
123
|
+
/**
|
|
124
|
+
* Обработчик MouseUp по полю
|
|
125
|
+
*/
|
|
126
|
+
onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
127
|
+
/**
|
|
128
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
129
|
+
*/
|
|
130
|
+
FormControlComponent?: ElementType;
|
|
131
|
+
/**
|
|
132
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
133
|
+
*/
|
|
134
|
+
dataTestId?: string;
|
|
135
|
+
/**
|
|
136
|
+
* Стили компонента для default и inverted режима.
|
|
137
|
+
*/
|
|
138
|
+
colorStyles?: StyleColors;
|
|
139
|
+
/**
|
|
140
|
+
* Запрещает ввод с клавиатуры
|
|
141
|
+
*/
|
|
142
|
+
disableUserInput?: boolean;
|
|
143
|
+
};
|
|
4
144
|
type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
|
|
5
145
|
/**
|
|
6
146
|
* Контрольная точка, с нее начинается desktop версия
|
|
@@ -12,11 +152,13 @@ type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> &
|
|
|
12
152
|
*/
|
|
13
153
|
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
14
154
|
};
|
|
15
|
-
declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "
|
|
155
|
+
declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
|
|
16
156
|
breakpoint?: number | undefined;
|
|
17
157
|
defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
|
|
18
158
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
19
159
|
type InputDesktopProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
|
|
20
160
|
declare const InputDesktop: React.ForwardRefExoticComponent<InputDesktopProps & React.RefAttributes<HTMLInputElement>>;
|
|
21
|
-
|
|
161
|
+
type InputMobileProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
|
|
162
|
+
declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
|
|
163
|
+
export { InputProps, Input, InputDesktopProps, InputDesktop, InputMobileProps, InputMobile };
|
|
22
164
|
export * from "./Component.desktop-785df74d";
|