@alfalab/core-components-input-autocomplete 7.2.7 → 7.3.3
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/CHANGELOG.md +41 -0
- package/dist/Component-7ca84eff.d.ts +227 -0
- package/dist/Component.d.ts +3 -3
- package/dist/Component.js +6 -5
- package/dist/Component.mobile.d.ts +91 -0
- package/dist/Component.mobile.js +82 -0
- package/dist/autocomplete-field/Component.d.ts +6 -0
- package/dist/autocomplete-field/Component.js +39 -6
- package/dist/autocomplete-field/index.css +2 -2
- package/dist/autocomplete-field/index.d.ts +1 -1
- package/dist/autocomplete-field/index.js +4 -3
- package/dist/autocomplete-mobile-field/Component.d.ts +7 -0
- package/dist/autocomplete-mobile-field/Component.js +37 -0
- package/dist/autocomplete-mobile-field/index.css +49 -0
- package/dist/autocomplete-mobile-field/index.d.ts +1 -0
- package/dist/autocomplete-mobile-field/index.js +14 -0
- package/dist/cssm/Component-7ca84eff.d.ts +227 -0
- package/dist/cssm/Component.d.ts +3 -3
- package/dist/cssm/Component.js +6 -5
- package/dist/cssm/Component.mobile.d.ts +91 -0
- package/dist/cssm/Component.mobile.js +82 -0
- package/dist/cssm/autocomplete-field/Component.d.ts +6 -0
- package/dist/cssm/autocomplete-field/Component.js +38 -7
- package/dist/cssm/autocomplete-field/index.d.ts +1 -1
- package/dist/cssm/autocomplete-field/index.js +4 -3
- package/dist/cssm/autocomplete-mobile-field/Component.d.ts +7 -0
- package/dist/cssm/autocomplete-mobile-field/Component.js +36 -0
- package/dist/cssm/autocomplete-mobile-field/index.d.ts +1 -0
- package/dist/cssm/autocomplete-mobile-field/index.js +15 -0
- package/dist/cssm/autocomplete-mobile-field/index.module.css +48 -0
- package/dist/cssm/index-7ca84eff.d.ts +178 -0
- package/dist/cssm/index-bdb4c6b9.d.ts +193 -0
- package/dist/cssm/index-ebda875c.d.ts +36 -0
- package/dist/cssm/index.js +4 -3
- package/dist/cssm/mobile.d.ts +1 -0
- package/dist/cssm/mobile.js +22 -0
- package/dist/cssm/mobile.module.css +18 -0
- package/dist/{Component-7d703cac.d.ts → cssm/tslib.es6-ce870b46.d.ts} +1 -6
- package/dist/cssm/tslib.es6-ce870b46.js +42 -0
- package/dist/esm/Component-7ca84eff.d.ts +227 -0
- package/dist/esm/Component.d.ts +3 -3
- package/dist/esm/Component.js +4 -3
- package/dist/esm/Component.mobile.d.ts +91 -0
- package/dist/esm/Component.mobile.js +71 -0
- package/dist/esm/autocomplete-field/Component.d.ts +6 -0
- package/dist/esm/autocomplete-field/Component.js +36 -5
- package/dist/esm/autocomplete-field/index.css +2 -2
- package/dist/esm/autocomplete-field/index.d.ts +1 -1
- package/dist/esm/autocomplete-field/index.js +4 -3
- package/dist/esm/autocomplete-mobile-field/Component.d.ts +7 -0
- package/dist/esm/autocomplete-mobile-field/Component.js +28 -0
- package/dist/esm/autocomplete-mobile-field/index.css +49 -0
- package/dist/esm/autocomplete-mobile-field/index.d.ts +1 -0
- package/dist/esm/autocomplete-mobile-field/index.js +6 -0
- package/dist/esm/index-7ca84eff.d.ts +178 -0
- package/dist/esm/index-bdb4c6b9.d.ts +193 -0
- package/dist/esm/index-ebda875c.d.ts +36 -0
- package/dist/esm/index.js +4 -3
- package/dist/esm/mobile.css +19 -0
- package/dist/esm/mobile.d.ts +1 -0
- package/dist/esm/mobile.js +12 -0
- package/dist/esm/{Component-077ac41e.d.ts → tslib.es6-3a1f3171.d.ts} +1 -6
- package/dist/esm/tslib.es6-3a1f3171.js +40 -0
- package/dist/index-7ca84eff.d.ts +178 -0
- package/dist/index-bdb4c6b9.d.ts +193 -0
- package/dist/index-ebda875c.d.ts +36 -0
- package/dist/index.js +4 -3
- package/dist/mobile.css +19 -0
- package/dist/mobile.d.ts +1 -0
- package/dist/mobile.js +20 -0
- package/dist/modern/Component-7ca84eff.d.ts +227 -0
- package/dist/modern/Component.d.ts +3 -3
- package/dist/modern/Component.js +2 -2
- package/dist/modern/Component.mobile.d.ts +91 -0
- package/dist/modern/Component.mobile.js +80 -0
- package/dist/modern/autocomplete-field/Component.js +3 -3
- package/dist/modern/autocomplete-field/index.css +2 -2
- package/dist/modern/autocomplete-field/index.js +2 -2
- package/dist/modern/autocomplete-mobile-field/Component.d.ts +7 -0
- package/dist/modern/autocomplete-mobile-field/Component.js +25 -0
- package/dist/modern/autocomplete-mobile-field/index.css +49 -0
- package/dist/modern/autocomplete-mobile-field/index.d.ts +1 -0
- package/dist/modern/autocomplete-mobile-field/index.js +5 -0
- package/dist/modern/index-7ca84eff.d.ts +178 -0
- package/dist/modern/index-bdb4c6b9.d.ts +193 -0
- package/dist/modern/index-ebda875c.d.ts +36 -0
- package/dist/modern/index.js +2 -2
- package/dist/modern/mobile.css +19 -0
- package/dist/modern/mobile.d.ts +1 -0
- package/dist/modern/mobile.js +11 -0
- package/dist/{cssm/Component-a04a9434.d.ts → tslib.es6-4ca60f38.d.ts} +1 -6
- package/dist/tslib.es6-4ca60f38.js +42 -0
- package/package.json +13 -5
- package/dist/Component-7d703cac.js +0 -83
- package/dist/cssm/Component-a04a9434.js +0 -82
- package/dist/esm/Component-077ac41e.js +0 -74
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { _ as __rest, a as __assign } from './tslib.es6-3a1f3171.js';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import React, { useState, useRef, useMemo } from 'react';
|
|
4
|
+
import mergeRefs from 'react-merge-refs';
|
|
5
|
+
import throttle from 'lodash.throttle';
|
|
6
|
+
import { SelectMobile } from '@alfalab/core-components-select/dist/esm';
|
|
7
|
+
import { Button } from '@alfalab/core-components-button/dist/esm';
|
|
8
|
+
import { Input } from '@alfalab/core-components-input/dist/esm';
|
|
9
|
+
import '@alfalab/hooks';
|
|
10
|
+
import '@alfalab/core-components-form-control/dist/esm';
|
|
11
|
+
import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.js';
|
|
12
|
+
|
|
13
|
+
var styles = {"bottomSheetInput":"input-autocomplete__bottomSheetInput_6as0y","footer":"input-autocomplete__footer_6as0y"};
|
|
14
|
+
require('./mobile.css')
|
|
15
|
+
|
|
16
|
+
var SELECTED = [];
|
|
17
|
+
var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {
|
|
18
|
+
var _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, ["bottomSheetProps", "bottomSheetHeaderAddonsProps", "value", "filter", "name", "Arrow", "label", "placeholder", "size", "open", "onFilter", "onChange", "onOpen", "onCancel", "onClearFilter", "continueButtonProps", "cancelButtonProps"]);
|
|
19
|
+
var _h = useState(false), open = _h[0], setOpen = _h[1];
|
|
20
|
+
var bottomSheetInputRef = useRef(null);
|
|
21
|
+
var targetRef = useRef(null);
|
|
22
|
+
var setBottomSheetVisibility = function (isOpen) {
|
|
23
|
+
if (openProp === undefined) {
|
|
24
|
+
setOpen(isOpen);
|
|
25
|
+
}
|
|
26
|
+
if (onOpen) {
|
|
27
|
+
onOpen({ open: isOpen, name: name });
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
var handleOpen = function (payload) {
|
|
31
|
+
setBottomSheetVisibility(Boolean(payload.open));
|
|
32
|
+
};
|
|
33
|
+
var handleOptionsListTouchMove = useMemo(function () {
|
|
34
|
+
return throttle(function () {
|
|
35
|
+
var input = bottomSheetInputRef.current;
|
|
36
|
+
if (input && document.activeElement === input) {
|
|
37
|
+
input.blur();
|
|
38
|
+
}
|
|
39
|
+
}, 300);
|
|
40
|
+
}, []);
|
|
41
|
+
var handleChange = function () {
|
|
42
|
+
setBottomSheetVisibility(false);
|
|
43
|
+
onChange(filter);
|
|
44
|
+
};
|
|
45
|
+
var handleCancel = function () {
|
|
46
|
+
setBottomSheetVisibility(false);
|
|
47
|
+
if (onCancel) {
|
|
48
|
+
onCancel();
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var handleInputFocus = function (event) {
|
|
52
|
+
var input = bottomSheetInputRef.current;
|
|
53
|
+
// Перед закрытием шторки снимаем фокус с инпута, чтобы предотвратить скачок шторки.
|
|
54
|
+
if (event.relatedTarget === targetRef.current &&
|
|
55
|
+
input &&
|
|
56
|
+
input === document.activeElement) {
|
|
57
|
+
input.blur();
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
var getBottomSheetProps = function () {
|
|
61
|
+
return __assign(__assign({ actionButton: (React.createElement("div", { className: styles.footer },
|
|
62
|
+
React.createElement(Button, __assign({ block: true, view: 'primary', size: 's', onClick: handleChange }, continueButtonProps), "\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C"),
|
|
63
|
+
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(Input, __assign({ block: true, clear: !!onClearFilter, onClear: onClearFilter, value: filter, onInput: onFilter, placeholder: placeholder, onFocus: handleInputFocus }, bottomSheetHeaderAddonsProps, { className: cn(styles.bottomSheetInput, bottomSheetHeaderAddonsProps.className), ref: mergeRefs([
|
|
64
|
+
bottomSheetInputRef,
|
|
65
|
+
bottomSheetHeaderAddonsProps.ref,
|
|
66
|
+
]) }))), initialHeight: 'full', ignoreScreenChange: true }, bottomSheetProps), { containerProps: __assign({ onTouchMove: handleOptionsListTouchMove }, bottomSheetProps.containerProps) });
|
|
67
|
+
};
|
|
68
|
+
return (React.createElement(SelectMobile, __assign({ ref: mergeRefs([targetRef, ref]), selected: SELECTED, open: Boolean(open || openProp), onOpen: handleOpen, onChange: onChange, Arrow: Arrow, Field: AutocompleteMobileField, fieldProps: { value: value }, placeholder: placeholder, label: label, size: size, name: name, bottomSheetProps: getBottomSheetProps() }, restProps)));
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
export { InputAutocompleteMobile };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FieldProps } from "@alfalab/core-components-select";
|
|
3
|
+
import { InputAutocompleteProps } from "../Component";
|
|
4
|
+
type AutocompleteFieldProps = FieldProps & Pick<InputAutocompleteProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
|
|
5
|
+
declare const AutocompleteField: ({ label, placeholder, size, Arrow, Input, value, error, success, hint, disabled, readOnly, onInput, inputProps, innerProps, }: AutocompleteFieldProps) => JSX.Element;
|
|
6
|
+
export { AutocompleteFieldProps, AutocompleteField };
|
|
@@ -1,5 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
import '
|
|
3
|
-
import '
|
|
4
|
-
import '
|
|
5
|
-
import '
|
|
1
|
+
import { a as __assign } from '../tslib.es6-3a1f3171.js';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import React, { useRef, useCallback } from 'react';
|
|
4
|
+
import mergeRefs from 'react-merge-refs';
|
|
5
|
+
import { Input } from '@alfalab/core-components-input/dist/esm';
|
|
6
|
+
|
|
7
|
+
var styles = {"arrow":"input-autocomplete__arrow_1k8i1","error":"input-autocomplete__error_1k8i1"};
|
|
8
|
+
require('./index.css')
|
|
9
|
+
|
|
10
|
+
var AutocompleteField = function (_a) {
|
|
11
|
+
var _b;
|
|
12
|
+
var label = _a.label, placeholder = _a.placeholder, size = _a.size, Arrow = _a.Arrow, _c = _a.Input, Input$1 = _c === void 0 ? Input : _c, value = _a.value, error = _a.error, success = _a.success, hint = _a.hint, disabled = _a.disabled, readOnly = _a.readOnly, onInput = _a.onInput, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, innerProps = _a.innerProps;
|
|
13
|
+
var inputRef = useRef(null);
|
|
14
|
+
var onClick = innerProps.onClick, onFocus = innerProps.onFocus;
|
|
15
|
+
var inputDisabled = disabled || readOnly;
|
|
16
|
+
var handleClick = useCallback(function (event) {
|
|
17
|
+
if (onClick)
|
|
18
|
+
onClick(event);
|
|
19
|
+
if (inputRef.current) {
|
|
20
|
+
inputRef.current.focus();
|
|
21
|
+
}
|
|
22
|
+
}, [onClick]);
|
|
23
|
+
return (React.createElement(Input$1, __assign({}, inputProps, innerProps, {
|
|
24
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
25
|
+
// @ts-ignore
|
|
26
|
+
wrapperRef: mergeRefs([innerProps.ref, inputProps.wrapperRef]),
|
|
27
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
28
|
+
// @ts-ignore
|
|
29
|
+
ref: mergeRefs([inputRef, inputProps.ref]), disabled: disabled, readOnly: readOnly, block: true, label: label, placeholder: placeholder, size: size, error: error, success: success, hint: hint, onChange: onInput, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : onFocus, autoComplete: 'off', value: value, rightAddons: (Arrow || inputProps.rightAddons) && (React.createElement(React.Fragment, null,
|
|
30
|
+
inputProps.rightAddons,
|
|
31
|
+
Arrow && (React.createElement("span", { className: cn(styles.arrow, (_b = {},
|
|
32
|
+
_b[styles.error] = error,
|
|
33
|
+
_b)) }, Arrow)))) })));
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export { AutocompleteField };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "
|
|
1
|
+
export * from "./Component";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import 'react';
|
|
1
|
+
import '../tslib.es6-3a1f3171.js';
|
|
3
2
|
import 'classnames';
|
|
4
|
-
import '
|
|
3
|
+
import 'react';
|
|
5
4
|
import 'react-merge-refs';
|
|
5
|
+
import '@alfalab/core-components-input/dist/esm';
|
|
6
|
+
export { AutocompleteField } from './Component.js';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FormControlProps } from "@alfalab/core-components-form-control";
|
|
3
|
+
import { FieldProps as BaseFieldProps } from "@alfalab/core-components-select";
|
|
4
|
+
import { InputAutocompleteProps } from "../index";
|
|
5
|
+
type AutocompleteMobileFieldProps = FormControlProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & Pick<InputAutocompleteProps, 'value'>;
|
|
6
|
+
declare const AutocompleteMobileField: ({ size, open, error, hint, disabled, label, placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }: AutocompleteMobileFieldProps) => JSX.Element;
|
|
7
|
+
export { AutocompleteMobileFieldProps, AutocompleteMobileField };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { _ as __rest, a as __assign } from '../tslib.es6-3a1f3171.js';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import React, { useState, useRef } from 'react';
|
|
4
|
+
import { useFocus } from '@alfalab/hooks';
|
|
5
|
+
import { FormControl } from '@alfalab/core-components-form-control/dist/esm';
|
|
6
|
+
|
|
7
|
+
var styles = {"component":"input-autocomplete__component_jb0ov","field":"input-autocomplete__field_jb0ov","disabled":"input-autocomplete__disabled_jb0ov","placeholder":"input-autocomplete__placeholder_jb0ov","contentWrapper":"input-autocomplete__contentWrapper_jb0ov","value":"input-autocomplete__value_jb0ov","focusVisible":"input-autocomplete__focusVisible_jb0ov"};
|
|
8
|
+
require('./index.css')
|
|
9
|
+
|
|
10
|
+
var AutocompleteMobileField = function (_a) {
|
|
11
|
+
var _b;
|
|
12
|
+
var _c = _a.size, size = _c === void 0 ? 'm' : _c, open = _a.open, error = _a.error, hint = _a.hint, disabled = _a.disabled, label = _a.label, placeholder = _a.placeholder, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, Arrow = _a.Arrow, valueRenderer = _a.valueRenderer, toggleMenu = _a.toggleMenu, setSelectedItems = _a.setSelectedItems, selectedMultiple = _a.selectedMultiple, restProps = __rest(_a, ["size", "open", "error", "hint", "disabled", "label", "placeholder", "value", "innerProps", "dataTestId", "fieldClassName", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple"]);
|
|
13
|
+
var _d = useState(false), focused = _d[0], setFocused = _d[1];
|
|
14
|
+
var wrapperRef = useRef(null);
|
|
15
|
+
var focusVisible = useFocus(wrapperRef, 'keyboard')[0];
|
|
16
|
+
var filled = Boolean(value);
|
|
17
|
+
var showLabel = !!label && (filled || !placeholder);
|
|
18
|
+
return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } },
|
|
19
|
+
React.createElement(FormControl, __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, error: error, hint: hint, "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)))));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { AutocompleteMobileField };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/* hash: ps5io */
|
|
2
|
+
:root {
|
|
3
|
+
--color-light-border-link: #007aff;
|
|
4
|
+
--color-light-text-secondary: #546272;
|
|
5
|
+
}
|
|
6
|
+
:root {
|
|
7
|
+
|
|
8
|
+
/* Hard */
|
|
9
|
+
|
|
10
|
+
/* Up */
|
|
11
|
+
|
|
12
|
+
/* Hard up */
|
|
13
|
+
}
|
|
14
|
+
:root {
|
|
15
|
+
--focus-color: var(--color-light-border-link);
|
|
16
|
+
--disabled-cursor: not-allowed;
|
|
17
|
+
}
|
|
18
|
+
.input-autocomplete__component_jb0ov {
|
|
19
|
+
width: 100%;
|
|
20
|
+
outline: none;
|
|
21
|
+
}
|
|
22
|
+
.input-autocomplete__field_jb0ov:not(.input-autocomplete__disabled_jb0ov) {
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
}
|
|
25
|
+
.input-autocomplete__disabled_jb0ov {
|
|
26
|
+
cursor: var(--disabled-cursor);
|
|
27
|
+
}
|
|
28
|
+
.input-autocomplete__placeholder_jb0ov {
|
|
29
|
+
color: var(--color-light-text-secondary);
|
|
30
|
+
}
|
|
31
|
+
.input-autocomplete__contentWrapper_jb0ov {
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
line-height: 20px;
|
|
34
|
+
font-weight: 400;
|
|
35
|
+
|
|
36
|
+
white-space: nowrap;
|
|
37
|
+
text-overflow: ellipsis;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
.input-autocomplete__value_jb0ov {
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
text-overflow: ellipsis;
|
|
44
|
+
text-align: left;
|
|
45
|
+
}
|
|
46
|
+
.input-autocomplete__focusVisible_jb0ov {
|
|
47
|
+
outline: 2px solid var(--focus-color);
|
|
48
|
+
outline-offset: 2px;
|
|
49
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Component";
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
/// <reference types="react-transition-group" />
|
|
2
|
+
/// <reference types="react" />
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { HTMLAttributes, ReactNode, FC } from "react";
|
|
5
|
+
import { TransitionProps } from "react-transition-group/Transition";
|
|
6
|
+
import { BackdropProps } from "./index-ebda875c";
|
|
7
|
+
import { SwipeableHandlers } from "react-swipeable/types";
|
|
8
|
+
type BottomSheetTitleAlign = "center" | "left";
|
|
9
|
+
type BottomSheetProps = {
|
|
10
|
+
/**
|
|
11
|
+
* Контент
|
|
12
|
+
*/
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Управление видимостью
|
|
16
|
+
*/
|
|
17
|
+
open: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Заголовок
|
|
20
|
+
*/
|
|
21
|
+
title?: ReactNode;
|
|
22
|
+
/**
|
|
23
|
+
* Кнопка действия (обычно, это кнопка закрытия)
|
|
24
|
+
*/
|
|
25
|
+
actionButton?: ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* Дополнительный класс
|
|
28
|
+
*/
|
|
29
|
+
className?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Дополнительный класс
|
|
32
|
+
*/
|
|
33
|
+
contentClassName?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Дополнительные пропсы на контейнер.
|
|
36
|
+
*/
|
|
37
|
+
containerProps?: HTMLAttributes<HTMLDivElement>;
|
|
38
|
+
/**
|
|
39
|
+
* Дополнительный класс
|
|
40
|
+
*/
|
|
41
|
+
containerClassName?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Дополнительный класс шапки
|
|
44
|
+
*/
|
|
45
|
+
headerClassName?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Дополнительный класс футера
|
|
48
|
+
*/
|
|
49
|
+
footerClassName?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Дополнительный класс для аддонов
|
|
52
|
+
*/
|
|
53
|
+
addonClassName?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Дополнительный класс для компонента крестика
|
|
56
|
+
*/
|
|
57
|
+
closerClassName?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Дополнительный класс для компонента стрелки назад
|
|
60
|
+
*/
|
|
61
|
+
backerClassName?: string;
|
|
62
|
+
/**
|
|
63
|
+
* TransitionProps, прокидываются в компонент CSSTransitionProps.
|
|
64
|
+
*/
|
|
65
|
+
transitionProps?: Partial<TransitionProps>;
|
|
66
|
+
/**
|
|
67
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
68
|
+
*/
|
|
69
|
+
dataTestId?: string;
|
|
70
|
+
/**
|
|
71
|
+
* z-index компонента
|
|
72
|
+
*/
|
|
73
|
+
zIndex?: number;
|
|
74
|
+
/**
|
|
75
|
+
* Будет ли свайпаться шторка
|
|
76
|
+
* @default true
|
|
77
|
+
*/
|
|
78
|
+
swipeable?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Слот слева
|
|
81
|
+
*/
|
|
82
|
+
leftAddons?: ReactNode;
|
|
83
|
+
/**
|
|
84
|
+
* Слот справа
|
|
85
|
+
*/
|
|
86
|
+
rightAddons?: ReactNode;
|
|
87
|
+
/**
|
|
88
|
+
* Слот снизу
|
|
89
|
+
*/
|
|
90
|
+
bottomAddons?: ReactNode;
|
|
91
|
+
/**
|
|
92
|
+
* Наличие компонента крестика
|
|
93
|
+
*/
|
|
94
|
+
hasCloser?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* Наличие компонента стрелки назад
|
|
97
|
+
*/
|
|
98
|
+
hasBacker?: boolean;
|
|
99
|
+
/**
|
|
100
|
+
* Выравнивание заголовка
|
|
101
|
+
*/
|
|
102
|
+
titleAlign?: BottomSheetTitleAlign;
|
|
103
|
+
/**
|
|
104
|
+
* Фиксирует шапку
|
|
105
|
+
*/
|
|
106
|
+
stickyHeader?: boolean;
|
|
107
|
+
/**
|
|
108
|
+
* Фиксирует футер
|
|
109
|
+
*/
|
|
110
|
+
stickyFooter?: boolean;
|
|
111
|
+
/**
|
|
112
|
+
* Высота шторки
|
|
113
|
+
*/
|
|
114
|
+
initialHeight?: "default" | "full";
|
|
115
|
+
/**
|
|
116
|
+
* Будет ли виден оверлэй
|
|
117
|
+
*/
|
|
118
|
+
hideOverlay?: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* Будет ли видна шапка
|
|
121
|
+
*/
|
|
122
|
+
hideHeader?: boolean;
|
|
123
|
+
/**
|
|
124
|
+
* Будет ли обрезан заголовок
|
|
125
|
+
*/
|
|
126
|
+
trimTitle?: boolean;
|
|
127
|
+
/**
|
|
128
|
+
* Запретить закрытие шторки кликом на оверлэй
|
|
129
|
+
*/
|
|
130
|
+
disableOverlayClick?: boolean;
|
|
131
|
+
/**
|
|
132
|
+
* Не анимировать шторку при изменении размера вьюпорта
|
|
133
|
+
*/
|
|
134
|
+
ignoreScreenChange?: boolean;
|
|
135
|
+
/**
|
|
136
|
+
* Обработчик закрытия
|
|
137
|
+
*/
|
|
138
|
+
onClose: () => void;
|
|
139
|
+
/**
|
|
140
|
+
* Обработчик нажатия на стрелку назад
|
|
141
|
+
*/
|
|
142
|
+
onBack?: () => void;
|
|
143
|
+
};
|
|
144
|
+
/* Верхний отступ шторки, если она открыта на максимальную высоту */
|
|
145
|
+
declare const HEADER_OFFSET = 24;
|
|
146
|
+
declare const CLOSE_OFFSET = 0.2;
|
|
147
|
+
declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
|
|
148
|
+
type FooterProps = {
|
|
149
|
+
/**
|
|
150
|
+
* Контент футера
|
|
151
|
+
*/
|
|
152
|
+
children?: ReactNode;
|
|
153
|
+
/**
|
|
154
|
+
* Фиксирует футер
|
|
155
|
+
*/
|
|
156
|
+
sticky?: boolean;
|
|
157
|
+
/**
|
|
158
|
+
* Дополнительный класс
|
|
159
|
+
*/
|
|
160
|
+
className?: string;
|
|
161
|
+
};
|
|
162
|
+
declare const Footer: FC<FooterProps>;
|
|
163
|
+
type SwipeableBackdropProps = BackdropProps & {
|
|
164
|
+
/**
|
|
165
|
+
* Прозрачность бэкдропа
|
|
166
|
+
*/
|
|
167
|
+
opacity?: number;
|
|
168
|
+
/**
|
|
169
|
+
* Обработчики свайпа
|
|
170
|
+
*/
|
|
171
|
+
handlers?: SwipeableHandlers;
|
|
172
|
+
/**
|
|
173
|
+
* Время анимации opacity
|
|
174
|
+
*/
|
|
175
|
+
opacityTimeout?: number;
|
|
176
|
+
};
|
|
177
|
+
declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
|
|
178
|
+
export { BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop };
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
/// <reference types="react-transition-group" />
|
|
2
|
+
/// <reference types="react" />
|
|
3
|
+
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { MouseEvent, KeyboardEvent, ReactNode, Ref, FC, MutableRefObject, RefObject } from "react";
|
|
6
|
+
import { TransitionProps } from "react-transition-group/Transition";
|
|
7
|
+
import { BackdropProps } from "./index-ebda875c";
|
|
8
|
+
type PortalProps = {
|
|
9
|
+
/** Контент */
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
|
|
13
|
+
*/
|
|
14
|
+
getPortalContainer?: () => Element;
|
|
15
|
+
};
|
|
16
|
+
type BaseModalProps = {
|
|
17
|
+
/**
|
|
18
|
+
* Контент
|
|
19
|
+
*/
|
|
20
|
+
children?: ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Компонент бэкдропа
|
|
23
|
+
*/
|
|
24
|
+
Backdrop?: FC<BackdropProps>;
|
|
25
|
+
/**
|
|
26
|
+
* Свойства для Бэкдропа
|
|
27
|
+
*/
|
|
28
|
+
backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
|
|
29
|
+
/**
|
|
30
|
+
* Нода, компонент или функция возвращающая их
|
|
31
|
+
*
|
|
32
|
+
* Контейнер к которому будут добавляться порталы
|
|
33
|
+
*/
|
|
34
|
+
container?: PortalProps["getPortalContainer"];
|
|
35
|
+
/**
|
|
36
|
+
* Отключает автоматический перевод фокуса на модалку при открытии
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
disableAutoFocus?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Отключает ловушку фокуса
|
|
42
|
+
* @default false
|
|
43
|
+
*/
|
|
44
|
+
disableFocusLock?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
|
|
47
|
+
* @default false
|
|
48
|
+
*/
|
|
49
|
+
disableRestoreFocus?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Отключает вызов `callback` при нажатии Escape
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
disableEscapeKeyDown?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Отключает вызов `callback` при клике на бэкдроп
|
|
57
|
+
* @default false
|
|
58
|
+
*/
|
|
59
|
+
disableBackdropClick?: boolean;
|
|
60
|
+
/**
|
|
61
|
+
* Содержимое модалки всегда в DOM
|
|
62
|
+
* @default false
|
|
63
|
+
*/
|
|
64
|
+
keepMounted?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* Управление видимостью модалки
|
|
67
|
+
*/
|
|
68
|
+
open: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Дополнительный класс
|
|
71
|
+
*/
|
|
72
|
+
className?: string;
|
|
73
|
+
/**
|
|
74
|
+
* Дополнительный класс
|
|
75
|
+
*/
|
|
76
|
+
contentClassName?: string;
|
|
77
|
+
/**
|
|
78
|
+
* Дополнительный класс для обертки (Modal)
|
|
79
|
+
*/
|
|
80
|
+
wrapperClassName?: string;
|
|
81
|
+
/**
|
|
82
|
+
* Обработчик скролла контента
|
|
83
|
+
*/
|
|
84
|
+
scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
|
|
85
|
+
/**
|
|
86
|
+
* Пропсы для анимации (CSSTransition)
|
|
87
|
+
*/
|
|
88
|
+
transitionProps?: Partial<TransitionProps>;
|
|
89
|
+
/**
|
|
90
|
+
* Обработчик события нажатия на бэкдроп
|
|
91
|
+
*/
|
|
92
|
+
onBackdropClick?: (event: MouseEvent) => void;
|
|
93
|
+
/**
|
|
94
|
+
* Обработчик события нажатия на Escape
|
|
95
|
+
*
|
|
96
|
+
* Если `disableEscapeKeyDown` - false и модальное окно в фокусе
|
|
97
|
+
*/
|
|
98
|
+
onEscapeKeyDown?: (event: KeyboardEvent) => void;
|
|
99
|
+
/**
|
|
100
|
+
* Обработчик закрытия
|
|
101
|
+
*/
|
|
102
|
+
onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
|
|
103
|
+
/**
|
|
104
|
+
* Обработчик события onEntered компонента Transition
|
|
105
|
+
*/
|
|
106
|
+
onMount?: () => void;
|
|
107
|
+
/**
|
|
108
|
+
* Обработчик события onExited компонента Transition
|
|
109
|
+
*/
|
|
110
|
+
onUnmount?: () => void;
|
|
111
|
+
/**
|
|
112
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
113
|
+
*/
|
|
114
|
+
dataTestId?: string;
|
|
115
|
+
/**
|
|
116
|
+
* z-index компонента
|
|
117
|
+
*/
|
|
118
|
+
zIndex?: number;
|
|
119
|
+
/**
|
|
120
|
+
* Реф, который должен быть установлен компонентной области
|
|
121
|
+
*/
|
|
122
|
+
componentRef?: MutableRefObject<HTMLDivElement | null>;
|
|
123
|
+
};
|
|
124
|
+
type BaseModalContext = {
|
|
125
|
+
hasFooter?: boolean;
|
|
126
|
+
hasHeader?: boolean;
|
|
127
|
+
hasScroll?: boolean;
|
|
128
|
+
headerHighlighted?: boolean;
|
|
129
|
+
footerHighlighted?: boolean;
|
|
130
|
+
headerOffset?: number;
|
|
131
|
+
setHeaderOffset: (offset: number) => void;
|
|
132
|
+
contentRef: Ref<HTMLElement>;
|
|
133
|
+
setHasHeader: (exists: boolean) => void;
|
|
134
|
+
setHasFooter: (exists: boolean) => void;
|
|
135
|
+
onClose: Required<BaseModalProps>["onClose"];
|
|
136
|
+
};
|
|
137
|
+
declare const BaseModalContext: React.Context<BaseModalContext>;
|
|
138
|
+
declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
139
|
+
declare function isScrolledToTop(target: HTMLElement): boolean;
|
|
140
|
+
declare function isScrolledToBottom(target: HTMLElement): boolean;
|
|
141
|
+
declare function hasScrollbar(target: HTMLElement): boolean;
|
|
142
|
+
declare const restoreContainerStyles: (container: HTMLElement) => void;
|
|
143
|
+
declare const handleContainer: (container?: HTMLElement | undefined) => void;
|
|
144
|
+
/**
|
|
145
|
+
* Набор констант для z-index соответствующих классов компонентов.
|
|
146
|
+
* Значения выбраны по приоритету.
|
|
147
|
+
*/
|
|
148
|
+
declare const stackingOrder: {
|
|
149
|
+
FOCUSED: number;
|
|
150
|
+
DEFAULT: number;
|
|
151
|
+
POPOVER: number;
|
|
152
|
+
MODAL: number;
|
|
153
|
+
TOAST: number;
|
|
154
|
+
};
|
|
155
|
+
declare const StackingContext: import("react").Context<number>;
|
|
156
|
+
type StackProps = {
|
|
157
|
+
/**
|
|
158
|
+
* Render prop, в который передается функция.
|
|
159
|
+
* Функция принимает аргумент со значением z-index из текущего контекста.
|
|
160
|
+
*/
|
|
161
|
+
children: (value: number) => ReactNode;
|
|
162
|
+
/**
|
|
163
|
+
* Исходное значение для z-index.
|
|
164
|
+
* @default 5
|
|
165
|
+
*/
|
|
166
|
+
value?: number;
|
|
167
|
+
};
|
|
168
|
+
declare const Stack: FC<StackProps>;
|
|
169
|
+
declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
|
|
170
|
+
declare const getDefaultPortalContainer: () => Element;
|
|
171
|
+
declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
|
|
172
|
+
type SavedStyle = {
|
|
173
|
+
value: string;
|
|
174
|
+
key: string;
|
|
175
|
+
el: HTMLElement;
|
|
176
|
+
};
|
|
177
|
+
type RestoreStyle = {
|
|
178
|
+
container: HTMLElement;
|
|
179
|
+
modals: number;
|
|
180
|
+
styles: SavedStyle[];
|
|
181
|
+
};
|
|
182
|
+
declare class ModalStore {
|
|
183
|
+
private readonly restoreStyles;
|
|
184
|
+
constructor();
|
|
185
|
+
getRestoreStyles: () => RestoreStyle[];
|
|
186
|
+
}
|
|
187
|
+
declare const getModalStore: () => ModalStore;
|
|
188
|
+
declare class GlobalStore {
|
|
189
|
+
private readonly modalStore;
|
|
190
|
+
constructor();
|
|
191
|
+
getModalStore: () => ModalStore;
|
|
192
|
+
}
|
|
193
|
+
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, SavedStyle, getModalStore, GlobalStore };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/// <reference types="react-transition-group" />
|
|
2
|
+
/// <reference types="react" />
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { MouseEvent } from "react";
|
|
5
|
+
import { TransitionProps } from "react-transition-group/Transition";
|
|
6
|
+
import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
|
|
7
|
+
type BackdropProps = Partial<TransitionProps> & {
|
|
8
|
+
/**
|
|
9
|
+
* Прозрачный бэкдроп
|
|
10
|
+
*/
|
|
11
|
+
invisible?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Управляет видимостью компонента
|
|
14
|
+
*/
|
|
15
|
+
open: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Обработчик клика по бэкдропу
|
|
18
|
+
*/
|
|
19
|
+
onClose?: (event: MouseEvent<HTMLElement>) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Дополнительный класс
|
|
22
|
+
*/
|
|
23
|
+
className?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Классы анимации
|
|
26
|
+
*
|
|
27
|
+
* http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
|
|
28
|
+
*/
|
|
29
|
+
transitionClassNames?: string | CSSTransitionClassNames;
|
|
30
|
+
/**
|
|
31
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
32
|
+
*/
|
|
33
|
+
dataTestId?: string;
|
|
34
|
+
};
|
|
35
|
+
declare const Backdrop: React.FC<BackdropProps>;
|
|
36
|
+
export { BackdropProps, Backdrop };
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './tslib.es6-3a1f3171.js';
|
|
2
|
+
import 'classnames';
|
|
2
3
|
import 'react';
|
|
4
|
+
import 'react-merge-refs';
|
|
3
5
|
import '@alfalab/core-components-select/dist/esm';
|
|
4
|
-
import 'classnames';
|
|
5
6
|
import '@alfalab/core-components-input/dist/esm';
|
|
6
|
-
import '
|
|
7
|
+
import './autocomplete-field/Component.js';
|
|
7
8
|
export { InputAutocomplete } from './Component.js';
|