@semcore/carousel 3.45.1 → 3.45.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/Carousel.js +83 -65
- package/lib/cjs/Carousel.js.map +1 -1
- package/lib/cjs/Carousel.types.js.map +1 -1
- package/lib/cjs/style/carousel.shadow.css +0 -1
- package/lib/es6/Carousel.js +84 -65
- package/lib/es6/Carousel.js.map +1 -1
- package/lib/es6/Carousel.types.js.map +1 -1
- package/lib/es6/style/carousel.shadow.css +0 -1
- package/lib/types/Carousel.types.d.ts +6 -0
- package/package.json +7 -7
- package/src/Carousel.tsx +29 -3
- package/src/Carousel.types.ts +7 -0
- package/src/style/carousel.shadow.css +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.45.2] - 2024-12-18
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Keyboard handler for zoom data in carousel by `enter` or `space`.
|
|
10
|
+
|
|
5
11
|
## [3.45.1] - 2024-12-09
|
|
6
12
|
|
|
7
13
|
### Changed
|
package/lib/cjs/Carousel.js
CHANGED
|
@@ -31,27 +31,27 @@ var _findComponent = require("@semcore/utils/lib/findComponent");
|
|
|
31
31
|
var _breakpoints = require("@semcore/breakpoints");
|
|
32
32
|
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
33
33
|
/*__reshadow-styles__:"./style/carousel.shadow.css"*/
|
|
34
|
-
var style = ( /*__reshadow_css_start__*/_index2.sstyled.insert( /*__inner_css_start__*/".
|
|
35
|
-
"__SCarousel": "
|
|
36
|
-
"__SContainer": "
|
|
37
|
-
"--duration": "--
|
|
38
|
-
"__SModalContainer": "
|
|
39
|
-
"__SItem": "
|
|
40
|
-
"--transform": "--
|
|
41
|
-
"_zoomIn": "
|
|
42
|
-
"_zoomOut": "
|
|
43
|
-
"__SIndicators": "
|
|
44
|
-
"_keyboardFocused": "
|
|
45
|
-
"__SIndicator": "
|
|
46
|
-
"_active": "
|
|
47
|
-
"_inverted": "
|
|
48
|
-
"__SPrev": "
|
|
49
|
-
"__SNext": "
|
|
50
|
-
"_disabled": "
|
|
51
|
-
"__SContentBox": "
|
|
52
|
-
"__SModalBox": "
|
|
53
|
-
"__SPrevButton": "
|
|
54
|
-
"__SNextButton": "
|
|
34
|
+
var style = ( /*__reshadow_css_start__*/_index2.sstyled.insert( /*__inner_css_start__*/".___SCarousel_3a60i_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_3a60i_gg_{display:flex;transition:transform var(--duration_3a60i) ease-in-out}.___SContentBox_3a60i_gg_,.___SModalBox_3a60i_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_3a60i_gg_:has(.___SItem_3a60i_gg_.__keyboardFocused_3a60i_gg_):after,.___SModalBox_3a60i_gg_:has(.___SItem_3a60i_gg_.__keyboardFocused_3a60i_gg_):after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px}.___SModalContainer_3a60i_gg_{display:flex;transition:transform var(--duration_3a60i) ease-in-out}.___SItem_3a60i_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_3a60i);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_3a60i_gg_.__zoomIn_3a60i_gg_{cursor:zoom-in}.___SItem_3a60i_gg_.__zoomOut_3a60i_gg_{cursor:zoom-out}.___SIndicators_3a60i_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_3a60i_gg_.__keyboardFocused_3a60i_gg_:after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px);top:0;left:3px}.___SIndicator_3a60i_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-control-rounded, 6px);background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@media (hover:hover){.___SIndicator_3a60i_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_3a60i_gg_.__active_3a60i_gg_{opacity:1}.___SIndicator_3a60i_gg_.__inverted_3a60i_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_3a60i_gg_,.___SPrev_3a60i_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_3a60i_gg_ .___SNextButton_3a60i_gg_ span:has(>svg:only-child),.___SNext_3a60i_gg_ .___SPrevButton_3a60i_gg_ span:has(>svg:only-child),.___SPrev_3a60i_gg_ .___SNextButton_3a60i_gg_ span:has(>svg:only-child),.___SPrev_3a60i_gg_ .___SPrevButton_3a60i_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SNextButton_3a60i_gg_:focus-visible,.___SPrevButton_3a60i_gg_:focus-visible{box-shadow:none}.___SNextButton_3a60i_gg_:focus-visible:after,.___SPrevButton_3a60i_gg_:focus-visible:after{content:\"\";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPrev_3a60i_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_3a60i_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_3a60i_gg_.__disabled_3a60i_gg_,.___SPrev_3a60i_gg_.__disabled_3a60i_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_3a60i_gg_{transition:none}}" /*__inner_css_end__*/, "3a60i_gg_") /*__reshadow_css_end__*/, {
|
|
35
|
+
"__SCarousel": "___SCarousel_3a60i_gg_",
|
|
36
|
+
"__SContainer": "___SContainer_3a60i_gg_",
|
|
37
|
+
"--duration": "--duration_3a60i",
|
|
38
|
+
"__SModalContainer": "___SModalContainer_3a60i_gg_",
|
|
39
|
+
"__SItem": "___SItem_3a60i_gg_",
|
|
40
|
+
"--transform": "--transform_3a60i",
|
|
41
|
+
"_zoomIn": "__zoomIn_3a60i_gg_",
|
|
42
|
+
"_zoomOut": "__zoomOut_3a60i_gg_",
|
|
43
|
+
"__SIndicators": "___SIndicators_3a60i_gg_",
|
|
44
|
+
"_keyboardFocused": "__keyboardFocused_3a60i_gg_",
|
|
45
|
+
"__SIndicator": "___SIndicator_3a60i_gg_",
|
|
46
|
+
"_active": "__active_3a60i_gg_",
|
|
47
|
+
"_inverted": "__inverted_3a60i_gg_",
|
|
48
|
+
"__SPrev": "___SPrev_3a60i_gg_",
|
|
49
|
+
"__SNext": "___SNext_3a60i_gg_",
|
|
50
|
+
"_disabled": "__disabled_3a60i_gg_",
|
|
51
|
+
"__SContentBox": "___SContentBox_3a60i_gg_",
|
|
52
|
+
"__SModalBox": "___SModalBox_3a60i_gg_",
|
|
53
|
+
"__SPrevButton": "___SPrevButton_3a60i_gg_",
|
|
54
|
+
"__SNextButton": "___SNextButton_3a60i_gg_"
|
|
55
55
|
});
|
|
56
56
|
var MAP_TRANSFORM = {
|
|
57
57
|
ArrowLeft: 'left',
|
|
@@ -67,7 +67,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
67
67
|
(0, _inherits2["default"])(CarouselRoot, _Component);
|
|
68
68
|
var _super = (0, _createSuper2["default"])(CarouselRoot);
|
|
69
69
|
function CarouselRoot(props) {
|
|
70
|
-
var
|
|
70
|
+
var _ref20, _props$index;
|
|
71
71
|
var _this;
|
|
72
72
|
(0, _classCallCheck2["default"])(this, CarouselRoot);
|
|
73
73
|
_this = _super.call(this, props);
|
|
@@ -110,6 +110,9 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
110
110
|
_this.slideToValue(lastSlide);
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
|
+
if ((e.key === 'Enter' || e.key === ' ') && e.target instanceof HTMLDivElement && e.target.role === 'tabpanel') {
|
|
114
|
+
_this.handleToggleZoomModal();
|
|
115
|
+
}
|
|
113
116
|
});
|
|
114
117
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleItem", function (item) {
|
|
115
118
|
var removeItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
@@ -265,7 +268,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
265
268
|
_this.state = {
|
|
266
269
|
items: [],
|
|
267
270
|
isOpenZoom: false,
|
|
268
|
-
selectedIndex: (
|
|
271
|
+
selectedIndex: (_ref20 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref20 !== void 0 ? _ref20 : 0
|
|
269
272
|
};
|
|
270
273
|
return _this;
|
|
271
274
|
}
|
|
@@ -335,7 +338,8 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
335
338
|
current: isCurrent,
|
|
336
339
|
zoomIn: zoom,
|
|
337
340
|
onToggleZoomModal: this.handleToggleZoomModal,
|
|
338
|
-
transform: isCurrent ? this.getTransform() : undefined
|
|
341
|
+
transform: isCurrent ? this.getTransform() : undefined,
|
|
342
|
+
isOpenZoom: this.state.isOpenZoom
|
|
339
343
|
};
|
|
340
344
|
}
|
|
341
345
|
}, {
|
|
@@ -452,7 +456,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
452
456
|
key: "renderModal",
|
|
453
457
|
value: function renderModal(isSmall, ComponentItems) {
|
|
454
458
|
var _ref = this.asProps,
|
|
455
|
-
|
|
459
|
+
_ref10,
|
|
456
460
|
_this5 = this;
|
|
457
461
|
var SModalContainer = _flexBox.Box;
|
|
458
462
|
var SModalBox = _flexBox.Box;
|
|
@@ -462,16 +466,16 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
462
466
|
duration = _this$asProps3.duration,
|
|
463
467
|
zoomWidth = _this$asProps3.zoomWidth;
|
|
464
468
|
var isOpenZoom = this.state.isOpenZoom;
|
|
465
|
-
return
|
|
469
|
+
return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_modal["default"], _ref10.cn("Modal", {
|
|
466
470
|
"visible": isOpenZoom,
|
|
467
471
|
"onClose": this.handleToggleZoomModal,
|
|
468
472
|
"ghost": true,
|
|
469
473
|
"closable": !isSmall
|
|
470
|
-
}), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex,
|
|
474
|
+
}), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref10.cn("Flex", {
|
|
471
475
|
"direction": isSmall ? 'column' : 'row'
|
|
472
476
|
}), !isSmall && /*#__PURE__*/_react["default"].createElement(Carousel.Prev, {
|
|
473
477
|
inverted: true
|
|
474
|
-
}), /*#__PURE__*/_react["default"].createElement(SModalBox,
|
|
478
|
+
}), /*#__PURE__*/_react["default"].createElement(SModalBox, _ref10.cn("SModalBox", {}), /*#__PURE__*/_react["default"].createElement(SModalContainer, _ref10.cn("SModalContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
475
479
|
"aria-live": 'polite',
|
|
476
480
|
"use:duration": "".concat(duration, "ms"),
|
|
477
481
|
"ref": this.refModalContainer,
|
|
@@ -488,7 +492,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
488
492
|
zoomOut: true,
|
|
489
493
|
transform: _this5.isSelected(i) ? _this5.getTransform() : undefined
|
|
490
494
|
}));
|
|
491
|
-
}))), isSmall ? /*#__PURE__*/_react["default"].createElement(_flexBox.Flex,
|
|
495
|
+
}))), isSmall ? /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref10.cn("Flex", {
|
|
492
496
|
"justifyContent": 'center',
|
|
493
497
|
"mt": 2
|
|
494
498
|
}), /*#__PURE__*/_react["default"].createElement(Carousel.Prev, {
|
|
@@ -505,10 +509,9 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
505
509
|
key: "render",
|
|
506
510
|
value: function render() {
|
|
507
511
|
var _ref2 = this.asProps,
|
|
508
|
-
|
|
512
|
+
_ref11,
|
|
509
513
|
_this6 = this;
|
|
510
514
|
var SCarousel = _flexBox.Box;
|
|
511
|
-
var SContentBox = _flexBox.Box;
|
|
512
515
|
var _this$asProps4 = this.asProps,
|
|
513
516
|
styles = _this$asProps4.styles,
|
|
514
517
|
Children = _this$asProps4.Children,
|
|
@@ -519,7 +522,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
519
522
|
indicators = _this$asProps4.indicators;
|
|
520
523
|
var ComponentItems = (0, _findComponent.findAllComponents)(Children, ['Carousel.Item']);
|
|
521
524
|
var Controls = (0, _findComponent.findAllComponents)(Children, ['Carousel.Prev', 'Carousel.Next', 'Carousel.Indicators']);
|
|
522
|
-
return
|
|
525
|
+
return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCarousel, _ref11.cn("SCarousel", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
523
526
|
"role": 'region',
|
|
524
527
|
"roledescription": 'carousel',
|
|
525
528
|
"onKeyDown": this.handlerKeyDown,
|
|
@@ -528,9 +531,9 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
528
531
|
"ref": this.refCarousel,
|
|
529
532
|
"id": "igc-".concat(uid, "-carousel"),
|
|
530
533
|
"aria-roledescription": ariaRoledescription
|
|
531
|
-
}, _ref2))), Controls.length === 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_flexBox.Flex,
|
|
534
|
+
}, _ref2))), Controls.length === 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref11.cn("Flex", {}), /*#__PURE__*/_react["default"].createElement(Carousel.Prev, null), /*#__PURE__*/_react["default"].createElement(Carousel.ContentBox, null, /*#__PURE__*/_react["default"].createElement(Carousel.Container, {
|
|
532
535
|
"aria-label": ariaLabel
|
|
533
|
-
}, /*#__PURE__*/_react["default"].createElement(Children,
|
|
536
|
+
}, /*#__PURE__*/_react["default"].createElement(Children, _ref11.cn("Children", {})))), /*#__PURE__*/_react["default"].createElement(Carousel.Next, null)), indicators === 'default' && /*#__PURE__*/_react["default"].createElement(Carousel.Indicators, null), indicators === 'preview' && /*#__PURE__*/_react["default"].createElement(Carousel.Indicators, null, function () {
|
|
534
537
|
return ComponentItems.map(function (item, index) {
|
|
535
538
|
return /*#__PURE__*/_react["default"].createElement(Carousel.Indicator, (0, _extends2["default"])({}, item.props, {
|
|
536
539
|
key: item.key,
|
|
@@ -541,7 +544,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
541
544
|
onClick: _this6.bindHandlerClickIndicator(index)
|
|
542
545
|
}));
|
|
543
546
|
});
|
|
544
|
-
})) : /*#__PURE__*/_react["default"].createElement(Children,
|
|
547
|
+
})) : /*#__PURE__*/_react["default"].createElement(Children, _ref11.cn("Children", {})), hasZoom && /*#__PURE__*/_react["default"].createElement(BreakPoints, _ref11.cn("BreakPoints", {}), /*#__PURE__*/_react["default"].createElement(BreakPoints.Context.Consumer, null, function (mediaIndex) {
|
|
545
548
|
return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
|
|
546
549
|
})));
|
|
547
550
|
}
|
|
@@ -562,15 +565,22 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
|
|
|
562
565
|
(0, _defineProperty2["default"])(CarouselRoot, "enhance", enhance);
|
|
563
566
|
var Container = function Container(props) {
|
|
564
567
|
var _ref3 = arguments[0],
|
|
565
|
-
|
|
568
|
+
_ref12;
|
|
566
569
|
var SContainer = _flexBox.Box;
|
|
567
570
|
var styles = props.styles,
|
|
568
571
|
duration = props.duration;
|
|
569
|
-
return
|
|
572
|
+
return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref12.cn("SContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
570
573
|
"use:duration": "".concat(duration, "ms"),
|
|
571
574
|
"aria-live": 'polite'
|
|
572
575
|
}, _ref3))));
|
|
573
576
|
};
|
|
577
|
+
var ContentBox = function ContentBox(props) {
|
|
578
|
+
var _ref4 = arguments[0],
|
|
579
|
+
_ref13;
|
|
580
|
+
var SContentBox = _flexBox.Box;
|
|
581
|
+
var styles = props.styles;
|
|
582
|
+
return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContentBox, _ref13.cn("SContentBox", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref4))));
|
|
583
|
+
};
|
|
574
584
|
var Item = /*#__PURE__*/function (_Component2) {
|
|
575
585
|
(0, _inherits2["default"])(Item, _Component2);
|
|
576
586
|
var _super2 = (0, _createSuper2["default"])(Item);
|
|
@@ -612,6 +622,7 @@ var Item = /*#__PURE__*/function (_Component2) {
|
|
|
612
622
|
}, {
|
|
613
623
|
key: "componentDidUpdate",
|
|
614
624
|
value: function componentDidUpdate(prevProps) {
|
|
625
|
+
var _this8 = this;
|
|
615
626
|
clearTimeout(this.keepFocusTimeout);
|
|
616
627
|
var transform = this.props.transform;
|
|
617
628
|
var refItem = this.refItem.current;
|
|
@@ -626,12 +637,18 @@ var Item = /*#__PURE__*/function (_Component2) {
|
|
|
626
637
|
}
|
|
627
638
|
}, 100);
|
|
628
639
|
}
|
|
640
|
+
if (prevProps.isOpenZoom === true && this.props.isOpenZoom === false && this.props.current && !this.props.zoomOut) {
|
|
641
|
+
this.keepFocusTimeout = setTimeout(function () {
|
|
642
|
+
var _this8$refItem$curren;
|
|
643
|
+
(_this8$refItem$curren = _this8.refItem.current) === null || _this8$refItem$curren === void 0 ? void 0 : _this8$refItem$curren.focus();
|
|
644
|
+
}, 200);
|
|
645
|
+
}
|
|
629
646
|
}
|
|
630
647
|
}, {
|
|
631
648
|
key: "render",
|
|
632
649
|
value: function render() {
|
|
633
|
-
var
|
|
634
|
-
|
|
650
|
+
var _ref5 = this.asProps,
|
|
651
|
+
_ref14;
|
|
635
652
|
var _this$props2 = this.props,
|
|
636
653
|
styles = _this$props2.styles,
|
|
637
654
|
index = _this$props2.index,
|
|
@@ -640,7 +657,7 @@ var Item = /*#__PURE__*/function (_Component2) {
|
|
|
640
657
|
zoomIn = _this$props2.zoomIn,
|
|
641
658
|
onToggleZoomModal = _this$props2.onToggleZoomModal;
|
|
642
659
|
var SItem = _flexBox.Box;
|
|
643
|
-
return
|
|
660
|
+
return _ref14 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItem, _ref14.cn("SItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
644
661
|
"ref": this.refItem,
|
|
645
662
|
"role": 'tabpanel',
|
|
646
663
|
"data-carousel": "igc-".concat(uid, "-carousel"),
|
|
@@ -649,15 +666,15 @@ var Item = /*#__PURE__*/function (_Component2) {
|
|
|
649
666
|
"use:tabIndex": current ? 0 : -1,
|
|
650
667
|
"onClick": zoomIn ? onToggleZoomModal : undefined,
|
|
651
668
|
"zoomIn": zoomIn
|
|
652
|
-
},
|
|
669
|
+
}, _ref5))));
|
|
653
670
|
}
|
|
654
671
|
}]);
|
|
655
672
|
return Item;
|
|
656
673
|
}(_core.Component);
|
|
657
674
|
(0, _defineProperty2["default"])(Item, "enhance", [(0, _keyboardFocusEnhance["default"])(false)]);
|
|
658
675
|
var Prev = function Prev(props) {
|
|
659
|
-
var
|
|
660
|
-
|
|
676
|
+
var _ref6 = arguments[0],
|
|
677
|
+
_ref15;
|
|
661
678
|
var styles = props.styles,
|
|
662
679
|
children = props.children,
|
|
663
680
|
Children = props.Children,
|
|
@@ -667,9 +684,9 @@ var Prev = function Prev(props) {
|
|
|
667
684
|
inverted = props.inverted;
|
|
668
685
|
var SPrev = _flexBox.Box;
|
|
669
686
|
var SPrevButton = _button["default"];
|
|
670
|
-
return
|
|
687
|
+
return _ref15 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPrev, _ref15.cn("SPrev", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
671
688
|
"top": top
|
|
672
|
-
},
|
|
689
|
+
}, _ref6))), children ? /*#__PURE__*/_react["default"].createElement(Children, _ref15.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SPrevButton, _ref15.cn("SPrevButton", {
|
|
673
690
|
"addonLeft": _l2["default"],
|
|
674
691
|
"aria-label": label,
|
|
675
692
|
"theme": inverted ? 'invert' : 'muted',
|
|
@@ -678,8 +695,8 @@ var Prev = function Prev(props) {
|
|
|
678
695
|
})));
|
|
679
696
|
};
|
|
680
697
|
var Next = function Next(props) {
|
|
681
|
-
var
|
|
682
|
-
|
|
698
|
+
var _ref7 = arguments[0],
|
|
699
|
+
_ref16;
|
|
683
700
|
var styles = props.styles,
|
|
684
701
|
children = props.children,
|
|
685
702
|
Children = props.Children,
|
|
@@ -689,9 +706,9 @@ var Next = function Next(props) {
|
|
|
689
706
|
inverted = props.inverted;
|
|
690
707
|
var SNext = _flexBox.Box;
|
|
691
708
|
var SNextButton = _button["default"];
|
|
692
|
-
return
|
|
709
|
+
return _ref16 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SNext, _ref16.cn("SNext", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
693
710
|
"top": top
|
|
694
|
-
},
|
|
711
|
+
}, _ref7))), children ? /*#__PURE__*/_react["default"].createElement(Children, _ref16.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SNextButton, _ref16.cn("SNextButton", {
|
|
695
712
|
"addonLeft": _l["default"],
|
|
696
713
|
"aria-label": label,
|
|
697
714
|
"theme": inverted ? 'invert' : 'muted',
|
|
@@ -699,19 +716,19 @@ var Next = function Next(props) {
|
|
|
699
716
|
"size": 'l'
|
|
700
717
|
})));
|
|
701
718
|
};
|
|
702
|
-
var Indicators = function Indicators(
|
|
703
|
-
var
|
|
704
|
-
|
|
705
|
-
var items =
|
|
706
|
-
styles =
|
|
707
|
-
Children =
|
|
708
|
-
inverted =
|
|
719
|
+
var Indicators = function Indicators(_ref21) {
|
|
720
|
+
var _ref8 = arguments[0],
|
|
721
|
+
_ref18;
|
|
722
|
+
var items = _ref21.items,
|
|
723
|
+
styles = _ref21.styles,
|
|
724
|
+
Children = _ref21.Children,
|
|
725
|
+
inverted = _ref21.inverted;
|
|
709
726
|
var SIndicators = _flexBox.Box;
|
|
710
727
|
if (Children.origin) {
|
|
711
|
-
var
|
|
712
|
-
return
|
|
728
|
+
var _ref17;
|
|
729
|
+
return _ref17 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref17.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref8))), /*#__PURE__*/_react["default"].createElement(Children, _ref17.cn("Children", {})));
|
|
713
730
|
}
|
|
714
|
-
return
|
|
731
|
+
return _ref18 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicators, _ref18.cn("SIndicators", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
|
|
715
732
|
return /*#__PURE__*/_react["default"].createElement(Carousel.Indicator, (0, _extends2["default"])({
|
|
716
733
|
key: index
|
|
717
734
|
}, item, {
|
|
@@ -720,16 +737,17 @@ var Indicators = function Indicators(_ref19) {
|
|
|
720
737
|
}));
|
|
721
738
|
};
|
|
722
739
|
Indicators.enhance = [(0, _keyboardFocusEnhance["default"])()];
|
|
723
|
-
var Indicator = function Indicator(
|
|
724
|
-
var
|
|
725
|
-
|
|
726
|
-
var styles =
|
|
727
|
-
Children =
|
|
740
|
+
var Indicator = function Indicator(_ref22) {
|
|
741
|
+
var _ref9 = arguments[0],
|
|
742
|
+
_ref19;
|
|
743
|
+
var styles = _ref22.styles,
|
|
744
|
+
Children = _ref22.Children;
|
|
728
745
|
var SIndicator = _flexBox.Box;
|
|
729
|
-
return
|
|
746
|
+
return _ref19 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIndicator, _ref19.cn("SIndicator", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref9))), /*#__PURE__*/_react["default"].createElement(Children, _ref19.cn("Children", {})));
|
|
730
747
|
};
|
|
731
748
|
var Carousel = (0, _core["default"])(CarouselRoot, {
|
|
732
749
|
Container: Container,
|
|
750
|
+
ContentBox: ContentBox,
|
|
733
751
|
Indicators: Indicators,
|
|
734
752
|
Indicator: Indicator,
|
|
735
753
|
Item: Item,
|