@alfalab/core-components-input-autocomplete 11.4.1 → 12.0.1
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/autocomplete-field/Component.js +3 -2
- package/autocomplete-field/index.css +2 -2
- package/autocomplete-mobile-field/Component.js +2 -2
- package/autocomplete-mobile-field/index.css +9 -9
- package/cssm/autocomplete-field/Component.js +2 -1
- package/cssm/autocomplete-mobile-field/Component.js +1 -1
- package/cssm/autocomplete-mobile-field/index.module.css +1 -1
- package/cssm/mobile/Component.mobile.js +3 -3
- package/cssm/mobile/mobile.module.css +1 -1
- package/cssm/types.d.ts +2 -4
- package/esm/autocomplete-field/Component.js +3 -2
- package/esm/autocomplete-field/index.css +2 -2
- package/esm/autocomplete-mobile-field/Component.js +2 -2
- package/esm/autocomplete-mobile-field/index.css +9 -9
- package/esm/mobile/Component.mobile.js +4 -4
- package/esm/mobile/mobile.css +3 -3
- package/esm/types.d.ts +2 -4
- package/mobile/Component.mobile.js +4 -4
- package/mobile/mobile.css +3 -3
- package/modern/autocomplete-field/Component.js +3 -2
- package/modern/autocomplete-field/index.css +2 -2
- package/modern/autocomplete-mobile-field/Component.js +2 -2
- package/modern/autocomplete-mobile-field/index.css +9 -9
- package/modern/mobile/Component.mobile.js +4 -4
- package/modern/mobile/mobile.css +3 -3
- package/modern/types.d.ts +2 -4
- package/package.json +4 -4
- package/src/autocomplete-field/Component.tsx +4 -1
- package/src/autocomplete-mobile-field/Component.tsx +1 -1
- package/src/mobile/Component.mobile.tsx +3 -3
- package/src/types.ts +2 -2
- package/types.d.ts +2 -4
|
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
14
14
|
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
15
15
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
16
16
|
|
|
17
|
-
var styles = {"arrow":"input-
|
|
17
|
+
var styles = {"arrow":"input-autocomplete__arrow_1nf8s","error":"input-autocomplete__error_1nf8s"};
|
|
18
18
|
require('./index.css')
|
|
19
19
|
|
|
20
20
|
var AutocompleteField = function (_a) {
|
|
@@ -30,10 +30,11 @@ var AutocompleteField = function (_a) {
|
|
|
30
30
|
inputRef.current.focus();
|
|
31
31
|
}
|
|
32
32
|
}, [onClick]);
|
|
33
|
+
var handleInput = function (_, payload) { return onInput === null || onInput === void 0 ? void 0 : onInput(payload.value); };
|
|
33
34
|
return (React__default.default.createElement(Input, tslib.__assign({ dataTestId: dataTestId }, inputProps, innerProps, { wrapperRef: mergeRefs__default.default([
|
|
34
35
|
innerProps.ref,
|
|
35
36
|
inputProps.wrapperRef,
|
|
36
|
-
]), 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:
|
|
37
|
+
]), 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: handleInput, 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,
|
|
37
38
|
inputProps.rightAddons,
|
|
38
39
|
Arrow && (React__default.default.createElement("span", { className: cn__default.default(styles.arrow, (_b = {},
|
|
39
40
|
_b[styles.error] = error,
|
|
@@ -15,12 +15,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
16
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
17
17
|
|
|
18
|
-
var styles = {"component":"input-
|
|
18
|
+
var styles = {"component":"input-autocomplete__component_10tpb","field":"input-autocomplete__field_10tpb","disabled":"input-autocomplete__disabled_10tpb","placeholder":"input-autocomplete__placeholder_10tpb","contentWrapper":"input-autocomplete__contentWrapper_10tpb","value":"input-autocomplete__value_10tpb","focusVisible":"input-autocomplete__focusVisible_10tpb"};
|
|
19
19
|
require('./index.css')
|
|
20
20
|
|
|
21
21
|
var AutocompleteMobileField = function (_a) {
|
|
22
22
|
var _b;
|
|
23
|
-
var _c = _a.size, size = _c === void 0 ?
|
|
23
|
+
var _c = _a.size, size = _c === void 0 ? 56 : _c, open = _a.open, disabled = _a.disabled, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; _a.FormControlComponent; var rightAddons = _a.rightAddons, error = _a.error, readOnly = _a.readOnly, clear = _a.clear, onClear = _a.onClear; _a.onInput; var _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = tslib.__rest(_a, ["size", "open", "disabled", "value", "innerProps", "dataTestId", "fieldClassName", "labelView", "placeholder", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple", "FormControlComponent", "rightAddons", "error", "readOnly", "clear", "onClear", "onInput", "colors"]);
|
|
24
24
|
var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
|
|
25
25
|
var wrapperRef = React.useRef(null);
|
|
26
26
|
var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* hash:
|
|
2
|
-
:root {
|
|
1
|
+
/* hash: 1lw13 */
|
|
2
|
+
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-link: #2288fa;
|
|
5
5
|
--color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
} :root {
|
|
19
19
|
--focus-color: var(--color-light-border-link);
|
|
20
20
|
--disabled-cursor: not-allowed;
|
|
21
|
-
} .input-
|
|
21
|
+
} .input-autocomplete__component_10tpb {
|
|
22
22
|
width: 100%;
|
|
23
23
|
outline: none;
|
|
24
|
-
} .input-
|
|
24
|
+
} .input-autocomplete__field_10tpb:not(.input-autocomplete__disabled_10tpb) {
|
|
25
25
|
cursor: pointer;
|
|
26
|
-
} .input-
|
|
26
|
+
} .input-autocomplete__disabled_10tpb {
|
|
27
27
|
cursor: var(--disabled-cursor);
|
|
28
|
-
} .input-
|
|
28
|
+
} .input-autocomplete__placeholder_10tpb {
|
|
29
29
|
color: var(--color-light-text-secondary);
|
|
30
|
-
} .input-
|
|
30
|
+
} .input-autocomplete__contentWrapper_10tpb {
|
|
31
31
|
font-size: 16px;
|
|
32
32
|
line-height: 20px;
|
|
33
33
|
font-weight: 400;
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
text-overflow: ellipsis;
|
|
37
37
|
overflow: hidden;
|
|
38
38
|
width: 100%;
|
|
39
|
-
} .input-
|
|
39
|
+
} .input-autocomplete__value_10tpb {
|
|
40
40
|
overflow: hidden;
|
|
41
41
|
text-overflow: ellipsis;
|
|
42
42
|
text-align: left;
|
|
43
|
-
} .input-
|
|
43
|
+
} .input-autocomplete__focusVisible_10tpb {
|
|
44
44
|
outline: 2px solid var(--focus-color);
|
|
45
45
|
outline-offset: 2px;
|
|
46
46
|
}
|
|
@@ -29,10 +29,11 @@ var AutocompleteField = function (_a) {
|
|
|
29
29
|
inputRef.current.focus();
|
|
30
30
|
}
|
|
31
31
|
}, [onClick]);
|
|
32
|
+
var handleInput = function (_, payload) { return onInput === null || onInput === void 0 ? void 0 : onInput(payload.value); };
|
|
32
33
|
return (React__default.default.createElement(Input, tslib.__assign({ dataTestId: dataTestId }, inputProps, innerProps, { wrapperRef: mergeRefs__default.default([
|
|
33
34
|
innerProps.ref,
|
|
34
35
|
inputProps.wrapperRef,
|
|
35
|
-
]), 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:
|
|
36
|
+
]), 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: handleInput, 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,
|
|
36
37
|
inputProps.rightAddons,
|
|
37
38
|
Arrow && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.arrow, (_b = {},
|
|
38
39
|
_b[styles__default.default.error] = error,
|
|
@@ -19,7 +19,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
|
19
19
|
|
|
20
20
|
var AutocompleteMobileField = function (_a) {
|
|
21
21
|
var _b;
|
|
22
|
-
var _c = _a.size, size = _c === void 0 ?
|
|
22
|
+
var _c = _a.size, size = _c === void 0 ? 56 : _c, open = _a.open, disabled = _a.disabled, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; _a.FormControlComponent; var rightAddons = _a.rightAddons, error = _a.error, readOnly = _a.readOnly, clear = _a.clear, onClear = _a.onClear; _a.onInput; var _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = tslib.__rest(_a, ["size", "open", "disabled", "value", "innerProps", "dataTestId", "fieldClassName", "labelView", "placeholder", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple", "FormControlComponent", "rightAddons", "error", "readOnly", "clear", "onClear", "onInput", "colors"]);
|
|
23
23
|
var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
|
|
24
24
|
var wrapperRef = React.useRef(null);
|
|
25
25
|
var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
:root {
|
|
1
|
+
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
2
2
|
} /* deprecated */ :root {
|
|
3
3
|
--color-light-border-link: #2288fa;
|
|
4
4
|
--color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -24,12 +24,12 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
|
24
24
|
var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, ref) {
|
|
25
25
|
var _b;
|
|
26
26
|
var _c;
|
|
27
|
-
var Input = _a.Input, value = _a.value, name = _a.name, _d = _a.Arrow, Arrow = _d === void 0 ? null : _d, label = _a.label, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.size, size = _f === void 0 ?
|
|
27
|
+
var Input = _a.Input, value = _a.value, name = _a.name, _d = _a.Arrow, Arrow = _d === void 0 ? null : _d, label = _a.label, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.size, size = _f === void 0 ? 48 : _f, openProp = _a.open, onInput = _a.onInput, onOpen = _a.onOpen, multiple = _a.multiple, inputProps = _a.inputProps, _g = _a.isBottomSheet, isBottomSheet = _g === void 0 ? true : _g, dataTestId = _a.dataTestId, transitionProps = _a.transitionProps, onCancel = _a.onCancel, onApply = _a.onApply, title = _a.title, restProps = tslib.__rest(_a, ["Input", "value", "name", "Arrow", "label", "placeholder", "size", "open", "onInput", "onOpen", "multiple", "inputProps", "isBottomSheet", "dataTestId", "transitionProps", "onCancel", "onApply", "title"]);
|
|
28
28
|
var _h = React.useState(false), open = _h[0], setOpen = _h[1];
|
|
29
29
|
var frozenValue = React.useRef('');
|
|
30
30
|
var searchInputRef = React.useRef(null);
|
|
31
31
|
var targetRef = React.useRef(null);
|
|
32
|
-
var restorePrevValue = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(
|
|
32
|
+
var restorePrevValue = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(frozenValue.current); };
|
|
33
33
|
var setModalVisibility = function (isOpen) {
|
|
34
34
|
if (isOpen) {
|
|
35
35
|
frozenValue.current = value || '';
|
|
@@ -84,7 +84,7 @@ var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, re
|
|
|
84
84
|
}), { dataTestId: dataTestId, useWithApplyHook: false, showSearch: true, searchProps: {
|
|
85
85
|
value: value,
|
|
86
86
|
filterFn: utils.searchFilterStub,
|
|
87
|
-
componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn__default.default(styles__default.default.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: clear, ref: mergeRefs__default.default([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: onInput }),
|
|
87
|
+
componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn__default.default(styles__default.default.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: clear, ref: mergeRefs__default.default([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: function (_, payload) { return onInput === null || onInput === void 0 ? void 0 : onInput(payload.value); } }),
|
|
88
88
|
}, Search: Input, ref: mergeRefs__default.default([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: tslib.__assign({ footer: (React__default.default.createElement(shared.Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })) }, restProps.optionsListProps), fieldProps: tslib.__assign({ value: isOpen ? frozenValue.current : value, clear: clear, onClear: clear ? inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClear : undefined }, restProps.fieldProps) })));
|
|
89
89
|
});
|
|
90
90
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
:root {
|
|
1
|
+
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
2
2
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root {
|
package/cssm/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FC, RefAttributes } from 'react';
|
|
2
2
|
import { InputProps } from "@alfalab/core-components-input";
|
|
3
3
|
import { BaseSelectProps, BottomSheetSelectMobileProps } from "@alfalab/core-components-select/shared";
|
|
4
4
|
interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'Field' | 'nativeSelect' | 'searchProps' | 'showSearch' | 'Search'> {
|
|
@@ -25,9 +25,7 @@ interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomple
|
|
|
25
25
|
/**
|
|
26
26
|
* Обработчик ввода
|
|
27
27
|
*/
|
|
28
|
-
onInput?: (
|
|
29
|
-
value: string;
|
|
30
|
-
}) => void;
|
|
28
|
+
onInput?: (value: string) => void;
|
|
31
29
|
}
|
|
32
30
|
type MobileProps = {
|
|
33
31
|
/**
|
|
@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
|
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
import { InputDesktop } from '@alfalab/core-components-input/esm/desktop';
|
|
6
6
|
|
|
7
|
-
var styles = {"arrow":"input-
|
|
7
|
+
var styles = {"arrow":"input-autocomplete__arrow_1nf8s","error":"input-autocomplete__error_1nf8s"};
|
|
8
8
|
require('./index.css')
|
|
9
9
|
|
|
10
10
|
var AutocompleteField = function (_a) {
|
|
@@ -20,10 +20,11 @@ var AutocompleteField = function (_a) {
|
|
|
20
20
|
inputRef.current.focus();
|
|
21
21
|
}
|
|
22
22
|
}, [onClick]);
|
|
23
|
+
var handleInput = function (_, payload) { return onInput === null || onInput === void 0 ? void 0 : onInput(payload.value); };
|
|
23
24
|
return (React.createElement(Input, __assign({ dataTestId: dataTestId }, inputProps, innerProps, { wrapperRef: mergeRefs([
|
|
24
25
|
innerProps.ref,
|
|
25
26
|
inputProps.wrapperRef,
|
|
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:
|
|
27
|
+
]), 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: handleInput, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : onFocus, autoComplete: 'off', value: value, rightAddons: (Arrow || inputProps.rightAddons) && (React.createElement(React.Fragment, null,
|
|
27
28
|
inputProps.rightAddons,
|
|
28
29
|
Arrow && (React.createElement("span", { className: cn(styles.arrow, (_b = {},
|
|
29
30
|
_b[styles.error] = error,
|
|
@@ -6,12 +6,12 @@ import { ClearButton } from '@alfalab/core-components-input/esm/shared';
|
|
|
6
6
|
import { getDataTestId } from '@alfalab/core-components-shared/esm';
|
|
7
7
|
import { useFocus } from '@alfalab/hooks';
|
|
8
8
|
|
|
9
|
-
var styles = {"component":"input-
|
|
9
|
+
var styles = {"component":"input-autocomplete__component_10tpb","field":"input-autocomplete__field_10tpb","disabled":"input-autocomplete__disabled_10tpb","placeholder":"input-autocomplete__placeholder_10tpb","contentWrapper":"input-autocomplete__contentWrapper_10tpb","value":"input-autocomplete__value_10tpb","focusVisible":"input-autocomplete__focusVisible_10tpb"};
|
|
10
10
|
require('./index.css')
|
|
11
11
|
|
|
12
12
|
var AutocompleteMobileField = function (_a) {
|
|
13
13
|
var _b;
|
|
14
|
-
var _c = _a.size, size = _c === void 0 ?
|
|
14
|
+
var _c = _a.size, size = _c === void 0 ? 56 : _c, open = _a.open, disabled = _a.disabled, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; _a.FormControlComponent; var rightAddons = _a.rightAddons, error = _a.error, readOnly = _a.readOnly, clear = _a.clear, onClear = _a.onClear; _a.onInput; var _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = __rest(_a, ["size", "open", "disabled", "value", "innerProps", "dataTestId", "fieldClassName", "labelView", "placeholder", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple", "FormControlComponent", "rightAddons", "error", "readOnly", "clear", "onClear", "onInput", "colors"]);
|
|
15
15
|
var _f = useState(false), focused = _f[0], setFocused = _f[1];
|
|
16
16
|
var wrapperRef = useRef(null);
|
|
17
17
|
var focusVisible = useFocus(wrapperRef, 'keyboard')[0];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* hash:
|
|
2
|
-
:root {
|
|
1
|
+
/* hash: 1lw13 */
|
|
2
|
+
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-link: #2288fa;
|
|
5
5
|
--color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
} :root {
|
|
19
19
|
--focus-color: var(--color-light-border-link);
|
|
20
20
|
--disabled-cursor: not-allowed;
|
|
21
|
-
} .input-
|
|
21
|
+
} .input-autocomplete__component_10tpb {
|
|
22
22
|
width: 100%;
|
|
23
23
|
outline: none;
|
|
24
|
-
} .input-
|
|
24
|
+
} .input-autocomplete__field_10tpb:not(.input-autocomplete__disabled_10tpb) {
|
|
25
25
|
cursor: pointer;
|
|
26
|
-
} .input-
|
|
26
|
+
} .input-autocomplete__disabled_10tpb {
|
|
27
27
|
cursor: var(--disabled-cursor);
|
|
28
|
-
} .input-
|
|
28
|
+
} .input-autocomplete__placeholder_10tpb {
|
|
29
29
|
color: var(--color-light-text-secondary);
|
|
30
|
-
} .input-
|
|
30
|
+
} .input-autocomplete__contentWrapper_10tpb {
|
|
31
31
|
font-size: 16px;
|
|
32
32
|
line-height: 20px;
|
|
33
33
|
font-weight: 400;
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
text-overflow: ellipsis;
|
|
37
37
|
overflow: hidden;
|
|
38
38
|
width: 100%;
|
|
39
|
-
} .input-
|
|
39
|
+
} .input-autocomplete__value_10tpb {
|
|
40
40
|
overflow: hidden;
|
|
41
41
|
text-overflow: ellipsis;
|
|
42
42
|
text-align: left;
|
|
43
|
-
} .input-
|
|
43
|
+
} .input-autocomplete__focusVisible_10tpb {
|
|
44
44
|
outline: 2px solid var(--focus-color);
|
|
45
45
|
outline-offset: 2px;
|
|
46
46
|
}
|
|
@@ -8,18 +8,18 @@ import { Footer } from '@alfalab/core-components-select/esm/shared';
|
|
|
8
8
|
import { AutocompleteMobileField } from '../autocomplete-mobile-field/Component.js';
|
|
9
9
|
import { searchFilterStub } from '../utils.js';
|
|
10
10
|
|
|
11
|
-
var styles = {"input":"input-
|
|
11
|
+
var styles = {"input":"input-autocomplete__input_1nyks"};
|
|
12
12
|
require('./mobile.css')
|
|
13
13
|
|
|
14
14
|
var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {
|
|
15
15
|
var _b;
|
|
16
16
|
var _c;
|
|
17
|
-
var Input = _a.Input, value = _a.value, name = _a.name, _d = _a.Arrow, Arrow = _d === void 0 ? null : _d, label = _a.label, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.size, size = _f === void 0 ?
|
|
17
|
+
var Input = _a.Input, value = _a.value, name = _a.name, _d = _a.Arrow, Arrow = _d === void 0 ? null : _d, label = _a.label, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.size, size = _f === void 0 ? 48 : _f, openProp = _a.open, onInput = _a.onInput, onOpen = _a.onOpen, multiple = _a.multiple, inputProps = _a.inputProps, _g = _a.isBottomSheet, isBottomSheet = _g === void 0 ? true : _g, dataTestId = _a.dataTestId, transitionProps = _a.transitionProps, onCancel = _a.onCancel, onApply = _a.onApply, title = _a.title, restProps = __rest(_a, ["Input", "value", "name", "Arrow", "label", "placeholder", "size", "open", "onInput", "onOpen", "multiple", "inputProps", "isBottomSheet", "dataTestId", "transitionProps", "onCancel", "onApply", "title"]);
|
|
18
18
|
var _h = useState(false), open = _h[0], setOpen = _h[1];
|
|
19
19
|
var frozenValue = useRef('');
|
|
20
20
|
var searchInputRef = useRef(null);
|
|
21
21
|
var targetRef = useRef(null);
|
|
22
|
-
var restorePrevValue = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(
|
|
22
|
+
var restorePrevValue = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(frozenValue.current); };
|
|
23
23
|
var setModalVisibility = function (isOpen) {
|
|
24
24
|
if (isOpen) {
|
|
25
25
|
frozenValue.current = value || '';
|
|
@@ -74,7 +74,7 @@ var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {
|
|
|
74
74
|
}), { dataTestId: dataTestId, useWithApplyHook: false, showSearch: true, searchProps: {
|
|
75
75
|
value: value,
|
|
76
76
|
filterFn: searchFilterStub,
|
|
77
|
-
componentProps: __assign(__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn(styles.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: clear, ref: mergeRefs([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: onInput }),
|
|
77
|
+
componentProps: __assign(__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn(styles.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: clear, ref: mergeRefs([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: function (_, payload) { return onInput === null || onInput === void 0 ? void 0 : onInput(payload.value); } }),
|
|
78
78
|
}, Search: Input, ref: mergeRefs([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: __assign({ footer: (React.createElement(Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })) }, restProps.optionsListProps), fieldProps: __assign({ value: isOpen ? frozenValue.current : value, clear: clear, onClear: clear ? inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClear : undefined }, restProps.fieldProps) })));
|
|
79
79
|
});
|
|
80
80
|
|
package/esm/mobile/mobile.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* hash:
|
|
2
|
-
:root {
|
|
1
|
+
/* hash: 1a4zy */
|
|
2
|
+
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
5
5
|
} :root {
|
|
@@ -14,6 +14,6 @@
|
|
|
14
14
|
} :root {
|
|
15
15
|
} :root {
|
|
16
16
|
} :root {
|
|
17
|
-
} .input-
|
|
17
|
+
} .input-autocomplete__input_1nyks {
|
|
18
18
|
width: auto;
|
|
19
19
|
}
|
package/esm/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FC, RefAttributes } from 'react';
|
|
2
2
|
import { InputProps } from "@alfalab/core-components-input";
|
|
3
3
|
import { BaseSelectProps, BottomSheetSelectMobileProps } from "@alfalab/core-components-select/shared";
|
|
4
4
|
interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'Field' | 'nativeSelect' | 'searchProps' | 'showSearch' | 'Search'> {
|
|
@@ -25,9 +25,7 @@ interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomple
|
|
|
25
25
|
/**
|
|
26
26
|
* Обработчик ввода
|
|
27
27
|
*/
|
|
28
|
-
onInput?: (
|
|
29
|
-
value: string;
|
|
30
|
-
}) => void;
|
|
28
|
+
onInput?: (value: string) => void;
|
|
31
29
|
}
|
|
32
30
|
type MobileProps = {
|
|
33
31
|
/**
|
|
@@ -19,18 +19,18 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
|
19
19
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
20
20
|
var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
|
|
21
21
|
|
|
22
|
-
var styles = {"input":"input-
|
|
22
|
+
var styles = {"input":"input-autocomplete__input_1nyks"};
|
|
23
23
|
require('./mobile.css')
|
|
24
24
|
|
|
25
25
|
var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, ref) {
|
|
26
26
|
var _b;
|
|
27
27
|
var _c;
|
|
28
|
-
var Input = _a.Input, value = _a.value, name = _a.name, _d = _a.Arrow, Arrow = _d === void 0 ? null : _d, label = _a.label, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.size, size = _f === void 0 ?
|
|
28
|
+
var Input = _a.Input, value = _a.value, name = _a.name, _d = _a.Arrow, Arrow = _d === void 0 ? null : _d, label = _a.label, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.size, size = _f === void 0 ? 48 : _f, openProp = _a.open, onInput = _a.onInput, onOpen = _a.onOpen, multiple = _a.multiple, inputProps = _a.inputProps, _g = _a.isBottomSheet, isBottomSheet = _g === void 0 ? true : _g, dataTestId = _a.dataTestId, transitionProps = _a.transitionProps, onCancel = _a.onCancel, onApply = _a.onApply, title = _a.title, restProps = tslib.__rest(_a, ["Input", "value", "name", "Arrow", "label", "placeholder", "size", "open", "onInput", "onOpen", "multiple", "inputProps", "isBottomSheet", "dataTestId", "transitionProps", "onCancel", "onApply", "title"]);
|
|
29
29
|
var _h = React.useState(false), open = _h[0], setOpen = _h[1];
|
|
30
30
|
var frozenValue = React.useRef('');
|
|
31
31
|
var searchInputRef = React.useRef(null);
|
|
32
32
|
var targetRef = React.useRef(null);
|
|
33
|
-
var restorePrevValue = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(
|
|
33
|
+
var restorePrevValue = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(frozenValue.current); };
|
|
34
34
|
var setModalVisibility = function (isOpen) {
|
|
35
35
|
if (isOpen) {
|
|
36
36
|
frozenValue.current = value || '';
|
|
@@ -85,7 +85,7 @@ var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, re
|
|
|
85
85
|
}), { dataTestId: dataTestId, useWithApplyHook: false, showSearch: true, searchProps: {
|
|
86
86
|
value: value,
|
|
87
87
|
filterFn: utils.searchFilterStub,
|
|
88
|
-
componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn__default.default(styles.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: clear, ref: mergeRefs__default.default([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: onInput }),
|
|
88
|
+
componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn__default.default(styles.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: clear, ref: mergeRefs__default.default([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: function (_, payload) { return onInput === null || onInput === void 0 ? void 0 : onInput(payload.value); } }),
|
|
89
89
|
}, Search: Input, ref: mergeRefs__default.default([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: tslib.__assign({ footer: (React__default.default.createElement(shared.Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })) }, restProps.optionsListProps), fieldProps: tslib.__assign({ value: isOpen ? frozenValue.current : value, clear: clear, onClear: clear ? inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClear : undefined }, restProps.fieldProps) })));
|
|
90
90
|
});
|
|
91
91
|
|
package/mobile/mobile.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* hash:
|
|
2
|
-
:root {
|
|
1
|
+
/* hash: 1a4zy */
|
|
2
|
+
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
5
5
|
} :root {
|
|
@@ -14,6 +14,6 @@
|
|
|
14
14
|
} :root {
|
|
15
15
|
} :root {
|
|
16
16
|
} :root {
|
|
17
|
-
} .input-
|
|
17
|
+
} .input-autocomplete__input_1nyks {
|
|
18
18
|
width: auto;
|
|
19
19
|
}
|
|
@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { InputDesktop } from '@alfalab/core-components-input/modern/desktop';
|
|
5
5
|
|
|
6
|
-
const styles = {"arrow":"input-
|
|
6
|
+
const styles = {"arrow":"input-autocomplete__arrow_1nf8s","error":"input-autocomplete__error_1nf8s"};
|
|
7
7
|
require('./index.css')
|
|
8
8
|
|
|
9
9
|
const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arrow, Input = InputDesktop, value, error, success, hint, disabled, readOnly, onInput, inputProps = {}, innerProps, dataTestId, }) => {
|
|
@@ -17,10 +17,11 @@ const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arro
|
|
|
17
17
|
inputRef.current.focus();
|
|
18
18
|
}
|
|
19
19
|
}, [onClick]);
|
|
20
|
+
const handleInput = (_, payload) => onInput?.(payload.value);
|
|
20
21
|
return (React.createElement(Input, { dataTestId: dataTestId, ...inputProps, ...innerProps, wrapperRef: mergeRefs([
|
|
21
22
|
innerProps.ref,
|
|
22
23
|
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:
|
|
24
|
+
]), 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: handleInput, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : onFocus, autoComplete: 'off', value: value, rightAddons: (Arrow || inputProps.rightAddons) && (React.createElement(React.Fragment, null,
|
|
24
25
|
inputProps.rightAddons,
|
|
25
26
|
Arrow && (React.createElement("span", { className: cn(styles.arrow, {
|
|
26
27
|
[styles.error]: error,
|
|
@@ -5,10 +5,10 @@ import { ClearButton } from '@alfalab/core-components-input/modern/shared';
|
|
|
5
5
|
import { getDataTestId } from '@alfalab/core-components-shared/modern';
|
|
6
6
|
import { useFocus } from '@alfalab/hooks';
|
|
7
7
|
|
|
8
|
-
const styles = {"component":"input-
|
|
8
|
+
const styles = {"component":"input-autocomplete__component_10tpb","field":"input-autocomplete__field_10tpb","disabled":"input-autocomplete__disabled_10tpb","placeholder":"input-autocomplete__placeholder_10tpb","contentWrapper":"input-autocomplete__contentWrapper_10tpb","value":"input-autocomplete__value_10tpb","focusVisible":"input-autocomplete__focusVisible_10tpb"};
|
|
9
9
|
require('./index.css')
|
|
10
10
|
|
|
11
|
-
const AutocompleteMobileField = ({ size =
|
|
11
|
+
const AutocompleteMobileField = ({ size = 56, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView = 'inner', placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, rightAddons, error, readOnly, clear, onClear, onInput, colors = 'default', ...restProps }) => {
|
|
12
12
|
const [focused, setFocused] = useState(false);
|
|
13
13
|
const wrapperRef = useRef(null);
|
|
14
14
|
const [focusVisible] = useFocus(wrapperRef, 'keyboard');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* hash:
|
|
2
|
-
:root {
|
|
1
|
+
/* hash: 1lw13 */
|
|
2
|
+
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-link: #2288fa;
|
|
5
5
|
--color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
} :root {
|
|
19
19
|
--focus-color: var(--color-light-border-link);
|
|
20
20
|
--disabled-cursor: not-allowed;
|
|
21
|
-
} .input-
|
|
21
|
+
} .input-autocomplete__component_10tpb {
|
|
22
22
|
width: 100%;
|
|
23
23
|
outline: none;
|
|
24
|
-
} .input-
|
|
24
|
+
} .input-autocomplete__field_10tpb:not(.input-autocomplete__disabled_10tpb) {
|
|
25
25
|
cursor: pointer;
|
|
26
|
-
} .input-
|
|
26
|
+
} .input-autocomplete__disabled_10tpb {
|
|
27
27
|
cursor: var(--disabled-cursor);
|
|
28
|
-
} .input-
|
|
28
|
+
} .input-autocomplete__placeholder_10tpb {
|
|
29
29
|
color: var(--color-light-text-secondary);
|
|
30
|
-
} .input-
|
|
30
|
+
} .input-autocomplete__contentWrapper_10tpb {
|
|
31
31
|
font-size: 16px;
|
|
32
32
|
line-height: 20px;
|
|
33
33
|
font-weight: 400;
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
text-overflow: ellipsis;
|
|
37
37
|
overflow: hidden;
|
|
38
38
|
width: 100%;
|
|
39
|
-
} .input-
|
|
39
|
+
} .input-autocomplete__value_10tpb {
|
|
40
40
|
overflow: hidden;
|
|
41
41
|
text-overflow: ellipsis;
|
|
42
42
|
text-align: left;
|
|
43
|
-
} .input-
|
|
43
|
+
} .input-autocomplete__focusVisible_10tpb {
|
|
44
44
|
outline: 2px solid var(--focus-color);
|
|
45
45
|
outline-offset: 2px;
|
|
46
46
|
}
|
|
@@ -7,15 +7,15 @@ import { Footer } from '@alfalab/core-components-select/modern/shared';
|
|
|
7
7
|
import { AutocompleteMobileField } from '../autocomplete-mobile-field/Component.js';
|
|
8
8
|
import { searchFilterStub } from '../utils.js';
|
|
9
9
|
|
|
10
|
-
const styles = {"input":"input-
|
|
10
|
+
const styles = {"input":"input-autocomplete__input_1nyks"};
|
|
11
11
|
require('./mobile.css')
|
|
12
12
|
|
|
13
|
-
const InputAutocompleteMobile = React.forwardRef(({ Input, value, name, Arrow = null, label, placeholder = '', size =
|
|
13
|
+
const InputAutocompleteMobile = React.forwardRef(({ Input, value, name, Arrow = null, label, placeholder = '', size = 48, open: openProp, onInput, onOpen, multiple, inputProps, isBottomSheet = true, dataTestId, transitionProps, onCancel, onApply, title, ...restProps }, ref) => {
|
|
14
14
|
const [open, setOpen] = useState(false);
|
|
15
15
|
const frozenValue = useRef('');
|
|
16
16
|
const searchInputRef = useRef(null);
|
|
17
17
|
const targetRef = useRef(null);
|
|
18
|
-
const restorePrevValue = () => onInput?.(
|
|
18
|
+
const restorePrevValue = () => onInput?.(frozenValue.current);
|
|
19
19
|
const setModalVisibility = (isOpen) => {
|
|
20
20
|
if (isOpen) {
|
|
21
21
|
frozenValue.current = value || '';
|
|
@@ -76,7 +76,7 @@ const InputAutocompleteMobile = React.forwardRef(({ Input, value, name, Arrow =
|
|
|
76
76
|
className: cn(styles.input, inputProps?.className),
|
|
77
77
|
clear,
|
|
78
78
|
ref: mergeRefs([searchInputRef, inputProps?.ref]),
|
|
79
|
-
onChange: onInput,
|
|
79
|
+
onChange: (_, payload) => onInput?.(payload.value),
|
|
80
80
|
},
|
|
81
81
|
}, Search: Input, ref: mergeRefs([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: {
|
|
82
82
|
footer: (React.createElement(Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })),
|
package/modern/mobile/mobile.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* hash:
|
|
2
|
-
:root {
|
|
1
|
+
/* hash: 1a4zy */
|
|
2
|
+
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
5
5
|
} :root {
|
|
@@ -14,6 +14,6 @@
|
|
|
14
14
|
} :root {
|
|
15
15
|
} :root {
|
|
16
16
|
} :root {
|
|
17
|
-
} .input-
|
|
17
|
+
} .input-autocomplete__input_1nyks {
|
|
18
18
|
width: auto;
|
|
19
19
|
}
|
package/modern/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FC, RefAttributes } from 'react';
|
|
2
2
|
import { InputProps } from "@alfalab/core-components-input";
|
|
3
3
|
import { BaseSelectProps, BottomSheetSelectMobileProps } from "@alfalab/core-components-select/shared";
|
|
4
4
|
interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'Field' | 'nativeSelect' | 'searchProps' | 'showSearch' | 'Search'> {
|
|
@@ -25,9 +25,7 @@ interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomple
|
|
|
25
25
|
/**
|
|
26
26
|
* Обработчик ввода
|
|
27
27
|
*/
|
|
28
|
-
onInput?: (
|
|
29
|
-
value: string;
|
|
30
|
-
}) => void;
|
|
28
|
+
onInput?: (value: string) => void;
|
|
31
29
|
}
|
|
32
30
|
type MobileProps = {
|
|
33
31
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-input-autocomplete",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "12.0.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"react": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@alfalab/core-components-form-control": "^12.
|
|
18
|
-
"@alfalab/core-components-input": "^14.
|
|
17
|
+
"@alfalab/core-components-form-control": "^12.2.0",
|
|
18
|
+
"@alfalab/core-components-input": "^14.3.0",
|
|
19
19
|
"@alfalab/core-components-popover": "^6.2.1",
|
|
20
|
-
"@alfalab/core-components-select": "^17.
|
|
20
|
+
"@alfalab/core-components-select": "^17.3.1",
|
|
21
21
|
"@alfalab/core-components-shared": "^0.9.1",
|
|
22
22
|
"@alfalab/core-components-mq": "^4.2.0",
|
|
23
23
|
"@alfalab/hooks": "^1.13.0",
|
|
@@ -2,6 +2,7 @@ import React, { useCallback, useRef } from 'react';
|
|
|
2
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
|
|
5
|
+
import { InputProps } from '@alfalab/core-components-input';
|
|
5
6
|
import { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';
|
|
6
7
|
import type { FieldProps } from '@alfalab/core-components-select/shared';
|
|
7
8
|
|
|
@@ -47,6 +48,8 @@ export const AutocompleteField = ({
|
|
|
47
48
|
[onClick],
|
|
48
49
|
);
|
|
49
50
|
|
|
51
|
+
const handleInput: InputProps['onChange'] = (_, payload) => onInput?.(payload.value);
|
|
52
|
+
|
|
50
53
|
return (
|
|
51
54
|
<Input
|
|
52
55
|
dataTestId={dataTestId}
|
|
@@ -67,7 +70,7 @@ export const AutocompleteField = ({
|
|
|
67
70
|
error={error}
|
|
68
71
|
success={success}
|
|
69
72
|
hint={hint}
|
|
70
|
-
onChange={
|
|
73
|
+
onChange={handleInput}
|
|
71
74
|
onClick={inputDisabled ? undefined : handleClick}
|
|
72
75
|
onFocus={inputDisabled ? undefined : onFocus}
|
|
73
76
|
autoComplete='off'
|
|
@@ -30,7 +30,7 @@ export const InputAutocompleteMobile = React.forwardRef(
|
|
|
30
30
|
Arrow = null,
|
|
31
31
|
label,
|
|
32
32
|
placeholder = '',
|
|
33
|
-
size =
|
|
33
|
+
size = 48,
|
|
34
34
|
open: openProp,
|
|
35
35
|
onInput,
|
|
36
36
|
onOpen,
|
|
@@ -51,7 +51,7 @@ export const InputAutocompleteMobile = React.forwardRef(
|
|
|
51
51
|
const searchInputRef = useRef<HTMLInputElement>(null);
|
|
52
52
|
const targetRef = useRef<HTMLDivElement>(null);
|
|
53
53
|
|
|
54
|
-
const restorePrevValue = () => onInput?.(
|
|
54
|
+
const restorePrevValue = () => onInput?.(frozenValue.current);
|
|
55
55
|
|
|
56
56
|
const setModalVisibility = (isOpen: boolean) => {
|
|
57
57
|
if (isOpen) {
|
|
@@ -140,7 +140,7 @@ export const InputAutocompleteMobile = React.forwardRef(
|
|
|
140
140
|
className: cn(styles.input, inputProps?.className),
|
|
141
141
|
clear,
|
|
142
142
|
ref: mergeRefs([searchInputRef, inputProps?.ref as Ref<HTMLInputElement>]),
|
|
143
|
-
onChange: onInput,
|
|
143
|
+
onChange: (_, payload) => onInput?.(payload.value),
|
|
144
144
|
},
|
|
145
145
|
}}
|
|
146
146
|
Search={Input}
|
package/src/types.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { FC, RefAttributes } from 'react';
|
|
2
2
|
|
|
3
3
|
import type { InputProps } from '@alfalab/core-components-input';
|
|
4
4
|
import type {
|
|
@@ -39,7 +39,7 @@ export interface InputAutocompleteCommonProps
|
|
|
39
39
|
/**
|
|
40
40
|
* Обработчик ввода
|
|
41
41
|
*/
|
|
42
|
-
onInput?: (
|
|
42
|
+
onInput?: (value: string) => void;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
type MobileProps = {
|
package/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FC, RefAttributes } from 'react';
|
|
2
2
|
import { InputProps } from "@alfalab/core-components-input";
|
|
3
3
|
import { BaseSelectProps, BottomSheetSelectMobileProps } from "@alfalab/core-components-select/shared";
|
|
4
4
|
interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'Field' | 'nativeSelect' | 'searchProps' | 'showSearch' | 'Search'> {
|
|
@@ -25,9 +25,7 @@ interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomple
|
|
|
25
25
|
/**
|
|
26
26
|
* Обработчик ввода
|
|
27
27
|
*/
|
|
28
|
-
onInput?: (
|
|
29
|
-
value: string;
|
|
30
|
-
}) => void;
|
|
28
|
+
onInput?: (value: string) => void;
|
|
31
29
|
}
|
|
32
30
|
type MobileProps = {
|
|
33
31
|
/**
|