@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.
Files changed (96) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/Component-7ca84eff.d.ts +227 -0
  3. package/dist/Component.d.ts +3 -3
  4. package/dist/Component.js +6 -5
  5. package/dist/Component.mobile.d.ts +91 -0
  6. package/dist/Component.mobile.js +82 -0
  7. package/dist/autocomplete-field/Component.d.ts +6 -0
  8. package/dist/autocomplete-field/Component.js +39 -6
  9. package/dist/autocomplete-field/index.css +2 -2
  10. package/dist/autocomplete-field/index.d.ts +1 -1
  11. package/dist/autocomplete-field/index.js +4 -3
  12. package/dist/autocomplete-mobile-field/Component.d.ts +7 -0
  13. package/dist/autocomplete-mobile-field/Component.js +37 -0
  14. package/dist/autocomplete-mobile-field/index.css +49 -0
  15. package/dist/autocomplete-mobile-field/index.d.ts +1 -0
  16. package/dist/autocomplete-mobile-field/index.js +14 -0
  17. package/dist/cssm/Component-7ca84eff.d.ts +227 -0
  18. package/dist/cssm/Component.d.ts +3 -3
  19. package/dist/cssm/Component.js +6 -5
  20. package/dist/cssm/Component.mobile.d.ts +91 -0
  21. package/dist/cssm/Component.mobile.js +82 -0
  22. package/dist/cssm/autocomplete-field/Component.d.ts +6 -0
  23. package/dist/cssm/autocomplete-field/Component.js +38 -7
  24. package/dist/cssm/autocomplete-field/index.d.ts +1 -1
  25. package/dist/cssm/autocomplete-field/index.js +4 -3
  26. package/dist/cssm/autocomplete-mobile-field/Component.d.ts +7 -0
  27. package/dist/cssm/autocomplete-mobile-field/Component.js +36 -0
  28. package/dist/cssm/autocomplete-mobile-field/index.d.ts +1 -0
  29. package/dist/cssm/autocomplete-mobile-field/index.js +15 -0
  30. package/dist/cssm/autocomplete-mobile-field/index.module.css +48 -0
  31. package/dist/cssm/index-7ca84eff.d.ts +178 -0
  32. package/dist/cssm/index-bdb4c6b9.d.ts +193 -0
  33. package/dist/cssm/index-ebda875c.d.ts +36 -0
  34. package/dist/cssm/index.js +4 -3
  35. package/dist/cssm/mobile.d.ts +1 -0
  36. package/dist/cssm/mobile.js +22 -0
  37. package/dist/cssm/mobile.module.css +18 -0
  38. package/dist/{Component-7d703cac.d.ts → cssm/tslib.es6-ce870b46.d.ts} +1 -6
  39. package/dist/cssm/tslib.es6-ce870b46.js +42 -0
  40. package/dist/esm/Component-7ca84eff.d.ts +227 -0
  41. package/dist/esm/Component.d.ts +3 -3
  42. package/dist/esm/Component.js +4 -3
  43. package/dist/esm/Component.mobile.d.ts +91 -0
  44. package/dist/esm/Component.mobile.js +71 -0
  45. package/dist/esm/autocomplete-field/Component.d.ts +6 -0
  46. package/dist/esm/autocomplete-field/Component.js +36 -5
  47. package/dist/esm/autocomplete-field/index.css +2 -2
  48. package/dist/esm/autocomplete-field/index.d.ts +1 -1
  49. package/dist/esm/autocomplete-field/index.js +4 -3
  50. package/dist/esm/autocomplete-mobile-field/Component.d.ts +7 -0
  51. package/dist/esm/autocomplete-mobile-field/Component.js +28 -0
  52. package/dist/esm/autocomplete-mobile-field/index.css +49 -0
  53. package/dist/esm/autocomplete-mobile-field/index.d.ts +1 -0
  54. package/dist/esm/autocomplete-mobile-field/index.js +6 -0
  55. package/dist/esm/index-7ca84eff.d.ts +178 -0
  56. package/dist/esm/index-bdb4c6b9.d.ts +193 -0
  57. package/dist/esm/index-ebda875c.d.ts +36 -0
  58. package/dist/esm/index.js +4 -3
  59. package/dist/esm/mobile.css +19 -0
  60. package/dist/esm/mobile.d.ts +1 -0
  61. package/dist/esm/mobile.js +12 -0
  62. package/dist/esm/{Component-077ac41e.d.ts → tslib.es6-3a1f3171.d.ts} +1 -6
  63. package/dist/esm/tslib.es6-3a1f3171.js +40 -0
  64. package/dist/index-7ca84eff.d.ts +178 -0
  65. package/dist/index-bdb4c6b9.d.ts +193 -0
  66. package/dist/index-ebda875c.d.ts +36 -0
  67. package/dist/index.js +4 -3
  68. package/dist/mobile.css +19 -0
  69. package/dist/mobile.d.ts +1 -0
  70. package/dist/mobile.js +20 -0
  71. package/dist/modern/Component-7ca84eff.d.ts +227 -0
  72. package/dist/modern/Component.d.ts +3 -3
  73. package/dist/modern/Component.js +2 -2
  74. package/dist/modern/Component.mobile.d.ts +91 -0
  75. package/dist/modern/Component.mobile.js +80 -0
  76. package/dist/modern/autocomplete-field/Component.js +3 -3
  77. package/dist/modern/autocomplete-field/index.css +2 -2
  78. package/dist/modern/autocomplete-field/index.js +2 -2
  79. package/dist/modern/autocomplete-mobile-field/Component.d.ts +7 -0
  80. package/dist/modern/autocomplete-mobile-field/Component.js +25 -0
  81. package/dist/modern/autocomplete-mobile-field/index.css +49 -0
  82. package/dist/modern/autocomplete-mobile-field/index.d.ts +1 -0
  83. package/dist/modern/autocomplete-mobile-field/index.js +5 -0
  84. package/dist/modern/index-7ca84eff.d.ts +178 -0
  85. package/dist/modern/index-bdb4c6b9.d.ts +193 -0
  86. package/dist/modern/index-ebda875c.d.ts +36 -0
  87. package/dist/modern/index.js +2 -2
  88. package/dist/modern/mobile.css +19 -0
  89. package/dist/modern/mobile.d.ts +1 -0
  90. package/dist/modern/mobile.js +11 -0
  91. package/dist/{cssm/Component-a04a9434.d.ts → tslib.es6-4ca60f38.d.ts} +1 -6
  92. package/dist/tslib.es6-4ca60f38.js +42 -0
  93. package/package.json +13 -5
  94. package/dist/Component-7d703cac.js +0 -83
  95. package/dist/cssm/Component-a04a9434.js +0 -82
  96. package/dist/esm/Component-077ac41e.js +0 -74
@@ -0,0 +1,82 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('./tslib.es6-ce870b46.js');
6
+ var cn = require('classnames');
7
+ var React = require('react');
8
+ var mergeRefs = require('react-merge-refs');
9
+ var throttle = require('lodash.throttle');
10
+ var coreComponentsSelect = require('@alfalab/core-components-select/dist/cssm');
11
+ var coreComponentsButton = require('@alfalab/core-components-button/dist/cssm');
12
+ var coreComponentsInput = require('@alfalab/core-components-input/dist/cssm');
13
+ require('@alfalab/hooks');
14
+ require('@alfalab/core-components-form-control/dist/cssm');
15
+ require('./autocomplete-mobile-field/index.module.css');
16
+ var autocompleteMobileField_Component = require('./autocomplete-mobile-field/Component.js');
17
+ var styles = require('./mobile.module.css');
18
+
19
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
+
21
+ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
22
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
23
+ var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
24
+ var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
25
+ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
26
+
27
+ var SELECTED = [];
28
+ var InputAutocompleteMobile = React__default['default'].forwardRef(function (_a, ref) {
29
+ 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 = tslib_es6.__rest(_a, ["bottomSheetProps", "bottomSheetHeaderAddonsProps", "value", "filter", "name", "Arrow", "label", "placeholder", "size", "open", "onFilter", "onChange", "onOpen", "onCancel", "onClearFilter", "continueButtonProps", "cancelButtonProps"]);
30
+ var _h = React.useState(false), open = _h[0], setOpen = _h[1];
31
+ var bottomSheetInputRef = React.useRef(null);
32
+ var targetRef = React.useRef(null);
33
+ var setBottomSheetVisibility = function (isOpen) {
34
+ if (openProp === undefined) {
35
+ setOpen(isOpen);
36
+ }
37
+ if (onOpen) {
38
+ onOpen({ open: isOpen, name: name });
39
+ }
40
+ };
41
+ var handleOpen = function (payload) {
42
+ setBottomSheetVisibility(Boolean(payload.open));
43
+ };
44
+ var handleOptionsListTouchMove = React.useMemo(function () {
45
+ return throttle__default['default'](function () {
46
+ var input = bottomSheetInputRef.current;
47
+ if (input && document.activeElement === input) {
48
+ input.blur();
49
+ }
50
+ }, 300);
51
+ }, []);
52
+ var handleChange = function () {
53
+ setBottomSheetVisibility(false);
54
+ onChange(filter);
55
+ };
56
+ var handleCancel = function () {
57
+ setBottomSheetVisibility(false);
58
+ if (onCancel) {
59
+ onCancel();
60
+ }
61
+ };
62
+ var handleInputFocus = function (event) {
63
+ var input = bottomSheetInputRef.current;
64
+ // Перед закрытием шторки снимаем фокус с инпута, чтобы предотвратить скачок шторки.
65
+ if (event.relatedTarget === targetRef.current &&
66
+ input &&
67
+ input === document.activeElement) {
68
+ input.blur();
69
+ }
70
+ };
71
+ var getBottomSheetProps = function () {
72
+ return tslib_es6.__assign(tslib_es6.__assign({ actionButton: (React__default['default'].createElement("div", { className: styles__default['default'].footer },
73
+ React__default['default'].createElement(coreComponentsButton.Button, tslib_es6.__assign({ block: true, view: 'primary', size: 's', onClick: handleChange }, continueButtonProps), "\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C"),
74
+ React__default['default'].createElement(coreComponentsButton.Button, tslib_es6.__assign({ block: true, view: 'secondary', size: 's', onClick: handleCancel }, cancelButtonProps), "\u041E\u0442\u043C\u0435\u043D\u0430"))), title: label || placeholder, bottomAddons: (React__default['default'].createElement(coreComponentsInput.Input, tslib_es6.__assign({ block: true, clear: !!onClearFilter, onClear: onClearFilter, value: filter, onInput: onFilter, placeholder: placeholder, onFocus: handleInputFocus }, bottomSheetHeaderAddonsProps, { className: cn__default['default'](styles__default['default'].bottomSheetInput, bottomSheetHeaderAddonsProps.className), ref: mergeRefs__default['default']([
75
+ bottomSheetInputRef,
76
+ bottomSheetHeaderAddonsProps.ref,
77
+ ]) }))), initialHeight: 'full', ignoreScreenChange: true }, bottomSheetProps), { containerProps: tslib_es6.__assign({ onTouchMove: handleOptionsListTouchMove }, bottomSheetProps.containerProps) });
78
+ };
79
+ return (React__default['default'].createElement(coreComponentsSelect.SelectMobile, tslib_es6.__assign({ ref: mergeRefs__default['default']([targetRef, ref]), selected: SELECTED, open: Boolean(open || openProp), onOpen: handleOpen, onChange: onChange, Arrow: Arrow, Field: autocompleteMobileField_Component.AutocompleteMobileField, fieldProps: { value: value }, placeholder: placeholder, label: label, size: size, name: name, bottomSheetProps: getBottomSheetProps() }, restProps)));
80
+ });
81
+
82
+ exports.InputAutocompleteMobile = 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 };
@@ -2,13 +2,44 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var autocompleteField_Component = require('../Component-a04a9434.js');
6
- require('react');
7
- require('classnames');
8
- require('@alfalab/core-components-input/dist/cssm');
9
- require('react-merge-refs');
10
- require('./index.module.css');
5
+ var tslib_es6 = require('../tslib.es6-ce870b46.js');
6
+ var cn = require('classnames');
7
+ var React = require('react');
8
+ var mergeRefs = require('react-merge-refs');
9
+ var coreComponentsInput = require('@alfalab/core-components-input/dist/cssm');
10
+ var styles = require('./index.module.css');
11
11
 
12
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
13
 
14
+ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
15
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
+ var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
17
+ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
13
18
 
14
- exports.AutocompleteField = autocompleteField_Component.AutocompleteField;
19
+ var AutocompleteField = function (_a) {
20
+ var _b;
21
+ var label = _a.label, placeholder = _a.placeholder, size = _a.size, Arrow = _a.Arrow, _c = _a.Input, Input = _c === void 0 ? coreComponentsInput.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;
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
+ return (React__default['default'].createElement(Input, tslib_es6.__assign({}, inputProps, innerProps, {
33
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
34
+ // @ts-ignore
35
+ wrapperRef: mergeRefs__default['default']([innerProps.ref, inputProps.wrapperRef]),
36
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
37
+ // @ts-ignore
38
+ ref: mergeRefs__default['default']([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__default['default'].createElement(React__default['default'].Fragment, null,
39
+ inputProps.rightAddons,
40
+ Arrow && (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].arrow, (_b = {},
41
+ _b[styles__default['default'].error] = error,
42
+ _b)) }, Arrow)))) })));
43
+ };
44
+
45
+ exports.AutocompleteField = AutocompleteField;
@@ -1 +1 @@
1
- export * from "../Component-a04a9434";
1
+ export * from "./Component";
@@ -2,12 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var autocompleteField_Component = require('../Component-a04a9434.js');
6
- require('react');
5
+ require('../tslib.es6-ce870b46.js');
7
6
  require('classnames');
8
- require('@alfalab/core-components-input/dist/cssm');
7
+ require('react');
9
8
  require('react-merge-refs');
9
+ require('@alfalab/core-components-input/dist/cssm');
10
10
  require('./index.module.css');
11
+ var autocompleteField_Component = require('./Component.js');
11
12
 
12
13
 
13
14
 
@@ -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,36 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('../tslib.es6-ce870b46.js');
6
+ var cn = require('classnames');
7
+ var React = require('react');
8
+ var hooks = require('@alfalab/hooks');
9
+ var coreComponentsFormControl = require('@alfalab/core-components-form-control/dist/cssm');
10
+ var styles = require('./index.module.css');
11
+
12
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
+
14
+ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
15
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
+ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
17
+
18
+ var AutocompleteMobileField = function (_a) {
19
+ var _b;
20
+ 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 = tslib_es6.__rest(_a, ["size", "open", "error", "hint", "disabled", "label", "placeholder", "value", "innerProps", "dataTestId", "fieldClassName", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple"]);
21
+ var _d = React.useState(false), focused = _d[0], setFocused = _d[1];
22
+ var wrapperRef = React.useRef(null);
23
+ var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
24
+ var filled = Boolean(value);
25
+ var showLabel = !!label && (filled || !placeholder);
26
+ return (React__default['default'].createElement("div", { className: styles__default['default'].component, ref: wrapperRef, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } },
27
+ React__default['default'].createElement(coreComponentsFormControl.FormControl, tslib_es6.__assign({ fieldClassName: cn__default['default'](styles__default['default'].field, fieldClassName, (_b = {},
28
+ _b[styles__default['default'].disabled] = disabled,
29
+ _b[styles__default['default'].focusVisible] = focusVisible,
30
+ _b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, label: showLabel && label, error: error, hint: hint, "data-test-id": dataTestId }, restProps, innerProps),
31
+ React__default['default'].createElement("div", { className: styles__default['default'].contentWrapper },
32
+ placeholder && !filled && (React__default['default'].createElement("span", { className: styles__default['default'].placeholder }, placeholder)),
33
+ filled && React__default['default'].createElement("div", { className: styles__default['default'].value }, value)))));
34
+ };
35
+
36
+ exports.AutocompleteMobileField = AutocompleteMobileField;
@@ -0,0 +1 @@
1
+ export * from "./Component";
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ require('../tslib.es6-ce870b46.js');
6
+ require('classnames');
7
+ require('react');
8
+ require('@alfalab/hooks');
9
+ require('@alfalab/core-components-form-control/dist/cssm');
10
+ require('./index.module.css');
11
+ var autocompleteMobileField_Component = require('./Component.js');
12
+
13
+
14
+
15
+ exports.AutocompleteMobileField = autocompleteMobileField_Component.AutocompleteMobileField;
@@ -0,0 +1,48 @@
1
+ :root {
2
+ --color-light-border-link: #007aff;
3
+ --color-light-text-secondary: #546272;
4
+ }
5
+ :root {
6
+
7
+ /* Hard */
8
+
9
+ /* Up */
10
+
11
+ /* Hard up */
12
+ }
13
+ :root {
14
+ --focus-color: var(--color-light-border-link);
15
+ --disabled-cursor: not-allowed;
16
+ }
17
+ .component {
18
+ width: 100%;
19
+ outline: none;
20
+ }
21
+ .field:not(.disabled) {
22
+ cursor: pointer;
23
+ }
24
+ .disabled {
25
+ cursor: var(--disabled-cursor);
26
+ }
27
+ .placeholder {
28
+ color: var(--color-light-text-secondary);
29
+ }
30
+ .contentWrapper {
31
+ font-size: 16px;
32
+ line-height: 20px;
33
+ font-weight: 400;
34
+
35
+ white-space: nowrap;
36
+ text-overflow: ellipsis;
37
+ overflow: hidden;
38
+ width: 100%;
39
+ }
40
+ .value {
41
+ overflow: hidden;
42
+ text-overflow: ellipsis;
43
+ text-align: left;
44
+ }
45
+ .focusVisible {
46
+ outline: 2px solid var(--focus-color);
47
+ outline-offset: 2px;
48
+ }
@@ -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 };