@alfalab/core-components-input-autocomplete 13.0.0 → 13.1.0-snapshot-92b8690
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/index.css +1 -1
- package/autocomplete-field/index.module.css.js +1 -1
- package/autocomplete-mobile-field/index.css +10 -10
- package/autocomplete-mobile-field/index.module.css.js +1 -1
- package/autocomplete-mobile-field/index.module.css.js.map +1 -1
- package/dynamic-mixins/Component.responsive.d.ts +3 -0
- package/dynamic-mixins/Component.responsive.js +24 -0
- package/dynamic-mixins/Component.responsive.js.map +1 -0
- package/dynamic-mixins/autocomplete-field/Component.d.ts +5 -0
- package/dynamic-mixins/autocomplete-field/Component.js +46 -0
- package/dynamic-mixins/autocomplete-field/Component.js.map +1 -0
- package/dynamic-mixins/autocomplete-field/index.css +3 -0
- package/dynamic-mixins/autocomplete-field/index.d.ts +1 -0
- package/dynamic-mixins/autocomplete-field/index.js +10 -0
- package/dynamic-mixins/autocomplete-field/index.js.map +1 -0
- package/dynamic-mixins/autocomplete-field/index.module.css.js +8 -0
- package/dynamic-mixins/autocomplete-field/index.module.css.js.map +1 -0
- package/dynamic-mixins/autocomplete-mobile-field/Component.d.ts +17 -0
- package/dynamic-mixins/autocomplete-mobile-field/Component.js +51 -0
- package/dynamic-mixins/autocomplete-mobile-field/Component.js.map +1 -0
- package/dynamic-mixins/autocomplete-mobile-field/index.css +40 -0
- package/dynamic-mixins/autocomplete-mobile-field/index.d.ts +1 -0
- package/dynamic-mixins/autocomplete-mobile-field/index.js +10 -0
- package/dynamic-mixins/autocomplete-mobile-field/index.js.map +1 -0
- package/dynamic-mixins/autocomplete-mobile-field/index.module.css.js +8 -0
- package/dynamic-mixins/autocomplete-mobile-field/index.module.css.js.map +1 -0
- package/dynamic-mixins/desktop/Component.desktop.d.ts +3 -0
- package/dynamic-mixins/desktop/Component.desktop.js +21 -0
- package/dynamic-mixins/desktop/Component.desktop.js.map +1 -0
- package/dynamic-mixins/desktop/index.d.ts +2 -0
- package/dynamic-mixins/desktop/index.js +10 -0
- package/dynamic-mixins/desktop/index.js.map +1 -0
- package/dynamic-mixins/enums.d.ts +4 -0
- package/dynamic-mixins/enums.js +10 -0
- package/dynamic-mixins/enums.js.map +1 -0
- package/dynamic-mixins/index.d.ts +2 -0
- package/dynamic-mixins/index.js +10 -0
- package/dynamic-mixins/index.js.map +1 -0
- package/dynamic-mixins/mobile/Component.mobile.d.ts +9 -0
- package/dynamic-mixins/mobile/Component.mobile.js +103 -0
- package/dynamic-mixins/mobile/Component.mobile.js.map +1 -0
- package/dynamic-mixins/mobile/Component.modal.mobile.d.ts +9 -0
- package/dynamic-mixins/mobile/Component.modal.mobile.js +16 -0
- package/dynamic-mixins/mobile/Component.modal.mobile.js.map +1 -0
- package/dynamic-mixins/mobile/index.d.ts +3 -0
- package/dynamic-mixins/mobile/index.js +12 -0
- package/dynamic-mixins/mobile/index.js.map +1 -0
- package/dynamic-mixins/mobile/mobile.css +3 -0
- package/dynamic-mixins/mobile/mobile.module.css.js +8 -0
- package/dynamic-mixins/mobile/mobile.module.css.js.map +1 -0
- package/dynamic-mixins/shared/index.d.ts +1 -0
- package/dynamic-mixins/shared/index.js +11 -0
- package/dynamic-mixins/shared/index.js.map +1 -0
- package/dynamic-mixins/types.d.ts +80 -0
- package/dynamic-mixins/types.js +3 -0
- package/dynamic-mixins/types.js.map +1 -0
- package/dynamic-mixins/utils.d.ts +43 -0
- package/dynamic-mixins/utils.js +60 -0
- package/dynamic-mixins/utils.js.map +1 -0
- package/esm/autocomplete-field/index.css +1 -1
- package/esm/autocomplete-field/index.module.css.js +1 -1
- package/esm/autocomplete-mobile-field/index.css +10 -10
- package/esm/autocomplete-mobile-field/index.module.css.js +1 -1
- package/esm/autocomplete-mobile-field/index.module.css.js.map +1 -1
- package/esm/mobile/mobile.css +1 -1
- package/esm/mobile/mobile.module.css.js +1 -1
- package/esm/mobile/mobile.module.css.js.map +1 -1
- package/mobile/mobile.css +1 -1
- package/mobile/mobile.module.css.js +1 -1
- package/mobile/mobile.module.css.js.map +1 -1
- package/modern/autocomplete-field/index.css +1 -1
- package/modern/autocomplete-field/index.module.css.js +1 -1
- package/modern/autocomplete-mobile-field/index.css +10 -10
- package/modern/autocomplete-mobile-field/index.module.css.js +1 -1
- package/modern/autocomplete-mobile-field/index.module.css.js.map +1 -1
- package/modern/mobile/mobile.css +1 -1
- package/modern/mobile/mobile.module.css.js +1 -1
- package/modern/mobile/mobile.module.css.js.map +1 -1
- package/moderncssm/autocomplete-mobile-field/index.module.css +10 -0
- package/moderncssm/mobile/mobile.module.css +2 -0
- package/package.json +10 -10
- package/src/autocomplete-mobile-field/index.module.css +1 -1
- package/src/mobile/mobile.module.css +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"arrow":"input-
|
|
5
|
+
var styles = {"arrow":"input-autocomplete__arrow_1fweo","error":"input-autocomplete__error_1fweo"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -8,22 +8,22 @@
|
|
|
8
8
|
--input-error-icon-display: none;
|
|
9
9
|
--input-success-icon-display: flex;
|
|
10
10
|
--input-error-icon-not-alone-display: none;
|
|
11
|
-
} .input-
|
|
11
|
+
} .input-autocomplete__component_8tf5e {
|
|
12
12
|
width: 100%;
|
|
13
13
|
outline: none;
|
|
14
|
-
} .input-
|
|
14
|
+
} .input-autocomplete__field_8tf5e:not(.input-autocomplete__disabled_8tf5e) {
|
|
15
15
|
cursor: pointer;
|
|
16
|
-
} .input-
|
|
16
|
+
} .input-autocomplete__errorIcon_8tf5e {
|
|
17
17
|
display: var(--input-error-icon-display);
|
|
18
|
-
} * + .input-
|
|
18
|
+
} * + .input-autocomplete__errorIcon_8tf5e {
|
|
19
19
|
display: var(--input-error-icon-not-alone-display);
|
|
20
|
-
} .input-
|
|
20
|
+
} .input-autocomplete__successIcon_8tf5e {
|
|
21
21
|
display: var(--input-success-icon-display);
|
|
22
|
-
} .input-
|
|
22
|
+
} .input-autocomplete__disabled_8tf5e {
|
|
23
23
|
cursor: var(--disabled-cursor);
|
|
24
|
-
} .input-
|
|
24
|
+
} .input-autocomplete__placeholder_8tf5e {
|
|
25
25
|
color: var(--color-light-text-secondary);
|
|
26
|
-
} .input-
|
|
26
|
+
} .input-autocomplete__contentWrapper_8tf5e {
|
|
27
27
|
font-size: 16px;
|
|
28
28
|
line-height: 20px;
|
|
29
29
|
font-weight: 400;
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
text-overflow: ellipsis;
|
|
33
33
|
overflow: hidden;
|
|
34
34
|
width: 100%;
|
|
35
|
-
} .input-
|
|
35
|
+
} .input-autocomplete__value_8tf5e {
|
|
36
36
|
overflow: hidden;
|
|
37
37
|
text-overflow: ellipsis;
|
|
38
38
|
text-align: left;
|
|
39
|
-
} .input-
|
|
39
|
+
} .input-autocomplete__focusVisible_8tf5e {
|
|
40
40
|
outline: 2px solid var(--focus-color);
|
|
41
41
|
outline-offset: 2px;
|
|
42
42
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"input-
|
|
5
|
+
var styles = {"component":"input-autocomplete__component_8tf5e","field":"input-autocomplete__field_8tf5e","disabled":"input-autocomplete__disabled_8tf5e","errorIcon":"input-autocomplete__errorIcon_8tf5e","successIcon":"input-autocomplete__successIcon_8tf5e","placeholder":"input-autocomplete__placeholder_8tf5e","contentWrapper":"input-autocomplete__contentWrapper_8tf5e","value":"input-autocomplete__value_8tf5e","focusVisible":"input-autocomplete__focusVisible_8tf5e"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../src/autocomplete-mobile-field/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n width: 100%;\n outline: none;\n}\n\n.field:not(.disabled) {\n cursor: pointer;\n}\n\n.errorIcon {\n display: var(--input-error-icon-display);\n}\n\n* + .errorIcon {\n display: var(--input-error-icon-not-alone-display);\n}\n\n.successIcon {\n display: var(--input-success-icon-display);\n}\n\n.disabled {\n cursor: var(--disabled-cursor);\n}\n\n.placeholder {\n color: var(--color-light-text-secondary);\n}\n\n.contentWrapper {\n @mixin paragraph_component;\n\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n}\n\n.value {\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: left;\n}\n\n.focusVisible {\n @mixin focus-outline;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,qCAAqC,CAAC,OAAO,CAAC,iCAAiC,CAAC,UAAU,CAAC,oCAAoC,CAAC,WAAW,CAAC,qCAAqC,CAAC,aAAa,CAAC,uCAAuC,CAAC,aAAa,CAAC,uCAAuC,CAAC,gBAAgB,CAAC,0CAA0C,CAAC,OAAO,CAAC,iCAAiC,CAAC,cAAc,CAAC,wCAAwC,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../src/autocomplete-mobile-field/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../vars.css';\n\n.component {\n width: 100%;\n outline: none;\n}\n\n.field:not(.disabled) {\n cursor: pointer;\n}\n\n.errorIcon {\n display: var(--input-error-icon-display);\n}\n\n* + .errorIcon {\n display: var(--input-error-icon-not-alone-display);\n}\n\n.successIcon {\n display: var(--input-success-icon-display);\n}\n\n.disabled {\n cursor: var(--disabled-cursor);\n}\n\n.placeholder {\n color: var(--color-light-text-secondary);\n}\n\n.contentWrapper {\n @mixin paragraph_component;\n\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n}\n\n.value {\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: left;\n}\n\n.focusVisible {\n @mixin focus-outline;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,qCAAqC,CAAC,OAAO,CAAC,iCAAiC,CAAC,UAAU,CAAC,oCAAoC,CAAC,WAAW,CAAC,qCAAqC,CAAC,aAAa,CAAC,uCAAuC,CAAC,aAAa,CAAC,uCAAuC,CAAC,gBAAgB,CAAC,0CAA0C,CAAC,OAAO,CAAC,iCAAiC,CAAC,cAAc,CAAC,wCAAwC,CAAC;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var dynamicMixins = require('@alfalab/core-components-mq/dynamic-mixins');
|
|
8
|
+
var Component_desktop = require('./desktop/Component.desktop.js');
|
|
9
|
+
var Component_mobile = require('./mobile/Component.mobile.js');
|
|
10
|
+
require('./mobile/Component.modal.mobile.js');
|
|
11
|
+
|
|
12
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
13
|
+
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
|
+
|
|
16
|
+
var InputAutocomplete = React.forwardRef(function (_a, ref) {
|
|
17
|
+
var breakpoint = _a.breakpoint, client = _a.client, _b = _a.defaultMatchMediaValue, defaultMatchMediaValue = _b === void 0 ? client === undefined ? undefined : client === 'desktop' : _b, mobileProps = _a.mobileProps, restProps = tslib.__rest(_a, ["breakpoint", "client", "defaultMatchMediaValue", "mobileProps"]);
|
|
18
|
+
var isDesktop = dynamicMixins.useIsDesktop(breakpoint, defaultMatchMediaValue);
|
|
19
|
+
return isDesktop ? (React__default.default.createElement(Component_desktop.InputAutocompleteDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(Component_mobile.InputAutocompleteMobile, tslib.__assign({}, restProps, mobileProps, { ref: ref })));
|
|
20
|
+
});
|
|
21
|
+
InputAutocomplete.displayName = 'InputAutocomplete';
|
|
22
|
+
|
|
23
|
+
exports.InputAutocomplete = InputAutocomplete;
|
|
24
|
+
//# sourceMappingURL=Component.responsive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.responsive.js","sources":["../src/Component.responsive.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { InputAutocompleteDesktop } from './desktop';\nimport { InputAutocompleteMobile } from './mobile';\nimport { InputAutocompleteProps } from './types';\n\nexport const InputAutocomplete = forwardRef<\n HTMLInputElement | HTMLDivElement,\n InputAutocompleteProps\n>(\n (\n {\n breakpoint,\n client,\n defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n mobileProps,\n ...restProps\n },\n ref,\n ) => {\n const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n return isDesktop ? (\n <InputAutocompleteDesktop {...restProps} ref={ref as React.Ref<HTMLInputElement>} />\n ) : (\n <InputAutocompleteMobile {...restProps} {...mobileProps} ref={ref} />\n );\n },\n);\n\nInputAutocomplete.displayName = 'InputAutocomplete';\n"],"names":["forwardRef","__rest","useIsDesktop","React","InputAutocompleteDesktop","__assign","InputAutocompleteMobile"],"mappings":";;;;;;;;;;;;;;;IAQa,iBAAiB,GAAGA,gBAAU,CAIvC,UACI,EAMC,EACD,GAAG,EAAA;AANC,IAAA,IAAA,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,EAAgF,GAAA,EAAA,CAAA,sBAAA,EAAhF,sBAAsB,GAAA,EAAA,KAAA,MAAA,GAAG,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,GAAA,EAAA,EAChF,WAAW,GAAA,EAAA,CAAA,WAAA,EACR,SAAS,GAAAC,YAAA,CAAA,EAAA,EALhB,iEAMC,CADe;IAIhB,IAAM,SAAS,GAAGC,0BAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;AAElE,IAAA,OAAO,SAAS,IACZC,sBAAA,CAAA,aAAA,CAACC,0CAAwB,EAAAC,cAAA,CAAA,EAAA,EAAK,SAAS,EAAA,EAAE,GAAG,EAAE,GAAkC,EAAI,CAAA,CAAA,KAEpFF,sBAAC,CAAA,aAAA,CAAAG,wCAAuB,qBAAK,SAAS,EAAM,WAAW,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,CAAA,CAAI,CACxE;AACL,CAAC;AAGL,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { FieldProps } from '@alfalab/core-components-select/shared';
|
|
3
|
+
import { InputAutocompleteCommonProps } from '../types';
|
|
4
|
+
export declare type AutocompleteFieldProps = FieldProps & Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
|
|
5
|
+
export declare const AutocompleteField: ({ label, labelView, placeholder, size, Arrow, Input, value, error, success, hint, disabled, readOnly, onInput, inputProps, innerProps, dataTestId, }: AutocompleteFieldProps) => React.JSX.Element;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var mergeRefs = require('react-merge-refs');
|
|
8
|
+
var cn = require('classnames');
|
|
9
|
+
var desktop = require('@alfalab/core-components-input/dynamic-mixins/desktop');
|
|
10
|
+
var enums = require('../enums.js');
|
|
11
|
+
var index_module = require('./index.module.css.js');
|
|
12
|
+
|
|
13
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
|
+
|
|
15
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
17
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
18
|
+
|
|
19
|
+
var AutocompleteField = function (_a) {
|
|
20
|
+
var _b;
|
|
21
|
+
var label = _a.label, _c = _a.labelView, labelView = _c === void 0 ? 'inner' : _c, placeholder = _a.placeholder, size = _a.size, Arrow = _a.Arrow, _d = _a.Input, Input = _d === void 0 ? desktop.InputDesktop : _d, value = _a.value, error = _a.error, success = _a.success, hint = _a.hint, disabled = _a.disabled, readOnly = _a.readOnly, onInput = _a.onInput, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, innerProps = _a.innerProps, dataTestId = _a.dataTestId;
|
|
22
|
+
var inputRef = React.useRef(null);
|
|
23
|
+
var onClick = innerProps.onClick, onFocus = innerProps.onFocus;
|
|
24
|
+
var inputDisabled = disabled || readOnly;
|
|
25
|
+
var handleClick = React.useCallback(function (event) {
|
|
26
|
+
if (onClick)
|
|
27
|
+
onClick(event);
|
|
28
|
+
if (inputRef.current) {
|
|
29
|
+
inputRef.current.focus();
|
|
30
|
+
}
|
|
31
|
+
}, [onClick]);
|
|
32
|
+
var handleInput = function (_, payload) {
|
|
33
|
+
return onInput === null || onInput === void 0 ? void 0 : onInput(payload.value, enums.OnInputReason.Change);
|
|
34
|
+
};
|
|
35
|
+
return (React__default.default.createElement(Input, tslib.__assign({ dataTestId: dataTestId }, inputProps, innerProps, { wrapperRef: mergeRefs__default.default([
|
|
36
|
+
innerProps.ref,
|
|
37
|
+
inputProps.wrapperRef,
|
|
38
|
+
]), 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,
|
|
39
|
+
inputProps.rightAddons,
|
|
40
|
+
Arrow && (React__default.default.createElement("span", { className: cn__default.default(index_module.arrow, (_b = {},
|
|
41
|
+
_b[index_module.error] = error,
|
|
42
|
+
_b)) }, Arrow)))) })));
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.AutocompleteField = AutocompleteField;
|
|
46
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport type { FieldProps } from '@alfalab/core-components-select/shared';\n\nimport { OnInputReason } from '../enums';\nimport { InputAutocompleteCommonProps } from '../types';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n label,\n labelView = 'inner',\n placeholder,\n size,\n Arrow,\n Input = DefaultInput,\n value,\n error,\n success,\n hint,\n disabled,\n readOnly,\n onInput,\n inputProps = {},\n innerProps,\n dataTestId,\n}: AutocompleteFieldProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { onClick, onFocus } = innerProps;\n\n const inputDisabled = disabled || readOnly;\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onClick) onClick(event);\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n },\n [onClick],\n );\n\n const handleInput: InputProps['onChange'] = (_, payload) =>\n onInput?.(payload.value, OnInputReason.Change);\n\n return (\n <Input\n dataTestId={dataTestId}\n {...inputProps}\n {...innerProps}\n wrapperRef={mergeRefs([\n innerProps.ref as React.Ref<HTMLElement>,\n inputProps.wrapperRef as React.Ref<HTMLElement>,\n ])}\n ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}\n disabled={disabled}\n readOnly={readOnly}\n block={true}\n label={label}\n labelView={labelView}\n placeholder={placeholder}\n size={size}\n error={error}\n success={success}\n hint={hint}\n onChange={handleInput}\n onClick={inputDisabled ? undefined : handleClick}\n onFocus={inputDisabled ? undefined : onFocus}\n autoComplete='off'\n value={value}\n rightAddons={\n (Arrow || inputProps.rightAddons) && (\n <React.Fragment>\n {inputProps.rightAddons}\n {Arrow && (\n <span\n className={cn(styles.arrow, {\n [styles.error]: error,\n })}\n >\n {Arrow}\n </span>\n )}\n </React.Fragment>\n )\n }\n />\n );\n};\n"],"names":["DefaultInput","useRef","useCallback","OnInputReason","React","__assign","mergeRefs","cn","styles"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../src/autocomplete-field/index.module.css"],"sourcesContent":[".arrow.error ~ * {\n display: none;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,OAAO,CAAC,iCAAiC,CAAC,OAAO,CAAC,iCAAiC,CAAC;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React, { ElementType } from 'react';
|
|
2
|
+
import { FormControlMobileProps } from '@alfalab/core-components-form-control/mobile';
|
|
3
|
+
import type { FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';
|
|
4
|
+
declare type FieldProps = {
|
|
5
|
+
/**
|
|
6
|
+
* Компонент FormControl
|
|
7
|
+
*/
|
|
8
|
+
FormControlComponent?: ElementType;
|
|
9
|
+
};
|
|
10
|
+
export declare type AutocompleteMobileFieldProps = FormControlMobileProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & {
|
|
11
|
+
/**
|
|
12
|
+
* Значение поля ввода
|
|
13
|
+
*/
|
|
14
|
+
value?: string;
|
|
15
|
+
};
|
|
16
|
+
export declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, rightAddons, error, readOnly, clear, success, onClear, onInput, colors, ...restProps }: AutocompleteMobileFieldProps & FieldProps) => React.JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var cn = require('classnames');
|
|
8
|
+
var mobile = require('@alfalab/core-components-form-control/dynamic-mixins/mobile');
|
|
9
|
+
var shared = require('@alfalab/core-components-input/dynamic-mixins/shared');
|
|
10
|
+
var dynamicMixins$1 = require('@alfalab/core-components-shared/dynamic-mixins');
|
|
11
|
+
var dynamicMixins = require('@alfalab/core-components-status-badge/dynamic-mixins');
|
|
12
|
+
var hooks = require('@alfalab/hooks');
|
|
13
|
+
var index_module = require('./index.module.css.js');
|
|
14
|
+
|
|
15
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
16
|
+
|
|
17
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
18
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
19
|
+
|
|
20
|
+
var AutocompleteMobileField = function (_a) {
|
|
21
|
+
var _b;
|
|
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, success = _a.success, 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", "success", "onClear", "onInput", "colors"]);
|
|
23
|
+
var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
|
|
24
|
+
var wrapperRef = React.useRef(null);
|
|
25
|
+
var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
|
|
26
|
+
var filled = Boolean(value);
|
|
27
|
+
var showPlaceholder = placeholder && !filled && labelView === 'outer';
|
|
28
|
+
var clearButtonVisible = clear && filled && !disabled && !readOnly;
|
|
29
|
+
var tabIndex = innerProps.tabIndex, restInnerProps = tslib.__rest(innerProps, ["tabIndex"]);
|
|
30
|
+
var formRightAddons = (Arrow || rightAddons || clearButtonVisible || error || success) && (React__default.default.createElement(React.Fragment, null,
|
|
31
|
+
clearButtonVisible && (React__default.default.createElement(shared.ClearButton, { onClick: onClear, disabled: disabled, colors: colors })),
|
|
32
|
+
rightAddons,
|
|
33
|
+
Arrow,
|
|
34
|
+
error && (React__default.default.createElement("div", { className: index_module.errorIcon, "data-addon": 'error-icon' },
|
|
35
|
+
React__default.default.createElement(dynamicMixins.StatusBadge, { view: 'negative-alert', size: size === 40 ? 16 : 20, dataTestId: dynamicMixins$1.getDataTestId(dataTestId, 'error-icon') }))),
|
|
36
|
+
success && !error && (React__default.default.createElement("div", { className: index_module.successIcon },
|
|
37
|
+
React__default.default.createElement(dynamicMixins.StatusBadge, { view: 'positive-checkmark', size: size === 40 ? 16 : 20, dataTestId: dynamicMixins$1.getDataTestId(dataTestId, 'success-icon') })))));
|
|
38
|
+
return (React__default.default.createElement("div", { className: index_module.component, ref: wrapperRef, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } },
|
|
39
|
+
React__default.default.createElement(mobile.FormControlMobile, tslib.__assign({ fieldClassName: cn__default.default(index_module.field, fieldClassName, (_b = {},
|
|
40
|
+
_b[index_module.disabled] = disabled,
|
|
41
|
+
_b[index_module.focusVisible] = focusVisible,
|
|
42
|
+
_b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, dataTestId: dynamicMixins$1.getDataTestId(dataTestId, 'form-control'),
|
|
43
|
+
// downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
|
|
44
|
+
tabIndex: open ? undefined : tabIndex }, restProps, restInnerProps, { readOnly: readOnly, colors: colors, error: error, rightAddons: formRightAddons }),
|
|
45
|
+
React__default.default.createElement("div", { className: index_module.contentWrapper },
|
|
46
|
+
showPlaceholder && React__default.default.createElement("span", { className: index_module.placeholder }, placeholder),
|
|
47
|
+
filled && React__default.default.createElement("div", { className: index_module.value }, value)))));
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
exports.AutocompleteMobileField = AutocompleteMobileField;
|
|
51
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-mobile-field/Component.tsx"],"sourcesContent":["import React, { ElementType, Fragment, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n FormControlMobile,\n FormControlMobileProps,\n} from '@alfalab/core-components-form-control/mobile';\nimport { ClearButton } from '@alfalab/core-components-input/shared';\nimport type { FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { StatusBadge } from '@alfalab/core-components-status-badge';\nimport { useFocus } from '@alfalab/hooks';\n\nimport styles from './index.module.css';\n\ntype FieldProps = {\n /**\n * Компонент FormControl\n */\n FormControlComponent?: ElementType;\n};\n\nexport type AutocompleteMobileFieldProps = FormControlMobileProps &\n Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & {\n /**\n * Значение поля ввода\n */\n value?: string;\n };\n\nexport const AutocompleteMobileField = ({\n size = 56,\n open,\n disabled,\n value,\n innerProps,\n dataTestId,\n fieldClassName,\n labelView = 'inner',\n placeholder,\n Arrow,\n valueRenderer,\n toggleMenu,\n setSelectedItems,\n selectedMultiple,\n FormControlComponent,\n rightAddons,\n error,\n readOnly,\n clear,\n success,\n onClear,\n onInput,\n colors = 'default',\n ...restProps\n}: AutocompleteMobileFieldProps & FieldProps) => {\n const [focused, setFocused] = useState(false);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n const filled = Boolean(value);\n const showPlaceholder = placeholder && !filled && labelView === 'outer';\n const clearButtonVisible = clear && filled && !disabled && !readOnly;\n\n const { tabIndex, ...restInnerProps } = innerProps;\n\n const formRightAddons = (Arrow || rightAddons || clearButtonVisible || error || success) && (\n <Fragment>\n {clearButtonVisible && (\n <ClearButton onClick={onClear} disabled={disabled} colors={colors} />\n )}\n {rightAddons}\n {Arrow}\n {error && (\n <div className={styles.errorIcon} data-addon='error-icon'>\n <StatusBadge\n view='negative-alert'\n size={size === 40 ? 16 : 20}\n dataTestId={getDataTestId(dataTestId, 'error-icon')}\n />\n </div>\n )}\n {success && !error && (\n <div className={styles.successIcon}>\n <StatusBadge\n view='positive-checkmark'\n size={size === 40 ? 16 : 20}\n dataTestId={getDataTestId(dataTestId, 'success-icon')}\n />\n </div>\n )}\n </Fragment>\n );\n\n return (\n <div\n className={styles.component}\n ref={wrapperRef}\n onFocus={() => setFocused(true)}\n onBlur={() => setFocused(false)}\n >\n <FormControlMobile\n fieldClassName={cn(styles.field, fieldClassName, {\n [styles.disabled]: disabled,\n [styles.focusVisible]: focusVisible,\n })}\n block={true}\n size={size}\n focused={focused}\n disabled={disabled}\n filled={filled}\n labelView={labelView}\n dataTestId={getDataTestId(dataTestId, 'form-control')}\n // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус\n tabIndex={open ? undefined : tabIndex}\n {...restProps}\n {...restInnerProps}\n readOnly={readOnly}\n colors={colors}\n error={error}\n rightAddons={formRightAddons}\n >\n <div className={styles.contentWrapper}>\n {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}\n {filled && <div className={styles.value}>{value}</div>}\n </div>\n </FormControlMobile>\n </div>\n );\n};\n"],"names":["__rest","useState","useRef","useFocus","React","Fragment","ClearButton","styles","StatusBadge","getDataTestId","FormControlMobile","__assign","cn"],"mappings":"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"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--color-light-status-info: #2288fa;
|
|
3
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
4
|
+
} :root {
|
|
5
|
+
--focus-color: var(--color-light-status-info);
|
|
6
|
+
--disabled-cursor: not-allowed;
|
|
7
|
+
} :root {
|
|
8
|
+
--input-error-icon-display: none;
|
|
9
|
+
--input-success-icon-display: flex;
|
|
10
|
+
--input-error-icon-not-alone-display: none;
|
|
11
|
+
} .input-autocomplete__component_8tf5e {
|
|
12
|
+
width: 100%;
|
|
13
|
+
outline: none;
|
|
14
|
+
} .input-autocomplete__field_8tf5e:not(.input-autocomplete__disabled_8tf5e) {
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
} .input-autocomplete__errorIcon_8tf5e {
|
|
17
|
+
display: var(--input-error-icon-display);
|
|
18
|
+
} * + .input-autocomplete__errorIcon_8tf5e {
|
|
19
|
+
display: var(--input-error-icon-not-alone-display);
|
|
20
|
+
} .input-autocomplete__successIcon_8tf5e {
|
|
21
|
+
display: var(--input-success-icon-display);
|
|
22
|
+
} .input-autocomplete__disabled_8tf5e {
|
|
23
|
+
cursor: var(--disabled-cursor);
|
|
24
|
+
} .input-autocomplete__placeholder_8tf5e {
|
|
25
|
+
color: var(--color-light-text-secondary);
|
|
26
|
+
} .input-autocomplete__contentWrapper_8tf5e {
|
|
27
|
+
@mixin paragraph_component;
|
|
28
|
+
|
|
29
|
+
white-space: nowrap;
|
|
30
|
+
text-overflow: ellipsis;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
width: 100%;
|
|
33
|
+
} .input-autocomplete__value_8tf5e {
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
text-overflow: ellipsis;
|
|
36
|
+
text-align: left;
|
|
37
|
+
} .input-autocomplete__focusVisible_8tf5e {
|
|
38
|
+
outline: 2px solid var(--focus-color);
|
|
39
|
+
outline-offset: 2px;
|
|
40
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./index.css');
|
|
4
|
+
|
|
5
|
+
var styles = {"component":"input-autocomplete__component_8tf5e","field":"input-autocomplete__field_8tf5e","disabled":"input-autocomplete__disabled_8tf5e","errorIcon":"input-autocomplete__errorIcon_8tf5e","successIcon":"input-autocomplete__successIcon_8tf5e","placeholder":"input-autocomplete__placeholder_8tf5e","contentWrapper":"input-autocomplete__contentWrapper_8tf5e","value":"input-autocomplete__value_8tf5e","focusVisible":"input-autocomplete__focusVisible_8tf5e"};
|
|
6
|
+
|
|
7
|
+
module.exports = styles;
|
|
8
|
+
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../src/autocomplete-mobile-field/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../vars.css';\n\n.component {\n width: 100%;\n outline: none;\n}\n\n.field:not(.disabled) {\n cursor: pointer;\n}\n\n.errorIcon {\n display: var(--input-error-icon-display);\n}\n\n* + .errorIcon {\n display: var(--input-error-icon-not-alone-display);\n}\n\n.successIcon {\n display: var(--input-success-icon-display);\n}\n\n.disabled {\n cursor: var(--disabled-cursor);\n}\n\n.placeholder {\n color: var(--color-light-text-secondary);\n}\n\n.contentWrapper {\n @mixin paragraph_component;\n\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n}\n\n.value {\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: left;\n}\n\n.focusVisible {\n @mixin focus-outline;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,qCAAqC,CAAC,OAAO,CAAC,iCAAiC,CAAC,UAAU,CAAC,oCAAoC,CAAC,WAAW,CAAC,qCAAqC,CAAC,aAAa,CAAC,uCAAuC,CAAC,aAAa,CAAC,uCAAuC,CAAC,gBAAgB,CAAC,0CAA0C,CAAC,OAAO,CAAC,iCAAiC,CAAC,cAAc,CAAC,wCAAwC,CAAC;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var dynamicMixins = require('@alfalab/core-components-popover/dynamic-mixins');
|
|
8
|
+
var shared = require('@alfalab/core-components-select/dynamic-mixins/shared');
|
|
9
|
+
var Component = require('../autocomplete-field/Component.js');
|
|
10
|
+
|
|
11
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
12
|
+
|
|
13
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
|
+
|
|
15
|
+
var InputAutocompleteDesktop = React.forwardRef(function (_a, ref) {
|
|
16
|
+
var _b = _a.OptionsList, OptionsList = _b === void 0 ? shared.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? shared.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? shared.Option : _d, Input = _a.Input, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, onInput = _a.onInput, value = _a.value, success = _a.success, readOnly = _a.readOnly, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? false : _f, options = _a.options, restProps = tslib.__rest(_a, ["OptionsList", "Optgroup", "Option", "Input", "inputProps", "onInput", "value", "success", "readOnly", "closeOnSelect", "options"]);
|
|
17
|
+
return (React__default.default.createElement(shared.BaseSelect, tslib.__assign({ view: 'desktop', Popover: dynamicMixins.Popover, ref: ref, autocomplete: true, options: options, closeOnSelect: closeOnSelect, Option: Option, Field: Component.AutocompleteField, Optgroup: Optgroup, OptionsList: OptionsList }, restProps, { fieldProps: tslib.__assign(tslib.__assign({}, restProps.fieldProps), { Input: Input, onInput: onInput, value: value, inputProps: inputProps, readOnly: readOnly, success: success }) })));
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
exports.InputAutocompleteDesktop = InputAutocompleteDesktop;
|
|
21
|
+
//# sourceMappingURL=Component.desktop.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.desktop.js","sources":["../../src/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { Popover } from '@alfalab/core-components-popover';\nimport {\n AnyObject,\n BaseSelect,\n Optgroup as DefaultOptgroup,\n Option as DefaultOption,\n OptionsList as DefaultOptionsList,\n} from '@alfalab/core-components-select/shared';\n\nimport { AutocompleteField } from '../autocomplete-field';\nimport { InputAutocompleteCommonProps } from '../types';\n\nexport const InputAutocompleteDesktop = forwardRef<HTMLInputElement, InputAutocompleteCommonProps>(\n (\n {\n OptionsList = DefaultOptionsList,\n Optgroup = DefaultOptgroup,\n Option = DefaultOption,\n Input,\n inputProps = {},\n onInput,\n value,\n success,\n readOnly,\n closeOnSelect = false,\n options,\n ...restProps\n },\n ref,\n ) => (\n <BaseSelect\n view='desktop'\n Popover={Popover}\n ref={ref}\n autocomplete={true}\n options={options}\n closeOnSelect={closeOnSelect}\n Option={Option}\n Field={AutocompleteField}\n Optgroup={Optgroup}\n OptionsList={OptionsList}\n {...restProps}\n fieldProps={{\n ...(restProps.fieldProps as AnyObject),\n Input,\n onInput,\n value,\n inputProps,\n readOnly,\n success,\n }}\n />\n ),\n);\n"],"names":["forwardRef","DefaultOptionsList","DefaultOptgroup","DefaultOption","__rest","React","BaseSelect","__assign","Popover","AutocompleteField"],"mappings":";;;;;;;;;;;;;;IAca,wBAAwB,GAAGA,gBAAU,CAC9C,UACI,EAaC,EACD,GAAG,EAAA;IAbC,IAAA,EAAA,GAAA,EAAA,CAAA,WAAgC,EAAhC,WAAW,GAAG,EAAA,KAAA,MAAA,GAAAC,kBAAkB,GAAA,EAAA,EAChC,EAA0B,GAAA,EAAA,CAAA,QAAA,EAA1B,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAGC,eAAe,GAAA,EAAA,EAC1B,EAAsB,GAAA,EAAA,CAAA,MAAA,EAAtB,MAAM,GAAA,EAAA,KAAA,MAAA,GAAGC,aAAa,GAAA,EAAA,EACtB,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,EAAe,GAAA,EAAA,CAAA,UAAA,EAAf,UAAU,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACf,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,qBAAqB,EAArB,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,GAAA,EAAA,EACrB,OAAO,GAAA,EAAA,CAAA,OAAA,EACJ,SAAS,GAZhBC,YAAA,CAAA,EAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,YAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,eAAA,EAAA,SAAA,CAaC,CADe;AAGf,IAAA,QACDC,sBAAA,CAAA,aAAA,CAACC,iBAAU,EAAAC,cAAA,CAAA,EACP,IAAI,EAAC,SAAS,EACd,OAAO,EAAEC,qBAAO,EAChB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,IAAI,EAClB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,KAAK,EAAEC,2BAAiB,EACxB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EAAA,EACpB,SAAS,EAAA,EACb,UAAU,EACFF,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,SAAS,CAAC,UAAwB,KACtC,KAAK,EAAA,KAAA,EACL,OAAO,EAAA,OAAA,EACP,KAAK,EAAA,KAAA,EACL,UAAU,EAAA,UAAA,EACV,QAAQ,UAAA,EACR,OAAO,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAEb;AACL,CAAA;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var Component_desktop = require('./Component.desktop.js');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.InputAutocompleteDesktop = Component_desktop.InputAutocompleteDesktop;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
exports.OnInputReason = void 0;
|
|
6
|
+
(function (OnInputReason) {
|
|
7
|
+
OnInputReason["Close"] = "close";
|
|
8
|
+
OnInputReason["Change"] = "change";
|
|
9
|
+
})(exports.OnInputReason || (exports.OnInputReason = {}));
|
|
10
|
+
//# sourceMappingURL=enums.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"enums.js","sources":["../src/enums.ts"],"sourcesContent":["export enum OnInputReason {\n Close = 'close',\n Change = 'change',\n}\n"],"names":["OnInputReason"],"mappings":";;;;AAAYA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACrB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,aAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACrB,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,GAGxB,EAAA,CAAA,CAAA;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var Component_responsive = require('./Component.responsive.js');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.InputAutocomplete = Component_responsive.InputAutocomplete;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<import("../types").InputAutocompleteCommonProps & {
|
|
3
|
+
isBottomSheet?: boolean | undefined;
|
|
4
|
+
transitionProps?: Partial<import("react-transition-group/Transition").TransitionProps<undefined>> | undefined;
|
|
5
|
+
onApply?: (() => void) | undefined;
|
|
6
|
+
onCancel?: (() => void) | undefined;
|
|
7
|
+
title?: string | undefined;
|
|
8
|
+
virtualKeyboard?: boolean | undefined;
|
|
9
|
+
} & React.RefAttributes<unknown>>;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var mergeRefs = require('react-merge-refs');
|
|
8
|
+
var core = require('@maskito/core');
|
|
9
|
+
var cn = require('classnames');
|
|
10
|
+
var throttle = require('lodash/throttle');
|
|
11
|
+
var mobile = require('@alfalab/core-components-select/dynamic-mixins/mobile');
|
|
12
|
+
var shared = require('@alfalab/core-components-select/dynamic-mixins/shared');
|
|
13
|
+
var dynamicMixins = require('@alfalab/core-components-shared/dynamic-mixins');
|
|
14
|
+
var Component = require('../autocomplete-mobile-field/Component.js');
|
|
15
|
+
var enums = require('../enums.js');
|
|
16
|
+
var utils = require('../utils.js');
|
|
17
|
+
var mobile_module = require('./mobile.module.css.js');
|
|
18
|
+
|
|
19
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
20
|
+
|
|
21
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
22
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
23
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
24
|
+
var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
|
|
25
|
+
|
|
26
|
+
var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, ref) {
|
|
27
|
+
var _b;
|
|
28
|
+
var _c;
|
|
29
|
+
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, success = _a.success, _h = _a.virtualKeyboard, virtualKeyboard = _h === void 0 ? false : _h, restProps = tslib.__rest(_a, ["Input", "value", "name", "Arrow", "label", "placeholder", "size", "open", "onInput", "onOpen", "multiple", "inputProps", "isBottomSheet", "dataTestId", "transitionProps", "onCancel", "onApply", "title", "success", "virtualKeyboard"]);
|
|
30
|
+
var _j = React.useState(false), open = _j[0], setOpen = _j[1];
|
|
31
|
+
var frozenValue = React.useRef('');
|
|
32
|
+
var searchInputRef = React.useRef(null);
|
|
33
|
+
var targetRef = React.useRef(null);
|
|
34
|
+
var restorePrevValue = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(frozenValue.current, enums.OnInputReason.Close); };
|
|
35
|
+
var setModalVisibility = function (isOpen) {
|
|
36
|
+
if (isOpen) {
|
|
37
|
+
frozenValue.current = value || '';
|
|
38
|
+
}
|
|
39
|
+
if (openProp === undefined) {
|
|
40
|
+
setOpen(isOpen);
|
|
41
|
+
}
|
|
42
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen({ open: isOpen, name: name });
|
|
43
|
+
};
|
|
44
|
+
var handleOpen = function (payload) {
|
|
45
|
+
setModalVisibility(Boolean(payload.open));
|
|
46
|
+
};
|
|
47
|
+
var handleOptionsListTouchMove = React.useMemo(function () {
|
|
48
|
+
return throttle__default.default(function () {
|
|
49
|
+
var input = searchInputRef.current;
|
|
50
|
+
if (input && document.activeElement === input) {
|
|
51
|
+
input.blur();
|
|
52
|
+
}
|
|
53
|
+
}, 300);
|
|
54
|
+
}, []);
|
|
55
|
+
var handleApply = function () {
|
|
56
|
+
setModalVisibility(false);
|
|
57
|
+
onApply === null || onApply === void 0 ? void 0 : onApply();
|
|
58
|
+
};
|
|
59
|
+
var handleCancel = function () {
|
|
60
|
+
setModalVisibility(false);
|
|
61
|
+
restorePrevValue();
|
|
62
|
+
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
|
|
63
|
+
};
|
|
64
|
+
var handleExiting = function (node) {
|
|
65
|
+
var _a, _b;
|
|
66
|
+
(_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
67
|
+
(_b = transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onExiting) === null || _b === void 0 ? void 0 : _b.call(transitionProps, node);
|
|
68
|
+
};
|
|
69
|
+
var isOpen = Boolean(open || openProp);
|
|
70
|
+
var Component$1 = isBottomSheet ? mobile.SelectMobile : mobile.SelectModalMobile;
|
|
71
|
+
var componentProps = (_b = {
|
|
72
|
+
title: title || label || placeholder,
|
|
73
|
+
onClose: restorePrevValue,
|
|
74
|
+
transitionProps: tslib.__assign(tslib.__assign({}, transitionProps), { onExiting: handleExiting })
|
|
75
|
+
},
|
|
76
|
+
_b[isBottomSheet ? 'containerProps' : 'componentDivProps'] = {
|
|
77
|
+
onTouchMove: handleOptionsListTouchMove,
|
|
78
|
+
},
|
|
79
|
+
_b);
|
|
80
|
+
var clear = (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.clear) !== null && _c !== void 0 ? _c : false;
|
|
81
|
+
var displayValue = isOpen ? frozenValue.current : value;
|
|
82
|
+
var fieldValue = React.useMemo(function () {
|
|
83
|
+
var mask = inputProps === null || inputProps === void 0 ? void 0 : inputProps.mask;
|
|
84
|
+
return dynamicMixins.isNonNullable(displayValue) && dynamicMixins.isMaskitoMask(mask)
|
|
85
|
+
? core.maskitoTransform(displayValue, { mask: mask })
|
|
86
|
+
: displayValue;
|
|
87
|
+
}, [displayValue, inputProps === null || inputProps === void 0 ? void 0 : inputProps.mask]);
|
|
88
|
+
return (React__default.default.createElement(Component$1, tslib.__assign({ Field: Component.AutocompleteMobileField }, restProps, (isBottomSheet
|
|
89
|
+
? {
|
|
90
|
+
bottomSheetProps: tslib.__assign(tslib.__assign({}, componentProps), { virtualKeyboard: virtualKeyboard, showSwipeMarker: false }),
|
|
91
|
+
}
|
|
92
|
+
: {
|
|
93
|
+
modalProps: componentProps,
|
|
94
|
+
modalHeaderProps: { title: title },
|
|
95
|
+
}), { dataTestId: dataTestId, useWithApplyHook: false, showSearch: true, searchProps: {
|
|
96
|
+
value: value,
|
|
97
|
+
filterFn: utils.searchFilterStub,
|
|
98
|
+
componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn__default.default(mobile_module.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, enums.OnInputReason.Change); } }),
|
|
99
|
+
}, 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: fieldValue, clear: clear, onClear: clear ? inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClear : undefined, success: success }, restProps.fieldProps) })));
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
exports.InputAutocompleteMobile = InputAutocompleteMobile;
|
|
103
|
+
//# sourceMappingURL=Component.mobile.js.map
|