@semcore/carousel 16.1.13 → 17.0.0-prerelease.17

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 (20) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +4 -4
  3. package/lib/cjs/Carousel.js +536 -553
  4. package/lib/cjs/Carousel.js.map +1 -1
  5. package/lib/cjs/Carousel.types.js.map +1 -1
  6. package/lib/cjs/index.js +4 -4
  7. package/lib/cjs/index.js.map +1 -1
  8. package/lib/cjs/translations/__intergalactic-dynamic-locales.js +16 -16
  9. package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
  10. package/lib/es6/Carousel.js +527 -544
  11. package/lib/es6/Carousel.js.map +1 -1
  12. package/lib/es6/Carousel.types.js.map +1 -1
  13. package/lib/es6/translations/__intergalactic-dynamic-locales.js +15 -15
  14. package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
  15. package/lib/esm/Carousel.mjs +518 -481
  16. package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +1 -1
  17. package/lib/types/Carousel.types.d.ts +2 -11
  18. package/package.json +9 -8
  19. package/src/Carousel.tsx +15 -15
  20. package/src/Carousel.types.ts +2 -8
package/lib/esm/Carousel.mjs CHANGED
@@ -1,146 +1,133 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
- import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
4
- import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
5
- import _createClass from "@babel/runtime/helpers/esm/createClass";
6
- import _callSuper from "@babel/runtime/helpers/esm/callSuper";
7
- import _inherits from "@babel/runtime/helpers/esm/inherits";
8
2
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
9
- import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
10
- import { createBreakpoints } from "@semcore/breakpoints";
3
+ import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
4
+ import { createBreakpoints, Flex, Box } from "@semcore/base-components";
11
5
  import Button from "@semcore/button";
12
6
  import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
13
7
  import { findAllComponents } from "@semcore/core/lib/utils/findComponent";
14
8
  import logger from "@semcore/core/lib/utils/logger";
15
9
  import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
16
- import { Flex, Box } from "@semcore/flex-box";
17
10
  import ChevronLeft from "@semcore/icon/ChevronLeft/l";
18
11
  import ChevronRight from "@semcore/icon/ChevronRight/l";
19
12
  import Modal from "@semcore/modal";
20
13
  import React from "react";
21
14
  import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
22
15
  /*!__reshadow-styles__:"./style/carousel.shadow.css"*/
23
- var style = (
16
+ const style = (
24
17
  /*__reshadow_css_start__*/
25
18
  (sstyled.insert(
26
19
  /*__inner_css_start__*/
27
- '.___SCarousel_10z0a_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_10z0a_gg_{display:flex;transition:transform var(--duration_10z0a) ease-in-out}.___SContentBox_10z0a_gg_,.___SIndicator_10z0a_gg_,.___SModalBox_10z0a_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_10z0a_gg_:has(.___SItem_10z0a_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SImageBoxContainer_10z0a_gg_{position:relative;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SImageBoxContainer_10z0a_gg_:has(.___SItem_10z0a_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SImageBoxContainer_10z0a_gg_ .___SItem_10z0a_gg_:focus-visible{outline:0}.___SModalContainer_10z0a_gg_{display:flex;transition:transform var(--duration_10z0a) ease-in-out}.___SItem_10z0a_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_10z0a);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_10z0a_gg_>img{display:block}.___SItem_10z0a_gg_.__zoomIn_10z0a_gg_{cursor:zoom-in}.___SItem_10z0a_gg_.__zoomOut_10z0a_gg_{cursor:zoom-out}.___SIndicators_10z0a_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;outline:0;position:relative}.___SIndicator_10z0a_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;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}.___SIndicator_10z0a_gg_[aria-roledescription=slide]{width:100px;height:100px}@media (hover:hover){.___SIndicator_10z0a_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_10z0a_gg_.__active_10z0a_gg_{opacity:1}.___SIndicator_10z0a_gg_.__inverted_10z0a_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_10z0a_gg_,.___SPrev_10z0a_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_10z0a_gg_ .___SNextButton_10z0a_gg_ span:has(>svg:only-child),.___SNext_10z0a_gg_ .___SPrevButton_10z0a_gg_ span:has(>svg:only-child),.___SPrev_10z0a_gg_ .___SNextButton_10z0a_gg_ span:has(>svg:only-child),.___SPrev_10z0a_gg_ .___SPrevButton_10z0a_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)}.___SPrev_10z0a_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_10z0a_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_10z0a_gg_.__disabled_10z0a_gg_,.___SPrev_10z0a_gg_.__disabled_10z0a_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_10z0a_gg_{transition:none}}',
20
+ '.___SCarousel_13vnn_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_13vnn_gg_{display:flex;transition:transform var(--duration_13vnn) ease-in-out}.___SContentBox_13vnn_gg_,.___SIndicator_13vnn_gg_,.___SModalBox_13vnn_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_13vnn_gg_:has(.___SItem_13vnn_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SImageBoxContainer_13vnn_gg_{position:relative;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SImageBoxContainer_13vnn_gg_:has(.___SItem_13vnn_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SImageBoxContainer_13vnn_gg_ .___SItem_13vnn_gg_:focus-visible{outline:0}.___SModalContainer_13vnn_gg_{display:flex;transition:transform var(--duration_13vnn) ease-in-out}.___SItem_13vnn_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_13vnn);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_13vnn_gg_>img{display:block}.___SItem_13vnn_gg_.__zoomIn_13vnn_gg_{cursor:zoom-in}.___SItem_13vnn_gg_.__zoomOut_13vnn_gg_{cursor:zoom-out}.___SIndicators_13vnn_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;outline:0;position:relative}.___SIndicator_13vnn_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;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}.___SIndicator_13vnn_gg_[aria-roledescription=slide]{width:100px;height:100px}@media (hover:hover){.___SIndicator_13vnn_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_13vnn_gg_.__active_13vnn_gg_{opacity:1}.___SIndicator_13vnn_gg_.__inverted_13vnn_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_13vnn_gg_,.___SPrev_13vnn_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_13vnn_gg_ .___SNextButton_13vnn_gg_ span:has(>svg:only-child),.___SNext_13vnn_gg_ .___SPrevButton_13vnn_gg_ span:has(>svg:only-child),.___SPrev_13vnn_gg_ .___SNextButton_13vnn_gg_ span:has(>svg:only-child),.___SPrev_13vnn_gg_ .___SPrevButton_13vnn_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)}.___SPrev_13vnn_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_13vnn_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_13vnn_gg_.__disabled_13vnn_gg_,.___SPrev_13vnn_gg_.__disabled_13vnn_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_13vnn_gg_{transition:none}}',
28
21
  /*__inner_css_end__*/
29
- "10z0a_gg_"
22
+ "13vnn_gg_"
30
23
  ), /*__reshadow_css_end__*/
31
24
  {
32
- "__SCarousel": "___SCarousel_10z0a_gg_",
33
- "__SContainer": "___SContainer_10z0a_gg_",
34
- "--duration": "--duration_10z0a",
35
- "__SContentBox": "___SContentBox_10z0a_gg_",
36
- "__SModalBox": "___SModalBox_10z0a_gg_",
37
- "__SIndicator": "___SIndicator_10z0a_gg_",
38
- "__SItem": "___SItem_10z0a_gg_",
39
- "__SModalContainer": "___SModalContainer_10z0a_gg_",
40
- "_zoomIn": "__zoomIn_10z0a_gg_",
41
- "_zoomOut": "__zoomOut_10z0a_gg_",
42
- "__SIndicators": "___SIndicators_10z0a_gg_",
43
- "_active": "__active_10z0a_gg_",
44
- "_inverted": "__inverted_10z0a_gg_",
45
- "__SPrev": "___SPrev_10z0a_gg_",
46
- "__SNext": "___SNext_10z0a_gg_",
47
- "_disabled": "__disabled_10z0a_gg_",
48
- "__SImageBoxContainer": "___SImageBoxContainer_10z0a_gg_",
49
- "--transform": "--transform_10z0a",
50
- "__SPrevButton": "___SPrevButton_10z0a_gg_",
51
- "__SNextButton": "___SNextButton_10z0a_gg_"
25
+ "__SCarousel": "___SCarousel_13vnn_gg_",
26
+ "__SContainer": "___SContainer_13vnn_gg_",
27
+ "--duration": "--duration_13vnn",
28
+ "__SContentBox": "___SContentBox_13vnn_gg_",
29
+ "__SModalBox": "___SModalBox_13vnn_gg_",
30
+ "__SIndicator": "___SIndicator_13vnn_gg_",
31
+ "__SItem": "___SItem_13vnn_gg_",
32
+ "__SModalContainer": "___SModalContainer_13vnn_gg_",
33
+ "_zoomIn": "__zoomIn_13vnn_gg_",
34
+ "_zoomOut": "__zoomOut_13vnn_gg_",
35
+ "__SIndicators": "___SIndicators_13vnn_gg_",
36
+ "_active": "__active_13vnn_gg_",
37
+ "_inverted": "__inverted_13vnn_gg_",
38
+ "__SPrev": "___SPrev_13vnn_gg_",
39
+ "__SNext": "___SNext_13vnn_gg_",
40
+ "_disabled": "__disabled_13vnn_gg_",
41
+ "__SImageBoxContainer": "___SImageBoxContainer_13vnn_gg_",
42
+ "--transform": "--transform_13vnn",
43
+ "__SPrevButton": "___SPrevButton_13vnn_gg_",
44
+ "__SNextButton": "___SNextButton_13vnn_gg_"
52
45
  })
53
46
  );
54
- var MAP_TRANSFORM = {
47
+ const MAP_TRANSFORM = {
55
48
  ArrowLeft: "left",
56
49
  ArrowRight: "right"
57
50
  };
58
- var enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)];
59
- var media = ["(min-width: 481px)", "(max-width: 480px)"];
60
- var BreakPoints = createBreakpoints(media);
61
- var isSmallScreen = function isSmallScreen2(index) {
62
- return index === 1;
63
- };
64
- var CarouselRoot = /* @__PURE__ */ (function(_Component) {
65
- function CarouselRoot2(props) {
66
- var _ref18, _props$index;
67
- var _this;
68
- _classCallCheck(this, CarouselRoot2);
69
- _this = _callSuper(this, CarouselRoot2, [props]);
70
- _defineProperty(_this, "defaultItemsCount", 0);
71
- _defineProperty(_this, "refCarousel", /* @__PURE__ */ React.createRef());
72
- _defineProperty(_this, "refContainer", /* @__PURE__ */ React.createRef());
73
- _defineProperty(_this, "refModalContainer", /* @__PURE__ */ React.createRef());
74
- _defineProperty(_this, "_touchStartCoord", -1);
75
- _defineProperty(_this, "handlerKeyDown", function(e) {
76
- var firstSlide = 1;
77
- var lastSlide = _this.state.items.length + 1;
51
+ const enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)];
52
+ const media = ["(min-width: 481px)", "(max-width: 480px)"];
53
+ const BreakPoints = createBreakpoints(media);
54
+ const isSmallScreen = (index) => index === 1;
55
+ class CarouselRoot extends Component {
56
+ constructor(props) {
57
+ super(props);
58
+ _defineProperty(this, "defaultItemsCount", 0);
59
+ _defineProperty(this, "refCarousel", /* @__PURE__ */ React.createRef());
60
+ _defineProperty(this, "refContainer", /* @__PURE__ */ React.createRef());
61
+ _defineProperty(this, "refModalContainer", /* @__PURE__ */ React.createRef());
62
+ _defineProperty(this, "_touchStartCoord", -1);
63
+ _defineProperty(this, "handlerKeyDown", (e) => {
64
+ const firstSlide = 1;
65
+ const lastSlide = this.state.items.length + 1;
78
66
  switch (e.key) {
79
67
  case "ArrowLeft":
80
68
  case "ArrowRight": {
81
69
  e.preventDefault();
82
- _this.transformItem(MAP_TRANSFORM[e.key]);
70
+ this.transformItem(MAP_TRANSFORM[e.key]);
83
71
  break;
84
72
  }
85
73
  case "Home": {
86
74
  e.preventDefault();
87
- _this.slideToValue(firstSlide);
75
+ this.slideToValue(firstSlide);
88
76
  break;
89
77
  }
90
78
  case "End": {
91
79
  e.preventDefault();
92
- _this.slideToValue(lastSlide);
80
+ this.slideToValue(lastSlide);
93
81
  break;
94
82
  }
95
83
  }
96
84
  if (e.metaKey) {
97
85
  if (e.key === "ArrowLeft") {
98
86
  e.preventDefault();
99
- _this.slideToValue(firstSlide);
87
+ this.slideToValue(firstSlide);
100
88
  } else if (e.key === "ArrowRight") {
101
89
  e.preventDefault();
102
- _this.slideToValue(lastSlide);
90
+ this.slideToValue(lastSlide);
103
91
  }
104
92
  }
105
93
  if ((e.key === "Enter" || e.key === " ") && e.target instanceof HTMLDivElement && e.target.role === "tabpanel") {
106
- _this.handleToggleZoomModal();
94
+ this.handleToggleZoomModal();
107
95
  }
108
96
  });
109
- _defineProperty(_this, "toggleItem", function(item) {
110
- var removeItem = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
111
- _this.setState(function(prevState) {
112
- var newItems = removeItem ? prevState.items.filter(function(element) {
113
- return element.node !== item.node;
114
- }) : [].concat(_toConsumableArray(prevState.items), [item]);
97
+ _defineProperty(this, "toggleItem", (item, removeItem = false) => {
98
+ this.setState((prevState) => {
99
+ const newItems = removeItem ? prevState.items.filter((element) => element.node !== item.node) : [...prevState.items, item];
115
100
  return {
116
101
  items: newItems
117
102
  };
118
103
  });
119
104
  if (!removeItem) {
120
- _this.defaultItemsCount++;
105
+ this.defaultItemsCount++;
121
106
  }
122
107
  });
123
- _defineProperty(_this, "transformContainer", function() {
124
- var transform = _this.state.selectedIndex * -1 * 100;
125
- if (_this.refContainer.current) {
126
- _this.refContainer.current.style.transform = "translateX(".concat(transform, "%)");
108
+ _defineProperty(this, "transformContainer", () => {
109
+ const transform = this.state.selectedIndex * -1 * 100;
110
+ if (this.refContainer.current) {
111
+ this.refContainer.current.style.transform = `translateX(${transform}%)`;
127
112
  }
128
- if (_this.refModalContainer.current) {
129
- _this.refModalContainer.current.style.transform = "translateX(".concat(transform, "%)");
113
+ if (this.refModalContainer.current) {
114
+ this.refModalContainer.current.style.transform = `translateX(${transform}%)`;
130
115
  }
131
116
  });
132
- _defineProperty(_this, "getDirection", function(currentIndex, nextIndex) {
133
- var bounded = _this.asProps.bounded;
117
+ _defineProperty(this, "getDirection", (currentIndex, nextIndex) => {
118
+ const {
119
+ bounded
120
+ } = this.asProps;
134
121
  if (bounded) {
135
122
  return currentIndex < nextIndex ? "right" : "left";
136
123
  }
137
- var items = _this.state.items;
138
- var listIndex = items.map(function(_, ind) {
139
- return ind;
140
- });
141
- var tmpArr = _toConsumableArray(listIndex);
142
- var minTmpArr = tmpArr[0];
143
- var maxTmpArr = tmpArr[tmpArr.length - 1];
124
+ const {
125
+ items
126
+ } = this.state;
127
+ const listIndex = items.map((_, ind) => ind);
128
+ const tmpArr = [...listIndex];
129
+ const minTmpArr = tmpArr[0];
130
+ const maxTmpArr = tmpArr[tmpArr.length - 1];
144
131
  if (tmpArr.length === 2) {
145
132
  return currentIndex < nextIndex ? "right" : "left";
146
133
  }
@@ -152,366 +139,381 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
152
139
  tmpArr.shift();
153
140
  tmpArr.push(minTmpArr);
154
141
  }
155
- var tmpCurrentIndex = tmpArr.indexOf(currentIndex);
156
- var left = tmpArr.indexOf(nextIndex);
142
+ const tmpCurrentIndex = tmpArr.indexOf(currentIndex);
143
+ const left = tmpArr.indexOf(nextIndex);
157
144
  return left - tmpCurrentIndex < 0 ? "left" : "right";
158
145
  });
159
- _defineProperty(_this, "slideToValue", function(nextIndex) {
160
- var selectedIndex = _this.state.selectedIndex;
161
- var direction = selectedIndex < nextIndex ? "right" : "left";
162
- var diff = Math.abs(selectedIndex - nextIndex);
146
+ _defineProperty(this, "slideToValue", (nextIndex) => {
147
+ const {
148
+ selectedIndex
149
+ } = this.state;
150
+ const direction = selectedIndex < nextIndex ? "right" : "left";
151
+ let diff = Math.abs(selectedIndex - nextIndex);
163
152
  while (diff > 0) {
164
- _this.transformItem(direction);
153
+ this.transformItem(direction);
165
154
  diff--;
166
155
  }
167
156
  });
168
- _defineProperty(_this, "transformItem", function(direction) {
169
- var bounded = _this.asProps.bounded;
170
- var _this$state = _this.state, items = _this$state.items, selectedIndex = _this$state.selectedIndex;
171
- var maxIndexIndicator = items.length - 1;
157
+ _defineProperty(this, "transformItem", (direction) => {
158
+ const {
159
+ bounded
160
+ } = this.asProps;
161
+ const {
162
+ items,
163
+ selectedIndex
164
+ } = this.state;
165
+ const maxIndexIndicator = items.length - 1;
172
166
  if (direction === "right") {
173
167
  if (bounded && selectedIndex === maxIndexIndicator) {
174
- _this.handlers.index(maxIndexIndicator);
168
+ this.handlers.index(maxIndexIndicator);
175
169
  return;
176
170
  }
177
- if (_this.isControlled) {
178
- _this.handlers.index(selectedIndex === maxIndexIndicator ? 0 : selectedIndex + 1);
171
+ if (this.isControlled) {
172
+ this.handlers.index(selectedIndex === maxIndexIndicator ? 0 : selectedIndex + 1);
179
173
  return;
180
174
  }
181
- _this.setState(function(prevState) {
182
- return {
183
- selectedIndex: prevState.selectedIndex + 1
184
- };
185
- }, function() {
186
- _this.transformContainer();
187
- _this.handlers.index(_this.getIndex());
175
+ this.setState((prevState) => ({
176
+ selectedIndex: prevState.selectedIndex + 1
177
+ }), () => {
178
+ this.transformContainer();
179
+ this.handlers.index(this.getIndex());
188
180
  });
189
181
  return;
190
182
  }
191
183
  if (direction === "left") {
192
184
  if (bounded && selectedIndex === 0) {
193
- _this.handlers.index(0);
185
+ this.handlers.index(0);
194
186
  return;
195
187
  }
196
- if (_this.isControlled) {
197
- _this.handlers.index(selectedIndex === 0 ? maxIndexIndicator : selectedIndex - 1);
188
+ if (this.isControlled) {
189
+ this.handlers.index(selectedIndex === 0 ? maxIndexIndicator : selectedIndex - 1);
198
190
  return;
199
191
  }
200
- _this.setState(function(prevState) {
201
- return {
202
- selectedIndex: prevState.selectedIndex - 1
203
- };
204
- }, function() {
205
- _this.transformContainer();
206
- _this.handlers.index(_this.getIndex());
192
+ this.setState((prevState) => ({
193
+ selectedIndex: prevState.selectedIndex - 1
194
+ }), () => {
195
+ this.transformContainer();
196
+ this.handlers.index(this.getIndex());
207
197
  });
208
198
  return;
209
199
  }
210
200
  });
211
- _defineProperty(_this, "bindHandlerClick", function(direction) {
212
- return function() {
213
- _this.transformItem(direction);
201
+ _defineProperty(this, "bindHandlerClick", (direction) => {
202
+ return () => {
203
+ this.transformItem(direction);
214
204
  };
215
205
  });
216
- _defineProperty(_this, "bindHandlerClickIndicator", function(value) {
217
- return function() {
218
- var _this$state2 = _this.state, selectedIndex = _this$state2.selectedIndex, items = _this$state2.items;
219
- if (!_this.isControlled && value !== selectedIndex) {
220
- var newValueIndex = Math.floor(selectedIndex / items.length) * items.length + value;
221
- _this.slideToValue(newValueIndex);
206
+ _defineProperty(this, "bindHandlerClickIndicator", (value) => {
207
+ return () => {
208
+ const {
209
+ selectedIndex,
210
+ items
211
+ } = this.state;
212
+ if (!this.isControlled && value !== selectedIndex) {
213
+ const newValueIndex = Math.floor(selectedIndex / items.length) * items.length + value;
214
+ this.slideToValue(newValueIndex);
222
215
  }
223
- _this.handlers.index(value);
216
+ this.handlers.index(value);
224
217
  };
225
218
  });
226
- _defineProperty(_this, "handlerTouchStart", function(e) {
227
- _this._touchStartCoord = e.changedTouches[0].clientX;
219
+ _defineProperty(this, "handlerTouchStart", (e) => {
220
+ this._touchStartCoord = e.changedTouches[0].clientX;
228
221
  });
229
- _defineProperty(_this, "handlerTouchEnd", function(e) {
230
- var touchEndCoord = e.changedTouches[0].clientX;
231
- var delta = touchEndCoord - _this._touchStartCoord;
222
+ _defineProperty(this, "handlerTouchEnd", (e) => {
223
+ const touchEndCoord = e.changedTouches[0].clientX;
224
+ const delta = touchEndCoord - this._touchStartCoord;
232
225
  if (delta > 50) {
233
- _this.transformItem("left");
226
+ this.transformItem("left");
234
227
  } else if (delta < -50) {
235
- _this.transformItem("right");
228
+ this.transformItem("right");
236
229
  }
237
230
  });
238
- _defineProperty(_this, "handleToggleZoomModal", function() {
239
- _this.setState(function(prevState) {
231
+ _defineProperty(this, "handleToggleZoomModal", () => {
232
+ this.setState((prevState) => {
240
233
  return {
241
234
  isOpenZoom: !prevState.isOpenZoom
242
235
  };
243
- }, function() {
244
- if (_this.state.isOpenZoom) {
245
- _this.transformContainer();
236
+ }, () => {
237
+ if (this.state.isOpenZoom) {
238
+ this.transformContainer();
246
239
  }
247
240
  });
248
241
  });
249
- _defineProperty(_this, "bindHandlerKeydownControl", function(direction) {
250
- return function(e) {
251
- if (e.key === "Enter" || e.key === " ") {
252
- e.preventDefault();
253
- _this.bindHandlerClick(direction)();
254
- }
255
- };
242
+ _defineProperty(this, "bindHandlerKeydownControl", (direction) => (e) => {
243
+ if (e.key === "Enter" || e.key === " ") {
244
+ e.preventDefault();
245
+ this.bindHandlerClick(direction)();
246
+ }
256
247
  });
257
- _this.isControlled = props.index !== void 0;
258
- _this.state = {
248
+ this.isControlled = props.index !== void 0;
249
+ this.state = {
259
250
  items: [],
260
251
  isOpenZoom: false,
261
- selectedIndex: (_ref18 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref18 !== void 0 ? _ref18 : 0
252
+ selectedIndex: props.index ?? props.defaultIndex ?? 0
262
253
  };
263
- return _this;
264
254
  }
265
- _inherits(CarouselRoot2, _Component);
266
- return _createClass(CarouselRoot2, [{
267
- key: "uncontrolledProps",
268
- value: function uncontrolledProps() {
269
- var _this2 = this;
270
- return {
271
- index: [null, function(_index) {
272
- var _this2$refCarousel$cu;
273
- (_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0 || _this2$refCarousel$cu.blur();
274
- setTimeout(function() {
275
- var _this2$refCarousel$cu2;
276
- (_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0 || _this2$refCarousel$cu2.focus();
277
- }, 0);
278
- }]
279
- };
280
- }
281
- }, {
282
- key: "componentDidMount",
283
- value: function componentDidMount() {
284
- var selectedIndex = this.state.selectedIndex;
285
- if (selectedIndex !== 0) {
286
- if (selectedIndex < 0 || selectedIndex >= this.defaultItemsCount) {
287
- logger.warn(true, "You couldn't use value for the `index` or `defaultIndex` not from `Item's` length range.", CarouselRoot2.displayName);
288
- this.setState({
289
- selectedIndex: 0
290
- });
291
- } else {
292
- this.transformContainer();
293
- }
294
- }
295
- var deprecatedComponents = findAllComponents(this.asProps.Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
296
- logger.warn(deprecatedComponents.length > 0, "Please, try to remove `Prev`, `Next`, `Indicators` and other children components from your Carousel, except only `Item` elements.", CarouselRoot2.displayName);
297
- }
298
- }, {
299
- key: "componentDidUpdate",
300
- value: function componentDidUpdate(prevProps) {
301
- var _this3 = this;
302
- var index = this.asProps.index;
303
- if (prevProps.index !== index && this.isControlled && index !== void 0) {
255
+ uncontrolledProps() {
256
+ return {
257
+ index: [null, (_index) => {
258
+ var _a;
259
+ (_a = this.refCarousel.current) == null ? void 0 : _a.blur();
260
+ setTimeout(() => {
261
+ var _a2;
262
+ (_a2 = this.refCarousel.current) == null ? void 0 : _a2.focus();
263
+ }, 0);
264
+ }]
265
+ };
266
+ }
267
+ componentDidMount() {
268
+ const {
269
+ selectedIndex
270
+ } = this.state;
271
+ if (selectedIndex !== 0) {
272
+ if (selectedIndex < 0 || selectedIndex >= this.defaultItemsCount) {
273
+ logger.warn(true, `You couldn't use value for the \`index\` or \`defaultIndex\` not from \`Item's\` length range.`, CarouselRoot.displayName);
304
274
  this.setState({
305
- selectedIndex: index
306
- }, function() {
307
- return _this3.transformContainer();
275
+ selectedIndex: 0
308
276
  });
277
+ } else {
278
+ this.transformContainer();
309
279
  }
310
280
  }
311
- }, {
312
- key: "getContainerProps",
313
- value: function getContainerProps() {
314
- var duration = this.asProps.duration;
315
- return {
316
- ref: this.refContainer,
317
- duration
318
- };
319
- }
320
- }, {
321
- key: "getItemProps",
322
- value: function getItemProps(_props, index) {
323
- var zoom = this.asProps.zoom;
324
- var isCurrent = this.isSelected(index);
325
- return {
326
- toggleItem: this.toggleItem,
327
- uid: this.asProps.uid,
328
- index,
329
- current: isCurrent,
330
- zoomIn: zoom,
331
- onToggleZoomModal: this.handleToggleZoomModal,
332
- transform: isCurrent ? this.getTransform() : void 0,
333
- isOpenZoom: this.state.isOpenZoom
334
- };
335
- }
336
- }, {
337
- key: "getPrevProps",
338
- value: function getPrevProps() {
339
- var _this$asProps = this.asProps, bounded = _this$asProps.bounded, getI18nText = _this$asProps.getI18nText, uid = _this$asProps.uid;
340
- var _this$state3 = this.state, items = _this$state3.items, selectedIndex = _this$state3.selectedIndex;
341
- var disabled = false;
342
- if (items.length && bounded) {
343
- disabled = selectedIndex === 0;
344
- }
345
- return {
346
- "onClick": this.bindHandlerClick("left"),
347
- "onKeyDown": this.bindHandlerKeydownControl("left"),
348
- disabled,
349
- "label": getI18nText("prev"),
350
- "aria-controls": "igc-".concat(uid, "-carousel")
351
- };
352
- }
353
- }, {
354
- key: "getNextProps",
355
- value: function getNextProps() {
356
- var _this$asProps2 = this.asProps, bounded = _this$asProps2.bounded, getI18nText = _this$asProps2.getI18nText, uid = _this$asProps2.uid;
357
- var _this$state4 = this.state, items = _this$state4.items, selectedIndex = _this$state4.selectedIndex;
358
- var disabled = false;
359
- if (items.length && bounded) {
360
- disabled = selectedIndex === items.length - 1;
361
- }
362
- return {
363
- "onClick": this.bindHandlerClick("right"),
364
- "onKeyDown": this.bindHandlerKeydownControl("right"),
365
- disabled,
366
- "label": getI18nText("next"),
367
- "aria-controls": "igc-".concat(uid, "-carousel")
368
- };
281
+ const deprecatedComponents = findAllComponents(this.asProps.Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
282
+ logger.warn(deprecatedComponents.length > 0, "Please, try to remove `Prev`, `Next`, `Indicators` and other children components from your Carousel, except only `Item` elements.", CarouselRoot.displayName);
283
+ }
284
+ componentDidUpdate(prevProps) {
285
+ const {
286
+ index
287
+ } = this.asProps;
288
+ if (prevProps.index !== index && this.isControlled && index !== void 0) {
289
+ this.setState({
290
+ selectedIndex: index
291
+ }, () => this.transformContainer());
369
292
  }
370
- }, {
371
- key: "getIndicatorsProps",
372
- value: function getIndicatorsProps() {
373
- var _this4 = this;
374
- var items = this.state.items;
375
- var getI18nText = this.asProps.getI18nText;
376
- return {
377
- "items": items.map(function(_item, key) {
378
- return {
379
- active: _this4.isSelected(key),
380
- onClick: _this4.bindHandlerClickIndicator(key),
381
- key
382
- };
383
- }),
384
- "role": "tablist",
385
- "tabIndex": 0,
386
- "aria-label": getI18nText("slides")
387
- };
293
+ }
294
+ getContainerProps() {
295
+ const {
296
+ duration
297
+ } = this.asProps;
298
+ return {
299
+ ref: this.refContainer,
300
+ duration
301
+ };
302
+ }
303
+ getItemProps(_props, index) {
304
+ const {
305
+ zoom
306
+ } = this.asProps;
307
+ const isCurrent = this.isSelected(index);
308
+ return {
309
+ toggleItem: this.toggleItem,
310
+ uid: this.asProps.uid,
311
+ index,
312
+ current: isCurrent,
313
+ zoomIn: zoom,
314
+ onToggleZoomModal: this.handleToggleZoomModal,
315
+ transform: isCurrent ? this.getTransform() : void 0,
316
+ isOpenZoom: this.state.isOpenZoom
317
+ };
318
+ }
319
+ getPrevProps() {
320
+ const {
321
+ bounded,
322
+ getI18nText,
323
+ uid
324
+ } = this.asProps;
325
+ const {
326
+ items,
327
+ selectedIndex
328
+ } = this.state;
329
+ let disabled = false;
330
+ if (items.length && bounded) {
331
+ disabled = selectedIndex === 0;
388
332
  }
389
- }, {
390
- key: "getIndicatorProps",
391
- value: function getIndicatorProps(_, index) {
392
- var isCurrent = this.isSelected(index);
393
- var getI18nText = this.asProps.getI18nText;
394
- return {
395
- "role": "tab",
396
- "aria-selected": isCurrent,
397
- "aria-controls": "igc-".concat(this.asProps.uid, "-carousel-item-").concat(index),
398
- "aria-label": getI18nText("slide", {
399
- slideNumber: index + 1
400
- })
401
- };
333
+ return {
334
+ "onClick": this.bindHandlerClick("left"),
335
+ "onKeyDown": this.bindHandlerKeydownControl("left"),
336
+ disabled,
337
+ "label": getI18nText("prev"),
338
+ "aria-controls": `igc-${uid}-carousel`
339
+ };
340
+ }
341
+ getNextProps() {
342
+ const {
343
+ bounded,
344
+ getI18nText,
345
+ uid
346
+ } = this.asProps;
347
+ const {
348
+ items,
349
+ selectedIndex
350
+ } = this.state;
351
+ let disabled = false;
352
+ if (items.length && bounded) {
353
+ disabled = selectedIndex === items.length - 1;
402
354
  }
403
- }, {
404
- key: "getTransform",
405
- value: function getTransform() {
406
- var _this$state5 = this.state, items = _this$state5.items, selectedIndex = _this$state5.selectedIndex;
407
- var direction = selectedIndex > 0 ? 1 : -1;
408
- var count = items.length === 0 ? 0 : Math.floor(selectedIndex / items.length) * direction;
409
- var transform = selectedIndex > 0 && selectedIndex < items.length ? 0 : 100 * direction * count * items.length;
410
- return transform;
355
+ return {
356
+ "onClick": this.bindHandlerClick("right"),
357
+ "onKeyDown": this.bindHandlerKeydownControl("right"),
358
+ disabled,
359
+ "label": getI18nText("next"),
360
+ "aria-controls": `igc-${uid}-carousel`
361
+ };
362
+ }
363
+ getIndicatorsProps() {
364
+ const {
365
+ items
366
+ } = this.state;
367
+ const {
368
+ getI18nText
369
+ } = this.asProps;
370
+ return {
371
+ "items": items.map((_item, key) => ({
372
+ active: this.isSelected(key),
373
+ onClick: this.bindHandlerClickIndicator(key),
374
+ key
375
+ })),
376
+ "role": "tablist",
377
+ "tabIndex": 0,
378
+ "aria-label": getI18nText("slides")
379
+ };
380
+ }
381
+ getIndicatorProps(_, index) {
382
+ const isCurrent = this.isSelected(index);
383
+ const {
384
+ getI18nText
385
+ } = this.asProps;
386
+ return {
387
+ "role": "tab",
388
+ "aria-selected": isCurrent,
389
+ "aria-controls": `igc-${this.asProps.uid}-carousel-item-${index}`,
390
+ "aria-label": getI18nText("slide", {
391
+ slideNumber: index + 1
392
+ })
393
+ };
394
+ }
395
+ getTransform() {
396
+ const {
397
+ items,
398
+ selectedIndex
399
+ } = this.state;
400
+ const direction = selectedIndex > 0 ? 1 : -1;
401
+ const count = items.length === 0 ? 0 : Math.floor(selectedIndex / items.length) * direction;
402
+ const transform = selectedIndex > 0 && selectedIndex < items.length ? 0 : 100 * direction * count * items.length;
403
+ return transform;
404
+ }
405
+ getIndex() {
406
+ const {
407
+ items,
408
+ selectedIndex
409
+ } = this.state;
410
+ if (items.length === 0) {
411
+ return 0;
411
412
  }
412
- }, {
413
- key: "getIndex",
414
- value: function getIndex() {
415
- var _this$state6 = this.state, items = _this$state6.items, selectedIndex = _this$state6.selectedIndex;
416
- if (items.length === 0) {
417
- return 0;
418
- }
419
- if (selectedIndex >= 0) {
420
- return selectedIndex % items.length;
421
- }
422
- return (items.length + selectedIndex % items.length) % items.length;
413
+ if (selectedIndex >= 0) {
414
+ return selectedIndex % items.length;
423
415
  }
424
- }, {
425
- key: "isSelected",
426
- value: function isSelected(index) {
427
- var items = this.state.items;
428
- if (items.length === 0) {
429
- return true;
430
- }
431
- return index === this.getIndex();
416
+ return (items.length + selectedIndex % items.length) % items.length;
417
+ }
418
+ isSelected(index) {
419
+ const {
420
+ items
421
+ } = this.state;
422
+ if (items.length === 0) {
423
+ return true;
432
424
  }
433
- }, {
434
- key: "renderModal",
435
- value: function renderModal(isSmall, ComponentItems) {
436
- var _ref = this.asProps, _ref0, _this5 = this;
437
- var SModalContainer = Box;
438
- var SModalBox = Box;
439
- var SImageBoxContainer = Box;
440
- var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, uid = _this$asProps3.uid, duration = _this$asProps3.duration, zoomWidth = _this$asProps3.zoomWidth;
441
- var isOpenZoom = this.state.isOpenZoom;
442
- return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(Modal, _ref0.cn("Modal", {
443
- "visible": isOpenZoom,
444
- "onClose": this.handleToggleZoomModal,
445
- "ghost": true,
446
- "closable": !isSmall
447
- }), /* @__PURE__ */ React.createElement(Flex, _ref0.cn("Flex", {
448
- "direction": isSmall ? "column" : "row"
449
- }), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Prev, {
450
- inverted: true
451
- }), /* @__PURE__ */ React.createElement(SImageBoxContainer, _ref0.cn("SImageBoxContainer", {}), /* @__PURE__ */ React.createElement(SModalBox, _ref0.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref0.cn("SModalContainer", _objectSpread({}, assignProps({
425
+ return index === this.getIndex();
426
+ }
427
+ renderModal(isSmall, ComponentItems) {
428
+ var _ref = this.asProps, _ref0;
429
+ const SModalContainer = Box;
430
+ const SModalBox = Box;
431
+ const SImageBoxContainer = Box;
432
+ const {
433
+ styles,
434
+ uid,
435
+ duration,
436
+ zoomWidth
437
+ } = this.asProps;
438
+ const {
439
+ isOpenZoom
440
+ } = this.state;
441
+ return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(Modal, _ref0.cn("Modal", {
442
+ "visible": isOpenZoom,
443
+ "onClose": this.handleToggleZoomModal,
444
+ "ghost": true,
445
+ "closable": !isSmall
446
+ }), /* @__PURE__ */ React.createElement(Flex, _ref0.cn("Flex", {
447
+ "direction": isSmall ? "column" : "row"
448
+ }), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Prev, {
449
+ inverted: true
450
+ }), /* @__PURE__ */ React.createElement(SImageBoxContainer, _ref0.cn("SImageBoxContainer", {}), /* @__PURE__ */ React.createElement(SModalBox, _ref0.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref0.cn("SModalContainer", {
451
+ ...assignProps({
452
452
  "aria-live": "polite",
453
- "use:duration": "".concat(duration, "ms"),
453
+ "use:duration": `${duration}ms`,
454
454
  "ref": this.refModalContainer,
455
455
  "use:w": void 0,
456
456
  "wMax": zoomWidth
457
- }, _ref))), ComponentItems.map(function(item, i) {
458
- return /* @__PURE__ */ React.createElement(Carousel.Item, _extends({}, item.props, {
459
- key: item.key,
460
- uid,
461
- index: i,
462
- current: _this5.isSelected(i),
463
- toggleItem: void 0,
464
- zoom: true,
465
- zoomOut: true,
466
- transform: _this5.isSelected(i) ? _this5.getTransform() : void 0
467
- }));
468
- })))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref0.cn("Flex", {
469
- "justifyContent": "center",
470
- "mt": 2
471
- }), /* @__PURE__ */ React.createElement(Carousel.Prev, {
472
- inverted: true
473
- }), /* @__PURE__ */ React.createElement(Carousel.Next, {
474
- inverted: true
475
- })) : /* @__PURE__ */ React.createElement(Carousel.Next, {
476
- inverted: true
477
- })), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Indicators, {
478
- inverted: true
457
+ }, _ref)
458
+ }), ComponentItems.map((item, i) => {
459
+ return /* @__PURE__ */ React.createElement(Carousel.Item, _extends({}, item.props, {
460
+ key: item.key,
461
+ uid,
462
+ index: i,
463
+ current: this.isSelected(i),
464
+ toggleItem: void 0,
465
+ zoom: true,
466
+ zoomOut: true,
467
+ transform: this.isSelected(i) ? this.getTransform() : void 0
479
468
  }));
480
- }
481
- }, {
482
- key: "render",
483
- value: function render() {
484
- var _ref2 = this.asProps, _ref1, _this6 = this;
485
- var SCarousel = Box;
486
- var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, uid = _this$asProps4.uid, hasZoom = _this$asProps4.zoom, ariaLabel = _this$asProps4["aria-label"], indicators = _this$asProps4.indicators, getI18nText = _this$asProps4.getI18nText;
487
- var ComponentItems = findAllComponents(Children, ["Carousel.Item"]);
488
- var Controls = findAllComponents(Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
489
- return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref1.cn("SCarousel", _objectSpread({}, assignProps({
469
+ })))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref0.cn("Flex", {
470
+ "justifyContent": "center",
471
+ "mt": 2
472
+ }), /* @__PURE__ */ React.createElement(Carousel.Prev, {
473
+ inverted: true
474
+ }), /* @__PURE__ */ React.createElement(Carousel.Next, {
475
+ inverted: true
476
+ })) : /* @__PURE__ */ React.createElement(Carousel.Next, {
477
+ inverted: true
478
+ })), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Indicators, {
479
+ inverted: true
480
+ }));
481
+ }
482
+ render() {
483
+ var _ref2 = this.asProps, _ref1;
484
+ const SCarousel = Box;
485
+ const {
486
+ styles,
487
+ Children,
488
+ uid,
489
+ zoom: hasZoom,
490
+ "aria-label": ariaLabel,
491
+ indicators,
492
+ getI18nText
493
+ } = this.asProps;
494
+ const ComponentItems = findAllComponents(Children, ["Carousel.Item"]);
495
+ const Controls = findAllComponents(Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
496
+ return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref1.cn("SCarousel", {
497
+ ...assignProps({
490
498
  "role": "region",
491
499
  "aria-roledescription": getI18nText("Carousel:aria-roledescription"),
492
500
  "onKeyDown": this.handlerKeyDown,
493
501
  "onTouchStart": this.handlerTouchStart,
494
502
  "onTouchEnd": this.handlerTouchEnd,
495
503
  "ref": this.refCarousel,
496
- "id": "igc-".concat(uid, "-carousel")
497
- }, _ref2))), Controls.length === 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, _ref1.cn("Flex", {}), /* @__PURE__ */ React.createElement(Carousel.Prev, null), /* @__PURE__ */ React.createElement(Carousel.ContentBox, null, /* @__PURE__ */ React.createElement(Carousel.Container, {
498
- "aria-label": ariaLabel
499
- }, /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {})))), /* @__PURE__ */ React.createElement(Carousel.Next, null)), indicators === "default" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null), indicators === "preview" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null, function() {
500
- return ComponentItems.map(function(item, index) {
501
- return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({}, item.props, {
502
- key: item.key,
503
- w: void 0,
504
- "aria-roledescription": getI18nText("Carousel.Indicator:aria-roledescription"),
505
- active: _this6.isSelected(index),
506
- onClick: _this6.bindHandlerClickIndicator(index)
507
- }));
508
- });
509
- })) : /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {})), hasZoom && /* @__PURE__ */ React.createElement(BreakPoints, _ref1.cn("BreakPoints", {}), /* @__PURE__ */ React.createElement(BreakPoints.Context.Consumer, null, function(mediaIndex) {
510
- return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
511
- })));
512
- }
513
- }]);
514
- })(Component);
504
+ "id": `igc-${uid}-carousel`
505
+ }, _ref2)
506
+ }), Controls.length === 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, _ref1.cn("Flex", {}), /* @__PURE__ */ React.createElement(Carousel.Prev, null), /* @__PURE__ */ React.createElement(Carousel.ContentBox, null, /* @__PURE__ */ React.createElement(Carousel.Container, {
507
+ "aria-label": ariaLabel
508
+ }, /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {})))), /* @__PURE__ */ React.createElement(Carousel.Next, null)), indicators === "default" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null), indicators === "preview" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null, () => ComponentItems.map((item, index) => /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({}, item.props, {
509
+ key: item.key,
510
+ w: void 0,
511
+ "aria-roledescription": getI18nText("Carousel.Indicator:aria-roledescription"),
512
+ active: this.isSelected(index),
513
+ onClick: this.bindHandlerClickIndicator(index)
514
+ }))))) : /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {})), hasZoom && /* @__PURE__ */ React.createElement(BreakPoints, _ref1.cn("BreakPoints", {}), /* @__PURE__ */ React.createElement(BreakPoints.Context.Consumer, null, (mediaIndex) => this.renderModal(isSmallScreen(mediaIndex), ComponentItems))));
515
+ }
516
+ }
515
517
  _defineProperty(CarouselRoot, "displayName", "Carousel");
516
518
  _defineProperty(CarouselRoot, "defaultProps", {
517
519
  defaultIndex: 0,
@@ -524,94 +526,110 @@ _defineProperty(CarouselRoot, "defaultProps", {
524
526
  });
525
527
  _defineProperty(CarouselRoot, "style", style);
526
528
  _defineProperty(CarouselRoot, "enhance", enhance);
527
- var Container = function Container2(props) {
529
+ function Container(props) {
528
530
  var _ref3 = arguments[0], _ref10;
529
- var SContainer = Box;
530
- var styles = props.styles, duration = props.duration;
531
- return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref10.cn("SContainer", _objectSpread({}, assignProps({
532
- "use:duration": "".concat(duration, "ms"),
533
- "aria-live": "polite"
534
- }, _ref3))));
535
- };
536
- var ContentBox = function ContentBox2(props) {
531
+ const SContainer = Box;
532
+ const {
533
+ styles,
534
+ duration
535
+ } = props;
536
+ return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref10.cn("SContainer", {
537
+ ...assignProps({
538
+ "use:duration": `${duration}ms`,
539
+ "aria-live": "polite"
540
+ }, _ref3)
541
+ }));
542
+ }
543
+ function ContentBox(props) {
537
544
  var _ref4 = arguments[0], _ref11;
538
- var SContentBox = Box;
539
- var styles = props.styles;
540
- return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref11.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
541
- };
542
- var Item = /* @__PURE__ */ (function(_Component2) {
543
- function Item2() {
544
- var _this7;
545
- _classCallCheck(this, Item2);
546
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
547
- args[_key] = arguments[_key];
548
- }
549
- _this7 = _callSuper(this, Item2, [].concat(args));
550
- _defineProperty(_this7, "refItem", /* @__PURE__ */ React.createRef());
551
- return _this7;
545
+ const SContentBox = Box;
546
+ const {
547
+ styles
548
+ } = props;
549
+ return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref11.cn("SContentBox", {
550
+ ...assignProps({}, _ref4)
551
+ }));
552
+ }
553
+ class Item extends Component {
554
+ constructor(...args) {
555
+ super(...args);
556
+ _defineProperty(this, "refItem", /* @__PURE__ */ React.createRef());
552
557
  }
553
- _inherits(Item2, _Component2);
554
- return _createClass(Item2, [{
555
- key: "componentDidMount",
556
- value: function componentDidMount() {
557
- var _this$props = this.props, toggleItem = _this$props.toggleItem, transform = _this$props.transform;
558
- var refItem = this.refItem.current;
559
- if (toggleItem && refItem) {
560
- toggleItem({
561
- node: refItem
562
- });
563
- }
564
- if (transform && refItem) {
565
- refItem.style.transform = "translateX(".concat(transform, "%)");
566
- }
558
+ componentDidMount() {
559
+ const {
560
+ toggleItem,
561
+ transform
562
+ } = this.props;
563
+ const refItem = this.refItem.current;
564
+ if (toggleItem && refItem) {
565
+ toggleItem({
566
+ node: refItem
567
+ });
567
568
  }
568
- }, {
569
- key: "componentWillUnmount",
570
- value: function componentWillUnmount() {
571
- var toggleItem = this.props.toggleItem;
572
- var refItem = this.refItem.current;
573
- if (toggleItem && refItem) {
574
- toggleItem({
575
- node: refItem
576
- }, true);
577
- }
569
+ if (transform && refItem) {
570
+ refItem.style.transform = `translateX(${transform}%)`;
578
571
  }
579
- }, {
580
- key: "componentDidUpdate",
581
- value: function componentDidUpdate(prevProps) {
582
- var transform = this.props.transform;
583
- var refItem = this.refItem.current;
584
- if (prevProps.transform !== transform && refItem) {
585
- refItem.style.transform = "translateX(".concat(transform, "%)");
586
- }
572
+ }
573
+ componentWillUnmount() {
574
+ const {
575
+ toggleItem
576
+ } = this.props;
577
+ const refItem = this.refItem.current;
578
+ if (toggleItem && refItem) {
579
+ toggleItem({
580
+ node: refItem
581
+ }, true);
587
582
  }
588
- }, {
589
- key: "render",
590
- value: function render() {
591
- var _ref5 = this.asProps, _ref12;
592
- var _this$props2 = this.props, styles = _this$props2.styles, index = _this$props2.index, uid = _this$props2.uid, current = _this$props2.current, zoomIn = _this$props2.zoomIn, onToggleZoomModal = _this$props2.onToggleZoomModal;
593
- var SItem = Box;
594
- return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref12.cn("SItem", _objectSpread({}, assignProps({
583
+ }
584
+ componentDidUpdate(prevProps) {
585
+ const transform = this.props.transform;
586
+ const refItem = this.refItem.current;
587
+ if (prevProps.transform !== transform && refItem) {
588
+ refItem.style.transform = `translateX(${transform}%)`;
589
+ }
590
+ }
591
+ render() {
592
+ var _ref5 = this.asProps, _ref12;
593
+ const {
594
+ styles,
595
+ index,
596
+ uid,
597
+ current,
598
+ zoomIn,
599
+ onToggleZoomModal
600
+ } = this.props;
601
+ const SItem = Box;
602
+ return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref12.cn("SItem", {
603
+ ...assignProps({
595
604
  "ref": this.refItem,
596
605
  "role": "tabpanel",
597
- "data-carousel": "igc-".concat(uid, "-carousel"),
598
- "id": "igc-".concat(uid, "-carousel-item-").concat(index),
606
+ "data-carousel": `igc-${uid}-carousel`,
607
+ "id": `igc-${uid}-carousel-item-${index}`,
599
608
  "aria-current": current,
600
609
  "use:tabIndex": current ? 0 : -1,
601
610
  "onClick": zoomIn ? onToggleZoomModal : void 0,
602
611
  "zoomIn": zoomIn
603
- }, _ref5))));
604
- }
605
- }]);
606
- })(Component);
607
- var Prev = function Prev2(props) {
612
+ }, _ref5)
613
+ }));
614
+ }
615
+ }
616
+ function Prev(props) {
608
617
  var _ref6 = arguments[0], _ref13;
609
- var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top = props.top, top = _props$top === void 0 ? 0 : _props$top, inverted = props.inverted;
610
- var SPrev = Box;
611
- var SPrevButton = Button;
612
- return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SPrev, _ref13.cn("SPrev", _objectSpread({}, assignProps({
613
- "top": top
614
- }, _ref6))), children ? /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref13.cn("SPrevButton", {
618
+ const {
619
+ styles,
620
+ children,
621
+ Children,
622
+ label,
623
+ top = 0,
624
+ inverted
625
+ } = props;
626
+ const SPrev = Box;
627
+ const SPrevButton = Button;
628
+ return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SPrev, _ref13.cn("SPrev", {
629
+ ...assignProps({
630
+ "top": top
631
+ }, _ref6)
632
+ }), children ? /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref13.cn("SPrevButton", {
615
633
  "addonLeft": ChevronLeft,
616
634
  "aria-label": label,
617
635
  "theme": inverted ? "invert" : "muted",
@@ -619,15 +637,24 @@ var Prev = function Prev2(props) {
619
637
  "size": "l",
620
638
  "innerOutline": true
621
639
  })));
622
- };
623
- var Next = function Next2(props) {
640
+ }
641
+ function Next(props) {
624
642
  var _ref7 = arguments[0], _ref14;
625
- var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top2 = props.top, top = _props$top2 === void 0 ? 0 : _props$top2, inverted = props.inverted;
626
- var SNext = Box;
627
- var SNextButton = Button;
628
- return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SNext, _ref14.cn("SNext", _objectSpread({}, assignProps({
629
- "top": top
630
- }, _ref7))), children ? /* @__PURE__ */ React.createElement(Children, _ref14.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref14.cn("SNextButton", {
643
+ const {
644
+ styles,
645
+ children,
646
+ Children,
647
+ label,
648
+ top = 0,
649
+ inverted
650
+ } = props;
651
+ const SNext = Box;
652
+ const SNextButton = Button;
653
+ return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SNext, _ref14.cn("SNext", {
654
+ ...assignProps({
655
+ "top": top
656
+ }, _ref7)
657
+ }), children ? /* @__PURE__ */ React.createElement(Children, _ref14.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref14.cn("SNextButton", {
631
658
  "addonLeft": ChevronRight,
632
659
  "aria-label": label,
633
660
  "theme": inverted ? "invert" : "muted",
@@ -635,35 +662,45 @@ var Next = function Next2(props) {
635
662
  "size": "l",
636
663
  "innerOutline": true
637
664
  })));
638
- };
639
- var Indicators = function Indicators2(_ref19) {
665
+ }
666
+ function Indicators({
667
+ items,
668
+ styles,
669
+ Children,
670
+ inverted
671
+ }) {
640
672
  var _ref8 = arguments[0], _ref16;
641
- var items = _ref19.items, styles = _ref19.styles, Children = _ref19.Children, inverted = _ref19.inverted;
642
- var SIndicators = Box;
673
+ const SIndicators = Box;
643
674
  if (Children.origin) {
644
675
  var _ref15;
645
- return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref15.cn("SIndicators", _objectSpread({}, assignProps({
646
- "innerOffset": true
647
- }, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})));
676
+ return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref15.cn("SIndicators", {
677
+ ...assignProps({
678
+ "innerOffset": true
679
+ }, _ref8)
680
+ }), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})));
648
681
  }
649
- return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref16.cn("SIndicators", _objectSpread({}, assignProps({
650
- "invertOutline": inverted
651
- }, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
652
- return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({
653
- key: index
654
- }, item, {
655
- inverted
656
- }));
657
- }));
658
- };
659
- var Indicator = function Indicator2(_ref20) {
682
+ return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref16.cn("SIndicators", {
683
+ ...assignProps({
684
+ "invertOutline": inverted
685
+ }, _ref8)
686
+ }), items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({
687
+ key: index
688
+ }, item, {
689
+ inverted
690
+ }))));
691
+ }
692
+ function Indicator({
693
+ styles,
694
+ Children,
695
+ inverted
696
+ }) {
660
697
  var _ref9 = arguments[0], _ref17;
661
- var styles = _ref20.styles, Children = _ref20.Children;
662
- _ref20.inverted;
663
- var SIndicator = Box;
664
- return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref17.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
665
- };
666
- var Carousel = createComponent(CarouselRoot, {
698
+ const SIndicator = Box;
699
+ return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref17.cn("SIndicator", {
700
+ ...assignProps({}, _ref9)
701
+ }), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
702
+ }
703
+ const Carousel = createComponent(CarouselRoot, {
667
704
  Container,
668
705
  ContentBox,
669
706
  Indicators,