@alfalab/core-components-input-autocomplete 9.3.21 → 9.3.23

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.
@@ -0,0 +1,468 @@
1
+ /// <reference types="react-transition-group" />
2
+ /// <reference types="react" />
3
+ import React from "react";
4
+ import { HTMLAttributes, ReactNode, RefObject, FC, KeyboardEvent, MouseEvent, MutableRefObject } from "react";
5
+ import { TransitionProps } from "react-transition-group/Transition";
6
+ import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
7
+ import { NavigationBarProps } from "./types-ebda875c";
8
+ import { SwipeableHandlers } from "react-swipeable";
9
+ type BackdropProps = Partial<TransitionProps> & {
10
+ /**
11
+ * Прозрачный бэкдроп
12
+ */
13
+ invisible?: boolean;
14
+ /**
15
+ * Управляет видимостью компонента
16
+ */
17
+ open: boolean;
18
+ /**
19
+ * Обработчик клика по бэкдропу
20
+ */
21
+ onClose?: (event: MouseEvent<HTMLElement>) => void;
22
+ /**
23
+ * Дополнительный класс
24
+ */
25
+ className?: string;
26
+ /**
27
+ * Классы анимации
28
+ *
29
+ * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
30
+ */
31
+ transitionClassNames?: string | CSSTransitionClassNames;
32
+ /**
33
+ * Идентификатор для систем автоматизированного тестирования
34
+ */
35
+ dataTestId?: string;
36
+ /**
37
+ * Дочерние элементы.
38
+ */
39
+ children?: ReactNode;
40
+ };
41
+ type PortalProps = {
42
+ /** Контент */
43
+ children?: ReactNode;
44
+ /**
45
+ * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
46
+ */
47
+ getPortalContainer?: () => Element;
48
+ /**
49
+ * Немедленно отрендерить дочерние элементы (false - контент будет отрендерен на след. рендер).
50
+ */
51
+ immediateMount?: boolean;
52
+ };
53
+ type BaseModalProps = {
54
+ /**
55
+ * Контент
56
+ */
57
+ children?: ReactNode;
58
+ /**
59
+ * Компонент бэкдропа
60
+ */
61
+ Backdrop?: FC<BackdropProps>;
62
+ /**
63
+ * Свойства для Бэкдропа
64
+ */
65
+ backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
66
+ /**
67
+ * Нода, компонент или функция возвращающая их
68
+ *
69
+ * Контейнер к которому будут добавляться порталы
70
+ */
71
+ container?: PortalProps["getPortalContainer"];
72
+ /**
73
+ * Отключает автоматический перевод фокуса на модалку при открытии
74
+ * @default false
75
+ */
76
+ disableAutoFocus?: boolean;
77
+ /**
78
+ * Отключает ловушку фокуса
79
+ * @default false
80
+ */
81
+ disableFocusLock?: boolean;
82
+ /**
83
+ * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
84
+ * @default false
85
+ */
86
+ disableRestoreFocus?: boolean;
87
+ /**
88
+ * Отключает вызов `callback` при нажатии Escape
89
+ * @default false
90
+ */
91
+ disableEscapeKeyDown?: boolean;
92
+ /**
93
+ * Отключает вызов `callback` при клике на бэкдроп
94
+ * @default false
95
+ */
96
+ disableBackdropClick?: boolean;
97
+ /**
98
+ * Отключает блокировку скролла при открытии модального окна
99
+ * @default false
100
+ */
101
+ disableBlockingScroll?: boolean;
102
+ /**
103
+ * Содержимое модалки всегда в DOM
104
+ * @default false
105
+ */
106
+ keepMounted?: boolean;
107
+ /**
108
+ * Управление видимостью модалки
109
+ */
110
+ open: boolean;
111
+ /**
112
+ * Дополнительный класс
113
+ */
114
+ className?: string;
115
+ /**
116
+ * Дополнительный класс
117
+ */
118
+ contentClassName?: string;
119
+ /**
120
+ * Дополнительный класс для обертки (Modal)
121
+ */
122
+ wrapperClassName?: string;
123
+ /**
124
+ * Обработчик скролла контента
125
+ */
126
+ scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
127
+ /**
128
+ * Пропсы для анимации (CSSTransition)
129
+ */
130
+ transitionProps?: Partial<TransitionProps>;
131
+ /**
132
+ * Обработчик события нажатия на бэкдроп
133
+ */
134
+ onBackdropClick?: (event: MouseEvent) => void;
135
+ /**
136
+ * Обработчик события нажатия на Escape
137
+ *
138
+ * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
139
+ */
140
+ onEscapeKeyDown?: (event: KeyboardEvent) => void;
141
+ /**
142
+ * Обработчик закрытия
143
+ */
144
+ onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
145
+ /**
146
+ * Обработчик события onEntered компонента Transition
147
+ */
148
+ onMount?: () => void;
149
+ /**
150
+ * Обработчик события onExited компонента Transition
151
+ */
152
+ onUnmount?: () => void;
153
+ /**
154
+ * Идентификатор для систем автоматизированного тестирования
155
+ */
156
+ dataTestId?: string;
157
+ /**
158
+ * z-index компонента
159
+ */
160
+ zIndex?: number;
161
+ /**
162
+ * Реф, который должен быть установлен компонентной области
163
+ */
164
+ componentRef?: MutableRefObject<HTMLDivElement | null>;
165
+ };
166
+ type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
167
+ type BottomSheetTitleAlign = "center" | "left";
168
+ type BottomSheetProps = {
169
+ /**
170
+ * Контент
171
+ */
172
+ children?: ReactNode;
173
+ /**
174
+ * Управление видимостью
175
+ */
176
+ open: boolean;
177
+ /**
178
+ * Заголовок
179
+ */
180
+ title?: ReactNode;
181
+ /**
182
+ * Размер заголовка
183
+ */
184
+ titleSize?: NavigationBarProps["titleSize"];
185
+ /**
186
+ * Подзаголовок.
187
+ */
188
+ subtitle?: NavigationBarProps["subtitle"];
189
+ /**
190
+ * Кнопка действия (обычно, это кнопка закрытия)
191
+ */
192
+ actionButton?: ReactNode;
193
+ /**
194
+ * Нода, компонент или функция возвращающая их
195
+ *
196
+ * Контейнер к которому будут добавляться порталы
197
+ */
198
+ container?: BaseModalProps["container"];
199
+ /**
200
+ * Дополнительный класс
201
+ */
202
+ className?: string;
203
+ /**
204
+ * Дополнительный класс
205
+ */
206
+ contentClassName?: string;
207
+ /**
208
+ * Дополнительные пропсы на контейнер.
209
+ */
210
+ containerProps?: HTMLAttributes<HTMLDivElement>;
211
+ /**
212
+ * Дополнительный класс
213
+ */
214
+ containerClassName?: string;
215
+ /**
216
+ * Цвет фона
217
+ */
218
+ backgroundColor?: Extract<BackgroundColorType, "primary" | "secondary">;
219
+ /**
220
+ * Дополнительный класс шапки
221
+ */
222
+ headerClassName?: string;
223
+ /**
224
+ * Дополнительный класс футера
225
+ */
226
+ footerClassName?: string;
227
+ /**
228
+ * Дополнительный класс для аддонов
229
+ */
230
+ addonClassName?: string;
231
+ /**
232
+ * Дополнительный класс для компонента крестика
233
+ */
234
+ closerClassName?: string;
235
+ /**
236
+ * Дополнительный класс для компонента стрелки назад
237
+ */
238
+ backerClassName?: string;
239
+ /**
240
+ * Дополнительный класс для компонента модального окна
241
+ */
242
+ modalClassName?: string;
243
+ /**
244
+ * Дополнительный класс для обертки модального окна
245
+ */
246
+ modalWrapperClassName?: string;
247
+ /**
248
+ * TransitionProps, прокидываются в компонент CSSTransitionProps.
249
+ */
250
+ transitionProps?: Partial<TransitionProps>;
251
+ /**
252
+ * Идентификатор для систем автоматизированного тестирования
253
+ */
254
+ dataTestId?: string;
255
+ /**
256
+ * z-index компонента
257
+ */
258
+ zIndex?: number;
259
+ /**
260
+ * Будет ли свайпаться шторка
261
+ * @default true
262
+ */
263
+ swipeable?: boolean;
264
+ /**
265
+ * Слот слева
266
+ */
267
+ leftAddons?: ReactNode;
268
+ /**
269
+ * Слот справа
270
+ */
271
+ rightAddons?: ReactNode;
272
+ /**
273
+ * Слот снизу
274
+ */
275
+ bottomAddons?: ReactNode;
276
+ /**
277
+ * Наличие компонента крестика
278
+ */
279
+ hasCloser?: boolean;
280
+ /**
281
+ * Наличие компонента стрелки назад
282
+ */
283
+ hasBacker?: boolean;
284
+ /**
285
+ * Выравнивание заголовка
286
+ */
287
+ titleAlign?: BottomSheetTitleAlign;
288
+ /**
289
+ * Фиксирует шапку
290
+ */
291
+ stickyHeader?: boolean;
292
+ /**
293
+ * Фиксирует футер
294
+ */
295
+ stickyFooter?: boolean;
296
+ /**
297
+ * Высота шторки
298
+ */
299
+ initialHeight?: "default" | "full";
300
+ /**
301
+ * Будет ли виден оверлэй
302
+ */
303
+ hideOverlay?: boolean;
304
+ /**
305
+ * Будет ли видна шапка
306
+ */
307
+ hideHeader?: boolean;
308
+ /**
309
+ * Будет ли обрезан заголовок
310
+ */
311
+ trimTitle?: boolean;
312
+ /**
313
+ * Запретить закрытие шторки кликом на оверлэй
314
+ */
315
+ disableOverlayClick?: boolean;
316
+ /**
317
+ * Отключает блокировку скролла при открытии модального окна
318
+ */
319
+ disableBlockingScroll?: boolean;
320
+ /**
321
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
322
+ * Не анимировать шторку при изменении размера вьюпорта
323
+ */
324
+ ignoreScreenChange?: boolean;
325
+ /**
326
+ * Свойства для Бэкдропа
327
+ */
328
+ backdropProps?: BaseModalProps["backdropProps"];
329
+ /**
330
+ * Реф на контейнер, в котором происходит скролл
331
+ */
332
+ scrollableContainerRef?: RefObject<HTMLElement>;
333
+ /**
334
+ * Реф для управления компонентом.
335
+ */
336
+ bottomSheetInstanceRef?: RefObject<{
337
+ scrollToArea: (idx: number) => void;
338
+ }>;
339
+ /**
340
+ * Реф на контейнер, в котором находится шторка
341
+ */
342
+ sheetContainerRef?: RefObject<HTMLElement>;
343
+ /**
344
+ * Магнитные области видимой высоты шторки.
345
+ * Можно использовать значения в пикселях - 10(число), либо в процентах - 10%(строка).
346
+ * По-умолчанию -[0, window.innerHeight - '24px']
347
+ * массив должен состоять минимум из 2 элементов
348
+ */
349
+ magneticAreas?: Array<number | string>;
350
+ /**
351
+ * Индекс точки из magneticAreas, к которому нужно примагнититься при первом открытии шторки.
352
+ */
353
+ initialActiveAreaIndex?: number;
354
+ /**
355
+ * Отключает скролл контентной области.
356
+ */
357
+ scrollLocked?: boolean;
358
+ /**
359
+ * Скрыть скроллбар внутри шторки
360
+ */
361
+ hideScrollbar?: boolean;
362
+ /**
363
+ * Обработчик закрытия
364
+ */
365
+ onClose: () => void;
366
+ /**
367
+ * Обработчик нажатия на стрелку назад
368
+ */
369
+ onBack?: () => void;
370
+ /**
371
+ * Вызывается после притягивания к одной из `magneticAreas`
372
+ */
373
+ onMagnetize?: (index: number) => void;
374
+ };
375
+ declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
376
+ declare const TIMEOUT = 500;
377
+ declare const SWIPE_VELOCITY = 0.4;
378
+ declare const MARKER_HEIGHT = 24;
379
+ /* Верхний отступ шторки, если она открыта на максимальную высоту */
380
+ declare const HEADER_OFFSET = 24;
381
+ declare const CLOSE_OFFSET = 0.2;
382
+ declare const SCROLL_OFFSET = 1;
383
+ declare const convertPercentToNumber: (value: string | number, fullHeight: number) => number;
384
+ type HeaderProps = Omit<NavigationBarProps, "view" | "size"> & {
385
+ headerRef: RefObject<HTMLDivElement>;
386
+ };
387
+ declare const Header: FC<HeaderProps>;
388
+ type FooterProps = {
389
+ /**
390
+ * Контент футера
391
+ */
392
+ children?: ReactNode;
393
+ /**
394
+ * Фиксирует футер
395
+ */
396
+ sticky?: boolean;
397
+ /**
398
+ * Дополнительный класс
399
+ */
400
+ className?: string;
401
+ };
402
+ declare const Footer: FC<FooterProps>;
403
+ type SwipeableBackdropProps = BackdropProps & {
404
+ /**
405
+ * Прозрачность бэкдропа
406
+ */
407
+ opacity?: number;
408
+ /**
409
+ * Обработчики свайпа
410
+ */
411
+ handlers?: SwipeableHandlers;
412
+ /**
413
+ * Время анимации opacity
414
+ */
415
+ opacityTimeout?: number;
416
+ };
417
+ declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
418
+ /**
419
+ * Набор констант для z-index соответствующих классов компонентов.
420
+ * Значения выбраны по приоритету.
421
+ */
422
+ declare const stackingOrder: {
423
+ FOCUSED: number;
424
+ DEFAULT: number;
425
+ POPOVER: number;
426
+ MODAL: number;
427
+ TOAST: number;
428
+ };
429
+ declare const StackingContext: import("react").Context<number>;
430
+ type StackProps = {
431
+ /**
432
+ * Render prop, в который передается функция.
433
+ * Функция принимает аргумент со значением z-index из текущего контекста.
434
+ */
435
+ children: (value: number) => ReactNode;
436
+ /**
437
+ * Исходное значение для z-index.
438
+ * @default 5
439
+ */
440
+ value?: number;
441
+ };
442
+ declare const Stack: FC<StackProps>;
443
+ declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
444
+ declare const getDefaultPortalContainer: () => Element;
445
+ declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
446
+ type SavedStyle = {
447
+ value: string;
448
+ key: string;
449
+ el: HTMLElement;
450
+ };
451
+ type RestoreStyle = {
452
+ container: HTMLElement;
453
+ modals: number;
454
+ styles: SavedStyle[];
455
+ };
456
+ declare class ModalStore {
457
+ private readonly restoreStyles;
458
+ constructor();
459
+ getRestoreStyles: () => RestoreStyle[];
460
+ }
461
+ declare const getModalStore: () => ModalStore;
462
+ declare class GlobalStore {
463
+ private readonly modalStore;
464
+ constructor();
465
+ getModalStore: () => ModalStore;
466
+ }
467
+ export { BottomSheet, TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, HEADER_OFFSET, CLOSE_OFFSET, SCROLL_OFFSET, convertPercentToNumber, HeaderProps, Header, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
468
+ export type { SavedStyle, BottomSheetProps, BottomSheetTitleAlign };
package/mobile.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: oehc7 */
1
+ /* hash: mgh83 */
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,11 +16,11 @@
16
16
  --gap-m: 16px;
17
17
  } :root {
18
18
  } :root {
19
- } .input-autocomplete__bottomSheetInput_qvluq {
19
+ } .input-autocomplete__bottomSheetInput_1kxpw {
20
20
  padding: 0 var(--gap-xs) var(--gap-xs);
21
21
  box-sizing: border-box;
22
- } .input-autocomplete__footer_qvluq {
22
+ } .input-autocomplete__footer_1kxpw {
23
23
  display: flex
24
- } .input-autocomplete__footer_qvluq > button + button {
24
+ } .input-autocomplete__footer_1kxpw > button + button {
25
25
  margin-left: var(--gap-m);
26
26
  }