@alfalab/core-components-input-autocomplete 9.1.3 → 9.2.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 +8 -6
- package/Component.js +4 -10
- package/Component.mobile.d.ts +2 -2
- package/Component.mobile.js +18 -20
- package/autocomplete-field/Component.js +5 -13
- package/autocomplete-field/index.css +2 -2
- package/autocomplete-field/index.js +2 -4
- package/autocomplete-mobile-field/Component.js +9 -16
- package/autocomplete-mobile-field/index.css +8 -8
- package/autocomplete-mobile-field/index.js +2 -4
- package/cssm/Component-7ca84eff.d.ts +8 -6
- package/cssm/Component.js +4 -10
- package/cssm/Component.mobile.d.ts +2 -2
- package/cssm/Component.mobile.js +18 -21
- package/cssm/autocomplete-field/Component.js +5 -14
- package/cssm/autocomplete-field/index.js +2 -4
- package/cssm/autocomplete-mobile-field/Component.js +10 -18
- package/cssm/autocomplete-mobile-field/index.js +2 -4
- package/cssm/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/cssm/index-bdb4c6b9.d.ts +3 -2
- package/cssm/index.js +4 -6
- package/cssm/mobile.d.ts +1 -0
- package/cssm/mobile.js +3 -5
- package/cssm/{tslib.es6-9682e485.d.ts → tslib.es6-bbd6cd2a.d.ts} +0 -0
- package/cssm/{tslib.es6-9682e485.js → tslib.es6-bbd6cd2a.js} +0 -0
- package/esm/Component-7ca84eff.d.ts +8 -6
- package/esm/Component.js +3 -3
- package/esm/Component.mobile.d.ts +2 -2
- package/esm/Component.mobile.js +14 -7
- package/esm/autocomplete-field/Component.js +2 -2
- package/esm/autocomplete-field/index.css +2 -2
- package/esm/autocomplete-field/index.js +2 -2
- 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 +2 -2
- package/esm/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/esm/index-bdb4c6b9.d.ts +3 -2
- package/esm/index.js +4 -4
- package/esm/mobile.css +4 -4
- package/esm/mobile.d.ts +1 -0
- package/esm/mobile.js +3 -3
- package/esm/{tslib.es6-6f21004e.d.ts → tslib.es6-18b090e0.d.ts} +0 -0
- package/esm/{tslib.es6-6f21004e.js → tslib.es6-18b090e0.js} +0 -0
- package/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/index-bdb4c6b9.d.ts +3 -2
- package/index.js +4 -6
- package/mobile.css +4 -4
- package/mobile.d.ts +1 -0
- package/mobile.js +3 -5
- package/modern/Component-7ca84eff.d.ts +8 -6
- package/modern/Component.js +2 -2
- package/modern/Component.mobile.d.ts +2 -2
- package/modern/Component.mobile.js +13 -6
- package/modern/autocomplete-field/Component.js +1 -1
- package/modern/autocomplete-field/index.css +2 -2
- package/modern/autocomplete-field/index.js +1 -1
- package/modern/autocomplete-mobile-field/Component.js +2 -2
- package/modern/autocomplete-mobile-field/index.css +8 -8
- package/modern/autocomplete-mobile-field/index.js +1 -1
- package/modern/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/modern/index-bdb4c6b9.d.ts +3 -2
- package/modern/index.js +3 -3
- package/modern/mobile.css +4 -4
- package/modern/mobile.d.ts +1 -0
- package/modern/mobile.js +2 -2
- package/package.json +2 -2
- /package/{tslib.es6-ca8b36c2.d.ts → tslib.es6-62ba2400.d.ts} +0 -0
- /package/{tslib.es6-ca8b36c2.js → tslib.es6-62ba2400.js} +0 -0
|
@@ -1,36 +1,28 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../tslib.es6-9682e485.js');
|
|
3
|
+
var tslib_es6 = require('../tslib.es6-bbd6cd2a.js');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var cn = require('classnames');
|
|
8
6
|
var coreComponentsFormControl = require('@alfalab/core-components-form-control/cssm');
|
|
9
7
|
var hooks = require('@alfalab/hooks');
|
|
10
8
|
var styles = require('./index.module.css');
|
|
11
9
|
|
|
12
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
|
-
|
|
14
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
16
|
-
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
17
|
-
|
|
18
10
|
var AutocompleteMobileField = function (_a) {
|
|
19
11
|
var _b;
|
|
20
|
-
var _c = _a.size, size = _c === void 0 ? 'm' : _c
|
|
12
|
+
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_es6.__rest(_a, ["size", "open", "error", "hint", "disabled", "label", "labelView", "placeholder", "value", "innerProps", "dataTestId", "fieldClassName", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple"]);
|
|
21
13
|
var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
|
|
22
14
|
var wrapperRef = React.useRef(null);
|
|
23
15
|
var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
|
|
24
16
|
var filled = Boolean(value);
|
|
25
17
|
var showLabel = !!label && (filled || !placeholder || labelView === 'outer');
|
|
26
|
-
return (
|
|
27
|
-
|
|
28
|
-
_b[
|
|
29
|
-
_b[
|
|
30
|
-
_b)), 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),
|
|
31
|
-
|
|
32
|
-
placeholder && !filled && (
|
|
33
|
-
filled &&
|
|
18
|
+
return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } },
|
|
19
|
+
React.createElement(coreComponentsFormControl.FormControl, tslib_es6.__assign({ fieldClassName: cn(styles.field, fieldClassName, (_b = {},
|
|
20
|
+
_b[styles.disabled] = disabled,
|
|
21
|
+
_b[styles.focusVisible] = focusVisible,
|
|
22
|
+
_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),
|
|
23
|
+
React.createElement("div", { className: styles.contentWrapper },
|
|
24
|
+
placeholder && !filled && (React.createElement("span", { className: styles.placeholder }, placeholder)),
|
|
25
|
+
filled && React.createElement("div", { className: styles.value }, value)))));
|
|
34
26
|
};
|
|
35
27
|
|
|
36
28
|
exports.AutocompleteMobileField = AutocompleteMobileField;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('../tslib.es6-9682e485.js');
|
|
3
|
+
var autocompleteMobileField_Component = require('./Component.js');
|
|
4
|
+
require('../tslib.es6-bbd6cd2a.js');
|
|
6
5
|
require('react');
|
|
7
6
|
require('classnames');
|
|
8
7
|
require('@alfalab/core-components-form-control/cssm');
|
|
9
8
|
require('@alfalab/hooks');
|
|
10
9
|
require('./index.module.css');
|
|
11
|
-
var autocompleteMobileField_Component = require('./Component.js');
|
|
12
10
|
|
|
13
11
|
|
|
14
12
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const getDataTestId: (dataTestId?: string
|
|
1
|
+
declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
|
|
2
2
|
export { getDataTestId };
|
package/cssm/index-bdb4c6b9.d.ts
CHANGED
|
@@ -151,7 +151,7 @@ declare function isScrolledToBottom(target: HTMLElement): boolean;
|
|
|
151
151
|
declare function hasScrollbar(target: HTMLElement): boolean;
|
|
152
152
|
declare const getScrollbarSize: () => number;
|
|
153
153
|
declare const restoreContainerStyles: (container: HTMLElement) => void;
|
|
154
|
-
declare const handleContainer: (container?: HTMLElement
|
|
154
|
+
declare const handleContainer: (container?: HTMLElement) => void;
|
|
155
155
|
/**
|
|
156
156
|
* Набор констант для z-index соответствующих классов компонентов.
|
|
157
157
|
* Значения выбраны по приоритету.
|
|
@@ -201,4 +201,5 @@ declare class GlobalStore {
|
|
|
201
201
|
constructor();
|
|
202
202
|
getModalStore: () => ModalStore;
|
|
203
203
|
}
|
|
204
|
-
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef,
|
|
204
|
+
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
|
|
205
|
+
export type { SavedStyle };
|
package/cssm/index.js
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('./tslib.es6-9682e485.js');
|
|
3
|
+
var Component = require('./Component.js');
|
|
4
|
+
require('./tslib.es6-bbd6cd2a.js');
|
|
6
5
|
require('react');
|
|
6
|
+
require('@alfalab/core-components-select/cssm');
|
|
7
|
+
require('./autocomplete-field/Component.js');
|
|
7
8
|
require('react-merge-refs');
|
|
8
9
|
require('classnames');
|
|
9
10
|
require('@alfalab/core-components-input/cssm');
|
|
10
|
-
require('@alfalab/core-components-select/cssm');
|
|
11
11
|
require('./autocomplete-field/index.module.css');
|
|
12
|
-
require('./autocomplete-field/Component.js');
|
|
13
|
-
var Component = require('./Component.js');
|
|
14
12
|
|
|
15
13
|
|
|
16
14
|
|
package/cssm/mobile.d.ts
CHANGED
package/cssm/mobile.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('./tslib.es6-9682e485.js');
|
|
3
|
+
var Component_mobile = require('./Component.mobile.js');
|
|
4
|
+
require('./tslib.es6-bbd6cd2a.js');
|
|
6
5
|
require('react');
|
|
7
6
|
require('react-merge-refs');
|
|
8
7
|
require('classnames');
|
|
@@ -10,12 +9,11 @@ require('lodash.throttle');
|
|
|
10
9
|
require('@alfalab/core-components-button/cssm');
|
|
11
10
|
require('@alfalab/core-components-input/cssm');
|
|
12
11
|
require('@alfalab/core-components-select/cssm');
|
|
12
|
+
require('./autocomplete-mobile-field/Component.js');
|
|
13
13
|
require('@alfalab/core-components-form-control/cssm');
|
|
14
14
|
require('@alfalab/hooks');
|
|
15
15
|
require('./autocomplete-mobile-field/index.module.css');
|
|
16
|
-
require('./autocomplete-mobile-field/Component.js');
|
|
17
16
|
require('./mobile.module.css');
|
|
18
|
-
var Component_mobile = require('./Component.mobile.js');
|
|
19
17
|
|
|
20
18
|
|
|
21
19
|
|
|
File without changes
|
|
File without changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { ButtonHTMLAttributes, ElementType, AnchorHTMLAttributes, FC, HTMLAttributes, ReactNode } from "react";
|
|
2
|
+
import { ButtonHTMLAttributes, ElementType, AnchorHTMLAttributes, FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes, ReactNode } from "react";
|
|
3
3
|
import { ButtonProps } from "@alfalab/core-components-button";
|
|
4
4
|
import { BottomSheetTitleAlign } from "./index-7ca84eff";
|
|
5
5
|
type IconButtonProps = {
|
|
@@ -63,11 +63,12 @@ declare const colors: readonly [
|
|
|
63
63
|
"link",
|
|
64
64
|
"negative"
|
|
65
65
|
];
|
|
66
|
-
type Color = typeof colors[number];
|
|
66
|
+
type Color = (typeof colors)[number];
|
|
67
|
+
type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
|
|
67
68
|
type NativeProps = HTMLAttributes<HTMLSpanElement>;
|
|
68
69
|
type TextBaseProps = {
|
|
69
70
|
/**
|
|
70
|
-
* [Вариант начертания](https://
|
|
71
|
+
* [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/инструкции-типографика--page)
|
|
71
72
|
*/
|
|
72
73
|
view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
|
|
73
74
|
/**
|
|
@@ -115,7 +116,7 @@ type TitleProps = Omit<NativeProps$0, "color"> & {
|
|
|
115
116
|
*/
|
|
116
117
|
tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
|
|
117
118
|
/**
|
|
118
|
-
* [Вариант начертания](https://
|
|
119
|
+
* [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/инструкции-типографика--page)
|
|
119
120
|
*/
|
|
120
121
|
view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
|
|
121
122
|
/**
|
|
@@ -150,7 +151,7 @@ type TitleProps = Omit<NativeProps$0, "color"> & {
|
|
|
150
151
|
type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
|
|
151
152
|
declare const Typography: {
|
|
152
153
|
Title: FC<TitleProps>;
|
|
153
|
-
Text:
|
|
154
|
+
Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
|
|
154
155
|
TitleResponsive: FC<TitleProps>;
|
|
155
156
|
TitleMobile: FC<TitleMobileProps>;
|
|
156
157
|
};
|
|
@@ -258,4 +259,5 @@ type HeaderProps = {
|
|
|
258
259
|
onBack?: () => void;
|
|
259
260
|
};
|
|
260
261
|
declare const Header: FC<HeaderProps>;
|
|
261
|
-
export { CloserProps, Closer, Typography, typographyPresets,
|
|
262
|
+
export { CloserProps, Closer, Typography, typographyPresets, BackerProps, Backer, TitleResponsive, HeaderProps, Header };
|
|
263
|
+
export type { TitleProps, TextProps, Color };
|
package/esm/Component.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { _ as __rest, a as __assign } from './tslib.es6-
|
|
1
|
+
import { _ as __rest, a as __assign } from './tslib.es6-18b090e0.js';
|
|
2
2
|
import React, { forwardRef } from 'react';
|
|
3
|
+
import { BaseSelect, OptionsList, Optgroup, Option } from '@alfalab/core-components-select/esm';
|
|
4
|
+
import { AutocompleteField } from './autocomplete-field/Component.js';
|
|
3
5
|
import 'react-merge-refs';
|
|
4
6
|
import 'classnames';
|
|
5
7
|
import '@alfalab/core-components-input/esm';
|
|
6
|
-
import { BaseSelect, OptionsList, Optgroup, Option } from '@alfalab/core-components-select/esm';
|
|
7
|
-
import { AutocompleteField } from './autocomplete-field/Component.js';
|
|
8
8
|
|
|
9
9
|
var InputAutocomplete = forwardRef(function (_a, ref) {
|
|
10
10
|
var _b = _a.OptionsList, OptionsList$1 = _b === void 0 ? OptionsList : _b, _c = _a.Optgroup, Optgroup$1 = _c === void 0 ? Optgroup : _c, _d = _a.Option, Option$1 = _d === void 0 ? 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 = __rest(_a, ["OptionsList", "Optgroup", "Option", "Input", "inputProps", "onInput", "value", "success", "readOnly", "closeOnSelect", "options"]);
|
|
@@ -4,7 +4,7 @@ import { ChangeEvent, ElementType } from "react";
|
|
|
4
4
|
import { BottomSheetProps } from "./index-7ca84eff";
|
|
5
5
|
import { ButtonProps } from "@alfalab/core-components-button";
|
|
6
6
|
import { BaseSelectChangePayload, BaseSelectProps } from "@alfalab/core-components-select";
|
|
7
|
-
type InputAutocompleteMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Checkmark' | 'onScroll' | '
|
|
7
|
+
type InputAutocompleteMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Checkmark' | 'onScroll' | 'nativeSelect' | 'autocomplete' | 'valueRenderer'> & {
|
|
8
8
|
/**
|
|
9
9
|
* Обработчик выбора
|
|
10
10
|
*/
|
|
@@ -50,7 +50,7 @@ type InputAutocompleteMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Check
|
|
|
50
50
|
*/
|
|
51
51
|
Input?: ElementType;
|
|
52
52
|
};
|
|
53
|
-
declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "
|
|
53
|
+
declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "valueRenderer" | "autocomplete" | "nativeSelect" | "OptionsList" | "Checkmark"> & {
|
|
54
54
|
/**
|
|
55
55
|
* Обработчик выбора
|
|
56
56
|
*/
|
package/esm/Component.mobile.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as __rest, a as __assign } from './tslib.es6-
|
|
1
|
+
import { _ as __rest, a as __assign } from './tslib.es6-18b090e0.js';
|
|
2
2
|
import React, { useState, useRef, useMemo } from 'react';
|
|
3
3
|
import mergeRefs from 'react-merge-refs';
|
|
4
4
|
import cn from 'classnames';
|
|
@@ -6,16 +6,16 @@ import throttle from 'lodash.throttle';
|
|
|
6
6
|
import { Button } from '@alfalab/core-components-button/esm';
|
|
7
7
|
import { Input } from '@alfalab/core-components-input/esm';
|
|
8
8
|
import { SelectMobile } from '@alfalab/core-components-select/esm';
|
|
9
|
+
import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.js';
|
|
9
10
|
import '@alfalab/core-components-form-control/esm';
|
|
10
11
|
import '@alfalab/hooks';
|
|
11
|
-
import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.js';
|
|
12
12
|
|
|
13
|
-
var styles = {"bottomSheetInput":"input-
|
|
13
|
+
var styles = {"bottomSheetInput":"input-autocomplete__bottomSheetInput_frpur","footer":"input-autocomplete__footer_frpur"};
|
|
14
14
|
require('./mobile.css')
|
|
15
15
|
|
|
16
16
|
var SELECTED = [];
|
|
17
17
|
var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {
|
|
18
|
-
var Input$1 = _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, restProps = __rest(_a, ["Input", "bottomSheetProps", "bottomSheetHeaderAddonsProps", "value", "filter", "name", "Arrow", "label", "placeholder", "size", "open", "onFilter", "onChange", "onOpen", "onCancel", "onClearFilter", "continueButtonProps", "cancelButtonProps"]);
|
|
18
|
+
var Input$1 = _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 = __rest(_a, ["Input", "bottomSheetProps", "bottomSheetHeaderAddonsProps", "value", "filter", "name", "Arrow", "label", "placeholder", "size", "open", "onFilter", "onChange", "onOpen", "onCancel", "onClearFilter", "continueButtonProps", "cancelButtonProps", "selected", "multiple"]);
|
|
19
19
|
var _h = useState(false), open = _h[0], setOpen = _h[1];
|
|
20
20
|
var bottomSheetInputRef = useRef(null);
|
|
21
21
|
var targetRef = useRef(null);
|
|
@@ -38,10 +38,17 @@ var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {
|
|
|
38
38
|
}
|
|
39
39
|
}, 300);
|
|
40
40
|
}, []);
|
|
41
|
-
var
|
|
41
|
+
var handleApply = function () {
|
|
42
42
|
setBottomSheetVisibility(false);
|
|
43
43
|
onChange(filter);
|
|
44
44
|
};
|
|
45
|
+
var handleChange = function (payload) {
|
|
46
|
+
onChange(payload);
|
|
47
|
+
if (multiple) {
|
|
48
|
+
// После выбора опции возвращаем фокус в поле ввода.
|
|
49
|
+
requestAnimationFrame(function () { var _a; return (_a = bottomSheetInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
|
|
50
|
+
}
|
|
51
|
+
};
|
|
45
52
|
var handleCancel = function () {
|
|
46
53
|
setBottomSheetVisibility(false);
|
|
47
54
|
if (onCancel) {
|
|
@@ -60,13 +67,13 @@ var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {
|
|
|
60
67
|
var getBottomSheetProps = function () {
|
|
61
68
|
var Component = Input$1 || Input;
|
|
62
69
|
return __assign(__assign({ actionButton: (React.createElement("div", { className: styles.footer },
|
|
63
|
-
React.createElement(Button, __assign({ block: true, view: 'primary', size: 's', onClick:
|
|
70
|
+
React.createElement(Button, __assign({ block: true, view: 'primary', size: 's', onClick: handleApply }, continueButtonProps), "\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C"),
|
|
64
71
|
React.createElement(Button, __assign({ block: true, view: 'secondary', size: 's', onClick: handleCancel }, cancelButtonProps), "\u041E\u0442\u043C\u0435\u043D\u0430"))), title: label || placeholder, bottomAddons: (React.createElement(Component, __assign({ block: true, clear: !!onClearFilter, onClear: onClearFilter, value: filter, onInput: onFilter, placeholder: placeholder, onFocus: handleInputFocus }, bottomSheetHeaderAddonsProps, { className: cn(styles.bottomSheetInput, bottomSheetHeaderAddonsProps.className), ref: mergeRefs([
|
|
65
72
|
bottomSheetInputRef,
|
|
66
73
|
bottomSheetHeaderAddonsProps.ref,
|
|
67
74
|
]) }))), initialHeight: 'full' }, bottomSheetProps), { containerProps: __assign({ onTouchMove: handleOptionsListTouchMove }, bottomSheetProps.containerProps) });
|
|
68
75
|
};
|
|
69
|
-
return (React.createElement(SelectMobile, __assign({ ref: mergeRefs([targetRef, ref]), selected: SELECTED, open: Boolean(open || openProp), onOpen: handleOpen, onChange:
|
|
76
|
+
return (React.createElement(SelectMobile, __assign({ ref: mergeRefs([targetRef, ref]), selected: selected || SELECTED, open: Boolean(open || openProp), onOpen: handleOpen, onChange: handleChange, Arrow: Arrow, Field: AutocompleteMobileField, fieldProps: { value: value }, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, bottomSheetProps: getBottomSheetProps(), optionsListProps: { showFooter: false } }, restProps)));
|
|
70
77
|
});
|
|
71
78
|
|
|
72
79
|
export { InputAutocompleteMobile };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { a as __assign } from '../tslib.es6-
|
|
1
|
+
import { a as __assign } from '../tslib.es6-18b090e0.js';
|
|
2
2
|
import React, { useRef, useCallback } from 'react';
|
|
3
3
|
import mergeRefs from 'react-merge-refs';
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
import { Input } from '@alfalab/core-components-input/esm';
|
|
6
6
|
|
|
7
|
-
var styles = {"arrow":"input-
|
|
7
|
+
var styles = {"arrow":"input-autocomplete__arrow_db1on","error":"input-autocomplete__error_db1on"};
|
|
8
8
|
require('./index.css')
|
|
9
9
|
|
|
10
10
|
var AutocompleteField = function (_a) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
export { AutocompleteField } from './Component.js';
|
|
2
|
+
import '../tslib.es6-18b090e0.js';
|
|
2
3
|
import 'react';
|
|
3
4
|
import 'react-merge-refs';
|
|
4
5
|
import 'classnames';
|
|
5
6
|
import '@alfalab/core-components-input/esm';
|
|
6
|
-
export { AutocompleteField } from './Component.js';
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { _ as __rest, a as __assign } from '../tslib.es6-
|
|
1
|
+
import { _ as __rest, a as __assign } from '../tslib.es6-18b090e0.js';
|
|
2
2
|
import React, { useState, useRef } from 'react';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { FormControl } from '@alfalab/core-components-form-control/esm';
|
|
5
5
|
import { useFocus } from '@alfalab/hooks';
|
|
6
6
|
|
|
7
|
-
var styles = {"component":"input-
|
|
7
|
+
var styles = {"component":"input-autocomplete__component_uqles","field":"input-autocomplete__field_uqles","disabled":"input-autocomplete__disabled_uqles","placeholder":"input-autocomplete__placeholder_uqles","contentWrapper":"input-autocomplete__contentWrapper_uqles","value":"input-autocomplete__value_uqles","focusVisible":"input-autocomplete__focusVisible_uqles"};
|
|
8
8
|
require('./index.css')
|
|
9
9
|
|
|
10
10
|
var AutocompleteMobileField = function (_a) {
|
|
11
11
|
var _b;
|
|
12
|
-
var _c = _a.size, size = _c === void 0 ? 'm' : _c
|
|
12
|
+
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 = __rest(_a, ["size", "open", "error", "hint", "disabled", "label", "labelView", "placeholder", "value", "innerProps", "dataTestId", "fieldClassName", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple"]);
|
|
13
13
|
var _e = useState(false), focused = _e[0], setFocused = _e[1];
|
|
14
14
|
var wrapperRef = useRef(null);
|
|
15
15
|
var focusVisible = useFocus(wrapperRef, 'keyboard')[0];
|
|
@@ -19,7 +19,7 @@ var AutocompleteMobileField = function (_a) {
|
|
|
19
19
|
React.createElement(FormControl, __assign({ fieldClassName: cn(styles.field, fieldClassName, (_b = {},
|
|
20
20
|
_b[styles.disabled] = disabled,
|
|
21
21
|
_b[styles.focusVisible] = focusVisible,
|
|
22
|
-
_b)), 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),
|
|
22
|
+
_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),
|
|
23
23
|
React.createElement("div", { className: styles.contentWrapper },
|
|
24
24
|
placeholder && !filled && (React.createElement("span", { className: styles.placeholder }, placeholder)),
|
|
25
25
|
filled && React.createElement("div", { className: styles.value }, value)))));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 8rusi */
|
|
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_uqles {
|
|
19
19
|
width: 100%;
|
|
20
20
|
outline: none;
|
|
21
21
|
}
|
|
22
|
-
.input-
|
|
22
|
+
.input-autocomplete__field_uqles:not(.input-autocomplete__disabled_uqles) {
|
|
23
23
|
cursor: pointer;
|
|
24
24
|
}
|
|
25
|
-
.input-
|
|
25
|
+
.input-autocomplete__disabled_uqles {
|
|
26
26
|
cursor: var(--disabled-cursor);
|
|
27
27
|
}
|
|
28
|
-
.input-
|
|
28
|
+
.input-autocomplete__placeholder_uqles {
|
|
29
29
|
color: var(--color-light-text-secondary);
|
|
30
30
|
}
|
|
31
|
-
.input-
|
|
31
|
+
.input-autocomplete__contentWrapper_uqles {
|
|
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_uqles {
|
|
42
42
|
overflow: hidden;
|
|
43
43
|
text-overflow: ellipsis;
|
|
44
44
|
text-align: left;
|
|
45
45
|
}
|
|
46
|
-
.input-
|
|
46
|
+
.input-autocomplete__focusVisible_uqles {
|
|
47
47
|
outline: 2px solid var(--focus-color);
|
|
48
48
|
outline-offset: 2px;
|
|
49
49
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
export { AutocompleteMobileField } from './Component.js';
|
|
2
|
+
import '../tslib.es6-18b090e0.js';
|
|
2
3
|
import 'react';
|
|
3
4
|
import 'classnames';
|
|
4
5
|
import '@alfalab/core-components-form-control/esm';
|
|
5
6
|
import '@alfalab/hooks';
|
|
6
|
-
export { AutocompleteMobileField } from './Component.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const getDataTestId: (dataTestId?: string
|
|
1
|
+
declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
|
|
2
2
|
export { getDataTestId };
|
package/esm/index-bdb4c6b9.d.ts
CHANGED
|
@@ -151,7 +151,7 @@ declare function isScrolledToBottom(target: HTMLElement): boolean;
|
|
|
151
151
|
declare function hasScrollbar(target: HTMLElement): boolean;
|
|
152
152
|
declare const getScrollbarSize: () => number;
|
|
153
153
|
declare const restoreContainerStyles: (container: HTMLElement) => void;
|
|
154
|
-
declare const handleContainer: (container?: HTMLElement
|
|
154
|
+
declare const handleContainer: (container?: HTMLElement) => void;
|
|
155
155
|
/**
|
|
156
156
|
* Набор констант для z-index соответствующих классов компонентов.
|
|
157
157
|
* Значения выбраны по приоритету.
|
|
@@ -201,4 +201,5 @@ declare class GlobalStore {
|
|
|
201
201
|
constructor();
|
|
202
202
|
getModalStore: () => ModalStore;
|
|
203
203
|
}
|
|
204
|
-
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef,
|
|
204
|
+
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
|
|
205
|
+
export type { SavedStyle };
|
package/esm/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
export { InputAutocomplete } from './Component.js';
|
|
2
|
+
import './tslib.es6-18b090e0.js';
|
|
2
3
|
import 'react';
|
|
4
|
+
import '@alfalab/core-components-select/esm';
|
|
5
|
+
import './autocomplete-field/Component.js';
|
|
3
6
|
import 'react-merge-refs';
|
|
4
7
|
import 'classnames';
|
|
5
8
|
import '@alfalab/core-components-input/esm';
|
|
6
|
-
import '@alfalab/core-components-select/esm';
|
|
7
|
-
import './autocomplete-field/Component.js';
|
|
8
|
-
export { InputAutocomplete } from './Component.js';
|
package/esm/mobile.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: dy48v */
|
|
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_frpur {
|
|
15
15
|
padding: 0 var(--gap-xs) var(--gap-xs);
|
|
16
16
|
box-sizing: border-box;
|
|
17
17
|
}
|
|
18
|
-
.input-
|
|
18
|
+
.input-autocomplete__footer_frpur {
|
|
19
19
|
display: flex
|
|
20
20
|
}
|
|
21
|
-
.input-
|
|
21
|
+
.input-autocomplete__footer_frpur > button + button {
|
|
22
22
|
margin-left: var(--gap-m);
|
|
23
23
|
}
|
package/esm/mobile.d.ts
CHANGED
package/esm/mobile.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
export { InputAutocompleteMobile } from './Component.mobile.js';
|
|
2
|
+
import './tslib.es6-18b090e0.js';
|
|
2
3
|
import 'react';
|
|
3
4
|
import 'react-merge-refs';
|
|
4
5
|
import 'classnames';
|
|
@@ -6,7 +7,6 @@ import 'lodash.throttle';
|
|
|
6
7
|
import '@alfalab/core-components-button/esm';
|
|
7
8
|
import '@alfalab/core-components-input/esm';
|
|
8
9
|
import '@alfalab/core-components-select/esm';
|
|
10
|
+
import './autocomplete-mobile-field/Component.js';
|
|
9
11
|
import '@alfalab/core-components-form-control/esm';
|
|
10
12
|
import '@alfalab/hooks';
|
|
11
|
-
import './autocomplete-mobile-field/Component.js';
|
|
12
|
-
export { InputAutocompleteMobile } from './Component.mobile.js';
|
|
File without changes
|
|
File without changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const getDataTestId: (dataTestId?: string
|
|
1
|
+
declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
|
|
2
2
|
export { getDataTestId };
|
package/index-bdb4c6b9.d.ts
CHANGED
|
@@ -151,7 +151,7 @@ declare function isScrolledToBottom(target: HTMLElement): boolean;
|
|
|
151
151
|
declare function hasScrollbar(target: HTMLElement): boolean;
|
|
152
152
|
declare const getScrollbarSize: () => number;
|
|
153
153
|
declare const restoreContainerStyles: (container: HTMLElement) => void;
|
|
154
|
-
declare const handleContainer: (container?: HTMLElement
|
|
154
|
+
declare const handleContainer: (container?: HTMLElement) => void;
|
|
155
155
|
/**
|
|
156
156
|
* Набор констант для z-index соответствующих классов компонентов.
|
|
157
157
|
* Значения выбраны по приоритету.
|
|
@@ -201,4 +201,5 @@ declare class GlobalStore {
|
|
|
201
201
|
constructor();
|
|
202
202
|
getModalStore: () => ModalStore;
|
|
203
203
|
}
|
|
204
|
-
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef,
|
|
204
|
+
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
|
|
205
|
+
export type { SavedStyle };
|
package/index.js
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('./tslib.es6-ca8b36c2.js');
|
|
3
|
+
var Component = require('./Component.js');
|
|
4
|
+
require('./tslib.es6-62ba2400.js');
|
|
6
5
|
require('react');
|
|
6
|
+
require('@alfalab/core-components-select');
|
|
7
|
+
require('./autocomplete-field/Component.js');
|
|
7
8
|
require('react-merge-refs');
|
|
8
9
|
require('classnames');
|
|
9
10
|
require('@alfalab/core-components-input');
|
|
10
|
-
require('@alfalab/core-components-select');
|
|
11
|
-
require('./autocomplete-field/Component.js');
|
|
12
|
-
var Component = require('./Component.js');
|
|
13
11
|
|
|
14
12
|
|
|
15
13
|
|
package/mobile.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: dy48v */
|
|
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_frpur {
|
|
15
15
|
padding: 0 var(--gap-xs) var(--gap-xs);
|
|
16
16
|
box-sizing: border-box;
|
|
17
17
|
}
|
|
18
|
-
.input-
|
|
18
|
+
.input-autocomplete__footer_frpur {
|
|
19
19
|
display: flex
|
|
20
20
|
}
|
|
21
|
-
.input-
|
|
21
|
+
.input-autocomplete__footer_frpur > button + button {
|
|
22
22
|
margin-left: var(--gap-m);
|
|
23
23
|
}
|
package/mobile.d.ts
CHANGED
package/mobile.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('./tslib.es6-ca8b36c2.js');
|
|
3
|
+
var Component_mobile = require('./Component.mobile.js');
|
|
4
|
+
require('./tslib.es6-62ba2400.js');
|
|
6
5
|
require('react');
|
|
7
6
|
require('react-merge-refs');
|
|
8
7
|
require('classnames');
|
|
@@ -10,10 +9,9 @@ require('lodash.throttle');
|
|
|
10
9
|
require('@alfalab/core-components-button');
|
|
11
10
|
require('@alfalab/core-components-input');
|
|
12
11
|
require('@alfalab/core-components-select');
|
|
12
|
+
require('./autocomplete-mobile-field/Component.js');
|
|
13
13
|
require('@alfalab/core-components-form-control');
|
|
14
14
|
require('@alfalab/hooks');
|
|
15
|
-
require('./autocomplete-mobile-field/Component.js');
|
|
16
|
-
var Component_mobile = require('./Component.mobile.js');
|
|
17
15
|
|
|
18
16
|
|
|
19
17
|
|