@alfalab/core-components-input-autocomplete 8.2.7 → 9.0.0
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 +32 -19
- package/Component.d.ts +11 -11
- package/Component.js +3 -3
- package/Component.mobile.d.ts +7 -7
- package/Component.mobile.js +12 -14
- package/autocomplete-field/Component.js +8 -11
- package/autocomplete-field/index.css +2 -2
- package/autocomplete-field/index.js +2 -2
- package/autocomplete-mobile-field/Component.d.ts +1 -1
- package/autocomplete-mobile-field/Component.js +5 -5
- package/autocomplete-mobile-field/index.css +8 -8
- package/autocomplete-mobile-field/index.js +3 -3
- package/cssm/Component-7ca84eff.d.ts +32 -19
- package/cssm/Component.d.ts +11 -11
- package/cssm/Component.js +3 -3
- package/cssm/Component.mobile.d.ts +7 -7
- package/cssm/Component.mobile.js +11 -13
- package/cssm/autocomplete-field/Component.js +7 -10
- package/cssm/autocomplete-field/index.js +2 -2
- package/cssm/autocomplete-mobile-field/Component.d.ts +1 -1
- package/cssm/autocomplete-mobile-field/Component.js +4 -4
- package/cssm/autocomplete-mobile-field/index.js +3 -3
- package/cssm/index-7ca84eff.d.ts +1 -1
- package/cssm/index-bdb4c6b9.d.ts +2 -1
- package/cssm/index-ebda875c.d.ts +1 -1
- package/cssm/index.js +3 -3
- package/cssm/mobile.js +4 -4
- package/cssm/{tslib.es6-ce870b46.d.ts → tslib.es6-9682e485.d.ts} +8 -4
- package/{tslib.es6-c13a6aed.js → cssm/tslib.es6-9682e485.js} +1 -1
- package/esm/Component-7ca84eff.d.ts +32 -19
- package/esm/Component.d.ts +11 -11
- package/esm/Component.js +3 -3
- package/esm/Component.mobile.d.ts +7 -7
- package/esm/Component.mobile.js +11 -13
- package/esm/autocomplete-field/Component.js +7 -10
- package/esm/autocomplete-field/index.css +2 -2
- package/esm/autocomplete-field/index.js +2 -2
- package/esm/autocomplete-mobile-field/Component.d.ts +1 -1
- package/esm/autocomplete-mobile-field/Component.js +4 -4
- package/esm/autocomplete-mobile-field/index.css +8 -8
- package/esm/autocomplete-mobile-field/index.js +3 -3
- package/esm/index-7ca84eff.d.ts +1 -1
- package/esm/index-bdb4c6b9.d.ts +2 -1
- package/esm/index-ebda875c.d.ts +1 -1
- package/esm/index.js +3 -3
- package/esm/mobile.css +4 -4
- package/esm/mobile.js +4 -4
- package/{tslib.es6-c13a6aed.d.ts → esm/tslib.es6-e57054c9.d.ts} +8 -4
- package/esm/{tslib.es6-7b266a22.js → tslib.es6-e57054c9.js} +1 -1
- package/index-7ca84eff.d.ts +1 -1
- package/index-bdb4c6b9.d.ts +2 -1
- package/index-ebda875c.d.ts +1 -1
- package/index.js +3 -3
- package/mobile.css +4 -4
- package/mobile.js +4 -4
- package/modern/Component-7ca84eff.d.ts +32 -19
- package/modern/Component.d.ts +11 -11
- package/modern/Component.js +4 -4
- package/modern/Component.mobile.d.ts +7 -7
- package/modern/Component.mobile.js +15 -17
- package/modern/autocomplete-field/Component.js +7 -10
- package/modern/autocomplete-field/index.css +2 -2
- package/modern/autocomplete-field/index.js +1 -1
- package/modern/autocomplete-mobile-field/Component.d.ts +1 -1
- package/modern/autocomplete-mobile-field/Component.js +5 -5
- package/modern/autocomplete-mobile-field/index.css +8 -8
- package/modern/autocomplete-mobile-field/index.js +2 -2
- package/modern/index-7ca84eff.d.ts +1 -1
- package/modern/index-bdb4c6b9.d.ts +2 -1
- package/modern/index-ebda875c.d.ts +1 -1
- package/modern/index.js +2 -2
- package/modern/mobile.css +4 -4
- package/modern/mobile.js +3 -3
- package/package.json +5 -5
- package/{esm/tslib.es6-7b266a22.d.ts → tslib.es6-7eb75557.d.ts} +8 -4
- package/{cssm/tslib.es6-ce870b46.js → tslib.es6-7eb75557.js} +1 -1
|
@@ -49,18 +49,27 @@ type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
|
49
49
|
icon?: ElementType;
|
|
50
50
|
};
|
|
51
51
|
declare const Closer: React.FC<CloserProps>;
|
|
52
|
-
declare const colors: readonly [
|
|
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
|
+
];
|
|
53
66
|
type Color = typeof colors[number];
|
|
54
|
-
type NativeProps = HTMLAttributes<
|
|
55
|
-
type
|
|
56
|
-
/**
|
|
57
|
-
* HTML тег
|
|
58
|
-
*/
|
|
59
|
-
tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
|
|
67
|
+
type NativeProps = HTMLAttributes<HTMLSpanElement>;
|
|
68
|
+
type TextProps = Omit<NativeProps, "color"> & {
|
|
60
69
|
/**
|
|
61
70
|
* [Вариант начертания](https://alfa-laboratory.github.io/core-components/master/?path=/docs/гайдлайны-типографика--page)
|
|
62
71
|
*/
|
|
63
|
-
view?: "
|
|
72
|
+
view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
|
|
64
73
|
/**
|
|
65
74
|
* Цвет текста
|
|
66
75
|
*/
|
|
@@ -70,13 +79,13 @@ type TitleProps = Omit<NativeProps, "color"> & {
|
|
|
70
79
|
*/
|
|
71
80
|
weight?: "regular" | "medium" | "bold";
|
|
72
81
|
/**
|
|
73
|
-
*
|
|
82
|
+
* Делает цифры моноширинными
|
|
74
83
|
*/
|
|
75
|
-
|
|
84
|
+
monospaceNumbers?: boolean;
|
|
76
85
|
/**
|
|
77
|
-
*
|
|
86
|
+
* HTML тег
|
|
78
87
|
*/
|
|
79
|
-
|
|
88
|
+
tag?: "p" | "span" | "div";
|
|
80
89
|
/**
|
|
81
90
|
* Css-класс для стилизации (native prop)
|
|
82
91
|
*/
|
|
@@ -90,12 +99,16 @@ type TitleProps = Omit<NativeProps, "color"> & {
|
|
|
90
99
|
*/
|
|
91
100
|
children?: React.ReactNode;
|
|
92
101
|
};
|
|
93
|
-
type NativeProps$0 = HTMLAttributes<
|
|
94
|
-
type
|
|
102
|
+
type NativeProps$0 = HTMLAttributes<HTMLHeadingElement>;
|
|
103
|
+
type TitleProps = Omit<NativeProps$0, "color"> & {
|
|
104
|
+
/**
|
|
105
|
+
* HTML тег
|
|
106
|
+
*/
|
|
107
|
+
tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
|
|
95
108
|
/**
|
|
96
109
|
* [Вариант начертания](https://alfa-laboratory.github.io/core-components/master/?path=/docs/гайдлайны-типографика--page)
|
|
97
110
|
*/
|
|
98
|
-
view?: "
|
|
111
|
+
view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
|
|
99
112
|
/**
|
|
100
113
|
* Цвет текста
|
|
101
114
|
*/
|
|
@@ -105,13 +118,13 @@ type TextProps = Omit<NativeProps$0, "color"> & {
|
|
|
105
118
|
*/
|
|
106
119
|
weight?: "regular" | "medium" | "bold";
|
|
107
120
|
/**
|
|
108
|
-
*
|
|
121
|
+
* Шрифт текста
|
|
109
122
|
*/
|
|
110
|
-
|
|
123
|
+
font?: "styrene" | "system";
|
|
111
124
|
/**
|
|
112
|
-
*
|
|
125
|
+
* Добавляет отступы
|
|
113
126
|
*/
|
|
114
|
-
|
|
127
|
+
defaultMargins?: boolean;
|
|
115
128
|
/**
|
|
116
129
|
* Css-класс для стилизации (native prop)
|
|
117
130
|
*/
|
package/modern/Component.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ChangeEvent, FC, RefAttributes } from "react";
|
|
4
4
|
import { InputProps } from "@alfalab/core-components-input";
|
|
5
5
|
import { BaseSelectProps } from "@alfalab/core-components-select";
|
|
6
6
|
type InputAutocompleteProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect'> & {
|
|
@@ -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<
|
|
36
|
+
declare const InputAutocomplete: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "nativeSelect" | "Field"> & {
|
|
37
37
|
/**
|
|
38
38
|
* Компонент ввода значения
|
|
39
39
|
*/
|
|
40
|
-
Input?: React.FC<
|
|
40
|
+
Input?: React.FC<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onClick" | "value" | "onMouseDown" | "defaultValue" | "onChange" | "size" | "enterKeyHint"> & {
|
|
41
41
|
value?: string | undefined;
|
|
42
42
|
defaultValue?: string | undefined;
|
|
43
43
|
block?: boolean | undefined;
|
|
@@ -49,8 +49,8 @@ declare const InputAutocomplete: React.ForwardRefExoticComponent<Pick<BaseSelect
|
|
|
49
49
|
hint?: React.ReactNode;
|
|
50
50
|
label?: React.ReactNode;
|
|
51
51
|
labelView?: "inner" | "outer" | undefined;
|
|
52
|
-
type?: "number" | "text" | "tel" | "email" | "
|
|
53
|
-
wrapperRef?:
|
|
52
|
+
type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
|
|
53
|
+
wrapperRef?: React.Ref<HTMLDivElement> | undefined;
|
|
54
54
|
leftAddons?: React.ReactNode;
|
|
55
55
|
rightAddons?: React.ReactNode;
|
|
56
56
|
bottomAddons?: React.ReactNode;
|
|
@@ -73,7 +73,7 @@ declare const InputAutocomplete: React.ForwardRefExoticComponent<Pick<BaseSelect
|
|
|
73
73
|
/**
|
|
74
74
|
* Пропсы, которые будут прокинуты в инпут
|
|
75
75
|
*/
|
|
76
|
-
inputProps?: (
|
|
76
|
+
inputProps?: (Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onClick" | "value" | "onMouseDown" | "defaultValue" | "onChange" | "size" | "enterKeyHint"> & {
|
|
77
77
|
value?: string | undefined;
|
|
78
78
|
defaultValue?: string | undefined;
|
|
79
79
|
block?: boolean | undefined;
|
|
@@ -85,8 +85,8 @@ declare const InputAutocomplete: React.ForwardRefExoticComponent<Pick<BaseSelect
|
|
|
85
85
|
hint?: React.ReactNode;
|
|
86
86
|
label?: React.ReactNode;
|
|
87
87
|
labelView?: "inner" | "outer" | undefined;
|
|
88
|
-
type?: "number" | "text" | "tel" | "email" | "
|
|
89
|
-
wrapperRef?:
|
|
88
|
+
type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
|
|
89
|
+
wrapperRef?: React.Ref<HTMLDivElement> | undefined;
|
|
90
90
|
leftAddons?: React.ReactNode;
|
|
91
91
|
rightAddons?: React.ReactNode;
|
|
92
92
|
bottomAddons?: React.ReactNode;
|
|
@@ -113,7 +113,7 @@ declare const InputAutocomplete: React.ForwardRefExoticComponent<Pick<BaseSelect
|
|
|
113
113
|
/**
|
|
114
114
|
* Поле доступно только для чтения
|
|
115
115
|
*/
|
|
116
|
-
readOnly?:
|
|
116
|
+
readOnly?: InputProps['readOnly'];
|
|
117
117
|
/**
|
|
118
118
|
* Отображение иконки успеха
|
|
119
119
|
*/
|
|
@@ -121,10 +121,10 @@ declare const InputAutocomplete: React.ForwardRefExoticComponent<Pick<BaseSelect
|
|
|
121
121
|
/**
|
|
122
122
|
* Обработчик ввода
|
|
123
123
|
*/
|
|
124
|
-
onInput?: ((event:
|
|
124
|
+
onInput?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
125
125
|
/**
|
|
126
126
|
* Хранит функцию, с помощью которой можно обновить положение поповера
|
|
127
127
|
*/
|
|
128
|
-
updatePopover?:
|
|
128
|
+
updatePopover?: BaseSelectProps['updatePopover'];
|
|
129
129
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
130
130
|
export { InputAutocompleteProps, InputAutocomplete };
|
package/modern/Component.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import 'classnames';
|
|
2
1
|
import React, { forwardRef } from 'react';
|
|
3
2
|
import 'react-merge-refs';
|
|
4
|
-
import
|
|
3
|
+
import 'classnames';
|
|
5
4
|
import '@alfalab/core-components-input/modern';
|
|
5
|
+
import { OptionsList, Optgroup, Option, BaseSelect } from '@alfalab/core-components-select/modern';
|
|
6
6
|
import { AutocompleteField } from './autocomplete-field/Component.js';
|
|
7
7
|
|
|
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,
|
|
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, { ref: ref, autocomplete: true, options: options, closeOnSelect: closeOnSelect, Option: Option$1, Field: AutocompleteField, fieldProps: {
|
|
9
9
|
Input,
|
|
10
10
|
onInput,
|
|
11
11
|
value,
|
|
12
12
|
inputProps,
|
|
13
13
|
readOnly,
|
|
14
14
|
success,
|
|
15
|
-
}, Optgroup: Optgroup$1, OptionsList: OptionsList$1
|
|
15
|
+
}, Optgroup: Optgroup$1, OptionsList: OptionsList$1, ...restProps })));
|
|
16
16
|
|
|
17
17
|
export { InputAutocomplete };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ChangeEvent, ElementType } from "react";
|
|
4
|
-
import { BaseSelectProps, BaseSelectChangePayload } from "@alfalab/core-components-select";
|
|
5
|
-
import { ButtonProps } from "@alfalab/core-components-button";
|
|
6
4
|
import { BottomSheetProps } from "./index-7ca84eff";
|
|
5
|
+
import { ButtonProps } from "@alfalab/core-components-button";
|
|
6
|
+
import { BaseSelectChangePayload, BaseSelectProps } from "@alfalab/core-components-select";
|
|
7
7
|
type InputAutocompleteMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Checkmark' | 'onScroll' | 'selected' | 'nativeSelect' | 'multiple' | 'autocomplete' | 'valueRenderer' | 'allowUnselect'> & {
|
|
8
8
|
/**
|
|
9
9
|
* Обработчик выбора
|
|
@@ -50,7 +50,7 @@ type InputAutocompleteMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Check
|
|
|
50
50
|
*/
|
|
51
51
|
Input?: ElementType;
|
|
52
52
|
};
|
|
53
|
-
declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<
|
|
53
|
+
declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "selected" | "multiple" | "valueRenderer" | "autocomplete" | "allowUnselect" | "nativeSelect" | "OptionsList" | "Checkmark"> & {
|
|
54
54
|
/**
|
|
55
55
|
* Обработчик выбора
|
|
56
56
|
*/
|
|
@@ -58,7 +58,7 @@ declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<Pick<Base
|
|
|
58
58
|
/**
|
|
59
59
|
* Обработчик ввода фильтра.
|
|
60
60
|
*/
|
|
61
|
-
onFilter: (event:
|
|
61
|
+
onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
62
62
|
/**
|
|
63
63
|
* Значение поля ввода
|
|
64
64
|
*/
|
|
@@ -86,14 +86,14 @@ declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<Pick<Base
|
|
|
86
86
|
/**
|
|
87
87
|
* Дополнительные пропсы на кнопку "продолжить"
|
|
88
88
|
*/
|
|
89
|
-
continueButtonProps?:
|
|
89
|
+
continueButtonProps?: ButtonProps | undefined;
|
|
90
90
|
/**
|
|
91
91
|
* Дополнительные пропсы на кнопку "отмена"
|
|
92
92
|
*/
|
|
93
|
-
cancelButtonProps?:
|
|
93
|
+
cancelButtonProps?: ButtonProps | undefined;
|
|
94
94
|
/**
|
|
95
95
|
* Кастомный инпут
|
|
96
96
|
*/
|
|
97
|
-
Input?:
|
|
97
|
+
Input?: React.ElementType<any> | undefined;
|
|
98
98
|
} & React.RefAttributes<unknown>>;
|
|
99
99
|
export { InputAutocompleteMobileProps, InputAutocompleteMobile };
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import cn from 'classnames';
|
|
2
1
|
import React, { useState, useRef, useMemo } from 'react';
|
|
3
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
|
+
import cn from 'classnames';
|
|
4
4
|
import throttle from 'lodash.throttle';
|
|
5
|
-
import { SelectMobile } from '@alfalab/core-components-select/modern';
|
|
6
5
|
import { Button } from '@alfalab/core-components-button/modern';
|
|
7
6
|
import { Input } from '@alfalab/core-components-input/modern';
|
|
8
|
-
import '@alfalab/
|
|
7
|
+
import { SelectMobile } from '@alfalab/core-components-select/modern';
|
|
9
8
|
import '@alfalab/core-components-form-control/modern';
|
|
9
|
+
import '@alfalab/hooks';
|
|
10
10
|
import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.js';
|
|
11
11
|
|
|
12
|
-
var styles = {"bottomSheetInput":"input-
|
|
12
|
+
var styles = {"bottomSheetInput":"input-autocomplete__bottomSheetInput_jyi7b","footer":"input-autocomplete__footer_jyi7b"};
|
|
13
13
|
require('./mobile.css')
|
|
14
14
|
|
|
15
15
|
const SELECTED = [];
|
|
@@ -28,14 +28,12 @@ const InputAutocompleteMobile = React.forwardRef(({ Input: Input$1, bottomSheetP
|
|
|
28
28
|
const handleOpen = payload => {
|
|
29
29
|
setBottomSheetVisibility(Boolean(payload.open));
|
|
30
30
|
};
|
|
31
|
-
const handleOptionsListTouchMove = useMemo(() => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}, 300);
|
|
38
|
-
}, []);
|
|
31
|
+
const handleOptionsListTouchMove = useMemo(() => throttle(() => {
|
|
32
|
+
const input = bottomSheetInputRef.current;
|
|
33
|
+
if (input && document.activeElement === input) {
|
|
34
|
+
input.blur();
|
|
35
|
+
}
|
|
36
|
+
}, 300), []);
|
|
39
37
|
const handleChange = () => {
|
|
40
38
|
setBottomSheetVisibility(false);
|
|
41
39
|
onChange(filter);
|
|
@@ -59,13 +57,13 @@ const InputAutocompleteMobile = React.forwardRef(({ Input: Input$1, bottomSheetP
|
|
|
59
57
|
const Component = Input$1 || Input;
|
|
60
58
|
return {
|
|
61
59
|
actionButton: (React.createElement("div", { className: styles.footer },
|
|
62
|
-
React.createElement(Button,
|
|
63
|
-
React.createElement(Button,
|
|
60
|
+
React.createElement(Button, { block: true, view: 'primary', size: 's', onClick: handleChange, ...continueButtonProps }, "\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C"),
|
|
61
|
+
React.createElement(Button, { block: true, view: 'secondary', size: 's', onClick: handleCancel, ...cancelButtonProps }, "\u041E\u0442\u043C\u0435\u043D\u0430"))),
|
|
64
62
|
title: label || placeholder,
|
|
65
|
-
bottomAddons: (React.createElement(Component,
|
|
63
|
+
bottomAddons: (React.createElement(Component, { block: true, clear: !!onClearFilter, onClear: onClearFilter, value: filter, onInput: onFilter, placeholder: placeholder, onFocus: handleInputFocus, ...bottomSheetHeaderAddonsProps, className: cn(styles.bottomSheetInput, bottomSheetHeaderAddonsProps.className), ref: mergeRefs([
|
|
66
64
|
bottomSheetInputRef,
|
|
67
65
|
bottomSheetHeaderAddonsProps.ref,
|
|
68
|
-
]) }))
|
|
66
|
+
]) })),
|
|
69
67
|
initialHeight: 'full',
|
|
70
68
|
...bottomSheetProps,
|
|
71
69
|
containerProps: {
|
|
@@ -74,7 +72,7 @@ const InputAutocompleteMobile = React.forwardRef(({ Input: Input$1, bottomSheetP
|
|
|
74
72
|
},
|
|
75
73
|
};
|
|
76
74
|
};
|
|
77
|
-
return (React.createElement(SelectMobile,
|
|
75
|
+
return (React.createElement(SelectMobile, { 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
76
|
});
|
|
79
77
|
|
|
80
78
|
export { InputAutocompleteMobile };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import cn from 'classnames';
|
|
2
1
|
import React, { useRef, useCallback } from 'react';
|
|
3
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
|
+
import cn from 'classnames';
|
|
4
4
|
import { Input } from '@alfalab/core-components-input/modern';
|
|
5
5
|
|
|
6
|
-
var styles = {"arrow":"input-
|
|
6
|
+
var styles = {"arrow":"input-autocomplete__arrow_hhu17","error":"input-autocomplete__error_hhu17"};
|
|
7
7
|
require('./index.css')
|
|
8
8
|
|
|
9
9
|
const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arrow, Input: Input$1 = Input, value, error, success, hint, disabled, readOnly, onInput, inputProps = {}, innerProps, }) => {
|
|
@@ -17,17 +17,14 @@ const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arro
|
|
|
17
17
|
inputRef.current.focus();
|
|
18
18
|
}
|
|
19
19
|
}, [onClick]);
|
|
20
|
-
return (React.createElement(Input$1,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
25
|
-
// @ts-ignore
|
|
26
|
-
ref: mergeRefs([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.createElement(React.Fragment, null,
|
|
20
|
+
return (React.createElement(Input$1, { ...inputProps, ...innerProps, wrapperRef: mergeRefs([
|
|
21
|
+
innerProps.ref,
|
|
22
|
+
inputProps.wrapperRef,
|
|
23
|
+
]), ref: mergeRefs([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.createElement(React.Fragment, null,
|
|
27
24
|
inputProps.rightAddons,
|
|
28
25
|
Arrow && (React.createElement("span", { className: cn(styles.arrow, {
|
|
29
26
|
[styles.error]: error,
|
|
30
|
-
}) }, Arrow)))) }))
|
|
27
|
+
}) }, Arrow)))) }));
|
|
31
28
|
};
|
|
32
29
|
|
|
33
30
|
export { AutocompleteField };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { FormControlProps } from "@alfalab/core-components-form-control";
|
|
3
|
-
import { FieldProps as BaseFieldProps } from "@alfalab/core-components-select";
|
|
4
3
|
import { InputAutocompleteProps } from "../index";
|
|
4
|
+
import { FieldProps as BaseFieldProps } from "@alfalab/core-components-select";
|
|
5
5
|
type AutocompleteMobileFieldProps = FormControlProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & Pick<InputAutocompleteProps, 'value'>;
|
|
6
6
|
declare const AutocompleteMobileField: ({ size, open, error, hint, disabled, label, labelView, placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }: AutocompleteMobileFieldProps) => JSX.Element;
|
|
7
7
|
export { AutocompleteMobileFieldProps, AutocompleteMobileField };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import cn from 'classnames';
|
|
2
1
|
import React, { useState, useRef } from 'react';
|
|
3
|
-
import
|
|
2
|
+
import cn from 'classnames';
|
|
4
3
|
import { FormControl } from '@alfalab/core-components-form-control/modern';
|
|
4
|
+
import { useFocus } from '@alfalab/hooks';
|
|
5
5
|
|
|
6
|
-
var styles = {"component":"input-
|
|
6
|
+
var styles = {"component":"input-autocomplete__component_1jd5j","field":"input-autocomplete__field_1jd5j","disabled":"input-autocomplete__disabled_1jd5j","placeholder":"input-autocomplete__placeholder_1jd5j","contentWrapper":"input-autocomplete__contentWrapper_1jd5j","value":"input-autocomplete__value_1jd5j","focusVisible":"input-autocomplete__focusVisible_1jd5j"};
|
|
7
7
|
require('./index.css')
|
|
8
8
|
|
|
9
9
|
const AutocompleteMobileField = ({ size = 'm', open, error, hint, disabled, label, labelView = 'inner', placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }) => {
|
|
@@ -13,10 +13,10 @@ const AutocompleteMobileField = ({ size = 'm', open, error, hint, disabled, labe
|
|
|
13
13
|
const filled = Boolean(value);
|
|
14
14
|
const showLabel = !!label && (filled || !placeholder || labelView === 'outer');
|
|
15
15
|
return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: () => setFocused(true), onBlur: () => setFocused(false) },
|
|
16
|
-
React.createElement(FormControl,
|
|
16
|
+
React.createElement(FormControl, { fieldClassName: cn(styles.field, fieldClassName, {
|
|
17
17
|
[styles.disabled]: disabled,
|
|
18
18
|
[styles.focusVisible]: focusVisible,
|
|
19
|
-
}), block: true, size: size, focused: focused, disabled: disabled, filled: filled, label: showLabel && label, labelView: labelView, error: error, hint: hint, "data-test-id": dataTestId
|
|
19
|
+
}), block: true, size: size, focused: focused, disabled: disabled, filled: filled, label: showLabel && label, labelView: labelView, error: error, hint: hint, "data-test-id": dataTestId, ...restProps, ...innerProps },
|
|
20
20
|
React.createElement("div", { className: styles.contentWrapper },
|
|
21
21
|
placeholder && !filled && (React.createElement("span", { className: styles.placeholder }, placeholder)),
|
|
22
22
|
filled && React.createElement("div", { className: styles.value }, value)))));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 9frxz */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-border-link: #007aff;
|
|
4
4
|
--color-light-text-secondary: rgba(11, 31, 53, 0.7);
|
|
@@ -15,20 +15,20 @@
|
|
|
15
15
|
--focus-color: var(--color-light-border-link);
|
|
16
16
|
--disabled-cursor: not-allowed;
|
|
17
17
|
}
|
|
18
|
-
.input-
|
|
18
|
+
.input-autocomplete__component_1jd5j {
|
|
19
19
|
width: 100%;
|
|
20
20
|
outline: none;
|
|
21
21
|
}
|
|
22
|
-
.input-
|
|
22
|
+
.input-autocomplete__field_1jd5j:not(.input-autocomplete__disabled_1jd5j) {
|
|
23
23
|
cursor: pointer;
|
|
24
24
|
}
|
|
25
|
-
.input-
|
|
25
|
+
.input-autocomplete__disabled_1jd5j {
|
|
26
26
|
cursor: var(--disabled-cursor);
|
|
27
27
|
}
|
|
28
|
-
.input-
|
|
28
|
+
.input-autocomplete__placeholder_1jd5j {
|
|
29
29
|
color: var(--color-light-text-secondary);
|
|
30
30
|
}
|
|
31
|
-
.input-
|
|
31
|
+
.input-autocomplete__contentWrapper_1jd5j {
|
|
32
32
|
font-size: 16px;
|
|
33
33
|
line-height: 20px;
|
|
34
34
|
font-weight: 400;
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
overflow: hidden;
|
|
39
39
|
width: 100%;
|
|
40
40
|
}
|
|
41
|
-
.input-
|
|
41
|
+
.input-autocomplete__value_1jd5j {
|
|
42
42
|
overflow: hidden;
|
|
43
43
|
text-overflow: ellipsis;
|
|
44
44
|
text-align: left;
|
|
45
45
|
}
|
|
46
|
-
.input-
|
|
46
|
+
.input-autocomplete__focusVisible_1jd5j {
|
|
47
47
|
outline: 2px solid var(--focus-color);
|
|
48
48
|
outline-offset: 2px;
|
|
49
49
|
}
|
|
@@ -4,8 +4,8 @@ import React from "react";
|
|
|
4
4
|
import { HTMLAttributes, ReactNode, FC } from "react";
|
|
5
5
|
import { TransitionProps } from "react-transition-group/Transition";
|
|
6
6
|
import { BaseModalProps } from "./index-bdb4c6b9";
|
|
7
|
-
import { BackdropProps } from "./index-ebda875c";
|
|
8
7
|
import { SwipeableHandlers } from "react-swipeable/types";
|
|
8
|
+
import { BackdropProps } from "./index-ebda875c";
|
|
9
9
|
type BottomSheetTitleAlign = "center" | "left";
|
|
10
10
|
type BottomSheetProps = {
|
|
11
11
|
/**
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
4
4
|
import React from "react";
|
|
5
|
-
import {
|
|
5
|
+
import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref, RefObject } from "react";
|
|
6
6
|
import { TransitionProps } from "react-transition-group/Transition";
|
|
7
7
|
import { BackdropProps } from "./index-ebda875c";
|
|
8
8
|
type PortalProps = {
|
|
@@ -143,6 +143,7 @@ type BaseModalContext = {
|
|
|
143
143
|
setHasFooter: (exists: boolean) => void;
|
|
144
144
|
onClose: Required<BaseModalProps>["onClose"];
|
|
145
145
|
};
|
|
146
|
+
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
146
147
|
declare const BaseModalContext: React.Context<BaseModalContext>;
|
|
147
148
|
declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
148
149
|
declare function isScrolledToTop(target: HTMLElement): boolean;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { MouseEvent, ReactNode } from "react";
|
|
5
|
-
import { TransitionProps } from "react-transition-group/Transition";
|
|
6
5
|
import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
|
|
6
|
+
import { TransitionProps } from "react-transition-group/Transition";
|
|
7
7
|
type BackdropProps = Partial<TransitionProps> & {
|
|
8
8
|
/**
|
|
9
9
|
* Прозрачный бэкдроп
|
package/modern/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import 'classnames';
|
|
2
1
|
import 'react';
|
|
3
2
|
import 'react-merge-refs';
|
|
4
|
-
import '
|
|
3
|
+
import 'classnames';
|
|
5
4
|
import '@alfalab/core-components-input/modern';
|
|
5
|
+
import '@alfalab/core-components-select/modern';
|
|
6
6
|
import './autocomplete-field/Component.js';
|
|
7
7
|
export { InputAutocomplete } from './Component.js';
|
package/modern/mobile.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 14s6b */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -11,13 +11,13 @@
|
|
|
11
11
|
--gap-xs: 8px;
|
|
12
12
|
--gap-m: 16px;
|
|
13
13
|
}
|
|
14
|
-
.input-
|
|
14
|
+
.input-autocomplete__bottomSheetInput_jyi7b {
|
|
15
15
|
padding: 0 var(--gap-xs) var(--gap-xs);
|
|
16
16
|
box-sizing: border-box;
|
|
17
17
|
}
|
|
18
|
-
.input-
|
|
18
|
+
.input-autocomplete__footer_jyi7b {
|
|
19
19
|
display: flex
|
|
20
20
|
}
|
|
21
|
-
.input-
|
|
21
|
+
.input-autocomplete__footer_jyi7b > button + button {
|
|
22
22
|
margin-left: var(--gap-m);
|
|
23
23
|
}
|
package/modern/mobile.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import 'classnames';
|
|
2
1
|
import 'react';
|
|
3
2
|
import 'react-merge-refs';
|
|
3
|
+
import 'classnames';
|
|
4
4
|
import 'lodash.throttle';
|
|
5
|
-
import '@alfalab/core-components-select/modern';
|
|
6
5
|
import '@alfalab/core-components-button/modern';
|
|
7
6
|
import '@alfalab/core-components-input/modern';
|
|
8
|
-
import '@alfalab/
|
|
7
|
+
import '@alfalab/core-components-select/modern';
|
|
9
8
|
import '@alfalab/core-components-form-control/modern';
|
|
9
|
+
import '@alfalab/hooks';
|
|
10
10
|
import './autocomplete-mobile-field/Component.js';
|
|
11
11
|
export { InputAutocompleteMobile } from './Component.mobile.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-input-autocomplete",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
"react": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@alfalab/core-components-button": "^
|
|
21
|
-
"@alfalab/core-components-form-control": "^
|
|
22
|
-
"@alfalab/core-components-input": "^
|
|
23
|
-
"@alfalab/core-components-select": "^
|
|
20
|
+
"@alfalab/core-components-button": "^7.0.0",
|
|
21
|
+
"@alfalab/core-components-form-control": "^9.0.0",
|
|
22
|
+
"@alfalab/core-components-input": "^11.0.0",
|
|
23
|
+
"@alfalab/core-components-select": "^13.0.0",
|
|
24
24
|
"@alfalab/hooks": "^1.4.1",
|
|
25
25
|
"classnames": "^2.3.1",
|
|
26
26
|
"lodash.throttle": "^4.1.1",
|