@alfalab/core-components-picker-button 11.1.2 → 11.1.3
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 +274 -4
- package/Component-72dda473.d.ts +53 -0
- package/Component-aed0af6e.d.ts +11 -0
- package/Component-dd8ca091.d.ts +3 -70
- package/Component-ebda875c.d.ts +98 -9
- package/Component-f12ee135.d.ts +72 -0
- package/Component.desktop.d.ts +1 -1
- package/Component.desktop.js +1 -1
- package/Component.mobile-96988a65.d.ts +6 -0
- package/Component.mobile.d.ts +1 -1
- package/Component.responsive.d.ts +1 -1
- package/cssm/component-1a4fbd11.d.ts +1 -1
- package/cssm/index-f12ee135.d.ts +1 -1
- package/{types-b0ff398d.d.ts → cssm/types-e40becc7.d.ts} +6 -2
- package/esm/Component.desktop.js +1 -1
- package/esm/component-1a4fbd11.d.ts +1 -1
- package/esm/field/Component.js +1 -1
- package/esm/field/index.css +6 -6
- package/esm/index-f12ee135.d.ts +1 -1
- package/esm/index.css +5 -5
- package/esm/option/Component.js +1 -1
- package/esm/option/index.css +4 -4
- package/{cssm/types-b0ff398d.d.ts → esm/types-e40becc7.d.ts} +6 -2
- package/field/Component.js +1 -1
- package/field/index.css +6 -6
- package/hook-8abfea97.d.ts +4 -4
- package/hook-ebda875c.d.ts +48 -0
- package/index-1a4fbd11.d.ts +2 -2
- package/index-bdb4c6b9.d.ts +180 -2
- package/index-c44170fe.d.ts +3 -145
- package/index-ebda875c.d.ts +191 -53
- package/index-f12ee135.d.ts +324 -3
- package/index.css +5 -5
- package/modern/Component.desktop.js +1 -1
- package/modern/component-1a4fbd11.d.ts +1 -1
- package/modern/field/Component.js +1 -1
- package/modern/field/index.css +6 -6
- package/modern/index-f12ee135.d.ts +1 -1
- package/modern/index.css +5 -5
- package/modern/option/Component.js +1 -1
- package/modern/option/index.css +4 -4
- package/{esm/types-b0ff398d.d.ts → modern/types-e40becc7.d.ts} +6 -2
- package/option/Component.js +1 -1
- package/option/index.css +4 -4
- package/package.json +2 -2
- package/shared-4cd3936b.d.ts +1 -59
- package/Component-63dec22f.d.ts +0 -184
- package/Component.modal.mobile-dd8ca091.d.ts +0 -60
- package/component-1a4fbd11.d.ts +0 -44
- package/modern/types-b0ff398d.d.ts +0 -272
- package/utils-1574ad8b.d.ts +0 -29
- package/utils-49cc3c24.d.ts +0 -8
- /package/{Component.responsive-3109f463.d.ts → Component.responsive-d7e9f69d.d.ts} +0 -0
- /package/{useSkeleton-ebda875c.d.ts → useSkeleton-1b036d4b.d.ts} +0 -0
|
@@ -265,8 +265,12 @@ type BottomSheetProps = {
|
|
|
265
265
|
*/
|
|
266
266
|
onOffsetChange?: (offset: number, percent: number) => void;
|
|
267
267
|
/**
|
|
268
|
-
* Вызывается
|
|
268
|
+
* Вызывается в начале свайпа
|
|
269
269
|
*/
|
|
270
|
-
|
|
270
|
+
onSwipeStart?: (event: HandledEvents) => void;
|
|
271
|
+
/**
|
|
272
|
+
* Вызывается после окончания свайпа
|
|
273
|
+
*/
|
|
274
|
+
onSwipeEnd?: (event: HandledEvents | null) => void;
|
|
271
275
|
};
|
|
272
276
|
export { BottomSheetTitleAlign, BottomSheetProps };
|
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_1168s","optionsPopover":"picker-button__optionsPopover_1168s","sideGap":"picker-button__sideGap_1168s","option":"picker-button__option_1168s"};
|
|
15
15
|
require('./index.css')
|
|
16
16
|
|
|
17
17
|
var SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
|
|
@@ -4,7 +4,7 @@ import { FC, ReactNode, RefObject } from "react";
|
|
|
4
4
|
import { NavigationBarProps } from "./index-c76d6398";
|
|
5
5
|
import { SwipeableHandlers } from "react-swipeable";
|
|
6
6
|
import { BackdropProps } from "./index-ebda875c";
|
|
7
|
-
import { BottomSheetProps } from "./types-
|
|
7
|
+
import { BottomSheetProps } from "./types-e40becc7";
|
|
8
8
|
type FooterProps = {
|
|
9
9
|
/**
|
|
10
10
|
* Контент футера
|
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_fnw1k","addonsContainer":"picker-button__addonsContainer_fnw1k","showControlIcon":"picker-button__showControlIcon_fnw1k","open":"picker-button__open_fnw1k","linkOpen":"picker-button__linkOpen_fnw1k"};
|
|
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: p59uq */
|
|
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_fnw1k {
|
|
21
21
|
display: flex;
|
|
22
22
|
transition: transform 0.15s ease-in-out;
|
|
23
|
-
} .picker-
|
|
23
|
+
} .picker-button__addonsContainer_fnw1k {
|
|
24
24
|
display: flex
|
|
25
|
-
} .picker-
|
|
25
|
+
} .picker-button__addonsContainer_fnw1k.picker-button__showControlIcon_fnw1k {
|
|
26
26
|
margin-right: var(--gap-2xs);
|
|
27
|
-
} .picker-
|
|
27
|
+
} .picker-button__open_fnw1k {
|
|
28
28
|
transform: var(--arrow-transform);
|
|
29
|
-
} .picker-
|
|
29
|
+
} .picker-button__linkOpen_fnw1k:not(:hover) {
|
|
30
30
|
background-color: var(--color-light-specialbg-secondary-transparent);
|
|
31
31
|
}
|
package/esm/index-f12ee135.d.ts
CHANGED
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: i56f1 */
|
|
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_1168s {
|
|
20
20
|
min-width: auto;
|
|
21
|
-
} .cc-picker-button.picker-
|
|
21
|
+
} .cc-picker-button.picker-button__optionsPopover_1168s.picker-button__sideGap_1168s {
|
|
22
22
|
padding: 0 var(--gap-xs);
|
|
23
|
-
} .cc-picker-button .picker-
|
|
23
|
+
} .cc-picker-button .picker-button__option_1168s {
|
|
24
24
|
padding: 0 var(--gap-m)
|
|
25
|
-
} .cc-picker-button .picker-
|
|
25
|
+
} .cc-picker-button .picker-button__option_1168s: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_1iv42","icon":"picker-button__icon_1iv42","content":"picker-button__content_1iv42"};
|
|
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: 1vc1s */
|
|
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_1iv42 {
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: center;
|
|
21
|
-
} .picker-
|
|
21
|
+
} .picker-button__icon_1iv42 {
|
|
22
22
|
display: flex;
|
|
23
23
|
margin-right: var(--gap-s);
|
|
24
|
-
} .picker-
|
|
24
|
+
} .picker-button__content_1iv42 {
|
|
25
25
|
overflow: hidden;
|
|
26
26
|
flex: 1;
|
|
27
27
|
text-overflow: ellipsis;
|
|
@@ -265,8 +265,12 @@ type BottomSheetProps = {
|
|
|
265
265
|
*/
|
|
266
266
|
onOffsetChange?: (offset: number, percent: number) => void;
|
|
267
267
|
/**
|
|
268
|
-
* Вызывается
|
|
268
|
+
* Вызывается в начале свайпа
|
|
269
269
|
*/
|
|
270
|
-
|
|
270
|
+
onSwipeStart?: (event: HandledEvents) => void;
|
|
271
|
+
/**
|
|
272
|
+
* Вызывается после окончания свайпа
|
|
273
|
+
*/
|
|
274
|
+
onSwipeEnd?: (event: HandledEvents | null) => void;
|
|
271
275
|
};
|
|
272
276
|
export { BottomSheetTitleAlign, BottomSheetProps };
|
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_fnw1k","addonsContainer":"picker-button__addonsContainer_fnw1k","showControlIcon":"picker-button__showControlIcon_fnw1k","open":"picker-button__open_fnw1k","linkOpen":"picker-button__linkOpen_fnw1k"};
|
|
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: p59uq */
|
|
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_fnw1k {
|
|
21
21
|
display: flex;
|
|
22
22
|
transition: transform 0.15s ease-in-out;
|
|
23
|
-
} .picker-
|
|
23
|
+
} .picker-button__addonsContainer_fnw1k {
|
|
24
24
|
display: flex
|
|
25
|
-
} .picker-
|
|
25
|
+
} .picker-button__addonsContainer_fnw1k.picker-button__showControlIcon_fnw1k {
|
|
26
26
|
margin-right: var(--gap-2xs);
|
|
27
|
-
} .picker-
|
|
27
|
+
} .picker-button__open_fnw1k {
|
|
28
28
|
transform: var(--arrow-transform);
|
|
29
|
-
} .picker-
|
|
29
|
+
} .picker-button__linkOpen_fnw1k: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-ebda875c").FooterProps> | undefined;
|
|
55
|
+
Header?: import("react").FC<import("./Component-aed0af6e").HeaderProps> | undefined;
|
|
56
|
+
headerProps?: import("./Component-aed0af6e").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-ebda875c";
|
|
90
90
|
export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { OptionProps, OptionShape } from "./typings-dd8ca091";
|
|
4
|
+
type OptionsFetcherResponse = {
|
|
5
|
+
options: OptionShape[];
|
|
6
|
+
hasMore: boolean;
|
|
7
|
+
};
|
|
8
|
+
type useLazyLoadingProps = {
|
|
9
|
+
/** Количество элементов на "странице" */
|
|
10
|
+
limit?: number;
|
|
11
|
+
/** Начальный номер "страницы" */
|
|
12
|
+
initialOffset?: number;
|
|
13
|
+
/** Скелетон загружаемых элементов */
|
|
14
|
+
skeleton?: React.ReactNode;
|
|
15
|
+
/** Компонент пункта меню */
|
|
16
|
+
Option?: React.FC<OptionProps>;
|
|
17
|
+
/**
|
|
18
|
+
* Функция-загрузчик опций.
|
|
19
|
+
* @param offset - текущая страница
|
|
20
|
+
* @param limit - количество элементов на странице
|
|
21
|
+
* @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList
|
|
22
|
+
* @returns Promise<{
|
|
23
|
+
* options - список опций следующей "страницы". Они аппендятся к предыдущим
|
|
24
|
+
* hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать "следующую страницу")
|
|
25
|
+
* }>
|
|
26
|
+
*/
|
|
27
|
+
optionsFetcher(offset: number, limit: number, queryString?: string): Promise<OptionsFetcherResponse>;
|
|
28
|
+
};
|
|
29
|
+
declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton, Option, }: useLazyLoadingProps): {
|
|
30
|
+
optionsProps: {
|
|
31
|
+
Option: (props: OptionProps) => React.JSX.Element;
|
|
32
|
+
options: OptionShape[];
|
|
33
|
+
optionsListProps: {
|
|
34
|
+
ref: React.RefObject<HTMLDivElement>;
|
|
35
|
+
inputProps: {
|
|
36
|
+
onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
|
|
37
|
+
value: string;
|
|
38
|
+
}) => void;
|
|
39
|
+
value: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
onOpen: (payload: {
|
|
43
|
+
open?: boolean;
|
|
44
|
+
}) => void;
|
|
45
|
+
};
|
|
46
|
+
reset: () => void;
|
|
47
|
+
};
|
|
48
|
+
export { useLazyLoading };
|
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;
|
|
5
4
|
declare const isClient: () => boolean;
|
|
6
5
|
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 {
|
|
22
|
+
export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils, fnUtils };
|
package/index-bdb4c6b9.d.ts
CHANGED
|
@@ -1,2 +1,180 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react-transition-group" />
|
|
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 };
|
package/index-c44170fe.d.ts
CHANGED
|
@@ -1,146 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from "react";
|
|
3
|
-
import {
|
|
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
|
-
};
|
|
3
|
+
import { BaseInputProps } from "./index-ebda875c";
|
|
144
4
|
type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
|
|
145
5
|
/**
|
|
146
6
|
* Контрольная точка, с нее начинается desktop версия
|
|
@@ -152,13 +12,11 @@ type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> &
|
|
|
152
12
|
*/
|
|
153
13
|
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
154
14
|
};
|
|
155
|
-
declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "
|
|
15
|
+
declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "colorStyles" | "FormControlComponent"> & {
|
|
156
16
|
breakpoint?: number | undefined;
|
|
157
17
|
defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
|
|
158
18
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
159
19
|
type InputDesktopProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
|
|
160
20
|
declare const InputDesktop: React.ForwardRefExoticComponent<InputDesktopProps & React.RefAttributes<HTMLInputElement>>;
|
|
161
|
-
|
|
162
|
-
declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
|
|
163
|
-
export { InputProps, Input, InputDesktopProps, InputDesktop, InputMobileProps, InputMobile };
|
|
21
|
+
export { InputProps, Input, InputDesktopProps, InputDesktop };
|
|
164
22
|
export * from "./Component.desktop-785df74d";
|