@megafon/ui-core 2.1.4 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/CHANGELOG.md +55 -0
  2. package/dist/es/colors/Colors.d.ts +2 -2
  3. package/dist/es/components/Accordion/Accordion.d.ts +1 -0
  4. package/dist/es/components/Accordion/Accordion.js +4 -2
  5. package/dist/es/components/Banner/Banner.css +28 -0
  6. package/dist/es/components/Banner/Banner.d.ts +2 -0
  7. package/dist/es/components/Banner/Banner.js +15 -10
  8. package/dist/es/components/Button/Button.js +2 -2
  9. package/dist/es/components/Calendar/Calendar.js +3 -2
  10. package/dist/es/components/Calendar/components/Day/Day.js +1 -1
  11. package/dist/es/components/Carousel/Carousel.js +17 -14
  12. package/dist/es/components/Checkbox/Checkbox.d.ts +1 -1
  13. package/dist/es/components/Checkbox/Checkbox.js +1 -1
  14. package/dist/es/components/Counter/Counter.js +3 -3
  15. package/dist/es/components/Header/Header.d.ts +1 -1
  16. package/dist/es/components/Link/Link.d.ts +7 -3
  17. package/dist/es/components/Link/Link.js +21 -8
  18. package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.js +1 -1
  19. package/dist/es/components/Pagination/helpers.d.ts +1 -1
  20. package/dist/es/components/RadioButton/RadioButton.d.ts +5 -1
  21. package/dist/es/components/RadioButton/RadioButton.js +8 -6
  22. package/dist/es/components/Search/Search.js +4 -3
  23. package/dist/es/components/Select/Select.d.ts +3 -3
  24. package/dist/es/components/Select/Select.js +5 -5
  25. package/dist/es/components/Switcher/Switcher.js +1 -1
  26. package/dist/es/components/Tabs/Tabs.d.ts +2 -0
  27. package/dist/es/components/Tabs/Tabs.js +104 -59
  28. package/dist/es/components/TextField/TextField.d.ts +3 -1
  29. package/dist/es/components/TextField/TextField.js +14 -10
  30. package/dist/es/components/Tile/Tile.js +1 -1
  31. package/dist/es/components/Tooltip/Tooltip.js +17 -17
  32. package/dist/lib/colors/Colors.d.ts +2 -2
  33. package/dist/lib/components/Accordion/Accordion.d.ts +1 -0
  34. package/dist/lib/components/Accordion/Accordion.js +4 -2
  35. package/dist/lib/components/Banner/Banner.css +28 -0
  36. package/dist/lib/components/Banner/Banner.d.ts +2 -0
  37. package/dist/lib/components/Banner/Banner.js +15 -10
  38. package/dist/lib/components/Button/Button.js +2 -2
  39. package/dist/lib/components/Calendar/Calendar.js +3 -3
  40. package/dist/lib/components/Calendar/components/Day/Day.js +1 -1
  41. package/dist/lib/components/Carousel/Carousel.js +15 -12
  42. package/dist/lib/components/Checkbox/Checkbox.d.ts +1 -1
  43. package/dist/lib/components/Checkbox/Checkbox.js +1 -1
  44. package/dist/lib/components/Counter/Counter.js +3 -3
  45. package/dist/lib/components/Header/Header.d.ts +1 -1
  46. package/dist/lib/components/Link/Link.d.ts +7 -3
  47. package/dist/lib/components/Link/Link.js +34 -23
  48. package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.js +1 -1
  49. package/dist/lib/components/Pagination/helpers.d.ts +1 -1
  50. package/dist/lib/components/RadioButton/RadioButton.d.ts +5 -1
  51. package/dist/lib/components/RadioButton/RadioButton.js +7 -5
  52. package/dist/lib/components/Search/Search.js +4 -3
  53. package/dist/lib/components/Select/Select.d.ts +3 -3
  54. package/dist/lib/components/Select/Select.js +5 -5
  55. package/dist/lib/components/Switcher/Switcher.js +1 -1
  56. package/dist/lib/components/Tabs/Tabs.d.ts +2 -0
  57. package/dist/lib/components/Tabs/Tabs.js +104 -59
  58. package/dist/lib/components/TextField/TextField.d.ts +3 -1
  59. package/dist/lib/components/TextField/TextField.js +14 -10
  60. package/dist/lib/components/Tile/Tile.js +1 -1
  61. package/dist/lib/components/Tooltip/Tooltip.js +17 -17
  62. package/package.json +3 -3
@@ -79,7 +79,7 @@ var Day = function Day(_a) {
79
79
  };
80
80
 
81
81
  var handleMouseLeave = function handleMouseLeave() {
82
- onMouseLeave && onMouseLeave();
82
+ onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
83
83
  };
84
84
 
85
85
  return /*#__PURE__*/_react["default"].createElement("button", {
@@ -154,7 +154,8 @@ var Carousel = function Carousel(_ref) {
154
154
  return;
155
155
  }
156
156
 
157
- autoplay.stop();
157
+ autoplay.stop(); // eslint-disable-next-line no-param-reassign
158
+
158
159
  params.autoplay.delay = autoPlayDelay * 3;
159
160
  autoplay.start();
160
161
  }, [autoPlayDelay]);
@@ -164,7 +165,7 @@ var Carousel = function Carousel(_ref) {
164
165
  }
165
166
 
166
167
  swiperInstance.slidePrev();
167
- onPrevClick && onPrevClick(swiperInstance.realIndex);
168
+ onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
168
169
  increaseAutoplayDelay(swiperInstance);
169
170
  }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
170
171
  var handleNextClick = React.useCallback(function () {
@@ -173,14 +174,14 @@ var Carousel = function Carousel(_ref) {
173
174
  }
174
175
 
175
176
  swiperInstance.slideNext();
176
- onNextClick && onNextClick(swiperInstance.realIndex);
177
+ onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
177
178
  increaseAutoplayDelay(swiperInstance);
178
179
  }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
179
180
  var handleSwiper = React.useCallback(function (swiper) {
180
181
  setSwiperInstance(swiper);
181
182
  setLocked(swiper.isBeginning && swiper.isEnd);
182
- getSwiper && getSwiper(swiper);
183
- }, []);
183
+ getSwiper === null || getSwiper === void 0 ? void 0 : getSwiper(swiper);
184
+ }, [getSwiper]);
184
185
  var handleReachBeginnig = React.useCallback(function () {
185
186
  setBeginning(true);
186
187
  }, []);
@@ -201,7 +202,7 @@ var Carousel = function Carousel(_ref) {
201
202
  var realIndex = _ref4.realIndex,
202
203
  previousIndex = _ref4.previousIndex,
203
204
  params = _ref4.params;
204
- onChange && onChange(realIndex, previousIndex, params.slidesPerView);
205
+ onChange === null || onChange === void 0 ? void 0 : onChange(realIndex, previousIndex, params.slidesPerView);
205
206
  }, [onChange]);
206
207
 
207
208
  var handleRootClick = function handleRootClick(e) {
@@ -214,13 +215,15 @@ var Carousel = function Carousel(_ref) {
214
215
  }; // https://github.com/nolimits4web/Swiper/issues/2346
215
216
 
216
217
 
217
- var handleSwiperResize = React.useCallback((0, _lodash["default"])(function (swiper) {
218
- setBeginning(swiper.isBeginning);
219
- setEnd(swiper.isEnd);
220
- setLocked(swiper.isBeginning && swiper.isEnd);
218
+ var handleSwiperResize = React.useCallback(function () {
219
+ (0, _lodash["default"])(function (swiper) {
220
+ setBeginning(swiper.isBeginning);
221
+ setEnd(swiper.isEnd);
222
+ setLocked(swiper.isBeginning && swiper.isEnd);
221
223
 
222
- if (swiper.params.slidesPerView === SlidesPerView.AUTO) {}
223
- }, _throttleTime["default"].resize), []);
224
+ if (swiper.params.slidesPerView === SlidesPerView.AUTO) {}
225
+ }, _throttleTime["default"].resize);
226
+ }, []);
224
227
 
225
228
  var handleSlideFocus = function handleSlideFocus(index) {
226
229
  return function (e) {
@@ -30,7 +30,7 @@ export interface ICheckboxProps extends IFilterDataAttrs {
30
30
  /** Обработчик изменения значения */
31
31
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
32
32
  }
33
- declare class Checkbox extends React.Component<ICheckboxProps, {}> {
33
+ declare class Checkbox extends React.Component<ICheckboxProps> {
34
34
  static propTypes: {
35
35
  className: PropTypes.Requireable<string>;
36
36
  fontSize: PropTypes.Requireable<string>;
@@ -94,7 +94,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
94
94
 
95
95
  _this.handleChange = function (e) {
96
96
  var onChange = _this.props.onChange;
97
- onChange && onChange(e);
97
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
98
98
  };
99
99
 
100
100
  return _this;
@@ -75,15 +75,15 @@ var Counter = function Counter(_ref) {
75
75
  }
76
76
 
77
77
  if (inputValue < min) {
78
- onChange && onChange(min);
78
+ onChange === null || onChange === void 0 ? void 0 : onChange(min);
79
79
  }
80
80
 
81
81
  if (inputValue > max) {
82
- onChange && onChange(max);
82
+ onChange === null || onChange === void 0 ? void 0 : onChange(max);
83
83
  }
84
84
 
85
85
  if (inputValue >= min && inputValue <= max) {
86
- onChange && onChange(inputValue);
86
+ onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
87
87
  }
88
88
  }, [min, max, onChange, isControlled]);
89
89
  var handleMinusClick = React.useCallback(function () {
@@ -18,7 +18,7 @@ interface IHeaderProps extends IFilterDataAttrs {
18
18
  /** Обработчик клика */
19
19
  onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
20
20
  }
21
- declare class Header extends React.Component<IHeaderProps, {}> {
21
+ declare class Header extends React.Component<IHeaderProps> {
22
22
  static propTypes: {
23
23
  as: PropTypes.Requireable<string>;
24
24
  color: PropTypes.Requireable<string>;
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import React from 'react';
2
2
  export interface ILinkProps {
3
3
  /** Дополнительный класс корневого элемента */
4
4
  className?: string;
@@ -8,10 +8,14 @@ export interface ILinkProps {
8
8
  target?: '_self' | '_blank' | '_parent' | '_top';
9
9
  /** rel - аргумент тега <a> */
10
10
  rel?: string;
11
- /** Обработчик клика */
12
- onClick?: (e: React.MouseEvent<EventTarget>) => void;
13
11
  /** Добавление атрибута download */
14
12
  download?: boolean;
13
+ /** Дата атрибуты для элемента */
14
+ dataAttrs?: {
15
+ root?: Record<string, string>;
16
+ };
17
+ /** Обработчик клика */
18
+ onClick?: (e: React.MouseEvent<EventTarget>) => void;
15
19
  children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
16
20
  }
17
21
  declare const Link: React.FC<ILinkProps>;
@@ -1,36 +1,47 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports["default"] = void 0;
9
7
 
10
- var React = _interopRequireWildcard(require("react"));
11
-
12
- var PropTypes = _interopRequireWildcard(require("prop-types"));
13
-
14
- function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
15
-
16
- function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
-
18
- var Link = function Link(props) {
19
- return (
20
- /*#__PURE__*/
21
- // eslint-disable-next-line jsx-a11y/anchor-has-content
22
- React.createElement("a", props)
23
- );
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _uiHelpers = require("@megafon/ui-helpers");
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
+
18
+ var Link = function Link(_ref) {
19
+ var target = _ref.target,
20
+ href = _ref.href,
21
+ rel = _ref.rel,
22
+ onClick = _ref.onClick,
23
+ className = _ref.className,
24
+ download = _ref.download,
25
+ children = _ref.children,
26
+ dataAttrs = _ref.dataAttrs;
27
+ return /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({
28
+ className: className,
29
+ href: href,
30
+ target: target,
31
+ rel: rel,
32
+ download: download,
33
+ onClick: onClick
34
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), children);
24
35
  };
25
36
 
26
37
  Link.propTypes = {
27
- href: PropTypes.string,
28
- children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node]),
29
- target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
30
- className: PropTypes.string,
31
- rel: PropTypes.string,
32
- onClick: PropTypes.func,
33
- download: PropTypes.bool
38
+ href: _propTypes["default"].string,
39
+ children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].element), _propTypes["default"].element, _propTypes["default"].string, _propTypes["default"].node]),
40
+ target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top']),
41
+ className: _propTypes["default"].string,
42
+ rel: _propTypes["default"].string,
43
+ onClick: _propTypes["default"].func,
44
+ download: _propTypes["default"].bool
34
45
  };
35
46
  var _default = Link;
36
47
  exports["default"] = _default;
@@ -28,7 +28,7 @@ var PaginationButton = function PaginationButton(_ref) {
28
28
  value = _ref.value;
29
29
 
30
30
  var handleClick = function handleClick() {
31
- onClick && onClick(value);
31
+ onClick === null || onClick === void 0 ? void 0 : onClick(value);
32
32
  };
33
33
 
34
34
  return /*#__PURE__*/_react["default"].createElement("button", {
@@ -1,2 +1,2 @@
1
- declare const getRange: (from: any, to: any, step?: number) => number[];
1
+ declare const getRange: (from: number, to: number, step?: number) => number[];
2
2
  export default getRange;
@@ -1,7 +1,8 @@
1
1
  import * as React from 'react';
2
+ import { IFilterDataAttrs } from '@megafon/ui-helpers';
2
3
  import * as PropTypes from 'prop-types';
3
4
  import './RadioButton.less';
4
- export interface IRadioButtonProps {
5
+ export interface IRadioButtonProps extends IFilterDataAttrs {
5
6
  /** Значение */
6
7
  value: string;
7
8
  /** Имя для тега form */
@@ -44,6 +45,9 @@ declare class RadioButton extends React.Component<IRadioButtonProps> {
44
45
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
45
46
  onChange: PropTypes.Requireable<(...args: any[]) => any>;
46
47
  inputRef: PropTypes.Requireable<any>;
48
+ dataAttrs: PropTypes.Requireable<{
49
+ [x: string]: string;
50
+ }>;
47
51
  };
48
52
  static defaultProps: Partial<IRadioButtonProps>;
49
53
  handleChange: () => void;
@@ -93,7 +93,7 @@ var RadioButton = /*#__PURE__*/function (_React$Component) {
93
93
  var _this$props = _this.props,
94
94
  onChange = _this$props.onChange,
95
95
  value = _this$props.value;
96
- onChange && onChange(value);
96
+ onChange === null || onChange === void 0 ? void 0 : onChange(value);
97
97
  };
98
98
 
99
99
  return _this;
@@ -112,14 +112,15 @@ var RadioButton = /*#__PURE__*/function (_React$Component) {
112
112
  inputRef = _this$props2.inputRef,
113
113
  className = _this$props2.className,
114
114
  _this$props2$classes = _this$props2.classes,
115
- classes = _this$props2$classes === void 0 ? {} : _this$props2$classes;
115
+ classes = _this$props2$classes === void 0 ? {} : _this$props2$classes,
116
+ dataAttrs = _this$props2.dataAttrs;
116
117
  var checkedProp = isChecked !== undefined ? {
117
118
  checked: isChecked
118
119
  } : {};
119
120
  var rootClassNames = Array.isArray(className) ? [].concat((0, _toConsumableArray2["default"])(className), [classes.root]) : [className, classes.root];
120
- return /*#__PURE__*/React.createElement("div", {
121
+ return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
121
122
  className: cn(rootClassNames)
122
- }, /*#__PURE__*/React.createElement("label", {
123
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/React.createElement("label", {
123
124
  className: cn('label', {
124
125
  disabled: disabled
125
126
  }, classes.label)
@@ -160,7 +161,8 @@ RadioButton.propTypes = {
160
161
  onChange: PropTypes.func,
161
162
  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
162
163
  current: PropTypes.elementType
163
- }), PropTypes.any])])
164
+ }), PropTypes.any])]),
165
+ dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
164
166
  };
165
167
  RadioButton.defaultProps = {
166
168
  textSize: 'medium',
@@ -100,7 +100,7 @@ var Search = function Search(_ref) {
100
100
  setActiveIndex(-1);
101
101
 
102
102
  if (changeDelay === 0) {
103
- onChange && onChange(inputValue);
103
+ onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
104
104
  } else {
105
105
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
106
106
  // @ts-ignore
@@ -124,7 +124,7 @@ var Search = function Search(_ref) {
124
124
  }
125
125
 
126
126
  var chosenValue = items[index].value;
127
- onSubmit && onSubmit(chosenValue);
127
+ onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenValue);
128
128
  }, [disabled, items, onSubmit]);
129
129
 
130
130
  var handleSelectSubmit = _react["default"].useCallback(function () {
@@ -139,7 +139,7 @@ var Search = function Search(_ref) {
139
139
 
140
140
  var handleBlur = _react["default"].useCallback(function (e) {
141
141
  setFocus(false);
142
- onBlur && onBlur(e);
142
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
143
143
  }, [onBlur]);
144
144
 
145
145
  var handleClick = _react["default"].useCallback(function () {
@@ -161,6 +161,7 @@ var Search = function Search(_ref) {
161
161
  e.preventDefault();
162
162
  } else if (e.key === 'Enter' && activeIndex > -1) {
163
163
  handleItemSubmit(activeIndex);
164
+ e.preventDefault();
164
165
  } else if (e.key === 'Enter' && activeIndex === -1) {
165
166
  handleSearchSubmit();
166
167
  }
@@ -138,9 +138,9 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
138
138
  handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;
139
139
  handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => boolean;
140
140
  highlightString: (title: string, view?: string | Element | JSX.Element | JSX.Element[] | Element[] | ((data: ViewCallbackArguments) => ElementOrString) | undefined) => ElementOrString;
141
- getItemWrapper: (node: any) => void;
142
- getSelectNode: (node: any) => void;
143
- getNodeList: (node: any) => number;
141
+ getItemWrapper: (node: HTMLDivElement) => void;
142
+ getSelectNode: (node: HTMLDivElement) => void;
143
+ getNodeList: (node: HTMLDivElement) => void;
144
144
  scrollList(activeIndex: number): void;
145
145
  renderTitle(): JSX.Element;
146
146
  renderCombobox(): JSX.Element;
@@ -154,12 +154,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
154
154
 
155
155
  _this.handleOpened = function () {
156
156
  var onOpened = _this.props.onOpened;
157
- onOpened && onOpened();
157
+ onOpened === null || onOpened === void 0 ? void 0 : onOpened();
158
158
  };
159
159
 
160
160
  _this.handleClosed = function () {
161
161
  var onClosed = _this.props.onClosed;
162
- onClosed && onClosed();
162
+ onClosed === null || onClosed === void 0 ? void 0 : onClosed();
163
163
  };
164
164
 
165
165
  _this.handleClickOutside = function (e) {
@@ -218,7 +218,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
218
218
  isChoosenItem: true
219
219
  });
220
220
 
221
- onSelect && onSelect(e, item);
221
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, item);
222
222
 
223
223
  _this.handleClosed();
224
224
  };
@@ -258,7 +258,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
258
258
  var filterValue = e.target.value;
259
259
 
260
260
  if (isChoosenItem) {
261
- onSelect && onSelect(null);
261
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(null);
262
262
  }
263
263
 
264
264
  _this.setState({
@@ -376,7 +376,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
376
376
  };
377
377
 
378
378
  _this.getNodeList = function (node) {
379
- return _this.itemsNodeList.push(node);
379
+ _this.itemsNodeList.push(node);
380
380
  };
381
381
 
382
382
  _this.state = {
@@ -31,7 +31,7 @@ var Switcher = function Switcher(props) {
31
31
  return;
32
32
  }
33
33
 
34
- onChange && onChange(e);
34
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
35
35
  };
36
36
 
37
37
  return /*#__PURE__*/React.createElement("div", {
@@ -41,6 +41,8 @@ export interface ITabsProps {
41
41
  defaultIndex?: number;
42
42
  /** Рендер содержимого только для текущего таба */
43
43
  renderOnlyCurrentPanel?: boolean;
44
+ /** Внешний контейнер для режима фиксация табов */
45
+ outerObserveContainer?: HTMLDivElement | null;
44
46
  /** Обработчика клика по табам */
45
47
  onTabClick?: (index: number) => void;
46
48
  children: Array<React.ReactElement<ITabProps>>;
@@ -97,10 +97,12 @@ var Tabs = function Tabs(_ref) {
97
97
  _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
98
98
  renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
99
99
  children = _ref.children,
100
- onTabClick = _ref.onTabClick;
100
+ onTabClick = _ref.onTabClick,
101
+ outerObserveContainer = _ref.outerObserveContainer;
101
102
  var tabsRef = React.useRef([]);
102
103
  var rootRef = React.useRef(null);
103
104
  var tabListRef = React.useRef(null);
105
+ var intersectionObserverRef = React.useRef();
104
106
 
105
107
  var _React$useState = React.useState(),
106
108
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -193,11 +195,70 @@ var Tabs = function Tabs(_ref) {
193
195
  left: left,
194
196
  right: documentWidth - right
195
197
  });
196
- }, [stickyOffset, isSticky]);
198
+ }, [sticky]);
199
+ var stickyON = React.useCallback(function (leftOffset, rightOffset) {
200
+ var documentWidth = document.documentElement.clientWidth;
201
+ setStickyOffset({
202
+ left: leftOffset,
203
+ right: documentWidth - rightOffset
204
+ });
205
+ setSticky(true);
206
+ }, []);
207
+ var stickyOFF = React.useCallback(function () {
208
+ setStickyOffset({
209
+ left: 0,
210
+ right: 0
211
+ });
212
+ setSticky(false);
213
+ }, []);
214
+ var isContainerNotFitViewport = React.useCallback(function () {
215
+ var _a;
216
+
217
+ var containerHeight = (_a = outerObserveContainer || rootRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
218
+ return containerHeight && containerHeight > window.innerHeight;
219
+ }, [outerObserveContainer]);
220
+ var addIntersectionObserver = React.useCallback(function () {
221
+ var observerOptions = {
222
+ threshold: [0, 1]
223
+ };
224
+
225
+ if (isContainerNotFitViewport()) {
226
+ observerOptions.rootMargin = '0px 0px -100%';
227
+ }
228
+
229
+ intersectionObserverRef.current = new IntersectionObserver(function (entries) {
230
+ entries.forEach(function (_ref2) {
231
+ var isIntersecting = _ref2.isIntersecting,
232
+ _ref2$boundingClientR = _ref2.boundingClientRect,
233
+ top = _ref2$boundingClientR.top,
234
+ left = _ref2$boundingClientR.left,
235
+ right = _ref2$boundingClientR.right;
236
+
237
+ if (!tabListRef.current) {
238
+ return;
239
+ }
240
+
241
+ var _tabListRef$current$g = tabListRef.current.getBoundingClientRect(),
242
+ height = _tabListRef$current$g.height,
243
+ tabListNodeLeft = _tabListRef$current$g.left,
244
+ tabListNodeRight = _tabListRef$current$g.right;
245
+
246
+ var leftOffset = outerObserveContainer ? tabListNodeLeft : left;
247
+ var rightOffset = outerObserveContainer ? tabListNodeRight : right;
248
+ setTabListHeight(height);
249
+
250
+ if (isIntersecting) {
251
+ top < 0 ? stickyON(leftOffset, rightOffset) : stickyOFF();
252
+ } else {
253
+ stickyOFF();
254
+ }
255
+ });
256
+ }, observerOptions);
257
+ }, [isContainerNotFitViewport, outerObserveContainer, stickyOFF, stickyON]);
197
258
  var handleTabInnerClick = React.useCallback(function (index) {
198
259
  return function () {
199
260
  setUnderlineTransition('all');
200
- onTabClick && onTabClick(index);
261
+ onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(index);
201
262
 
202
263
  if (outerIndex === undefined) {
203
264
  setInnerIndex(index);
@@ -215,6 +276,28 @@ var Tabs = function Tabs(_ref) {
215
276
  var handleNextArrowClick = React.useCallback(function () {
216
277
  swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
217
278
  }, [swiperInstance]);
279
+ var handleReachBeginning = React.useCallback(function (swiper) {
280
+ setBeginning(swiper.isBeginning);
281
+ }, []);
282
+ var handleReachEnd = React.useCallback(function (swiper) {
283
+ setEnd(swiper.isEnd);
284
+ }, []);
285
+ var handleFromEdge = React.useCallback(function (swiper) {
286
+ setBeginning(swiper.isBeginning);
287
+ setEnd(swiper.isEnd);
288
+ }, []);
289
+ var addObserveEvent = React.useCallback(function () {
290
+ var _a;
291
+
292
+ var rootRefNode = rootRef.current;
293
+ rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.observe(outerObserveContainer || rootRefNode));
294
+ }, [outerObserveContainer]);
295
+ var removeObserveEvent = React.useCallback(function () {
296
+ var _a;
297
+
298
+ var rootRefNode = rootRef.current;
299
+ rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
300
+ }, [outerObserveContainer]);
218
301
  var renderTab = React.useCallback(function (index, title, icon, href) {
219
302
  var ElementType = href ? 'a' : 'div';
220
303
  return /*#__PURE__*/React.createElement(ElementType, {
@@ -246,7 +329,7 @@ var Tabs = function Tabs(_ref) {
246
329
  ref: setTabRef
247
330
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), renderTabWrapper ? renderTabWrapper(tab) : tab));
248
331
  });
249
- }, [renderTab, children]);
332
+ }, [renderTab, children, activeTabClass, currentIndex, setTabRef, tabClass]);
250
333
  var renderPanels = React.useCallback(function () {
251
334
  return React.Children.map(children, function (child, i) {
252
335
  var panel = child.props.children;
@@ -262,67 +345,27 @@ var Tabs = function Tabs(_ref) {
262
345
  })
263
346
  }, panel);
264
347
  });
265
- }, [children, currentIndex]);
266
- var handleReachBeginning = React.useCallback(function (swiper) {
267
- setBeginning(swiper.isBeginning);
268
- }, []);
269
- var handleReachEnd = React.useCallback(function (swiper) {
270
- setEnd(swiper.isEnd);
271
- }, []);
272
- var handleFromEdge = React.useCallback(function (swiper) {
273
- setBeginning(swiper.isBeginning);
274
- setEnd(swiper.isEnd);
275
- }, []);
348
+ }, [children, currentIndex, renderOnlyCurrentPanel]);
276
349
  React.useEffect(function () {
277
- var observer = new IntersectionObserver(function (entries) {
278
- entries.forEach(function (_ref2) {
279
- var isIntersecting = _ref2.isIntersecting,
280
- _ref2$boundingClientR = _ref2.boundingClientRect,
281
- top = _ref2$boundingClientR.top,
282
- left = _ref2$boundingClientR.left,
283
- right = _ref2$boundingClientR.right;
284
-
285
- if (!sticky || !rootRef.current || !tabListRef.current) {
286
- return;
287
- }
288
-
289
- var listHeight = tabListRef.current.clientHeight;
290
- setTabListHeight(listHeight);
291
-
292
- var stickyON = function stickyON(leftOffset, rightOffset) {
293
- var documentWidth = document.documentElement.clientWidth;
294
- setStickyOffset({
295
- left: leftOffset,
296
- right: documentWidth - rightOffset
297
- });
298
- setSticky(true);
299
- };
300
-
301
- var stickyOFF = function stickyOFF() {
302
- setStickyOffset({
303
- left: 0,
304
- right: 0
305
- });
306
- setSticky(false);
307
- };
350
+ if (!sticky) {
351
+ return undefined;
352
+ }
308
353
 
309
- if (isIntersecting) {
310
- top < 0 ? stickyON(left, right) : stickyOFF();
311
- } else {
312
- top < 0 && stickyOFF();
313
- }
314
- });
315
- }, {
316
- threshold: [0, 1]
317
- });
318
- rootRef.current && observer.observe(rootRef.current);
354
+ addIntersectionObserver();
355
+ addObserveEvent();
319
356
  return function () {
320
- rootRef.current && observer.unobserve(rootRef.current);
357
+ removeObserveEvent();
321
358
  };
322
- }, [calculateSticky]);
359
+ }, [addIntersectionObserver, sticky, addObserveEvent, removeObserveEvent]);
323
360
  React.useEffect(function () {
324
361
  var handleResize = (0, _lodash["default"])(function () {
325
362
  calculateSticky();
363
+
364
+ if (sticky && isContainerNotFitViewport()) {
365
+ removeObserveEvent();
366
+ addIntersectionObserver();
367
+ addObserveEvent();
368
+ }
326
369
  }, 300);
327
370
  var activeTabNode = tabsRef.current[currentIndex];
328
371
  var resizeObserver = new ResizeObserver(function (entries) {
@@ -339,8 +382,9 @@ var Tabs = function Tabs(_ref) {
339
382
  window.addEventListener('resize', handleResize);
340
383
  return function () {
341
384
  window.removeEventListener('resize', handleResize);
385
+ resizeObserver.unobserve(activeTabNode);
342
386
  };
343
- }, [calculateUnderline, calculateSticky]);
387
+ }, [sticky, currentIndex, addObserveEvent, calculateSticky, removeObserveEvent, calculateUnderline, addIntersectionObserver, isContainerNotFitViewport]);
344
388
  React.useEffect(function () {
345
389
  if (!swiperInstance) {
346
390
  return;
@@ -419,6 +463,7 @@ Tabs.propTypes = {
419
463
  currentIndex: _propTypes["default"].number,
420
464
  defaultIndex: _propTypes["default"].number,
421
465
  renderOnlyCurrentPanel: _propTypes["default"].bool,
466
+ outerObserveContainer: _propTypes["default"].oneOfType([_propTypes["default"].elementType, _propTypes["default"].any]),
422
467
  onTabClick: _propTypes["default"].func
423
468
  };
424
469
  var _default = Tabs;
@@ -62,8 +62,10 @@ export declare type TextFieldProps = {
62
62
  classes?: {
63
63
  input?: string;
64
64
  };
65
- /** Аргумент элемента input */
65
+ /** Атрибут элемента input */
66
66
  inputMode?: 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search' | 'none';
67
+ /** Атрибут элемента input. Не работает с textarea=true */
68
+ autoComplete?: string;
67
69
  /** Переводит компонент в контролируемое состояние */
68
70
  isControlled?: boolean;
69
71
  /** Обработчик изменения значения */