@alfalab/core-components-input-autocomplete 7.2.6 → 7.3.2

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 (96) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/dist/Component-7ca84eff.d.ts +227 -0
  3. package/dist/Component.d.ts +3 -3
  4. package/dist/Component.js +6 -5
  5. package/dist/Component.mobile.d.ts +96 -0
  6. package/dist/Component.mobile.js +82 -0
  7. package/dist/autocomplete-field/Component.d.ts +6 -0
  8. package/dist/autocomplete-field/Component.js +39 -6
  9. package/dist/autocomplete-field/index.css +2 -2
  10. package/dist/autocomplete-field/index.d.ts +1 -1
  11. package/dist/autocomplete-field/index.js +4 -3
  12. package/dist/autocomplete-mobile-field/Component.d.ts +7 -0
  13. package/dist/autocomplete-mobile-field/Component.js +37 -0
  14. package/dist/autocomplete-mobile-field/index.css +49 -0
  15. package/dist/autocomplete-mobile-field/index.d.ts +1 -0
  16. package/dist/autocomplete-mobile-field/index.js +14 -0
  17. package/dist/cssm/Component-7ca84eff.d.ts +227 -0
  18. package/dist/cssm/Component.d.ts +3 -3
  19. package/dist/cssm/Component.js +6 -5
  20. package/dist/cssm/Component.mobile.d.ts +96 -0
  21. package/dist/cssm/Component.mobile.js +82 -0
  22. package/dist/cssm/autocomplete-field/Component.d.ts +6 -0
  23. package/dist/cssm/autocomplete-field/Component.js +38 -7
  24. package/dist/cssm/autocomplete-field/index.d.ts +1 -1
  25. package/dist/cssm/autocomplete-field/index.js +4 -3
  26. package/dist/cssm/autocomplete-mobile-field/Component.d.ts +7 -0
  27. package/dist/cssm/autocomplete-mobile-field/Component.js +36 -0
  28. package/dist/cssm/autocomplete-mobile-field/index.d.ts +1 -0
  29. package/dist/cssm/autocomplete-mobile-field/index.js +15 -0
  30. package/dist/cssm/autocomplete-mobile-field/index.module.css +48 -0
  31. package/dist/cssm/index-7ca84eff.d.ts +178 -0
  32. package/dist/cssm/index-bdb4c6b9.d.ts +193 -0
  33. package/dist/cssm/index-ebda875c.d.ts +36 -0
  34. package/dist/cssm/index.js +4 -3
  35. package/dist/cssm/mobile.d.ts +1 -0
  36. package/dist/cssm/mobile.js +22 -0
  37. package/dist/cssm/mobile.module.css +18 -0
  38. package/dist/{Component-e9598afc.d.ts → cssm/tslib.es6-ce870b46.d.ts} +1 -6
  39. package/dist/cssm/tslib.es6-ce870b46.js +42 -0
  40. package/dist/esm/Component-7ca84eff.d.ts +227 -0
  41. package/dist/esm/Component.d.ts +3 -3
  42. package/dist/esm/Component.js +4 -3
  43. package/dist/esm/Component.mobile.d.ts +96 -0
  44. package/dist/esm/Component.mobile.js +71 -0
  45. package/dist/esm/autocomplete-field/Component.d.ts +6 -0
  46. package/dist/esm/autocomplete-field/Component.js +36 -5
  47. package/dist/esm/autocomplete-field/index.css +2 -2
  48. package/dist/esm/autocomplete-field/index.d.ts +1 -1
  49. package/dist/esm/autocomplete-field/index.js +4 -3
  50. package/dist/esm/autocomplete-mobile-field/Component.d.ts +7 -0
  51. package/dist/esm/autocomplete-mobile-field/Component.js +28 -0
  52. package/dist/esm/autocomplete-mobile-field/index.css +49 -0
  53. package/dist/esm/autocomplete-mobile-field/index.d.ts +1 -0
  54. package/dist/esm/autocomplete-mobile-field/index.js +6 -0
  55. package/dist/esm/index-7ca84eff.d.ts +178 -0
  56. package/dist/esm/index-bdb4c6b9.d.ts +193 -0
  57. package/dist/esm/index-ebda875c.d.ts +36 -0
  58. package/dist/esm/index.js +4 -3
  59. package/dist/esm/mobile.css +19 -0
  60. package/dist/esm/mobile.d.ts +1 -0
  61. package/dist/esm/mobile.js +12 -0
  62. package/dist/esm/{Component-c15e087c.d.ts → tslib.es6-a31dce67.d.ts} +1 -6
  63. package/dist/esm/tslib.es6-a31dce67.js +40 -0
  64. package/dist/index-7ca84eff.d.ts +178 -0
  65. package/dist/index-bdb4c6b9.d.ts +193 -0
  66. package/dist/index-ebda875c.d.ts +36 -0
  67. package/dist/index.js +4 -3
  68. package/dist/mobile.css +19 -0
  69. package/dist/mobile.d.ts +1 -0
  70. package/dist/mobile.js +20 -0
  71. package/dist/modern/Component-7ca84eff.d.ts +227 -0
  72. package/dist/modern/Component.d.ts +3 -3
  73. package/dist/modern/Component.js +2 -2
  74. package/dist/modern/Component.mobile.d.ts +96 -0
  75. package/dist/modern/Component.mobile.js +80 -0
  76. package/dist/modern/autocomplete-field/Component.js +3 -3
  77. package/dist/modern/autocomplete-field/index.css +2 -2
  78. package/dist/modern/autocomplete-field/index.js +2 -2
  79. package/dist/modern/autocomplete-mobile-field/Component.d.ts +7 -0
  80. package/dist/modern/autocomplete-mobile-field/Component.js +25 -0
  81. package/dist/modern/autocomplete-mobile-field/index.css +49 -0
  82. package/dist/modern/autocomplete-mobile-field/index.d.ts +1 -0
  83. package/dist/modern/autocomplete-mobile-field/index.js +5 -0
  84. package/dist/modern/index-7ca84eff.d.ts +178 -0
  85. package/dist/modern/index-bdb4c6b9.d.ts +193 -0
  86. package/dist/modern/index-ebda875c.d.ts +36 -0
  87. package/dist/modern/index.js +2 -2
  88. package/dist/modern/mobile.css +19 -0
  89. package/dist/modern/mobile.d.ts +1 -0
  90. package/dist/modern/mobile.js +11 -0
  91. package/dist/{cssm/Component-a04a9434.d.ts → tslib.es6-1aefee5c.d.ts} +1 -6
  92. package/dist/tslib.es6-1aefee5c.js +42 -0
  93. package/package.json +13 -5
  94. package/dist/Component-e9598afc.js +0 -83
  95. package/dist/cssm/Component-a04a9434.js +0 -82
  96. package/dist/esm/Component-c15e087c.js +0 -74
@@ -0,0 +1,227 @@
1
+ import React from "react";
2
+ import { ButtonHTMLAttributes, ElementType, AnchorHTMLAttributes, FC, HTMLAttributes, ReactNode } from "react";
3
+ import { ButtonProps } from "@alfalab/core-components-button";
4
+ import { BottomSheetTitleAlign } from "./index-7ca84eff";
5
+ type IconButtonProps = {
6
+ /**
7
+ * Компонент иконки
8
+ */
9
+ icon: ElementType<{
10
+ className?: string;
11
+ }>;
12
+ /**
13
+ * Тип кнопки
14
+ */
15
+ view?: "primary" | "secondary" | "transparent" | "tertiary" | "negative";
16
+ /**
17
+ * Размер компонента
18
+ */
19
+ size?: "xxs" | "xs" | "s";
20
+ /**
21
+ * Дополнительный класс
22
+ */
23
+ className?: string;
24
+ /**
25
+ * Идентификатор для систем автоматизированного тестирования
26
+ */
27
+ dataTestId?: string;
28
+ /**
29
+ * Набор цветов для компонента
30
+ */
31
+ colors?: "default" | "inverted";
32
+ } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
33
+ type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
34
+ /**
35
+ * Дополнительный класс
36
+ */
37
+ className?: string;
38
+ /**
39
+ * Размер кнопки
40
+ */
41
+ size?: IconButtonProps["size"];
42
+ /**
43
+ * Иконка
44
+ */
45
+ icon?: ElementType;
46
+ };
47
+ declare const Closer: React.FC<CloserProps>;
48
+ declare const colors: readonly ["tertiary", "disabled", "accent", "primary", "attention", "positive", "secondary", "tertiary-inverted", "primary-inverted", "secondary-inverted", "link", "negative"];
49
+ type Color = typeof colors[number];
50
+ type NativeProps = HTMLAttributes<HTMLHeadingElement>;
51
+ type TitleProps = Omit<NativeProps, "color"> & {
52
+ /**
53
+ * HTML тег
54
+ */
55
+ tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
56
+ /**
57
+ * [Вариант начертания](https://alfa-laboratory.github.io/core-components/master/?path=/docs/гайдлайны-типографика--page)
58
+ */
59
+ view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
60
+ /**
61
+ * Цвет текста
62
+ */
63
+ color?: Color;
64
+ /**
65
+ * Толщина шрифта
66
+ */
67
+ weight?: "regular" | "medium" | "bold";
68
+ /**
69
+ * Шрифт текста
70
+ */
71
+ font?: "styrene" | "system";
72
+ /**
73
+ * Добавляет отступы
74
+ */
75
+ defaultMargins?: boolean;
76
+ /**
77
+ * Css-класс для стилизации (native prop)
78
+ */
79
+ className?: string;
80
+ /**
81
+ * Id компонента для тестов
82
+ */
83
+ dataTestId?: string;
84
+ /**
85
+ * Контент (native prop)
86
+ */
87
+ children?: React.ReactNode;
88
+ };
89
+ type NativeProps$0 = HTMLAttributes<HTMLSpanElement>;
90
+ type TextProps = Omit<NativeProps$0, "color"> & {
91
+ /**
92
+ * [Вариант начертания](https://alfa-laboratory.github.io/core-components/master/?path=/docs/гайдлайны-типографика--page)
93
+ */
94
+ view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
95
+ /**
96
+ * Цвет текста
97
+ */
98
+ color?: Color;
99
+ /**
100
+ * Толщина шрифта
101
+ */
102
+ weight?: "regular" | "medium" | "bold";
103
+ /**
104
+ * Делает цифры моноширинными
105
+ */
106
+ monospaceNumbers?: boolean;
107
+ /**
108
+ * HTML тег
109
+ */
110
+ tag?: "p" | "span" | "div";
111
+ /**
112
+ * Css-класс для стилизации (native prop)
113
+ */
114
+ className?: string;
115
+ /**
116
+ * Id компонента для тестов
117
+ */
118
+ dataTestId?: string;
119
+ /**
120
+ * Контент (native prop)
121
+ */
122
+ children?: React.ReactNode;
123
+ };
124
+ type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
125
+ declare const Typography: {
126
+ Title: FC<TitleProps>;
127
+ Text: FC<TextProps>;
128
+ TitleResponsive: FC<TitleProps>;
129
+ TitleMobile: FC<TitleMobileProps>;
130
+ };
131
+ declare const typographyPresets: {
132
+ mobile: {
133
+ list: {
134
+ text: {
135
+ primary: {
136
+ tag: string;
137
+ view: string;
138
+ };
139
+ secondary: {
140
+ tag: string;
141
+ color: string;
142
+ view: string;
143
+ };
144
+ };
145
+ };
146
+ };
147
+ };
148
+ type BackerProps = ButtonHTMLAttributes<HTMLButtonElement> & {
149
+ /**
150
+ * Дополнительный класс
151
+ */
152
+ className?: string;
153
+ /**
154
+ * Размер кнопки
155
+ */
156
+ size?: IconButtonProps["size"];
157
+ /**
158
+ * Иконка
159
+ */
160
+ icon?: ElementType;
161
+ /**
162
+ * Обработчик нажатия
163
+ */
164
+ onClick?: () => void;
165
+ };
166
+ declare const Backer: React.FC<BackerProps>;
167
+ declare const TitleResponsive: FC<TitleProps>;
168
+ type HeaderProps = {
169
+ /**
170
+ * Заголовок
171
+ */
172
+ title?: ReactNode;
173
+ /**
174
+ * Дополнительный класс
175
+ */
176
+ headerClassName?: string;
177
+ /**
178
+ * Дополнительный класс для аддонов
179
+ */
180
+ addonClassName?: string;
181
+ /**
182
+ * Дополнительный класс для компонента крестика
183
+ */
184
+ closerClassName?: string;
185
+ /**
186
+ * Дополнительный класс для компонента стрелки назад
187
+ */
188
+ backerClassName?: string;
189
+ /**
190
+ * Слот слева
191
+ */
192
+ leftAddons?: ReactNode;
193
+ /**
194
+ * Слот справа
195
+ */
196
+ rightAddons?: ReactNode;
197
+ /**
198
+ * Слот снизу
199
+ */
200
+ bottomAddons?: ReactNode;
201
+ /**
202
+ * Наличие компонента крестика
203
+ */
204
+ hasCloser?: boolean;
205
+ /**
206
+ * Наличие компонента стрелки назад
207
+ */
208
+ hasBacker?: boolean;
209
+ /**
210
+ * Выравнивание заголовка
211
+ */
212
+ titleAlign?: BottomSheetTitleAlign;
213
+ /**
214
+ * Будет ли обрезан заголовок
215
+ */
216
+ trimTitle?: boolean;
217
+ /**
218
+ * Фиксирует шапку
219
+ */
220
+ sticky?: boolean;
221
+ /**
222
+ * Обработчик нажатия на стрелку назад
223
+ */
224
+ onBack?: () => void;
225
+ };
226
+ declare const Header: FC<HeaderProps>;
227
+ export { CloserProps, Closer, Typography, typographyPresets, TitleProps, TextProps, BackerProps, Backer, TitleResponsive, HeaderProps, Header };
@@ -33,11 +33,11 @@ type InputAutocompleteProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect'> &
33
33
  */
34
34
  updatePopover?: BaseSelectProps['updatePopover'];
35
35
  };
36
- declare const InputAutocomplete: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "className" | "dataTestId" | "label" | "size" | "block" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "onScroll" | "disabled" | "name" | "fieldClassName" | "error" | "hint" | "multiple" | "preventFlip" | "popperClassName" | "open" | "options" | "selected" | "valueRenderer" | "Optgroup" | "optionsListWidth" | "visibleOptions" | "Arrow" | "optionGroupClassName" | "Option" | "optionsListClassName" | "optionClassName" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList"> & {
36
+ declare const InputAutocomplete: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "onScroll" | "preventFlip" | "popperClassName" | "open" | "name" | "options" | "multiple" | "selected" | "valueRenderer" | "Optgroup" | "optionsListWidth" | "visibleOptions" | "Arrow" | "optionGroupClassName" | "Option" | "optionsListClassName" | "optionClassName" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList"> & {
37
37
  /**
38
38
  * Компонент ввода значения
39
39
  */
40
- Input?: React.FC<Pick<React.InputHTMLAttributes<HTMLInputElement>, "className" | "form" | "slot" | "style" | "title" | "pattern" | "children" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width"> & {
40
+ Input?: React.FC<Pick<React.InputHTMLAttributes<HTMLInputElement>, "className" | "disabled" | "children" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "pattern" | "list" | "step" | "height" | "name" | "width" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src"> & {
41
41
  value?: string | undefined;
42
42
  defaultValue?: string | undefined;
43
43
  block?: boolean | undefined;
@@ -72,7 +72,7 @@ declare const InputAutocomplete: React.ForwardRefExoticComponent<Pick<BaseSelect
72
72
  /**
73
73
  * Пропсы, которые будут прокинуты в инпут
74
74
  */
75
- inputProps?: (Pick<React.InputHTMLAttributes<HTMLInputElement>, "className" | "form" | "slot" | "style" | "title" | "pattern" | "children" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width"> & {
75
+ inputProps?: (Pick<React.InputHTMLAttributes<HTMLInputElement>, "className" | "disabled" | "children" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "pattern" | "list" | "step" | "height" | "name" | "width" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src"> & {
76
76
  value?: string | undefined;
77
77
  defaultValue?: string | undefined;
78
78
  block?: boolean | undefined;
@@ -1,8 +1,8 @@
1
+ import 'classnames';
1
2
  import React, { forwardRef } from 'react';
3
+ import 'react-merge-refs';
2
4
  import { OptionsList, Optgroup, Option, BaseSelect } from '@alfalab/core-components-select/dist/modern';
3
- import 'classnames';
4
5
  import '@alfalab/core-components-input/dist/modern';
5
- import 'react-merge-refs';
6
6
  import { AutocompleteField } from './autocomplete-field/Component.js';
7
7
 
8
8
  const InputAutocomplete = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Input, inputProps = {}, onInput, value, success, readOnly, closeOnSelect = false, options, ...restProps }, ref) => (React.createElement(BaseSelect, Object.assign({ ref: ref, autocomplete: true, options: options, closeOnSelect: closeOnSelect, Option: Option$1, Field: AutocompleteField, fieldProps: {
@@ -0,0 +1,96 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ChangeEvent } from "react";
4
+ import { BaseSelectProps } from "@alfalab/core-components-select";
5
+ import { ButtonProps } from "@alfalab/core-components-button";
6
+ import { BottomSheetProps } from "./index-7ca84eff";
7
+ type InputAutocompleteMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Checkmark' | 'onScroll' | 'selected' | 'nativeSelect' | 'multiple' | 'autocomplete' | 'valueRenderer' | 'allowUnselect'> & {
8
+ /**
9
+ * Значение поля ввода
10
+ */
11
+ value: string;
12
+ /**
13
+ * Значение фильтра.
14
+ */
15
+ filter: string;
16
+ /**
17
+ * Обработчик выбора
18
+ */
19
+ onChange: (payload: string | BaseSelectProps['onChange']) => void;
20
+ /**
21
+ * Обработчик ввода фильтра.
22
+ */
23
+ onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
24
+ /**
25
+ * Обработчик нажатия на кнопку "Отмена".
26
+ */
27
+ onCancel?: () => void;
28
+ /**
29
+ * Обработчик нажатия на крестик в инпуте фильтра.
30
+ */
31
+ onClearFilter?: () => void;
32
+ /**
33
+ * Дополнительные пропсы компонента BottomSheet
34
+ */
35
+ bottomSheetProps?: Partial<BottomSheetProps>;
36
+ /**
37
+ * Дополнительные пропсы на слот под заголовком компонента BottomSheet
38
+ */
39
+ bottomSheetHeaderAddonsProps?: Record<string, unknown>;
40
+ /**
41
+ * Дополнительные пропсы на кнопку "продолжить"
42
+ */
43
+ continueButtonProps?: ButtonProps;
44
+ /**
45
+ * Дополнительные пропсы на кнопку "отмена"
46
+ */
47
+ cancelButtonProps?: ButtonProps;
48
+ };
49
+ declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "preventFlip" | "popperClassName" | "open" | "name" | "options" | "Optgroup" | "optionsListWidth" | "visibleOptions" | "Arrow" | "optionGroupClassName" | "Option" | "optionsListClassName" | "optionClassName" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "Field" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList"> & {
50
+ /**
51
+ * Значение поля ввода
52
+ */
53
+ value: string;
54
+ /**
55
+ * Значение фильтра.
56
+ */
57
+ filter: string;
58
+ /**
59
+ * Обработчик выбора
60
+ */
61
+ onChange: (payload: string | ((payload: {
62
+ selected: import("@alfalab/core-components-select").OptionShape | null;
63
+ selectedMultiple: import("@alfalab/core-components-select").OptionShape[];
64
+ initiator: import("@alfalab/core-components-select").OptionShape | null;
65
+ name?: string | undefined;
66
+ }) => void) | undefined) => void;
67
+ /**
68
+ * Обработчик ввода фильтра.
69
+ */
70
+ onFilter: (event: React.ChangeEvent<HTMLInputElement>) => void;
71
+ /**
72
+ * Обработчик нажатия на кнопку "Отмена".
73
+ */
74
+ onCancel?: (() => void) | undefined;
75
+ /**
76
+ * Обработчик нажатия на крестик в инпуте фильтра.
77
+ */
78
+ onClearFilter?: (() => void) | undefined;
79
+ /**
80
+ * Дополнительные пропсы компонента BottomSheet
81
+ */
82
+ bottomSheetProps?: Partial<BottomSheetProps> | undefined;
83
+ /**
84
+ * Дополнительные пропсы на слот под заголовком компонента BottomSheet
85
+ */
86
+ bottomSheetHeaderAddonsProps?: Record<string, unknown> | undefined;
87
+ /**
88
+ * Дополнительные пропсы на кнопку "продолжить"
89
+ */
90
+ continueButtonProps?: Partial<import("@alfalab/core-components-button").ComponentProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> | Partial<import("@alfalab/core-components-button").ComponentProps & React.ButtonHTMLAttributes<HTMLButtonElement>> | undefined;
91
+ /**
92
+ * Дополнительные пропсы на кнопку "отмена"
93
+ */
94
+ cancelButtonProps?: Partial<import("@alfalab/core-components-button").ComponentProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> | Partial<import("@alfalab/core-components-button").ComponentProps & React.ButtonHTMLAttributes<HTMLButtonElement>> | undefined;
95
+ } & React.RefAttributes<unknown>>;
96
+ export { InputAutocompleteMobileProps, InputAutocompleteMobile };
@@ -0,0 +1,80 @@
1
+ import cn from 'classnames';
2
+ import React, { useState, useRef, useMemo } from 'react';
3
+ import mergeRefs from 'react-merge-refs';
4
+ import throttle from 'lodash.throttle';
5
+ import { SelectMobile } from '@alfalab/core-components-select/dist/modern';
6
+ import { Button } from '@alfalab/core-components-button/dist/modern';
7
+ import { Input } from '@alfalab/core-components-input/dist/modern';
8
+ import '@alfalab/hooks';
9
+ import '@alfalab/core-components-form-control/dist/modern';
10
+ import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.js';
11
+
12
+ var styles = {"bottomSheetInput":"input-autocomplete__bottomSheetInput_1g17y","footer":"input-autocomplete__footer_1g17y"};
13
+ require('./mobile.css')
14
+
15
+ const SELECTED = [];
16
+ const InputAutocompleteMobile = React.forwardRef(({ bottomSheetProps = {}, bottomSheetHeaderAddonsProps = {}, value = '', name, Arrow = null, filter, label, placeholder, size = 's', open: openProp, onFilter, onChange, onOpen, onCancel, onClearFilter, continueButtonProps, cancelButtonProps, ...restProps }, ref) => {
17
+ const [open, setOpen] = useState(false);
18
+ const bottomSheetInputRef = useRef(null);
19
+ const targetRef = useRef(null);
20
+ const setBottomSheetVisibility = (isOpen) => {
21
+ if (openProp === undefined) {
22
+ setOpen(isOpen);
23
+ }
24
+ if (onOpen) {
25
+ onOpen({ open: isOpen, name });
26
+ }
27
+ };
28
+ const handleOpen = payload => {
29
+ setBottomSheetVisibility(Boolean(payload.open));
30
+ };
31
+ const handleOptionsListTouchMove = useMemo(() => {
32
+ return throttle(() => {
33
+ const input = bottomSheetInputRef.current;
34
+ if (input && document.activeElement === input) {
35
+ input.blur();
36
+ }
37
+ }, 300);
38
+ }, []);
39
+ const handleChange = () => {
40
+ setBottomSheetVisibility(false);
41
+ onChange(filter);
42
+ };
43
+ const handleCancel = () => {
44
+ setBottomSheetVisibility(false);
45
+ if (onCancel) {
46
+ onCancel();
47
+ }
48
+ };
49
+ const handleInputFocus = (event) => {
50
+ const input = bottomSheetInputRef.current;
51
+ // Перед закрытием шторки снимаем фокус с инпута, чтобы предотвратить скачок шторки.
52
+ if (event.relatedTarget === targetRef.current &&
53
+ input &&
54
+ input === document.activeElement) {
55
+ input.blur();
56
+ }
57
+ };
58
+ const getBottomSheetProps = () => {
59
+ return {
60
+ actionButton: (React.createElement("div", { className: styles.footer },
61
+ React.createElement(Button, Object.assign({ block: true, view: 'primary', size: 's', onClick: handleChange }, continueButtonProps), "\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C"),
62
+ React.createElement(Button, Object.assign({ block: true, view: 'secondary', size: 's', onClick: handleCancel }, cancelButtonProps), "\u041E\u0442\u043C\u0435\u043D\u0430"))),
63
+ title: label || placeholder,
64
+ bottomAddons: (React.createElement(Input, Object.assign({ block: true, clear: !!onClearFilter, onClear: onClearFilter, value: filter, onInput: onFilter, placeholder: placeholder, onFocus: handleInputFocus }, bottomSheetHeaderAddonsProps, { className: cn(styles.bottomSheetInput, bottomSheetHeaderAddonsProps.className), ref: mergeRefs([
65
+ bottomSheetInputRef,
66
+ bottomSheetHeaderAddonsProps.ref,
67
+ ]) }))),
68
+ initialHeight: 'full',
69
+ ignoreScreenChange: true,
70
+ ...bottomSheetProps,
71
+ containerProps: {
72
+ onTouchMove: handleOptionsListTouchMove,
73
+ ...bottomSheetProps.containerProps,
74
+ },
75
+ };
76
+ };
77
+ return (React.createElement(SelectMobile, Object.assign({ ref: mergeRefs([targetRef, ref]), selected: SELECTED, open: Boolean(open || openProp), onOpen: handleOpen, onChange: onChange, Arrow: Arrow, Field: AutocompleteMobileField, fieldProps: { value }, placeholder: placeholder, label: label, size: size, name: name, bottomSheetProps: getBottomSheetProps() }, restProps)));
78
+ });
79
+
80
+ export { InputAutocompleteMobile };
@@ -1,9 +1,9 @@
1
- import React, { useRef, useCallback } from 'react';
2
1
  import cn from 'classnames';
3
- import { Input } from '@alfalab/core-components-input/dist/modern';
2
+ import React, { useRef, useCallback } from 'react';
4
3
  import mergeRefs from 'react-merge-refs';
4
+ import { Input } from '@alfalab/core-components-input/dist/modern';
5
5
 
6
- var styles = {"arrow":"input-autocomplete__arrow_n72w6","error":"input-autocomplete__error_n72w6"};
6
+ var styles = {"arrow":"input-autocomplete__arrow_uxtwe","error":"input-autocomplete__error_uxtwe"};
7
7
  require('./index.css')
8
8
 
9
9
  const AutocompleteField = ({ label, placeholder, size, Arrow, Input: Input$1 = Input, value, error, success, hint, disabled, readOnly, onInput, inputProps = {}, innerProps, }) => {
@@ -1,4 +1,4 @@
1
- /* hash: 35vha */
2
- .input-autocomplete__arrow_n72w6.input-autocomplete__error_n72w6 ~ * {
1
+ /* hash: pkiji */
2
+ .input-autocomplete__arrow_uxtwe.input-autocomplete__error_uxtwe ~ * {
3
3
  display: none;
4
4
  }
@@ -1,5 +1,5 @@
1
- import 'react';
2
1
  import 'classnames';
3
- import '@alfalab/core-components-input/dist/modern';
2
+ import 'react';
4
3
  import 'react-merge-refs';
4
+ import '@alfalab/core-components-input/dist/modern';
5
5
  export { AutocompleteField } from './Component.js';
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ import { FormControlProps } from "@alfalab/core-components-form-control";
3
+ import { FieldProps as BaseFieldProps } from "@alfalab/core-components-select";
4
+ import { InputAutocompleteProps } from "../index";
5
+ type AutocompleteMobileFieldProps = FormControlProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & Pick<InputAutocompleteProps, 'value'>;
6
+ declare const AutocompleteMobileField: ({ size, open, error, hint, disabled, label, placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }: AutocompleteMobileFieldProps) => JSX.Element;
7
+ export { AutocompleteMobileFieldProps, AutocompleteMobileField };
@@ -0,0 +1,25 @@
1
+ import cn from 'classnames';
2
+ import React, { useState, useRef } from 'react';
3
+ import { useFocus } from '@alfalab/hooks';
4
+ import { FormControl } from '@alfalab/core-components-form-control/dist/modern';
5
+
6
+ var styles = {"component":"input-autocomplete__component_18lot","field":"input-autocomplete__field_18lot","disabled":"input-autocomplete__disabled_18lot","placeholder":"input-autocomplete__placeholder_18lot","contentWrapper":"input-autocomplete__contentWrapper_18lot","value":"input-autocomplete__value_18lot","focusVisible":"input-autocomplete__focusVisible_18lot"};
7
+ require('./index.css')
8
+
9
+ const AutocompleteMobileField = ({ size = 'm', open, error, hint, disabled, label, placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }) => {
10
+ const [focused, setFocused] = useState(false);
11
+ const wrapperRef = useRef(null);
12
+ const [focusVisible] = useFocus(wrapperRef, 'keyboard');
13
+ const filled = Boolean(value);
14
+ const showLabel = !!label && (filled || !placeholder);
15
+ return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: () => setFocused(true), onBlur: () => setFocused(false) },
16
+ React.createElement(FormControl, Object.assign({ fieldClassName: cn(styles.field, fieldClassName, {
17
+ [styles.disabled]: disabled,
18
+ [styles.focusVisible]: focusVisible,
19
+ }), block: true, size: size, focused: focused, disabled: disabled, filled: filled, label: showLabel && label, error: error, hint: hint, "data-test-id": dataTestId }, restProps, innerProps),
20
+ React.createElement("div", { className: styles.contentWrapper },
21
+ placeholder && !filled && (React.createElement("span", { className: styles.placeholder }, placeholder)),
22
+ filled && React.createElement("div", { className: styles.value }, value)))));
23
+ };
24
+
25
+ export { AutocompleteMobileField };
@@ -0,0 +1,49 @@
1
+ /* hash: 11wxm */
2
+ :root {
3
+ --color-light-border-link: #007aff;
4
+ --color-light-text-secondary: #546272;
5
+ }
6
+ :root {
7
+
8
+ /* Hard */
9
+
10
+ /* Up */
11
+
12
+ /* Hard up */
13
+ }
14
+ :root {
15
+ --focus-color: var(--color-light-border-link);
16
+ --disabled-cursor: not-allowed;
17
+ }
18
+ .input-autocomplete__component_18lot {
19
+ width: 100%;
20
+ outline: none;
21
+ }
22
+ .input-autocomplete__field_18lot:not(.input-autocomplete__disabled_18lot) {
23
+ cursor: pointer;
24
+ }
25
+ .input-autocomplete__disabled_18lot {
26
+ cursor: var(--disabled-cursor);
27
+ }
28
+ .input-autocomplete__placeholder_18lot {
29
+ color: var(--color-light-text-secondary);
30
+ }
31
+ .input-autocomplete__contentWrapper_18lot {
32
+ font-size: 16px;
33
+ line-height: 20px;
34
+ font-weight: 400;
35
+
36
+ white-space: nowrap;
37
+ text-overflow: ellipsis;
38
+ overflow: hidden;
39
+ width: 100%;
40
+ }
41
+ .input-autocomplete__value_18lot {
42
+ overflow: hidden;
43
+ text-overflow: ellipsis;
44
+ text-align: left;
45
+ }
46
+ .input-autocomplete__focusVisible_18lot {
47
+ outline: 2px solid var(--focus-color);
48
+ outline-offset: 2px;
49
+ }
@@ -0,0 +1 @@
1
+ export * from "./Component";
@@ -0,0 +1,5 @@
1
+ import 'classnames';
2
+ import 'react';
3
+ import '@alfalab/hooks';
4
+ import '@alfalab/core-components-form-control/dist/modern';
5
+ export { AutocompleteMobileField } from './Component.js';