@alfalab/core-components-input-autocomplete 9.3.8 → 9.3.10
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-7ca84eff.d.ts +4 -270
- package/Component.desktop.js +3 -3
- package/Component.mobile.js +8 -8
- package/Component.responsive.d.ts +94 -2
- package/Component.responsive.js +5 -5
- package/autocomplete-field/Component.js +3 -3
- package/autocomplete-field/index.css +2 -2
- package/autocomplete-field/index.js +1 -1
- package/autocomplete-mobile-field/Component.js +4 -4
- package/autocomplete-mobile-field/index.css +8 -8
- package/autocomplete-mobile-field/index.js +1 -1
- package/cssm/Component-7ca84eff.d.ts +4 -270
- package/cssm/Component.desktop.js +3 -3
- package/cssm/Component.mobile.js +7 -7
- package/cssm/Component.responsive.d.ts +94 -2
- package/cssm/Component.responsive.js +5 -5
- package/cssm/autocomplete-field/Component.js +2 -2
- package/cssm/autocomplete-field/index.js +1 -1
- package/cssm/autocomplete-mobile-field/Component.js +3 -3
- package/cssm/autocomplete-mobile-field/index.js +1 -1
- package/cssm/desktop.js +1 -1
- package/cssm/{getDataTestId-3fe0d3e6.d.ts → index-3885b0d7.d.ts} +2 -1
- package/cssm/index-7ca84eff.d.ts +15 -4
- package/cssm/index-bdb4c6b9.d.ts +1 -0
- package/cssm/index-e81c389f.d.ts +341 -0
- package/cssm/index.js +1 -1
- package/cssm/mobile.js +1 -1
- package/cssm/responsive.js +1 -1
- package/desktop.js +1 -1
- package/esm/Component-7ca84eff.d.ts +4 -270
- package/esm/Component.desktop.js +1 -1
- package/esm/Component.mobile.js +2 -2
- package/esm/Component.responsive.d.ts +94 -2
- package/esm/Component.responsive.js +5 -5
- package/esm/autocomplete-field/Component.js +2 -2
- package/esm/autocomplete-field/index.css +2 -2
- package/esm/autocomplete-field/index.js +1 -1
- package/esm/autocomplete-mobile-field/Component.js +2 -2
- package/esm/autocomplete-mobile-field/index.css +8 -8
- package/esm/autocomplete-mobile-field/index.js +1 -1
- package/esm/desktop.js +1 -1
- package/{getDataTestId-3fe0d3e6.d.ts → esm/index-3885b0d7.d.ts} +2 -1
- package/esm/index-7ca84eff.d.ts +15 -4
- package/esm/index-bdb4c6b9.d.ts +1 -0
- package/esm/index-e81c389f.d.ts +341 -0
- package/esm/index.js +1 -1
- package/esm/mobile.css +4 -4
- package/esm/mobile.js +1 -1
- package/esm/responsive.js +1 -1
- package/{modern/getDataTestId-3fe0d3e6.d.ts → index-3885b0d7.d.ts} +2 -1
- package/index-7ca84eff.d.ts +15 -4
- package/index-bdb4c6b9.d.ts +1 -0
- package/index-e81c389f.d.ts +341 -0
- package/index.js +1 -1
- package/mobile.css +4 -4
- package/mobile.js +1 -1
- package/modern/Component-7ca84eff.d.ts +4 -270
- package/modern/Component.mobile.js +1 -1
- package/modern/Component.responsive.d.ts +94 -2
- package/modern/Component.responsive.js +4 -4
- package/modern/autocomplete-field/Component.js +1 -1
- package/modern/autocomplete-field/index.css +2 -2
- package/modern/autocomplete-mobile-field/Component.js +1 -1
- package/modern/autocomplete-mobile-field/index.css +8 -8
- package/{esm/getDataTestId-3fe0d3e6.d.ts → modern/index-3885b0d7.d.ts} +2 -1
- package/modern/index-7ca84eff.d.ts +15 -4
- package/modern/index-bdb4c6b9.d.ts +1 -0
- package/modern/index-e81c389f.d.ts +341 -0
- package/modern/mobile.css +4 -4
- package/package.json +7 -6
- package/responsive.js +1 -1
- package/cssm/tslib.es6-bbd6cd2a.d.ts +0 -36
- package/cssm/tslib.es6-bbd6cd2a.js +0 -42
- package/esm/tslib.es6-da6da1a4.d.ts +0 -36
- package/esm/tslib.es6-da6da1a4.js +0 -40
- package/tslib.es6-e3f0e7e9.d.ts +0 -36
- package/tslib.es6-e3f0e7e9.js +0 -42
|
@@ -1,271 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
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
|
-
dataTestId?: string;
|
|
46
|
-
/**
|
|
47
|
-
* Иконка
|
|
48
|
-
*/
|
|
49
|
-
icon?: ElementType;
|
|
50
|
-
};
|
|
51
|
-
declare const Closer: React.FC<CloserProps>;
|
|
52
|
-
declare const colors: readonly [
|
|
53
|
-
"tertiary",
|
|
54
|
-
"disabled",
|
|
55
|
-
"accent",
|
|
56
|
-
"primary",
|
|
57
|
-
"attention",
|
|
58
|
-
"positive",
|
|
59
|
-
"secondary",
|
|
60
|
-
"tertiary-inverted",
|
|
61
|
-
"primary-inverted",
|
|
62
|
-
"secondary-inverted",
|
|
63
|
-
"link",
|
|
64
|
-
"negative"
|
|
65
|
-
];
|
|
66
|
-
type Color = (typeof colors)[number];
|
|
67
|
-
type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
|
|
68
|
-
type NativeProps = HTMLAttributes<HTMLSpanElement>;
|
|
69
|
-
type TextBaseProps = {
|
|
70
|
-
/**
|
|
71
|
-
* [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
|
|
72
|
-
*/
|
|
73
|
-
view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
|
|
74
|
-
/**
|
|
75
|
-
* Цвет текста
|
|
76
|
-
*/
|
|
77
|
-
color?: Color;
|
|
78
|
-
/**
|
|
79
|
-
* Толщина шрифта
|
|
80
|
-
*/
|
|
81
|
-
weight?: "regular" | "medium" | "bold";
|
|
82
|
-
/**
|
|
83
|
-
* Делает цифры моноширинными
|
|
84
|
-
*/
|
|
85
|
-
monospaceNumbers?: boolean;
|
|
86
|
-
/**
|
|
87
|
-
* HTML тег
|
|
88
|
-
*/
|
|
89
|
-
tag?: "span" | "div";
|
|
90
|
-
/**
|
|
91
|
-
* Css-класс для стилизации (native prop)
|
|
92
|
-
*/
|
|
93
|
-
className?: string;
|
|
94
|
-
/**
|
|
95
|
-
* Id компонента для тестов
|
|
96
|
-
*/
|
|
97
|
-
dataTestId?: string;
|
|
98
|
-
/**
|
|
99
|
-
* Контент (native prop)
|
|
100
|
-
*/
|
|
101
|
-
children?: React.ReactNode;
|
|
102
|
-
/**
|
|
103
|
-
* Добавляет отступы к тэгу 'p'
|
|
104
|
-
*/
|
|
105
|
-
defaultMargins?: never;
|
|
106
|
-
/**
|
|
107
|
-
* Количество строк (не поддерживает IE)
|
|
108
|
-
*/
|
|
109
|
-
rowLimit?: 1 | 2 | 3;
|
|
110
|
-
};
|
|
111
|
-
type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
|
|
112
|
-
tag?: "p";
|
|
113
|
-
defaultMargins?: boolean;
|
|
114
|
-
};
|
|
115
|
-
type TextProps = Omit<NativeProps, "color"> & (TextBaseProps | TextPTagProps);
|
|
116
|
-
type NativeProps$0 = HTMLAttributes<HTMLHeadingElement>;
|
|
117
|
-
type TitleProps = Omit<NativeProps$0, "color"> & {
|
|
118
|
-
/**
|
|
119
|
-
* HTML тег
|
|
120
|
-
*/
|
|
121
|
-
tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
|
|
122
|
-
/**
|
|
123
|
-
* [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
|
|
124
|
-
*/
|
|
125
|
-
view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
|
|
126
|
-
/**
|
|
127
|
-
* Цвет текста
|
|
128
|
-
*/
|
|
129
|
-
color?: Color;
|
|
130
|
-
/**
|
|
131
|
-
* Толщина шрифта
|
|
132
|
-
*/
|
|
133
|
-
weight?: "regular" | "medium" | "bold";
|
|
134
|
-
/**
|
|
135
|
-
* Шрифт текста
|
|
136
|
-
*/
|
|
137
|
-
font?: "styrene" | "system";
|
|
138
|
-
/**
|
|
139
|
-
* Добавляет отступы
|
|
140
|
-
*/
|
|
141
|
-
defaultMargins?: boolean;
|
|
142
|
-
/**
|
|
143
|
-
* Css-класс для стилизации (native prop)
|
|
144
|
-
*/
|
|
145
|
-
className?: string;
|
|
146
|
-
/**
|
|
147
|
-
* Id компонента для тестов
|
|
148
|
-
*/
|
|
149
|
-
dataTestId?: string;
|
|
150
|
-
/**
|
|
151
|
-
* Контент (native prop)
|
|
152
|
-
*/
|
|
153
|
-
children?: React.ReactNode;
|
|
154
|
-
/**
|
|
155
|
-
* Количество строк (не поддерживает IE)
|
|
156
|
-
*/
|
|
157
|
-
rowLimit?: 1 | 2 | 3;
|
|
158
|
-
};
|
|
159
|
-
type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
|
|
160
|
-
declare const Typography: {
|
|
161
|
-
Title: FC<TitleProps>;
|
|
162
|
-
Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
|
|
163
|
-
TitleResponsive: FC<TitleProps>;
|
|
164
|
-
TitleMobile: FC<TitleMobileProps>;
|
|
165
|
-
};
|
|
166
|
-
declare const typographyPresets: {
|
|
167
|
-
mobile: {
|
|
168
|
-
list: {
|
|
169
|
-
text: {
|
|
170
|
-
primary: {
|
|
171
|
-
tag: string;
|
|
172
|
-
view: string;
|
|
173
|
-
};
|
|
174
|
-
secondary: {
|
|
175
|
-
tag: string;
|
|
176
|
-
color: string;
|
|
177
|
-
view: string;
|
|
178
|
-
};
|
|
179
|
-
};
|
|
180
|
-
};
|
|
181
|
-
};
|
|
182
|
-
};
|
|
183
|
-
type BackerProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
184
|
-
/**
|
|
185
|
-
* Дополнительный класс
|
|
186
|
-
*/
|
|
187
|
-
className?: string;
|
|
188
|
-
/**
|
|
189
|
-
* Размер кнопки
|
|
190
|
-
*/
|
|
191
|
-
size?: IconButtonProps["size"];
|
|
192
|
-
/**
|
|
193
|
-
* Иконка
|
|
194
|
-
*/
|
|
195
|
-
icon?: ElementType;
|
|
196
|
-
/**
|
|
197
|
-
* Идентификатор для систем автоматизированного тестирования
|
|
198
|
-
*/
|
|
199
|
-
dataTestId?: string;
|
|
200
|
-
/**
|
|
201
|
-
* Обработчик нажатия
|
|
202
|
-
*/
|
|
203
|
-
onClick?: () => void;
|
|
204
|
-
};
|
|
205
|
-
declare const Backer: React.FC<BackerProps>;
|
|
206
|
-
declare const TitleResponsive: FC<TitleProps>;
|
|
207
|
-
type HeaderProps = {
|
|
208
|
-
/**
|
|
209
|
-
* Заголовок
|
|
210
|
-
*/
|
|
211
|
-
title?: ReactNode;
|
|
212
|
-
/**
|
|
213
|
-
* Дополнительный класс
|
|
214
|
-
*/
|
|
215
|
-
headerClassName?: string;
|
|
216
|
-
/**
|
|
217
|
-
* Дополнительный класс для аддонов
|
|
218
|
-
*/
|
|
219
|
-
addonClassName?: string;
|
|
220
|
-
/**
|
|
221
|
-
* Дополнительный класс для компонента крестика
|
|
222
|
-
*/
|
|
223
|
-
closerClassName?: string;
|
|
224
|
-
/**
|
|
225
|
-
* Дополнительный класс для компонента стрелки назад
|
|
226
|
-
*/
|
|
227
|
-
backerClassName?: string;
|
|
228
|
-
/**
|
|
229
|
-
* Слот слева
|
|
230
|
-
*/
|
|
231
|
-
leftAddons?: ReactNode;
|
|
232
|
-
/**
|
|
233
|
-
* Слот справа
|
|
234
|
-
*/
|
|
235
|
-
rightAddons?: ReactNode;
|
|
236
|
-
/**
|
|
237
|
-
* Слот снизу
|
|
238
|
-
*/
|
|
239
|
-
bottomAddons?: ReactNode;
|
|
240
|
-
/**
|
|
241
|
-
* Наличие компонента крестика
|
|
242
|
-
*/
|
|
243
|
-
hasCloser?: boolean;
|
|
244
|
-
/**
|
|
245
|
-
* Наличие компонента стрелки назад
|
|
246
|
-
*/
|
|
247
|
-
hasBacker?: boolean;
|
|
248
|
-
/**
|
|
249
|
-
* Выравнивание заголовка
|
|
250
|
-
*/
|
|
251
|
-
titleAlign?: BottomSheetTitleAlign;
|
|
252
|
-
/**
|
|
253
|
-
* Будет ли обрезан заголовок
|
|
254
|
-
*/
|
|
255
|
-
trimTitle?: boolean;
|
|
256
|
-
/**
|
|
257
|
-
* Фиксирует шапку
|
|
258
|
-
*/
|
|
259
|
-
sticky?: boolean;
|
|
260
|
-
/**
|
|
261
|
-
* Идентификатор для систем автоматизированного тестирования
|
|
262
|
-
*/
|
|
263
|
-
dataTestId?: string;
|
|
264
|
-
/**
|
|
265
|
-
* Обработчик нажатия на стрелку назад
|
|
266
|
-
*/
|
|
267
|
-
onBack?: () => void;
|
|
268
|
-
};
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { NavigationBarProps } from "./index-e81c389f";
|
|
3
|
+
type HeaderProps = Omit<NavigationBarProps, 'view' | 'size'>;
|
|
269
4
|
declare const Header: FC<HeaderProps>;
|
|
270
|
-
export {
|
|
271
|
-
export type { TitleProps, TextProps, Color };
|
|
5
|
+
export { HeaderProps, Header };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var coreComponentsSelect = require('@alfalab/core-components-select/cssm');
|
|
6
6
|
var autocompleteField_Component = require('./autocomplete-field/Component.js');
|
|
@@ -14,8 +14,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
14
14
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
15
|
|
|
16
16
|
var InputAutocompleteDesktop = React.forwardRef(function (_a, ref) {
|
|
17
|
-
var _b = _a.OptionsList, OptionsList = _b === void 0 ? coreComponentsSelect.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? coreComponentsSelect.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? coreComponentsSelect.Option : _d, Input = _a.Input, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, onInput = _a.onInput, value = _a.value, success = _a.success, readOnly = _a.readOnly, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? false : _f, options = _a.options, restProps =
|
|
18
|
-
return (React__default.default.createElement(coreComponentsSelect.BaseSelect,
|
|
17
|
+
var _b = _a.OptionsList, OptionsList = _b === void 0 ? coreComponentsSelect.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? coreComponentsSelect.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? coreComponentsSelect.Option : _d, Input = _a.Input, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, onInput = _a.onInput, value = _a.value, success = _a.success, readOnly = _a.readOnly, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? false : _f, options = _a.options, restProps = tslib.__rest(_a, ["OptionsList", "Optgroup", "Option", "Input", "inputProps", "onInput", "value", "success", "readOnly", "closeOnSelect", "options"]);
|
|
18
|
+
return (React__default.default.createElement(coreComponentsSelect.BaseSelect, tslib.__assign({ ref: ref, autocomplete: true, options: options, closeOnSelect: closeOnSelect, Option: Option, Field: autocompleteField_Component.AutocompleteField, fieldProps: {
|
|
19
19
|
Input: Input,
|
|
20
20
|
onInput: onInput,
|
|
21
21
|
value: value,
|
package/cssm/Component.mobile.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var mergeRefs = require('react-merge-refs');
|
|
6
6
|
var cn = require('classnames');
|
|
@@ -24,7 +24,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
|
24
24
|
|
|
25
25
|
var SELECTED = [];
|
|
26
26
|
var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, ref) {
|
|
27
|
-
var Input = _a.Input, _b = _a.bottomSheetProps, bottomSheetProps = _b === void 0 ? {} : _b, _c = _a.bottomSheetHeaderAddonsProps, bottomSheetHeaderAddonsProps = _c === void 0 ? {} : _c, _d = _a.value, value = _d === void 0 ? '' : _d, _e = _a.filter, filter = _e === void 0 ? '' : _e, name = _a.name, _f = _a.Arrow, Arrow = _f === void 0 ? null : _f, label = _a.label, placeholder = _a.placeholder, _g = _a.size, size = _g === void 0 ? 's' : _g, openProp = _a.open, onFilter = _a.onFilter, onChange = _a.onChange, onOpen = _a.onOpen, onCancel = _a.onCancel, onClearFilter = _a.onClearFilter, continueButtonProps = _a.continueButtonProps, cancelButtonProps = _a.cancelButtonProps, selected = _a.selected, multiple = _a.multiple, restProps =
|
|
27
|
+
var Input = _a.Input, _b = _a.bottomSheetProps, bottomSheetProps = _b === void 0 ? {} : _b, _c = _a.bottomSheetHeaderAddonsProps, bottomSheetHeaderAddonsProps = _c === void 0 ? {} : _c, _d = _a.value, value = _d === void 0 ? '' : _d, _e = _a.filter, filter = _e === void 0 ? '' : _e, name = _a.name, _f = _a.Arrow, Arrow = _f === void 0 ? null : _f, label = _a.label, placeholder = _a.placeholder, _g = _a.size, size = _g === void 0 ? 's' : _g, openProp = _a.open, onFilter = _a.onFilter, onChange = _a.onChange, onOpen = _a.onOpen, onCancel = _a.onCancel, onClearFilter = _a.onClearFilter, continueButtonProps = _a.continueButtonProps, cancelButtonProps = _a.cancelButtonProps, selected = _a.selected, multiple = _a.multiple, restProps = tslib.__rest(_a, ["Input", "bottomSheetProps", "bottomSheetHeaderAddonsProps", "value", "filter", "name", "Arrow", "label", "placeholder", "size", "open", "onFilter", "onChange", "onOpen", "onCancel", "onClearFilter", "continueButtonProps", "cancelButtonProps", "selected", "multiple"]);
|
|
28
28
|
var _h = React.useState(false), open = _h[0], setOpen = _h[1];
|
|
29
29
|
var bottomSheetInputRef = React.useRef(null);
|
|
30
30
|
var targetRef = React.useRef(null);
|
|
@@ -75,14 +75,14 @@ var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, re
|
|
|
75
75
|
};
|
|
76
76
|
var getBottomSheetProps = function () {
|
|
77
77
|
var Component = Input || coreComponentsInput.Input;
|
|
78
|
-
return
|
|
79
|
-
React__default.default.createElement(coreComponentsButton.Button,
|
|
80
|
-
React__default.default.createElement(coreComponentsButton.Button,
|
|
78
|
+
return tslib.__assign(tslib.__assign({ actionButton: (React__default.default.createElement("div", { className: styles__default.default.footer },
|
|
79
|
+
React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({ block: true, view: 'primary', size: 's', onClick: handleApply }, continueButtonProps), "\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C"),
|
|
80
|
+
React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({ block: true, view: 'secondary', size: 's', onClick: handleCancel }, cancelButtonProps), "\u041E\u0442\u043C\u0435\u043D\u0430"))), title: label || placeholder, bottomAddons: (React__default.default.createElement(Component, tslib.__assign({ block: true, clear: !!onClearFilter, onClear: onClearFilter, value: filter, onInput: onFilter, placeholder: placeholder, onFocus: handleInputFocus }, bottomSheetHeaderAddonsProps, { className: cn__default.default(styles__default.default.bottomSheetInput, bottomSheetHeaderAddonsProps.className), ref: mergeRefs__default.default([
|
|
81
81
|
bottomSheetInputRef,
|
|
82
82
|
bottomSheetHeaderAddonsProps.ref,
|
|
83
|
-
]) }))), initialHeight: 'full' }, bottomSheetProps), { containerProps:
|
|
83
|
+
]) }))), initialHeight: 'full' }, bottomSheetProps), { containerProps: tslib.__assign({ onTouchMove: handleOptionsListTouchMove }, bottomSheetProps.containerProps) });
|
|
84
84
|
};
|
|
85
|
-
return (React__default.default.createElement(coreComponentsSelect.SelectMobile,
|
|
85
|
+
return (React__default.default.createElement(coreComponentsSelect.SelectMobile, tslib.__assign({ ref: mergeRefs__default.default([targetRef, ref]), selected: selected || SELECTED, open: Boolean(open || openProp), onOpen: handleOpen, onChange: handleChange, Arrow: Arrow, Field: autocompleteMobileField_Component.AutocompleteMobileField, fieldProps: { value: value }, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, bottomSheetProps: getBottomSheetProps(), optionsListProps: { showFooter: false } }, restProps)));
|
|
86
86
|
});
|
|
87
87
|
|
|
88
88
|
exports.InputAutocompleteMobile = InputAutocompleteMobile;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { BaseSelectProps } from "@alfalab/core-components-select";
|
|
2
4
|
import { InputAutocompleteDesktopProps } from "./Component.desktop";
|
|
3
5
|
import { InputAutocompleteMobileProps } from "./Component.mobile";
|
|
4
6
|
type InputAutocompleteResponsiveProps = InputAutocompleteDesktopProps & InputAutocompleteMobileProps & {
|
|
@@ -9,5 +11,95 @@ type InputAutocompleteResponsiveProps = InputAutocompleteDesktopProps & InputAut
|
|
|
9
11
|
breakpoint?: number;
|
|
10
12
|
};
|
|
11
13
|
type InputAutocompleteMedia = 'desktop' | 'mobile';
|
|
12
|
-
declare const InputAutocompleteResponsive:
|
|
14
|
+
declare const InputAutocompleteResponsive: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "nativeSelect" | "Field"> & {
|
|
15
|
+
Input?: React.FC<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
|
|
16
|
+
value?: string | undefined;
|
|
17
|
+
defaultValue?: string | undefined;
|
|
18
|
+
block?: boolean | undefined;
|
|
19
|
+
clear?: boolean | undefined;
|
|
20
|
+
size?: "s" | "m" | "l" | "xl" | undefined;
|
|
21
|
+
colors?: "default" | "inverted" | undefined;
|
|
22
|
+
error?: React.ReactNode;
|
|
23
|
+
success?: boolean | undefined;
|
|
24
|
+
hint?: React.ReactNode;
|
|
25
|
+
label?: React.ReactNode;
|
|
26
|
+
labelView?: "inner" | "outer" | undefined;
|
|
27
|
+
type?: "number" | "text" | "tel" | "email" | "card" | "money" | "password" | undefined;
|
|
28
|
+
wrapperRef?: React.Ref<HTMLDivElement> | undefined;
|
|
29
|
+
leftAddons?: React.ReactNode;
|
|
30
|
+
rightAddons?: React.ReactNode;
|
|
31
|
+
bottomAddons?: React.ReactNode;
|
|
32
|
+
className?: string | undefined;
|
|
33
|
+
fieldClassName?: string | undefined;
|
|
34
|
+
inputClassName?: string | undefined;
|
|
35
|
+
labelClassName?: string | undefined;
|
|
36
|
+
addonsClassName?: string | undefined;
|
|
37
|
+
focusedClassName?: string | undefined;
|
|
38
|
+
filledClassName?: string | undefined;
|
|
39
|
+
onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
|
|
40
|
+
value: string;
|
|
41
|
+
}) => void) | undefined;
|
|
42
|
+
onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
|
|
43
|
+
onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
44
|
+
onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
45
|
+
onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
46
|
+
dataTestId?: string | undefined;
|
|
47
|
+
} & React.RefAttributes<HTMLInputElement>> | undefined;
|
|
48
|
+
inputProps?: (Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
|
|
49
|
+
value?: string | undefined;
|
|
50
|
+
defaultValue?: string | undefined;
|
|
51
|
+
block?: boolean | undefined;
|
|
52
|
+
clear?: boolean | undefined;
|
|
53
|
+
size?: "s" | "m" | "l" | "xl" | undefined;
|
|
54
|
+
colors?: "default" | "inverted" | undefined;
|
|
55
|
+
error?: React.ReactNode;
|
|
56
|
+
success?: boolean | undefined;
|
|
57
|
+
hint?: React.ReactNode;
|
|
58
|
+
label?: React.ReactNode;
|
|
59
|
+
labelView?: "inner" | "outer" | undefined;
|
|
60
|
+
type?: "number" | "text" | "tel" | "email" | "card" | "money" | "password" | undefined;
|
|
61
|
+
wrapperRef?: React.Ref<HTMLDivElement> | undefined;
|
|
62
|
+
leftAddons?: React.ReactNode;
|
|
63
|
+
rightAddons?: React.ReactNode;
|
|
64
|
+
bottomAddons?: React.ReactNode;
|
|
65
|
+
className?: string | undefined;
|
|
66
|
+
fieldClassName?: string | undefined;
|
|
67
|
+
inputClassName?: string | undefined;
|
|
68
|
+
labelClassName?: string | undefined;
|
|
69
|
+
addonsClassName?: string | undefined;
|
|
70
|
+
focusedClassName?: string | undefined;
|
|
71
|
+
filledClassName?: string | undefined;
|
|
72
|
+
onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
|
|
73
|
+
value: string;
|
|
74
|
+
}) => void) | undefined;
|
|
75
|
+
onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
|
|
76
|
+
onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
77
|
+
onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
78
|
+
onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
79
|
+
dataTestId?: string | undefined;
|
|
80
|
+
} & Record<string, unknown>) | undefined;
|
|
81
|
+
value?: string | undefined;
|
|
82
|
+
readOnly?: boolean | undefined;
|
|
83
|
+
success?: boolean | undefined;
|
|
84
|
+
onInput?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
85
|
+
updatePopover?: React.MutableRefObject<() => void> | undefined;
|
|
86
|
+
} & Omit<BaseSelectProps, "onScroll" | "valueRenderer" | "autocomplete" | "nativeSelect" | "OptionsList" | "Checkmark"> & {
|
|
87
|
+
onChange: (payload: string | import("@alfalab/core-components-select").BaseSelectChangePayload) => void;
|
|
88
|
+
onFilter: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
89
|
+
value?: string | undefined;
|
|
90
|
+
filter?: string | undefined;
|
|
91
|
+
onCancel?: (() => void) | undefined;
|
|
92
|
+
onClearFilter?: (() => void) | undefined;
|
|
93
|
+
bottomSheetProps?: Partial<import("./index-7ca84eff").BottomSheetProps> | undefined;
|
|
94
|
+
bottomSheetHeaderAddonsProps?: Record<string, unknown> | undefined;
|
|
95
|
+
continueButtonProps?: import("packages/button/src").ButtonProps | undefined;
|
|
96
|
+
cancelButtonProps?: import("packages/button/src").ButtonProps | undefined;
|
|
97
|
+
Input?: React.ElementType<any> | undefined;
|
|
98
|
+
} & {
|
|
99
|
+
/**
|
|
100
|
+
* Контрольная точка, с нее начинается desktop версия
|
|
101
|
+
* @default 1024
|
|
102
|
+
*/
|
|
103
|
+
breakpoint?: number | undefined;
|
|
104
|
+
} & React.RefAttributes<HTMLDivElement | HTMLInputElement>>;
|
|
13
105
|
export { InputAutocompleteResponsiveProps, InputAutocompleteMedia, InputAutocompleteResponsive };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var hooks = require('@alfalab/hooks');
|
|
6
6
|
var Component_desktop = require('./Component.desktop.js');
|
|
@@ -22,13 +22,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
22
22
|
|
|
23
23
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
24
24
|
|
|
25
|
-
var InputAutocompleteResponsive = function (_a) {
|
|
26
|
-
var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps =
|
|
25
|
+
var InputAutocompleteResponsive = React.forwardRef(function (_a, ref) {
|
|
26
|
+
var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
|
|
27
27
|
var view = hooks.useMedia([
|
|
28
28
|
['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
|
|
29
29
|
['desktop', "(min-width: ".concat(breakpoint, "px)")],
|
|
30
30
|
], 'desktop')[0];
|
|
31
|
-
return view === 'desktop' ? (React__default.default.createElement(Component_desktop.InputAutocompleteDesktop,
|
|
32
|
-
};
|
|
31
|
+
return view === 'desktop' ? (React__default.default.createElement(Component_desktop.InputAutocompleteDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(Component_mobile.InputAutocompleteMobile, tslib.__assign({}, restProps, { ref: ref })));
|
|
32
|
+
});
|
|
33
33
|
|
|
34
34
|
exports.InputAutocompleteResponsive = InputAutocompleteResponsive;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var mergeRefs = require('react-merge-refs');
|
|
6
6
|
var cn = require('classnames');
|
|
@@ -27,7 +27,7 @@ var AutocompleteField = function (_a) {
|
|
|
27
27
|
inputRef.current.focus();
|
|
28
28
|
}
|
|
29
29
|
}, [onClick]);
|
|
30
|
-
return (React__default.default.createElement(Input,
|
|
30
|
+
return (React__default.default.createElement(Input, tslib.__assign({}, inputProps, innerProps, { wrapperRef: mergeRefs__default.default([
|
|
31
31
|
innerProps.ref,
|
|
32
32
|
inputProps.wrapperRef,
|
|
33
33
|
]), ref: mergeRefs__default.default([inputRef, inputProps.ref]), disabled: disabled, readOnly: readOnly, block: true, label: label, labelView: labelView, placeholder: placeholder, size: size, error: error, success: success, hint: hint, onChange: onInput, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : onFocus, autoComplete: 'off', value: value, rightAddons: (Arrow || inputProps.rightAddons) && (React__default.default.createElement(React__default.default.Fragment, null,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var cn = require('classnames');
|
|
6
6
|
var coreComponentsFormControl = require('@alfalab/core-components-form-control/cssm');
|
|
@@ -15,14 +15,14 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
|
15
15
|
|
|
16
16
|
var AutocompleteMobileField = function (_a) {
|
|
17
17
|
var _b;
|
|
18
|
-
var _c = _a.size, size = _c === void 0 ? 'm' : _c; _a.open; var error = _a.error, hint = _a.hint, disabled = _a.disabled, label = _a.label, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; var restProps =
|
|
18
|
+
var _c = _a.size, size = _c === void 0 ? 'm' : _c; _a.open; var error = _a.error, hint = _a.hint, disabled = _a.disabled, label = _a.label, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; var restProps = tslib.__rest(_a, ["size", "open", "error", "hint", "disabled", "label", "labelView", "placeholder", "value", "innerProps", "dataTestId", "fieldClassName", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple"]);
|
|
19
19
|
var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
|
|
20
20
|
var wrapperRef = React.useRef(null);
|
|
21
21
|
var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
|
|
22
22
|
var filled = Boolean(value);
|
|
23
23
|
var showLabel = !!label && (filled || !placeholder || labelView === 'outer');
|
|
24
24
|
return (React__default.default.createElement("div", { className: styles__default.default.component, ref: wrapperRef, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } },
|
|
25
|
-
React__default.default.createElement(coreComponentsFormControl.FormControl,
|
|
25
|
+
React__default.default.createElement(coreComponentsFormControl.FormControl, tslib.__assign({ fieldClassName: cn__default.default(styles__default.default.field, fieldClassName, (_b = {},
|
|
26
26
|
_b[styles__default.default.disabled] = disabled,
|
|
27
27
|
_b[styles__default.default.focusVisible] = focusVisible,
|
|
28
28
|
_b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, label: showLabel && label, labelView: labelView, error: error, hint: hint, rightAddons: Arrow, "data-test-id": dataTestId }, restProps, innerProps),
|
package/cssm/desktop.js
CHANGED
package/cssm/index-7ca84eff.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/// <reference types="react-transition-group" />
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { HTMLAttributes, ReactNode, FC } from "react";
|
|
4
|
+
import { HTMLAttributes, ReactNode, RefObject, FC } from "react";
|
|
5
5
|
import { TransitionProps } from "react-transition-group/Transition";
|
|
6
6
|
import { BaseModalProps } from "./index-bdb4c6b9";
|
|
7
|
+
import { NavigationBarProps } from "./index-e81c389f";
|
|
7
8
|
import { SwipeableHandlers } from "react-swipeable/types";
|
|
8
9
|
import { BackdropProps } from "./index-ebda875c";
|
|
9
10
|
type BottomSheetTitleAlign = "center" | "left";
|
|
@@ -20,6 +21,14 @@ type BottomSheetProps = {
|
|
|
20
21
|
* Заголовок
|
|
21
22
|
*/
|
|
22
23
|
title?: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Размер заголовка
|
|
26
|
+
*/
|
|
27
|
+
titleSize?: NavigationBarProps["titleSize"];
|
|
28
|
+
/**
|
|
29
|
+
* Подзаголовок.
|
|
30
|
+
*/
|
|
31
|
+
subtitle?: NavigationBarProps["subtitle"];
|
|
23
32
|
/**
|
|
24
33
|
* Кнопка действия (обычно, это кнопка закрытия)
|
|
25
34
|
*/
|
|
@@ -156,6 +165,10 @@ type BottomSheetProps = {
|
|
|
156
165
|
* Свойства для Бэкдропа
|
|
157
166
|
*/
|
|
158
167
|
backdropProps?: BaseModalProps["backdropProps"];
|
|
168
|
+
/**
|
|
169
|
+
* Реф на контейнер, в котором происходит скролл
|
|
170
|
+
*/
|
|
171
|
+
scrollableContainerRef?: RefObject<HTMLElement>;
|
|
159
172
|
/**
|
|
160
173
|
* Обработчик закрытия
|
|
161
174
|
*/
|
|
@@ -184,7 +197,6 @@ type FooterProps = {
|
|
|
184
197
|
className?: string;
|
|
185
198
|
};
|
|
186
199
|
declare const Footer: FC<FooterProps>;
|
|
187
|
-
declare const isClient: () => boolean;
|
|
188
200
|
type SwipeableBackdropProps = BackdropProps & {
|
|
189
201
|
/**
|
|
190
202
|
* Прозрачность бэкдропа
|
|
@@ -200,5 +212,4 @@ type SwipeableBackdropProps = BackdropProps & {
|
|
|
200
212
|
opacityTimeout?: number;
|
|
201
213
|
};
|
|
202
214
|
declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
|
|
203
|
-
export { BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet, FooterProps, Footer,
|
|
204
|
-
export * from "./getDataTestId-3fe0d3e6";
|
|
215
|
+
export { BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop };
|
package/cssm/index-bdb4c6b9.d.ts
CHANGED