@megafon/ui-core 4.9.0 → 4.10.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 (46) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/es/colors/colorsData.js +3 -0
  3. package/dist/es/components/Accordion/Accordion.d.ts +2 -0
  4. package/dist/es/components/Accordion/Accordion.js +25 -1
  5. package/dist/es/components/Carousel/Carousel.js +1 -1
  6. package/dist/es/components/Checkbox/Checkbox.css +41 -25
  7. package/dist/es/components/Counter/Counter.js +13 -12
  8. package/dist/es/components/Link/Link.d.ts +2 -0
  9. package/dist/es/components/Link/Link.js +3 -0
  10. package/dist/es/components/Logo/Logo.d.ts +5 -1
  11. package/dist/es/components/Logo/Logo.js +8 -3
  12. package/dist/es/components/NavArrow/NavArrow.d.ts +2 -0
  13. package/dist/es/components/NavArrow/NavArrow.js +8 -6
  14. package/dist/es/components/Tabs/Tabs.js +12 -3
  15. package/dist/es/components/TextLink/TextLink.d.ts +2 -0
  16. package/dist/es/components/TextLink/TextLink.js +4 -1
  17. package/dist/es/components/Tile/Tile.d.ts +2 -0
  18. package/dist/es/components/Tile/Tile.js +6 -3
  19. package/dist/es/{components/Carousel → hooks}/usePrevious.d.ts +0 -0
  20. package/dist/es/{components/Carousel → hooks}/usePrevious.js +0 -0
  21. package/dist/es/index.d.ts +0 -1
  22. package/dist/es/index.js +1 -2
  23. package/dist/lib/colors/colorsData.js +3 -0
  24. package/dist/lib/components/Accordion/Accordion.d.ts +2 -0
  25. package/dist/lib/components/Accordion/Accordion.js +25 -1
  26. package/dist/lib/components/Carousel/Carousel.js +2 -2
  27. package/dist/lib/components/Checkbox/Checkbox.css +41 -25
  28. package/dist/lib/components/Counter/Counter.js +13 -12
  29. package/dist/lib/components/Link/Link.d.ts +2 -0
  30. package/dist/lib/components/Link/Link.js +3 -0
  31. package/dist/lib/components/Logo/Logo.d.ts +5 -1
  32. package/dist/lib/components/Logo/Logo.js +8 -3
  33. package/dist/lib/components/NavArrow/NavArrow.d.ts +2 -0
  34. package/dist/lib/components/NavArrow/NavArrow.js +8 -6
  35. package/dist/lib/components/Tabs/Tabs.js +14 -3
  36. package/dist/lib/components/TextLink/TextLink.d.ts +2 -0
  37. package/dist/lib/components/TextLink/TextLink.js +4 -1
  38. package/dist/lib/components/Tile/Tile.d.ts +2 -0
  39. package/dist/lib/components/Tile/Tile.js +6 -3
  40. package/dist/lib/{components/Carousel → hooks}/usePrevious.d.ts +0 -0
  41. package/dist/lib/{components/Carousel → hooks}/usePrevious.js +0 -0
  42. package/dist/lib/index.d.ts +0 -1
  43. package/dist/lib/index.js +0 -8
  44. package/package.json +4 -4
  45. package/styles/colors.css +1 -0
  46. package/styles/colorsDark.css +1 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,35 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [4.10.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.9.1...@megafon/ui-core@4.10.0) (2022-12-12)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **checkbox:** update styles ([91c2c01](https://github.com/MegafonWebLab/megafon-ui/commit/91c2c01871ca3bae54f4c7204f5953341a7e80cc))
12
+ * **colors:** add overlay color ([168671b](https://github.com/MegafonWebLab/megafon-ui/commit/168671bea17784e9e3f448138e8dab27bfc46a50))
13
+ * **tabs:** change navigation view after change slides count ([67109aa](https://github.com/MegafonWebLab/megafon-ui/commit/67109aafe2c87a8ed7e95f506e892487ad597a8e))
14
+
15
+
16
+ ### Features
17
+
18
+ * **accordion:** add optional microdata attributes ([a67df13](https://github.com/MegafonWebLab/megafon-ui/commit/a67df131fe8a47ac4b8574784135765e4e3659bc))
19
+ * **link:** add itemprop attribute ([1243b6a](https://github.com/MegafonWebLab/megafon-ui/commit/1243b6a2b65dc157dff82d9943ee08f8f148c688))
20
+ * **textlink:** add itemprop attribute ([77a5294](https://github.com/MegafonWebLab/megafon-ui/commit/77a529437cb73cb927381d62f88f48b2b4cc5f0c))
21
+ * **tile:** added rel property ([8b2c8bf](https://github.com/MegafonWebLab/megafon-ui/commit/8b2c8bf8a3ddcba83b085f028460fdc1d14559d3))
22
+
23
+
24
+
25
+
26
+
27
+ ## [4.9.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.9.0...@megafon/ui-core@4.9.1) (2022-12-06)
28
+
29
+ **Note:** Version bump only for package @megafon/ui-core
30
+
31
+
32
+
33
+
34
+
6
35
  # [4.9.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.8.2...@megafon/ui-core@4.9.0) (2022-11-29)
7
36
 
8
37
 
@@ -82,6 +82,9 @@ var colors = {
82
82
  }, {
83
83
  name: 'Button Down',
84
84
  code: 'buttonDown'
85
+ }, {
86
+ name: 'Overlay',
87
+ code: 'overlay'
85
88
  }]
86
89
  }
87
90
  },
@@ -7,6 +7,8 @@ export interface IAccordionProps {
7
7
  title: string | React.ReactNode | React.ReactNode[];
8
8
  /** Состояние открытости */
9
9
  isOpened?: boolean;
10
+ /** Включить микроразметку */
11
+ hasMicrodata?: boolean;
10
12
  /** Дополнительный класс для корневого элемента */
11
13
  className?: string;
12
14
  /** Дополнительные классы для корневого и внутренних элементов */
@@ -24,6 +24,8 @@ var Accordion = function Accordion(_ref) {
24
24
  title = _ref.title,
25
25
  _ref$isOpened = _ref.isOpened,
26
26
  isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
27
+ _ref$hasMicrodata = _ref.hasMicrodata,
28
+ hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
27
29
  className = _ref.className,
28
30
  _ref$classes = _ref.classes;
29
31
  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -53,17 +55,38 @@ var Accordion = function Accordion(_ref) {
53
55
 
54
56
  var openedClassName = isOpenedState ? openedClass : undefined;
55
57
  var arrowDataAttrs = isOpenedState ? dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp : dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown;
58
+
59
+ var renderContent = function renderContent() {
60
+ if (hasMicrodata) {
61
+ return /*#__PURE__*/React.createElement("div", {
62
+ itemScope: true,
63
+ itemProp: "acceptedAnswer",
64
+ itemType: "https://schema.org/Answer"
65
+ }, /*#__PURE__*/React.createElement("div", {
66
+ itemProp: "text"
67
+ }, children));
68
+ }
69
+
70
+ return children;
71
+ };
72
+
56
73
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
57
74
  ref: rootRef,
58
75
  className: cn({
59
76
  opened: isOpenedState
60
77
  }, [className, rootPropsClasses, openedClassName])
78
+ }, hasMicrodata && {
79
+ itemScope: true,
80
+ itemProp: 'mainEntity',
81
+ itemType: 'https://schema.org/Question'
61
82
  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
62
83
  className: cn('title-wrap', [titleWrapPropsClasses]),
63
84
  onClick: handleClickTitle,
64
85
  onKeyDown: handleClickTitle,
65
86
  tabIndex: 0,
66
87
  role: "button"
88
+ }, hasMicrodata && {
89
+ itemProp: 'name'
67
90
  }), /*#__PURE__*/React.createElement(Header, {
68
91
  as: "h5",
69
92
  dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
@@ -76,7 +99,7 @@ var Accordion = function Accordion(_ref) {
76
99
  className: cn('content', collapsePropsClasses),
77
100
  classNameContainer: cn('content-inner'),
78
101
  isOpened: isOpenedState
79
- }, children));
102
+ }, renderContent()));
80
103
  };
81
104
 
82
105
  Accordion.propTypes = {
@@ -85,6 +108,7 @@ Accordion.propTypes = {
85
108
  }), PropTypes.any])]),
86
109
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
87
110
  isOpened: PropTypes.bool,
111
+ hasMicrodata: PropTypes.bool,
88
112
  className: PropTypes.string,
89
113
  classes: PropTypes.shape({
90
114
  openedClass: PropTypes.string,
@@ -17,9 +17,9 @@ import SwiperCore, { Autoplay, Pagination, EffectFade } from 'swiper';
17
17
  import { Swiper, SwiperSlide } from 'swiper/react';
18
18
  import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
19
19
  import throttleTime from "../../constants/throttleTime";
20
+ import usePrevious from "../../hooks/usePrevious";
20
21
  import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
21
22
  import "./Carousel.css";
22
- import usePrevious from "./usePrevious";
23
23
  SwiperCore.use([Autoplay, Pagination, EffectFade]);
24
24
  export var NavTheme = {
25
25
  LIGHT: 'light',
@@ -35,7 +35,11 @@
35
35
  width: 20px;
36
36
  height: 20px;
37
37
  border: 2px solid;
38
- border-radius: 2px;
38
+ border-radius: 4px;
39
+ -webkit-transition: border-color, background-color;
40
+ transition: border-color, background-color;
41
+ -webkit-transition-duration: 0.3s;
42
+ transition-duration: 0.3s;
39
43
  }
40
44
  .mfui-checkbox__custom-input:focus {
41
45
  outline: none;
@@ -69,7 +73,7 @@
69
73
  line-height: 24px;
70
74
  }
71
75
  .mfui-checkbox_font-size_regular .mfui-checkbox__inner {
72
- padding: 4px 15px 4px 35px;
76
+ padding: 4px 15px 4px 33px;
73
77
  }
74
78
  .mfui-checkbox_font-size_regular .mfui-checkbox__custom-input {
75
79
  top: 6px;
@@ -79,7 +83,7 @@
79
83
  line-height: 16px;
80
84
  }
81
85
  .mfui-checkbox_font-size_small .mfui-checkbox__inner {
82
- padding: 1px 15px 4px 35px;
86
+ padding: 1px 15px 4px 33px;
83
87
  }
84
88
  .mfui-checkbox_font-size_small .mfui-checkbox__custom-input {
85
89
  top: 0;
@@ -90,45 +94,57 @@
90
94
  .mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
91
95
  border-color: var(--buttonHoverGreen);
92
96
  }
93
- .mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input {
94
- border-color: var(--buttonDown) !important;
95
- background-color: var(--buttonDown);
96
- }
97
97
  .mfui-checkbox_color_dark .mfui-checkbox__icon {
98
98
  fill: var(--stcWhite);
99
99
  }
100
100
  .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
101
101
  border-color: var(--brandGreen);
102
- color: var(--stcWhite);
103
102
  background-color: var(--brandGreen);
104
103
  }
105
104
  .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
106
105
  background-color: var(--buttonHoverGreen);
107
106
  }
108
- .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
109
- background-color: var(--buttonDown) !important;
107
+ .mfui-checkbox_color_light {
108
+ color: var(--stcWhite);
110
109
  }
111
- .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input,
112
- .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
113
- background-color: var(--spbSky2);
110
+ .mfui-checkbox_color_light .mfui-checkbox__custom-input {
111
+ border-color: var(--stcWhite);
112
+ background-color: var(--stcWhite);
113
+ }
114
+ .mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
115
+ border-color: var(--buttonHoverGrey);
116
+ background-color: var(--buttonHoverGrey);
117
+ }
118
+ .mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input {
119
+ border-color: var(--brandGreen);
120
+ color: var(--stcWhite);
121
+ background-color: var(--brandGreen);
114
122
  }
115
- .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label {
123
+ .mfui-checkbox_disabled .mfui-checkbox__label {
124
+ color: var(--spbSky3);
116
125
  cursor: default;
117
126
  pointer-events: none;
118
127
  }
119
- .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__custom-input,
120
- .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
121
- border-color: var(--spbSky2) !important;
128
+ .mfui-checkbox_disabled .mfui-checkbox__custom-input {
129
+ border-color: var(--spbSky2);
122
130
  background-color: var(--spbSky1);
123
131
  }
124
- .mfui-checkbox_color_dark.mfui-checkbox_error .mfui-checkbox__custom-input {
125
- border-color: var(--fury);
132
+ .mfui-checkbox_disabled .mfui-checkbox__icon {
133
+ fill: var(--stcWhite);
126
134
  }
127
- .mfui-checkbox_color_light {
128
- color: var(--stcWhite);
135
+ .mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label {
136
+ color: var(--stcWhite50);
129
137
  }
130
- .mfui-checkbox_color_light .mfui-checkbox__custom-input {
131
- border-color: var(--stcWhite);
132
- color: var(--brandGreen);
133
- background-color: var(--stcWhite);
138
+ .mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input {
139
+ background-color: var(--spbSky2);
140
+ }
141
+ .mfui-checkbox_error .mfui-checkbox__custom-input {
142
+ border-color: var(--fury);
143
+ }
144
+ .mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,
145
+ .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,
146
+ .mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,
147
+ .mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
148
+ border-color: var(--buttonDown);
149
+ background-color: var(--buttonDown);
134
150
  }
@@ -29,7 +29,7 @@ var Counter = function Counter(_ref) {
29
29
  _ref$isControlled = _ref.isControlled,
30
30
  isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
31
31
  _ref$value = _ref.value,
32
- value = _ref$value === void 0 ? 0 : _ref$value,
32
+ outerValue = _ref$value === void 0 ? 0 : _ref$value,
33
33
  initialValue = _ref.initialValue,
34
34
  _ref$max = _ref.max,
35
35
  max = _ref$max === void 0 ? 999999 : _ref$max,
@@ -45,15 +45,16 @@ var Counter = function Counter(_ref) {
45
45
 
46
46
  var _React$useState = React.useState(currentInitialValue),
47
47
  _React$useState2 = _slicedToArray(_React$useState, 2),
48
- counter = _React$useState2[0],
49
- setCounter = _React$useState2[1];
48
+ innerValue = _React$useState2[0],
49
+ setInnerValue = _React$useState2[1];
50
50
 
51
+ var currentValue = isControlled ? outerValue : innerValue;
51
52
  React.useEffect(function () {
52
- setCounter(currentInitialValue);
53
+ setInnerValue(currentInitialValue);
53
54
  }, [currentInitialValue]);
54
55
  var handleValueChange = React.useCallback(function (inputValue) {
55
56
  if (!isControlled) {
56
- setCounter(inputValue);
57
+ setInnerValue(inputValue);
57
58
  }
58
59
 
59
60
  if (inputValue < min) {
@@ -69,11 +70,11 @@ var Counter = function Counter(_ref) {
69
70
  }
70
71
  }, [min, max, onChange, isControlled]);
71
72
  var handleMinusClick = React.useCallback(function () {
72
- handleValueChange(isControlled ? value - 1 : counter - 1);
73
- }, [handleValueChange, counter, isControlled, value]);
73
+ handleValueChange(currentValue - 1);
74
+ }, [handleValueChange, currentValue]);
74
75
  var handlePlusClick = React.useCallback(function () {
75
- handleValueChange(isControlled ? value + 1 : counter + 1);
76
- }, [handleValueChange, counter, isControlled, value]);
76
+ handleValueChange(currentValue + 1);
77
+ }, [handleValueChange, currentValue]);
77
78
  var handleInputChange = React.useCallback(function (e) {
78
79
  var pattern = /^[0-9\b]+$/;
79
80
  var inputValue = e.target.value;
@@ -106,7 +107,7 @@ var Counter = function Counter(_ref) {
106
107
  left: true
107
108
  }, classes.buttonMinus),
108
109
  type: "button",
109
- disabled: disabled || (isControlled ? value : counter) <= min,
110
+ disabled: disabled || currentValue <= min,
110
111
  onClick: handleMinusClick
111
112
  }), /*#__PURE__*/React.createElement(IconMinus, {
112
113
  className: cn('icon')
@@ -114,7 +115,7 @@ var Counter = function Counter(_ref) {
114
115
  className: cn('input-box')
115
116
  }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
116
117
  className: cn('input', classes.input),
117
- value: isControlled ? value : counter,
118
+ value: currentValue,
118
119
  onChange: handleInputChange,
119
120
  onBlur: handleInputBlur,
120
121
  disabled: disabled
@@ -123,7 +124,7 @@ var Counter = function Counter(_ref) {
123
124
  right: true
124
125
  }, classes.buttonPlus),
125
126
  type: "button",
126
- disabled: disabled || counter >= max || value >= max,
127
+ disabled: disabled || currentValue >= max,
127
128
  onClick: handlePlusClick
128
129
  }), /*#__PURE__*/React.createElement(IconPlus, {
129
130
  className: cn('icon')
@@ -14,6 +14,8 @@ export interface ILinkProps {
14
14
  dataAttrs?: {
15
15
  root?: Record<string, string>;
16
16
  };
17
+ /** Атрибут itemprop для микроразметки */
18
+ itemProp?: string;
17
19
  children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
18
20
  /** Обработчик клика */
19
21
  onClick?: (e: React.MouseEvent<EventTarget>) => void;
@@ -10,6 +10,7 @@ var Link = function Link(_ref) {
10
10
  onClick = _ref.onClick,
11
11
  className = _ref.className,
12
12
  download = _ref.download,
13
+ itemProp = _ref.itemProp,
13
14
  children = _ref.children,
14
15
  dataAttrs = _ref.dataAttrs;
15
16
  return /*#__PURE__*/React.createElement("a", _extends({
@@ -18,6 +19,7 @@ var Link = function Link(_ref) {
18
19
  target: target,
19
20
  rel: rel,
20
21
  download: download,
22
+ itemProp: itemProp,
21
23
  onClick: onClick
22
24
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), children);
23
25
  };
@@ -32,6 +34,7 @@ Link.propTypes = {
32
34
  }),
33
35
  rel: PropTypes.string,
34
36
  download: PropTypes.bool,
37
+ itemProp: PropTypes.string,
35
38
  onClick: PropTypes.func
36
39
  };
37
40
  export default Link;
@@ -4,13 +4,17 @@ export interface ILogoProps {
4
4
  /** Дополнительный класс корневого элемента */
5
5
  className?: string;
6
6
  /** Цвет */
7
- color?: string;
7
+ color?: 'green';
8
8
  /** Отображение */
9
9
  view?: 'horizontal' | 'vertical';
10
10
  /** Ссылка */
11
11
  href?: string;
12
12
  /** target - аргумент тега <a> */
13
13
  target?: '_self' | '_blank' | '_parent' | '_top';
14
+ /** Дополнительные data атрибуты к внутренним элементам */
15
+ dataAttrs?: {
16
+ root?: Record<string, string>;
17
+ };
14
18
  }
15
19
  declare const Logo: React.FC<ILogoProps>;
16
20
  export default Logo;
@@ -60,13 +60,15 @@ var Logo = function Logo(_ref) {
60
60
  _ref$target = _ref.target,
61
61
  target = _ref$target === void 0 ? '_blank' : _ref$target,
62
62
  _ref$href = _ref.href,
63
- href = _ref$href === void 0 ? '/' : _ref$href;
63
+ href = _ref$href === void 0 ? '/' : _ref$href,
64
+ dataAttrs = _ref.dataAttrs;
64
65
  var images = {
65
66
  'green-horizontal': greenHorizontalImg,
66
67
  'green-vertical': greenVerticalImg
67
68
  };
68
69
  var BackgroundImage = images["".concat(color, "-").concat(view)];
69
70
  return /*#__PURE__*/React.createElement(Link, {
71
+ dataAttrs: dataAttrs,
70
72
  href: href,
71
73
  target: target,
72
74
  className: cn('', {
@@ -80,10 +82,13 @@ var Logo = function Logo(_ref) {
80
82
  };
81
83
 
82
84
  Logo.propTypes = {
83
- color: PropTypes.string,
85
+ color: PropTypes.oneOf(['green']),
84
86
  view: PropTypes.oneOf(['horizontal', 'vertical']),
85
87
  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
86
88
  href: PropTypes.string,
87
- className: PropTypes.string
89
+ className: PropTypes.string,
90
+ dataAttrs: PropTypes.shape({
91
+ root: PropTypes.objectOf(PropTypes.string.isRequired)
92
+ })
88
93
  };
89
94
  export default Logo;
@@ -13,6 +13,8 @@ declare type ViewType = typeof View[keyof typeof View];
13
13
  export interface INavArrowProps {
14
14
  dataAttrs?: {
15
15
  root?: Record<string, string>;
16
+ prevArrow?: Record<string, string>;
17
+ nextArrow?: Record<string, string>;
16
18
  };
17
19
  className?: string;
18
20
  theme?: ThemeType;
@@ -44,16 +44,16 @@ var NavArrow = function NavArrow(_ref) {
44
44
  var renderIcon = React.useCallback(function () {
45
45
  switch (view) {
46
46
  case View.PREV:
47
- return /*#__PURE__*/React.createElement(ArrowLeft, {
47
+ return /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow), {
48
48
  className: cn('icon')
49
- });
49
+ }));
50
50
 
51
51
  default:
52
- return /*#__PURE__*/React.createElement(ArrowRight, {
52
+ return /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.nextArrow), {
53
53
  className: cn('icon')
54
- });
54
+ }));
55
55
  }
56
- }, [view]);
56
+ }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.nextArrow, view]);
57
57
  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
58
58
  type: "button",
59
59
  className: cn({
@@ -66,7 +66,9 @@ var NavArrow = function NavArrow(_ref) {
66
66
 
67
67
  NavArrow.propTypes = {
68
68
  dataAttrs: PropTypes.shape({
69
- root: PropTypes.objectOf(PropTypes.string.isRequired)
69
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
70
+ prevArrow: PropTypes.objectOf(PropTypes.string.isRequired),
71
+ nextArrow: PropTypes.objectOf(PropTypes.string.isRequired)
70
72
  }),
71
73
  className: PropTypes.string,
72
74
  theme: PropTypes.oneOf(Object.values(Theme)),
@@ -1,4 +1,5 @@
1
1
  import "core-js/modules/es.array.for-each";
2
+ import "core-js/modules/es.array.is-array";
2
3
  import "core-js/modules/es.array.map";
3
4
  import "core-js/modules/es.array.reduce";
4
5
  import "core-js/modules/es.array.splice";
@@ -12,6 +13,7 @@ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
12
13
  import throttle from 'lodash.throttle';
13
14
  import PropTypes from 'prop-types';
14
15
  import { Swiper, SwiperSlide } from 'swiper/react';
16
+ import usePrevious from "../../hooks/usePrevious";
15
17
  import "./Tabs.css";
16
18
 
17
19
  var ArrowLeft = function ArrowLeft(props) {
@@ -64,6 +66,9 @@ var Tabs = function Tabs(_ref) {
64
66
  var rootRef = React.useRef(null);
65
67
  var tabListRef = React.useRef(null);
66
68
  var intersectionObserverRef = React.useRef();
69
+ var childrenLength = Array.isArray(children) ? children.length : 0;
70
+ var prevChildrenLength = usePrevious(childrenLength) || 0;
71
+ var isChildrenLengthDiff = childrenLength !== prevChildrenLength;
67
72
 
68
73
  var _React$useState = React.useState(),
69
74
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -359,9 +364,13 @@ var Tabs = function Tabs(_ref) {
359
364
  return;
360
365
  }
361
366
 
362
- setBeginning(swiperInstance.isBeginning);
363
- setEnd(swiperInstance.isEnd);
364
- }, [swiperInstance]);
367
+ if (isChildrenLengthDiff) {
368
+ handleFromEdge(swiperInstance);
369
+ return;
370
+ }
371
+
372
+ handleFromEdge(swiperInstance);
373
+ }, [swiperInstance, isChildrenLengthDiff, handleFromEdge]);
365
374
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
366
375
  className: cn({
367
376
  size: size,
@@ -8,6 +8,8 @@ export interface ITextLinkProps extends ILinkProps {
8
8
  underlineVisibility?: 'hover' | 'always';
9
9
  /** Стиль подчеркивания */
10
10
  underlineStyle?: 'solid' | 'dashed' | 'border' | 'none';
11
+ /** Атрибут itemprop для микроразметки */
12
+ itemProp?: string;
11
13
  children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
12
14
  }
13
15
  declare const TextLink: React.FC<ITextLinkProps>;
@@ -19,12 +19,14 @@ var TextLink = function TextLink(_ref) {
19
19
  onClick = _ref.onClick,
20
20
  children = _ref.children,
21
21
  download = _ref.download,
22
- dataAttrs = _ref.dataAttrs;
22
+ dataAttrs = _ref.dataAttrs,
23
+ itemProp = _ref.itemProp;
23
24
  return /*#__PURE__*/React.createElement(Link, {
24
25
  dataAttrs: dataAttrs,
25
26
  target: target,
26
27
  href: href,
27
28
  rel: rel,
29
+ itemProp: itemProp,
28
30
  onClick: onClick,
29
31
  className: cn('', {
30
32
  'underline-visibility': underlineVisibility,
@@ -42,6 +44,7 @@ TextLink.propTypes = {
42
44
  dataAttrs: PropTypes.shape({
43
45
  root: PropTypes.objectOf(PropTypes.string.isRequired)
44
46
  }),
47
+ itemProp: PropTypes.string,
45
48
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node])
46
49
  };
47
50
  export default TextLink;
@@ -26,6 +26,8 @@ export interface ITileProps {
26
26
  href?: string;
27
27
  /** Атрибут для открытия ссылки */
28
28
  target?: '_self' | '_blank';
29
+ /** rel - аргумент тега <a> */
30
+ rel?: string;
29
31
  /** Тема */
30
32
  theme?: ThemeType;
31
33
  /** Радиус границы */
@@ -41,7 +41,8 @@ var Tile = function Tile(_ref) {
41
41
  onClick = _ref.onClick,
42
42
  dataAttrs = _ref.dataAttrs,
43
43
  _ref$target = _ref.target,
44
- target = _ref$target === void 0 ? '_self' : _ref$target;
44
+ target = _ref$target === void 0 ? '_self' : _ref$target,
45
+ rel = _ref.rel;
45
46
 
46
47
  var handleClick = function handleClick(e) {
47
48
  onClick === null || onClick === void 0 ? void 0 : onClick(e);
@@ -61,7 +62,8 @@ var Tile = function Tile(_ref) {
61
62
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/React.createElement("a", {
62
63
  href: href,
63
64
  className: cn('link'),
64
- target: target
65
+ target: target,
66
+ rel: rel
65
67
  }, children), !href && children);
66
68
  };
67
69
 
@@ -76,6 +78,7 @@ Tile.propTypes = {
76
78
  dataAttrs: PropTypes.shape({
77
79
  root: PropTypes.objectOf(PropTypes.string.isRequired)
78
80
  }),
79
- target: PropTypes.oneOf(['_self', '_blank'])
81
+ target: PropTypes.oneOf(['_self', '_blank']),
82
+ rel: PropTypes.string
80
83
  };
81
84
  export default Tile;
@@ -44,4 +44,3 @@ export { default as Timer } from './components/Badges/components/TimerBadge/Time
44
44
  export { default as TimerBadge } from './components/Badges/components/TimerBadge/TimerBadge';
45
45
  export { default as Tooltip } from './components/Tooltip/Tooltip';
46
46
  export { default as usePagination } from './components/Pagination/usePagination';
47
- export { default as usePrevious } from './components/Carousel/usePrevious';
package/dist/es/index.js CHANGED
@@ -43,5 +43,4 @@ export { default as Tile } from "./components/Tile/Tile";
43
43
  export { default as Timer } from "./components/Badges/components/TimerBadge/Timer/Timer";
44
44
  export { default as TimerBadge } from "./components/Badges/components/TimerBadge/TimerBadge";
45
45
  export { default as Tooltip } from "./components/Tooltip/Tooltip";
46
- export { default as usePagination } from "./components/Pagination/usePagination";
47
- export { default as usePrevious } from "./components/Carousel/usePrevious";
46
+ export { default as usePagination } from "./components/Pagination/usePagination";
@@ -88,6 +88,9 @@ var colors = {
88
88
  }, {
89
89
  name: 'Button Down',
90
90
  code: 'buttonDown'
91
+ }, {
92
+ name: 'Overlay',
93
+ code: 'overlay'
91
94
  }]
92
95
  }
93
96
  },
@@ -7,6 +7,8 @@ export interface IAccordionProps {
7
7
  title: string | React.ReactNode | React.ReactNode[];
8
8
  /** Состояние открытости */
9
9
  isOpened?: boolean;
10
+ /** Включить микроразметку */
11
+ hasMicrodata?: boolean;
10
12
  /** Дополнительный класс для корневого элемента */
11
13
  className?: string;
12
14
  /** Дополнительные классы для корневого и внутренних элементов */
@@ -44,6 +44,8 @@ var Accordion = function Accordion(_ref) {
44
44
  title = _ref.title,
45
45
  _ref$isOpened = _ref.isOpened,
46
46
  isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
47
+ _ref$hasMicrodata = _ref.hasMicrodata,
48
+ hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
47
49
  className = _ref.className,
48
50
  _ref$classes = _ref.classes;
49
51
  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -73,17 +75,38 @@ var Accordion = function Accordion(_ref) {
73
75
 
74
76
  var openedClassName = isOpenedState ? openedClass : undefined;
75
77
  var arrowDataAttrs = isOpenedState ? dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp : dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown;
78
+
79
+ var renderContent = function renderContent() {
80
+ if (hasMicrodata) {
81
+ return /*#__PURE__*/React.createElement("div", {
82
+ itemScope: true,
83
+ itemProp: "acceptedAnswer",
84
+ itemType: "https://schema.org/Answer"
85
+ }, /*#__PURE__*/React.createElement("div", {
86
+ itemProp: "text"
87
+ }, children));
88
+ }
89
+
90
+ return children;
91
+ };
92
+
76
93
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
77
94
  ref: rootRef,
78
95
  className: cn({
79
96
  opened: isOpenedState
80
97
  }, [className, rootPropsClasses, openedClassName])
98
+ }, hasMicrodata && {
99
+ itemScope: true,
100
+ itemProp: 'mainEntity',
101
+ itemType: 'https://schema.org/Question'
81
102
  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
82
103
  className: cn('title-wrap', [titleWrapPropsClasses]),
83
104
  onClick: handleClickTitle,
84
105
  onKeyDown: handleClickTitle,
85
106
  tabIndex: 0,
86
107
  role: "button"
108
+ }, hasMicrodata && {
109
+ itemProp: 'name'
87
110
  }), /*#__PURE__*/React.createElement(_Header["default"], {
88
111
  as: "h5",
89
112
  dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
@@ -96,7 +119,7 @@ var Accordion = function Accordion(_ref) {
96
119
  className: cn('content', collapsePropsClasses),
97
120
  classNameContainer: cn('content-inner'),
98
121
  isOpened: isOpenedState
99
- }, children));
122
+ }, renderContent()));
100
123
  };
101
124
 
102
125
  Accordion.propTypes = {
@@ -105,6 +128,7 @@ Accordion.propTypes = {
105
128
  }), PropTypes.any])]),
106
129
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
107
130
  isOpened: PropTypes.bool,
131
+ hasMicrodata: PropTypes.bool,
108
132
  className: PropTypes.string,
109
133
  classes: PropTypes.shape({
110
134
  openedClass: PropTypes.string,
@@ -39,9 +39,9 @@ var _NavArrow = _interopRequireWildcard(require("../NavArrow/NavArrow"));
39
39
 
40
40
  var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
41
41
 
42
- var _checkBreakpointsPropTypes = _interopRequireDefault(require("./checkBreakpointsPropTypes"));
42
+ var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
43
43
 
44
- var _usePrevious = _interopRequireDefault(require("./usePrevious"));
44
+ var _checkBreakpointsPropTypes = _interopRequireDefault(require("./checkBreakpointsPropTypes"));
45
45
 
46
46
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
47
47
 
@@ -35,7 +35,11 @@
35
35
  width: 20px;
36
36
  height: 20px;
37
37
  border: 2px solid;
38
- border-radius: 2px;
38
+ border-radius: 4px;
39
+ -webkit-transition: border-color, background-color;
40
+ transition: border-color, background-color;
41
+ -webkit-transition-duration: 0.3s;
42
+ transition-duration: 0.3s;
39
43
  }
40
44
  .mfui-checkbox__custom-input:focus {
41
45
  outline: none;
@@ -69,7 +73,7 @@
69
73
  line-height: 24px;
70
74
  }
71
75
  .mfui-checkbox_font-size_regular .mfui-checkbox__inner {
72
- padding: 4px 15px 4px 35px;
76
+ padding: 4px 15px 4px 33px;
73
77
  }
74
78
  .mfui-checkbox_font-size_regular .mfui-checkbox__custom-input {
75
79
  top: 6px;
@@ -79,7 +83,7 @@
79
83
  line-height: 16px;
80
84
  }
81
85
  .mfui-checkbox_font-size_small .mfui-checkbox__inner {
82
- padding: 1px 15px 4px 35px;
86
+ padding: 1px 15px 4px 33px;
83
87
  }
84
88
  .mfui-checkbox_font-size_small .mfui-checkbox__custom-input {
85
89
  top: 0;
@@ -90,45 +94,57 @@
90
94
  .mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
91
95
  border-color: var(--buttonHoverGreen);
92
96
  }
93
- .mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input {
94
- border-color: var(--buttonDown) !important;
95
- background-color: var(--buttonDown);
96
- }
97
97
  .mfui-checkbox_color_dark .mfui-checkbox__icon {
98
98
  fill: var(--stcWhite);
99
99
  }
100
100
  .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
101
101
  border-color: var(--brandGreen);
102
- color: var(--stcWhite);
103
102
  background-color: var(--brandGreen);
104
103
  }
105
104
  .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
106
105
  background-color: var(--buttonHoverGreen);
107
106
  }
108
- .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
109
- background-color: var(--buttonDown) !important;
107
+ .mfui-checkbox_color_light {
108
+ color: var(--stcWhite);
110
109
  }
111
- .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input,
112
- .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
113
- background-color: var(--spbSky2);
110
+ .mfui-checkbox_color_light .mfui-checkbox__custom-input {
111
+ border-color: var(--stcWhite);
112
+ background-color: var(--stcWhite);
113
+ }
114
+ .mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
115
+ border-color: var(--buttonHoverGrey);
116
+ background-color: var(--buttonHoverGrey);
117
+ }
118
+ .mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input {
119
+ border-color: var(--brandGreen);
120
+ color: var(--stcWhite);
121
+ background-color: var(--brandGreen);
114
122
  }
115
- .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label {
123
+ .mfui-checkbox_disabled .mfui-checkbox__label {
124
+ color: var(--spbSky3);
116
125
  cursor: default;
117
126
  pointer-events: none;
118
127
  }
119
- .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__custom-input,
120
- .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
121
- border-color: var(--spbSky2) !important;
128
+ .mfui-checkbox_disabled .mfui-checkbox__custom-input {
129
+ border-color: var(--spbSky2);
122
130
  background-color: var(--spbSky1);
123
131
  }
124
- .mfui-checkbox_color_dark.mfui-checkbox_error .mfui-checkbox__custom-input {
125
- border-color: var(--fury);
132
+ .mfui-checkbox_disabled .mfui-checkbox__icon {
133
+ fill: var(--stcWhite);
126
134
  }
127
- .mfui-checkbox_color_light {
128
- color: var(--stcWhite);
135
+ .mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label {
136
+ color: var(--stcWhite50);
129
137
  }
130
- .mfui-checkbox_color_light .mfui-checkbox__custom-input {
131
- border-color: var(--stcWhite);
132
- color: var(--brandGreen);
133
- background-color: var(--stcWhite);
138
+ .mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input {
139
+ background-color: var(--spbSky2);
140
+ }
141
+ .mfui-checkbox_error .mfui-checkbox__custom-input {
142
+ border-color: var(--fury);
143
+ }
144
+ .mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,
145
+ .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,
146
+ .mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,
147
+ .mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
148
+ border-color: var(--buttonDown);
149
+ background-color: var(--buttonDown);
134
150
  }
@@ -48,7 +48,7 @@ var Counter = function Counter(_ref) {
48
48
  _ref$isControlled = _ref.isControlled,
49
49
  isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
50
50
  _ref$value = _ref.value,
51
- value = _ref$value === void 0 ? 0 : _ref$value,
51
+ outerValue = _ref$value === void 0 ? 0 : _ref$value,
52
52
  initialValue = _ref.initialValue,
53
53
  _ref$max = _ref.max,
54
54
  max = _ref$max === void 0 ? 999999 : _ref$max,
@@ -64,15 +64,16 @@ var Counter = function Counter(_ref) {
64
64
 
65
65
  var _React$useState = React.useState(currentInitialValue),
66
66
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
67
- counter = _React$useState2[0],
68
- setCounter = _React$useState2[1];
67
+ innerValue = _React$useState2[0],
68
+ setInnerValue = _React$useState2[1];
69
69
 
70
+ var currentValue = isControlled ? outerValue : innerValue;
70
71
  React.useEffect(function () {
71
- setCounter(currentInitialValue);
72
+ setInnerValue(currentInitialValue);
72
73
  }, [currentInitialValue]);
73
74
  var handleValueChange = React.useCallback(function (inputValue) {
74
75
  if (!isControlled) {
75
- setCounter(inputValue);
76
+ setInnerValue(inputValue);
76
77
  }
77
78
 
78
79
  if (inputValue < min) {
@@ -88,11 +89,11 @@ var Counter = function Counter(_ref) {
88
89
  }
89
90
  }, [min, max, onChange, isControlled]);
90
91
  var handleMinusClick = React.useCallback(function () {
91
- handleValueChange(isControlled ? value - 1 : counter - 1);
92
- }, [handleValueChange, counter, isControlled, value]);
92
+ handleValueChange(currentValue - 1);
93
+ }, [handleValueChange, currentValue]);
93
94
  var handlePlusClick = React.useCallback(function () {
94
- handleValueChange(isControlled ? value + 1 : counter + 1);
95
- }, [handleValueChange, counter, isControlled, value]);
95
+ handleValueChange(currentValue + 1);
96
+ }, [handleValueChange, currentValue]);
96
97
  var handleInputChange = React.useCallback(function (e) {
97
98
  var pattern = /^[0-9\b]+$/;
98
99
  var inputValue = e.target.value;
@@ -125,7 +126,7 @@ var Counter = function Counter(_ref) {
125
126
  left: true
126
127
  }, classes.buttonMinus),
127
128
  type: "button",
128
- disabled: disabled || (isControlled ? value : counter) <= min,
129
+ disabled: disabled || currentValue <= min,
129
130
  onClick: handleMinusClick
130
131
  }), /*#__PURE__*/React.createElement(IconMinus, {
131
132
  className: cn('icon')
@@ -133,7 +134,7 @@ var Counter = function Counter(_ref) {
133
134
  className: cn('input-box')
134
135
  }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
135
136
  className: cn('input', classes.input),
136
- value: isControlled ? value : counter,
137
+ value: currentValue,
137
138
  onChange: handleInputChange,
138
139
  onBlur: handleInputBlur,
139
140
  disabled: disabled
@@ -142,7 +143,7 @@ var Counter = function Counter(_ref) {
142
143
  right: true
143
144
  }, classes.buttonPlus),
144
145
  type: "button",
145
- disabled: disabled || counter >= max || value >= max,
146
+ disabled: disabled || currentValue >= max,
146
147
  onClick: handlePlusClick
147
148
  }), /*#__PURE__*/React.createElement(IconPlus, {
148
149
  className: cn('icon')
@@ -14,6 +14,8 @@ export interface ILinkProps {
14
14
  dataAttrs?: {
15
15
  root?: Record<string, string>;
16
16
  };
17
+ /** Атрибут itemprop для микроразметки */
18
+ itemProp?: string;
17
19
  children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
18
20
  /** Обработчик клика */
19
21
  onClick?: (e: React.MouseEvent<EventTarget>) => void;
@@ -22,6 +22,7 @@ var Link = function Link(_ref) {
22
22
  onClick = _ref.onClick,
23
23
  className = _ref.className,
24
24
  download = _ref.download,
25
+ itemProp = _ref.itemProp,
25
26
  children = _ref.children,
26
27
  dataAttrs = _ref.dataAttrs;
27
28
  return /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({
@@ -30,6 +31,7 @@ var Link = function Link(_ref) {
30
31
  target: target,
31
32
  rel: rel,
32
33
  download: download,
34
+ itemProp: itemProp,
33
35
  onClick: onClick
34
36
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), children);
35
37
  };
@@ -44,6 +46,7 @@ Link.propTypes = {
44
46
  }),
45
47
  rel: _propTypes["default"].string,
46
48
  download: _propTypes["default"].bool,
49
+ itemProp: _propTypes["default"].string,
47
50
  onClick: _propTypes["default"].func
48
51
  };
49
52
  var _default = Link;
@@ -4,13 +4,17 @@ export interface ILogoProps {
4
4
  /** Дополнительный класс корневого элемента */
5
5
  className?: string;
6
6
  /** Цвет */
7
- color?: string;
7
+ color?: 'green';
8
8
  /** Отображение */
9
9
  view?: 'horizontal' | 'vertical';
10
10
  /** Ссылка */
11
11
  href?: string;
12
12
  /** target - аргумент тега <a> */
13
13
  target?: '_self' | '_blank' | '_parent' | '_top';
14
+ /** Дополнительные data атрибуты к внутренним элементам */
15
+ dataAttrs?: {
16
+ root?: Record<string, string>;
17
+ };
14
18
  }
15
19
  declare const Logo: React.FC<ILogoProps>;
16
20
  export default Logo;
@@ -79,13 +79,15 @@ var Logo = function Logo(_ref) {
79
79
  _ref$target = _ref.target,
80
80
  target = _ref$target === void 0 ? '_blank' : _ref$target,
81
81
  _ref$href = _ref.href,
82
- href = _ref$href === void 0 ? '/' : _ref$href;
82
+ href = _ref$href === void 0 ? '/' : _ref$href,
83
+ dataAttrs = _ref.dataAttrs;
83
84
  var images = {
84
85
  'green-horizontal': greenHorizontalImg,
85
86
  'green-vertical': greenVerticalImg
86
87
  };
87
88
  var BackgroundImage = images["".concat(color, "-").concat(view)];
88
89
  return /*#__PURE__*/React.createElement(_Link["default"], {
90
+ dataAttrs: dataAttrs,
89
91
  href: href,
90
92
  target: target,
91
93
  className: cn('', {
@@ -99,11 +101,14 @@ var Logo = function Logo(_ref) {
99
101
  };
100
102
 
101
103
  Logo.propTypes = {
102
- color: PropTypes.string,
104
+ color: PropTypes.oneOf(['green']),
103
105
  view: PropTypes.oneOf(['horizontal', 'vertical']),
104
106
  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
105
107
  href: PropTypes.string,
106
- className: PropTypes.string
108
+ className: PropTypes.string,
109
+ dataAttrs: PropTypes.shape({
110
+ root: PropTypes.objectOf(PropTypes.string.isRequired)
111
+ })
107
112
  };
108
113
  var _default = Logo;
109
114
  exports["default"] = _default;
@@ -13,6 +13,8 @@ declare type ViewType = typeof View[keyof typeof View];
13
13
  export interface INavArrowProps {
14
14
  dataAttrs?: {
15
15
  root?: Record<string, string>;
16
+ prevArrow?: Record<string, string>;
17
+ nextArrow?: Record<string, string>;
16
18
  };
17
19
  className?: string;
18
20
  theme?: ThemeType;
@@ -64,16 +64,16 @@ var NavArrow = function NavArrow(_ref) {
64
64
  var renderIcon = React.useCallback(function () {
65
65
  switch (view) {
66
66
  case View.PREV:
67
- return /*#__PURE__*/React.createElement(ArrowLeft, {
67
+ return /*#__PURE__*/React.createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow), {
68
68
  className: cn('icon')
69
- });
69
+ }));
70
70
 
71
71
  default:
72
- return /*#__PURE__*/React.createElement(ArrowRight, {
72
+ return /*#__PURE__*/React.createElement(ArrowRight, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.nextArrow), {
73
73
  className: cn('icon')
74
- });
74
+ }));
75
75
  }
76
- }, [view]);
76
+ }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.nextArrow, view]);
77
77
  return /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
78
78
  type: "button",
79
79
  className: cn({
@@ -86,7 +86,9 @@ var NavArrow = function NavArrow(_ref) {
86
86
 
87
87
  NavArrow.propTypes = {
88
88
  dataAttrs: PropTypes.shape({
89
- root: PropTypes.objectOf(PropTypes.string.isRequired)
89
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
90
+ prevArrow: PropTypes.objectOf(PropTypes.string.isRequired),
91
+ nextArrow: PropTypes.objectOf(PropTypes.string.isRequired)
90
92
  }),
91
93
  className: PropTypes.string,
92
94
  theme: PropTypes.oneOf(Object.values(Theme)),
@@ -9,6 +9,8 @@ exports["default"] = exports.TabColorTheme = exports.TabSize = exports.TabAlign
9
9
 
10
10
  require("core-js/modules/es.array.for-each");
11
11
 
12
+ require("core-js/modules/es.array.is-array");
13
+
12
14
  require("core-js/modules/es.array.map");
13
15
 
14
16
  require("core-js/modules/es.array.reduce");
@@ -35,6 +37,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
35
37
 
36
38
  var _react2 = require("swiper/react");
37
39
 
40
+ var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
41
+
38
42
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
39
43
 
40
44
  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; }
@@ -94,6 +98,9 @@ var Tabs = function Tabs(_ref) {
94
98
  var rootRef = React.useRef(null);
95
99
  var tabListRef = React.useRef(null);
96
100
  var intersectionObserverRef = React.useRef();
101
+ var childrenLength = Array.isArray(children) ? children.length : 0;
102
+ var prevChildrenLength = (0, _usePrevious["default"])(childrenLength) || 0;
103
+ var isChildrenLengthDiff = childrenLength !== prevChildrenLength;
97
104
 
98
105
  var _React$useState = React.useState(),
99
106
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -388,9 +395,13 @@ var Tabs = function Tabs(_ref) {
388
395
  return;
389
396
  }
390
397
 
391
- setBeginning(swiperInstance.isBeginning);
392
- setEnd(swiperInstance.isEnd);
393
- }, [swiperInstance]);
398
+ if (isChildrenLengthDiff) {
399
+ handleFromEdge(swiperInstance);
400
+ return;
401
+ }
402
+
403
+ handleFromEdge(swiperInstance);
404
+ }, [swiperInstance, isChildrenLengthDiff, handleFromEdge]);
394
405
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
395
406
  className: cn({
396
407
  size: size,
@@ -8,6 +8,8 @@ export interface ITextLinkProps extends ILinkProps {
8
8
  underlineVisibility?: 'hover' | 'always';
9
9
  /** Стиль подчеркивания */
10
10
  underlineStyle?: 'solid' | 'dashed' | 'border' | 'none';
11
+ /** Атрибут itemprop для микроразметки */
12
+ itemProp?: string;
11
13
  children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
12
14
  }
13
15
  declare const TextLink: React.FC<ITextLinkProps>;
@@ -37,12 +37,14 @@ var TextLink = function TextLink(_ref) {
37
37
  onClick = _ref.onClick,
38
38
  children = _ref.children,
39
39
  download = _ref.download,
40
- dataAttrs = _ref.dataAttrs;
40
+ dataAttrs = _ref.dataAttrs,
41
+ itemProp = _ref.itemProp;
41
42
  return /*#__PURE__*/React.createElement(_Link["default"], {
42
43
  dataAttrs: dataAttrs,
43
44
  target: target,
44
45
  href: href,
45
46
  rel: rel,
47
+ itemProp: itemProp,
46
48
  onClick: onClick,
47
49
  className: cn('', {
48
50
  'underline-visibility': underlineVisibility,
@@ -60,6 +62,7 @@ TextLink.propTypes = {
60
62
  dataAttrs: PropTypes.shape({
61
63
  root: PropTypes.objectOf(PropTypes.string.isRequired)
62
64
  }),
65
+ itemProp: PropTypes.string,
63
66
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node])
64
67
  };
65
68
  var _default = TextLink;
@@ -26,6 +26,8 @@ export interface ITileProps {
26
26
  href?: string;
27
27
  /** Атрибут для открытия ссылки */
28
28
  target?: '_self' | '_blank';
29
+ /** rel - аргумент тега <a> */
30
+ rel?: string;
29
31
  /** Тема */
30
32
  theme?: ThemeType;
31
33
  /** Радиус границы */
@@ -57,7 +57,8 @@ var Tile = function Tile(_ref) {
57
57
  onClick = _ref.onClick,
58
58
  dataAttrs = _ref.dataAttrs,
59
59
  _ref$target = _ref.target,
60
- target = _ref$target === void 0 ? '_self' : _ref$target;
60
+ target = _ref$target === void 0 ? '_self' : _ref$target,
61
+ rel = _ref.rel;
61
62
 
62
63
  var handleClick = function handleClick(e) {
63
64
  onClick === null || onClick === void 0 ? void 0 : onClick(e);
@@ -77,7 +78,8 @@ var Tile = function Tile(_ref) {
77
78
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/_react["default"].createElement("a", {
78
79
  href: href,
79
80
  className: cn('link'),
80
- target: target
81
+ target: target,
82
+ rel: rel
81
83
  }, children), !href && children);
82
84
  };
83
85
 
@@ -92,7 +94,8 @@ Tile.propTypes = {
92
94
  dataAttrs: _propTypes["default"].shape({
93
95
  root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
94
96
  }),
95
- target: _propTypes["default"].oneOf(['_self', '_blank'])
97
+ target: _propTypes["default"].oneOf(['_self', '_blank']),
98
+ rel: _propTypes["default"].string
96
99
  };
97
100
  var _default = Tile;
98
101
  exports["default"] = _default;
@@ -44,4 +44,3 @@ export { default as Timer } from './components/Badges/components/TimerBadge/Time
44
44
  export { default as TimerBadge } from './components/Badges/components/TimerBadge/TimerBadge';
45
45
  export { default as Tooltip } from './components/Tooltip/Tooltip';
46
46
  export { default as usePagination } from './components/Pagination/usePagination';
47
- export { default as usePrevious } from './components/Carousel/usePrevious';
package/dist/lib/index.js CHANGED
@@ -279,12 +279,6 @@ Object.defineProperty(exports, "usePagination", {
279
279
  return _usePagination["default"];
280
280
  }
281
281
  });
282
- Object.defineProperty(exports, "usePrevious", {
283
- enumerable: true,
284
- get: function get() {
285
- return _usePrevious["default"];
286
- }
287
- });
288
282
 
289
283
  var _Accordion = _interopRequireDefault(require("./components/Accordion/Accordion"));
290
284
 
@@ -378,6 +372,4 @@ var _Tooltip = _interopRequireDefault(require("./components/Tooltip/Tooltip"));
378
372
 
379
373
  var _usePagination = _interopRequireDefault(require("./components/Pagination/usePagination"));
380
374
 
381
- var _usePrevious = _interopRequireDefault(require("./components/Carousel/usePrevious"));
382
-
383
375
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "4.9.0",
3
+ "version": "4.10.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -54,7 +54,7 @@
54
54
  "@babel/preset-env": "^7.8.6",
55
55
  "@babel/preset-react": "^7.8.3",
56
56
  "@babel/preset-typescript": "^7.8.3",
57
- "@megafon/ui-icons": "^2.4.0",
57
+ "@megafon/ui-icons": "^2.4.1",
58
58
  "@svgr/core": "^2.4.1",
59
59
  "@testing-library/jest-dom": "5.16.2",
60
60
  "@testing-library/react": "12.1.2",
@@ -89,7 +89,7 @@
89
89
  "dependencies": {
90
90
  "@babel/runtime": "^7.8.4",
91
91
  "@datepicker-react/hooks": "^2.7.0",
92
- "@megafon/ui-helpers": "^2.3.0",
92
+ "@megafon/ui-helpers": "^2.3.1",
93
93
  "@popperjs/core": "^2.5.3",
94
94
  "core-js": "^3.6.4",
95
95
  "date-fns": "^2.16.1",
@@ -100,5 +100,5 @@
100
100
  "react-popper": "^2.2.3",
101
101
  "swiper": "^6.5.6"
102
102
  },
103
- "gitHead": "ab9cb505dca6ae5f4e3db5d4a21add24d10a1be1"
103
+ "gitHead": "ac8874d2fae1f64db72d87a5c0352360a70b9a4d"
104
104
  }
package/styles/colors.css CHANGED
@@ -23,6 +23,7 @@
23
23
  --buttonHoverPurple: #A500BF;
24
24
  --buttonHoverGrey: #D6D6D6;
25
25
  --buttonDown: #404D46;
26
+ --overlay: #000000CC;
26
27
 
27
28
  /* Gradients */
28
29
  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
@@ -24,6 +24,7 @@
24
24
  --buttonHoverPurple: #A500BF;
25
25
  --buttonHoverGrey: #D6D6D6;
26
26
  --buttonDown: #404D46;
27
+ --overlay: #000000CC;
27
28
 
28
29
  /* Gradients */
29
30
  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);