@megafon/ui-core 4.15.3 → 4.15.4

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 (6) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/es/components/Tabs/Tabs.css +21 -19
  3. package/dist/es/components/Tabs/Tabs.js +13 -21
  4. package/dist/lib/components/Tabs/Tabs.css +21 -19
  5. package/dist/lib/components/Tabs/Tabs.js +13 -21
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.15.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.15.3...@megafon/ui-core@4.15.4) (2023-04-17)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **tabs:** fixed gradient on swiper edges ([650e9be](https://github.com/MegafonWebLab/megafon-ui/commit/650e9beea8318ccf7bf564b4473a9d3487457694))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [4.15.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.15.2...@megafon/ui-core@4.15.3) (2023-04-14)
7
18
 
8
19
 
package/dist/es/components/Tabs/Tabs.css CHANGED
@@ -15,50 +15,52 @@
15
15
  justify-content: center;
16
16
  }
17
17
  .mfui-tabs__swiper-wrapper {
18
+ position: relative;
18
19
  display: -webkit-box;
19
20
  display: -ms-flexbox;
20
21
  display: flex;
21
22
  width: 100%;
22
23
  }
23
- .mfui-tabs__swiper {
24
- font-family: inherit;
25
- font-size: 15px;
26
- line-height: 24px;
27
- font-weight: 500;
28
- position: relative;
29
- display: inline-block;
30
- width: 100%;
31
- padding: 4px;
32
- border-radius: 12px;
33
- overflow: hidden;
34
- background-color: var(--spbSky0);
35
- }
36
- .mfui-tabs__swiper:before,
37
- .mfui-tabs__swiper:after {
24
+ .mfui-tabs__swiper-wrapper:before,
25
+ .mfui-tabs__swiper-wrapper:after {
38
26
  content: '';
39
27
  position: absolute;
40
28
  top: 0;
41
29
  bottom: 0;
42
30
  z-index: 1;
43
31
  width: 64px;
32
+ border-radius: 0 12px 12px 0;
44
33
  background: -webkit-gradient(linear, right top, left top, from(var(--stcBlack5)), color-stop(64%, transparent));
45
34
  background: linear-gradient(270deg, var(--stcBlack5) 0%, transparent 64%);
46
35
  pointer-events: none;
47
36
  }
48
- .mfui-tabs__swiper:before {
37
+ .mfui-tabs__swiper-wrapper:before {
49
38
  left: 0;
50
39
  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
51
40
  transform: matrix(-1, 0, 0, 1, 0, 0);
52
41
  }
53
- .mfui-tabs__swiper:after {
42
+ .mfui-tabs__swiper-wrapper:after {
54
43
  right: 0;
55
44
  }
56
- .mfui-tabs__swiper_beginning:before {
45
+ .mfui-tabs__swiper-wrapper_beginning:before {
57
46
  display: none;
58
47
  }
59
- .mfui-tabs__swiper_end:after {
48
+ .mfui-tabs__swiper-wrapper_end:after {
60
49
  display: none;
61
50
  }
51
+ .mfui-tabs__swiper {
52
+ font-family: inherit;
53
+ font-size: 15px;
54
+ line-height: 24px;
55
+ font-weight: 500;
56
+ position: relative;
57
+ display: inline-block;
58
+ width: 100%;
59
+ padding: 4px;
60
+ border-radius: 12px;
61
+ overflow: hidden;
62
+ background-color: var(--spbSky0);
63
+ }
62
64
  .mfui-tabs__slide {
63
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
64
66
  -webkit-box-flex: 1;
package/dist/es/components/Tabs/Tabs.js CHANGED
@@ -249,24 +249,16 @@ var Tabs = function Tabs(_ref) {
249
249
  var handleNextArrowClick = React.useCallback(function () {
250
250
  swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
251
251
  }, [swiperInstance]);
252
- var handleReachBeginning = React.useCallback(function (swiper) {
253
- if (isBeginning === swiper.isBeginning) {
254
- return;
255
- }
256
-
252
+ var handleReachBeginning = React.useCallback(function () {
253
+ setBeginning(true);
254
+ }, []);
255
+ var handleReachEnd = React.useCallback(function () {
256
+ setEnd(true);
257
+ }, []);
258
+ var handleFromEdge = React.useCallback(function (swiper) {
257
259
  setBeginning(swiper.isBeginning);
258
- }, [isBeginning]);
259
- var handleReachEnd = React.useCallback(function (swiper) {
260
- if (isEnd === swiper.isEnd) {
261
- return;
262
- }
263
-
264
260
  setEnd(swiper.isEnd);
265
- }, [isEnd]);
266
- var handleFromEdge = React.useCallback(function (swiper) {
267
- isBeginning !== swiper.isBeginning && setBeginning(swiper.isBeginning);
268
- isEnd !== swiper.isEnd && setEnd(swiper.isEnd);
269
- }, [isBeginning, isEnd]);
261
+ }, []);
270
262
  var addObserveEvent = React.useCallback(function () {
271
263
  var _a;
272
264
 
@@ -410,17 +402,17 @@ var Tabs = function Tabs(_ref) {
410
402
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper), {
411
403
  className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper])
412
404
  }), /*#__PURE__*/React.createElement("div", _extends({
413
- className: cn('swiper-wrapper', [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
405
+ className: cn('swiper-wrapper', {
406
+ beginning: isBeginning,
407
+ end: isEnd
408
+ }, [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
414
409
  style: {
415
410
  paddingLeft: stickyOffset.left,
416
411
  paddingRight: stickyOffset.right
417
412
  }
418
413
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
419
414
  simulateTouch: false,
420
- className: cn('swiper', {
421
- beginning: isBeginning,
422
- end: isEnd
423
- }, [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
415
+ className: cn('swiper', [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
424
416
  watchOverflow: true,
425
417
  slidesPerView: "auto",
426
418
  initialSlide: currentIndex,
package/dist/lib/components/Tabs/Tabs.css CHANGED
@@ -15,50 +15,52 @@
15
15
  justify-content: center;
16
16
  }
17
17
  .mfui-tabs__swiper-wrapper {
18
+ position: relative;
18
19
  display: -webkit-box;
19
20
  display: -ms-flexbox;
20
21
  display: flex;
21
22
  width: 100%;
22
23
  }
23
- .mfui-tabs__swiper {
24
- font-family: inherit;
25
- font-size: 15px;
26
- line-height: 24px;
27
- font-weight: 500;
28
- position: relative;
29
- display: inline-block;
30
- width: 100%;
31
- padding: 4px;
32
- border-radius: 12px;
33
- overflow: hidden;
34
- background-color: var(--spbSky0);
35
- }
36
- .mfui-tabs__swiper:before,
37
- .mfui-tabs__swiper:after {
24
+ .mfui-tabs__swiper-wrapper:before,
25
+ .mfui-tabs__swiper-wrapper:after {
38
26
  content: '';
39
27
  position: absolute;
40
28
  top: 0;
41
29
  bottom: 0;
42
30
  z-index: 1;
43
31
  width: 64px;
32
+ border-radius: 0 12px 12px 0;
44
33
  background: -webkit-gradient(linear, right top, left top, from(var(--stcBlack5)), color-stop(64%, transparent));
45
34
  background: linear-gradient(270deg, var(--stcBlack5) 0%, transparent 64%);
46
35
  pointer-events: none;
47
36
  }
48
- .mfui-tabs__swiper:before {
37
+ .mfui-tabs__swiper-wrapper:before {
49
38
  left: 0;
50
39
  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
51
40
  transform: matrix(-1, 0, 0, 1, 0, 0);
52
41
  }
53
- .mfui-tabs__swiper:after {
42
+ .mfui-tabs__swiper-wrapper:after {
54
43
  right: 0;
55
44
  }
56
- .mfui-tabs__swiper_beginning:before {
45
+ .mfui-tabs__swiper-wrapper_beginning:before {
57
46
  display: none;
58
47
  }
59
- .mfui-tabs__swiper_end:after {
48
+ .mfui-tabs__swiper-wrapper_end:after {
60
49
  display: none;
61
50
  }
51
+ .mfui-tabs__swiper {
52
+ font-family: inherit;
53
+ font-size: 15px;
54
+ line-height: 24px;
55
+ font-weight: 500;
56
+ position: relative;
57
+ display: inline-block;
58
+ width: 100%;
59
+ padding: 4px;
60
+ border-radius: 12px;
61
+ overflow: hidden;
62
+ background-color: var(--spbSky0);
63
+ }
62
64
  .mfui-tabs__slide {
63
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
64
66
  -webkit-box-flex: 1;
package/dist/lib/components/Tabs/Tabs.js CHANGED
@@ -280,24 +280,16 @@ var Tabs = function Tabs(_ref) {
280
280
  var handleNextArrowClick = React.useCallback(function () {
281
281
  swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
282
282
  }, [swiperInstance]);
283
- var handleReachBeginning = React.useCallback(function (swiper) {
284
- if (isBeginning === swiper.isBeginning) {
285
- return;
286
- }
287
-
283
+ var handleReachBeginning = React.useCallback(function () {
284
+ setBeginning(true);
285
+ }, []);
286
+ var handleReachEnd = React.useCallback(function () {
287
+ setEnd(true);
288
+ }, []);
289
+ var handleFromEdge = React.useCallback(function (swiper) {
288
290
  setBeginning(swiper.isBeginning);
289
- }, [isBeginning]);
290
- var handleReachEnd = React.useCallback(function (swiper) {
291
- if (isEnd === swiper.isEnd) {
292
- return;
293
- }
294
-
295
291
  setEnd(swiper.isEnd);
296
- }, [isEnd]);
297
- var handleFromEdge = React.useCallback(function (swiper) {
298
- isBeginning !== swiper.isBeginning && setBeginning(swiper.isBeginning);
299
- isEnd !== swiper.isEnd && setEnd(swiper.isEnd);
300
- }, [isBeginning, isEnd]);
292
+ }, []);
301
293
  var addObserveEvent = React.useCallback(function () {
302
294
  var _a;
303
295
 
@@ -441,17 +433,17 @@ var Tabs = function Tabs(_ref) {
441
433
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper), {
442
434
  className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper])
443
435
  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
444
- className: cn('swiper-wrapper', [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
436
+ className: cn('swiper-wrapper', {
437
+ beginning: isBeginning,
438
+ end: isEnd
439
+ }, [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
445
440
  style: {
446
441
  paddingLeft: stickyOffset.left,
447
442
  paddingRight: stickyOffset.right
448
443
  }
449
444
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
450
445
  simulateTouch: false,
451
- className: cn('swiper', {
452
- beginning: isBeginning,
453
- end: isEnd
454
- }, [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
446
+ className: cn('swiper', [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
455
447
  watchOverflow: true,
456
448
  slidesPerView: "auto",
457
449
  initialSlide: currentIndex,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "4.15.3",
3
+ "version": "4.15.4",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -100,5 +100,5 @@
100
100
  "react-popper": "^2.2.3",
101
101
  "swiper": "^6.5.6"
102
102
  },
103
- "gitHead": "f51175c15bbd3009ef1a67aebb8107d21f43052a"
103
+ "gitHead": "72a7d359c1674e80571a8af13466bedefdbbcecd"
104
104
  }