@semcore/carousel 16.1.1 → 16.1.2-prerelease.3

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 (23) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +1 -31
  3. package/lib/cjs/Carousel.js +122 -121
  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 +1 -1
  7. package/lib/cjs/index.js.map +1 -1
  8. package/lib/cjs/translations/__intergalactic-dynamic-locales.js +4 -5
  9. package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
  10. package/lib/es6/Carousel.js +120 -118
  11. package/lib/es6/Carousel.js.map +1 -1
  12. package/lib/es6/Carousel.types.js.map +1 -1
  13. package/lib/es6/index.js.map +1 -1
  14. package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
  15. package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
  16. package/lib/esm/Carousel.mjs +117 -113
  17. package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
  18. package/lib/types/Carousel.d.ts +1 -1
  19. package/lib/types/Carousel.types.d.ts +2 -2
  20. package/package.json +9 -9
  21. package/src/Carousel.tsx +107 -94
  22. package/src/Carousel.types.ts +2 -2
  23. package/src/translations/__intergalactic-dynamic-locales.ts +2 -2
package/lib/esm/Carousel.mjs CHANGED
@@ -3,52 +3,56 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
3
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
4
4
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
5
5
  import _createClass from "@babel/runtime/helpers/esm/createClass";
6
- import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
6
+ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
7
+ import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
8
+ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
7
9
  import _inherits from "@babel/runtime/helpers/esm/inherits";
8
- import _createSuper from "@babel/runtime/helpers/esm/createSuper";
9
10
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
10
- import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
11
- import React from "react";
11
+ import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
12
+ import { createBreakpoints } from "@semcore/breakpoints";
12
13
  import Button from "@semcore/button";
13
- import Modal from "@semcore/modal";
14
+ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
15
+ import { findAllComponents } from "@semcore/core/lib/utils/findComponent";
16
+ import logger from "@semcore/core/lib/utils/logger";
17
+ import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
14
18
  import { Flex, Box } from "@semcore/flex-box";
15
- import ChevronRight from "@semcore/icon/ChevronRight/l";
16
19
  import ChevronLeft from "@semcore/icon/ChevronLeft/l";
17
- import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
18
- import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
20
+ import ChevronRight from "@semcore/icon/ChevronRight/l";
21
+ import Modal from "@semcore/modal";
22
+ import React from "react";
19
23
  import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
20
- import logger from "@semcore/core/lib/utils/logger";
21
- import { findAllComponents } from "@semcore/core/lib/utils/findComponent";
22
- import { createBreakpoints } from "@semcore/breakpoints";
24
+ function _callSuper(t, o, e) {
25
+ return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
26
+ }
23
27
  /*!__reshadow-styles__:"./style/carousel.shadow.css"*/
24
28
  var style = (
25
29
  /*__reshadow_css_start__*/
26
30
  (sstyled.insert(
27
31
  /*__inner_css_start__*/
28
- '.___SCarousel_1ofes_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_1ofes_gg_{display:flex;transition:transform var(--duration_1ofes) ease-in-out}.___SContentBox_1ofes_gg_,.___SModalBox_1ofes_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_1ofes_gg_:has(.___SItem_1ofes_gg_:focus-visible):after,.___SModalBox_1ofes_gg_:has(.___SItem_1ofes_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}.___SModalContainer_1ofes_gg_{display:flex;transition:transform var(--duration_1ofes) ease-in-out}.___SItem_1ofes_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1ofes);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_1ofes_gg_.__zoomIn_1ofes_gg_{cursor:zoom-in}.___SItem_1ofes_gg_.__zoomOut_1ofes_gg_{cursor:zoom-out}.___SIndicators_1ofes_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;outline:0;position:relative}.___SIndicator_1ofes_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_1ofes_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_1ofes_gg_.__active_1ofes_gg_{opacity:1}.___SIndicator_1ofes_gg_.__inverted_1ofes_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_1ofes_gg_,.___SPrev_1ofes_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_1ofes_gg_ .___SNextButton_1ofes_gg_ span:has(>svg:only-child),.___SNext_1ofes_gg_ .___SPrevButton_1ofes_gg_ span:has(>svg:only-child),.___SPrev_1ofes_gg_ .___SNextButton_1ofes_gg_ span:has(>svg:only-child),.___SPrev_1ofes_gg_ .___SPrevButton_1ofes_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_1ofes_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_1ofes_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_1ofes_gg_.__disabled_1ofes_gg_,.___SPrev_1ofes_gg_.__disabled_1ofes_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1ofes_gg_{transition:none}}',
32
+ '.___SCarousel_1ezuo_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_1ezuo_gg_{display:flex;transition:transform var(--duration_1ezuo) ease-in-out}.___SContentBox_1ezuo_gg_,.___SModalBox_1ezuo_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_1ezuo_gg_:has(.___SItem_1ezuo_gg_:focus-visible):after,.___SModalBox_1ezuo_gg_:has(.___SItem_1ezuo_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}.___SModalContainer_1ezuo_gg_{display:flex;transition:transform var(--duration_1ezuo) ease-in-out}.___SItem_1ezuo_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1ezuo);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_1ezuo_gg_.__zoomIn_1ezuo_gg_{cursor:zoom-in}.___SItem_1ezuo_gg_.__zoomOut_1ezuo_gg_{cursor:zoom-out}.___SIndicators_1ezuo_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;outline:0;position:relative}.___SIndicator_1ezuo_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_1ezuo_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_1ezuo_gg_.__active_1ezuo_gg_{opacity:1}.___SIndicator_1ezuo_gg_.__inverted_1ezuo_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_1ezuo_gg_,.___SPrev_1ezuo_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_1ezuo_gg_ .___SNextButton_1ezuo_gg_ span:has(>svg:only-child),.___SNext_1ezuo_gg_ .___SPrevButton_1ezuo_gg_ span:has(>svg:only-child),.___SPrev_1ezuo_gg_ .___SNextButton_1ezuo_gg_ span:has(>svg:only-child),.___SPrev_1ezuo_gg_ .___SPrevButton_1ezuo_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_1ezuo_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_1ezuo_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_1ezuo_gg_.__disabled_1ezuo_gg_,.___SPrev_1ezuo_gg_.__disabled_1ezuo_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1ezuo_gg_{transition:none}}',
29
33
  /*__inner_css_end__*/
30
- "1ofes_gg_"
34
+ "1ezuo_gg_"
31
35
  ), /*__reshadow_css_end__*/
32
36
  {
33
- "__SCarousel": "___SCarousel_1ofes_gg_",
34
- "__SContainer": "___SContainer_1ofes_gg_",
35
- "--duration": "--duration_1ofes",
36
- "__SModalContainer": "___SModalContainer_1ofes_gg_",
37
- "__SItem": "___SItem_1ofes_gg_",
38
- "--transform": "--transform_1ofes",
39
- "_zoomIn": "__zoomIn_1ofes_gg_",
40
- "_zoomOut": "__zoomOut_1ofes_gg_",
41
- "__SIndicators": "___SIndicators_1ofes_gg_",
42
- "__SIndicator": "___SIndicator_1ofes_gg_",
43
- "_active": "__active_1ofes_gg_",
44
- "_inverted": "__inverted_1ofes_gg_",
45
- "__SPrev": "___SPrev_1ofes_gg_",
46
- "__SNext": "___SNext_1ofes_gg_",
47
- "_disabled": "__disabled_1ofes_gg_",
48
- "__SContentBox": "___SContentBox_1ofes_gg_",
49
- "__SModalBox": "___SModalBox_1ofes_gg_",
50
- "__SPrevButton": "___SPrevButton_1ofes_gg_",
51
- "__SNextButton": "___SNextButton_1ofes_gg_"
37
+ "__SCarousel": "___SCarousel_1ezuo_gg_",
38
+ "__SContainer": "___SContainer_1ezuo_gg_",
39
+ "--duration": "--duration_1ezuo",
40
+ "__SModalContainer": "___SModalContainer_1ezuo_gg_",
41
+ "__SItem": "___SItem_1ezuo_gg_",
42
+ "--transform": "--transform_1ezuo",
43
+ "_zoomIn": "__zoomIn_1ezuo_gg_",
44
+ "_zoomOut": "__zoomOut_1ezuo_gg_",
45
+ "__SIndicators": "___SIndicators_1ezuo_gg_",
46
+ "__SIndicator": "___SIndicator_1ezuo_gg_",
47
+ "_active": "__active_1ezuo_gg_",
48
+ "_inverted": "__inverted_1ezuo_gg_",
49
+ "__SPrev": "___SPrev_1ezuo_gg_",
50
+ "__SNext": "___SNext_1ezuo_gg_",
51
+ "_disabled": "__disabled_1ezuo_gg_",
52
+ "__SContentBox": "___SContentBox_1ezuo_gg_",
53
+ "__SModalBox": "___SModalBox_1ezuo_gg_",
54
+ "__SPrevButton": "___SPrevButton_1ezuo_gg_",
55
+ "__SNextButton": "___SNextButton_1ezuo_gg_"
52
56
  })
53
57
  );
54
58
  var MAP_TRANSFORM = {
@@ -62,19 +66,17 @@ var isSmallScreen = function isSmallScreen2(index) {
62
66
  return index === 1;
63
67
  };
64
68
  var CarouselRoot = /* @__PURE__ */ function(_Component) {
65
- _inherits(CarouselRoot2, _Component);
66
- var _super = _createSuper(CarouselRoot2);
67
69
  function CarouselRoot2(props) {
68
- var _ref20, _props$index;
70
+ var _ref18, _props$index;
69
71
  var _this;
70
72
  _classCallCheck(this, CarouselRoot2);
71
- _this = _super.call(this, props);
72
- _defineProperty(_assertThisInitialized(_this), "defaultItemsCount", 0);
73
- _defineProperty(_assertThisInitialized(_this), "refCarousel", /* @__PURE__ */ React.createRef());
74
- _defineProperty(_assertThisInitialized(_this), "refContainer", /* @__PURE__ */ React.createRef());
75
- _defineProperty(_assertThisInitialized(_this), "refModalContainer", /* @__PURE__ */ React.createRef());
76
- _defineProperty(_assertThisInitialized(_this), "_touchStartCoord", -1);
77
- _defineProperty(_assertThisInitialized(_this), "handlerKeyDown", function(e) {
73
+ _this = _callSuper(this, CarouselRoot2, [props]);
74
+ _defineProperty(_this, "defaultItemsCount", 0);
75
+ _defineProperty(_this, "refCarousel", /* @__PURE__ */ React.createRef());
76
+ _defineProperty(_this, "refContainer", /* @__PURE__ */ React.createRef());
77
+ _defineProperty(_this, "refModalContainer", /* @__PURE__ */ React.createRef());
78
+ _defineProperty(_this, "_touchStartCoord", -1);
79
+ _defineProperty(_this, "handlerKeyDown", function(e) {
78
80
  var firstSlide = 1;
79
81
  var lastSlide = _this.state.items.length + 1;
80
82
  switch (e.key) {
@@ -108,7 +110,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
108
110
  _this.handleToggleZoomModal();
109
111
  }
110
112
  });
111
- _defineProperty(_assertThisInitialized(_this), "toggleItem", function(item) {
113
+ _defineProperty(_this, "toggleItem", function(item) {
112
114
  var removeItem = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
113
115
  _this.setState(function(prevState) {
114
116
  var newItems = removeItem ? prevState.items.filter(function(element) {
@@ -122,7 +124,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
122
124
  _this.defaultItemsCount++;
123
125
  }
124
126
  });
125
- _defineProperty(_assertThisInitialized(_this), "transformContainer", function() {
127
+ _defineProperty(_this, "transformContainer", function() {
126
128
  var transform = _this.state.selectedIndex * -1 * 100;
127
129
  if (_this.refContainer.current) {
128
130
  _this.refContainer.current.style.transform = "translateX(".concat(transform, "%)");
@@ -131,7 +133,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
131
133
  _this.refModalContainer.current.style.transform = "translateX(".concat(transform, "%)");
132
134
  }
133
135
  });
134
- _defineProperty(_assertThisInitialized(_this), "getDirection", function(currentIndex, nextIndex) {
136
+ _defineProperty(_this, "getDirection", function(currentIndex, nextIndex) {
135
137
  var bounded = _this.asProps.bounded;
136
138
  if (bounded) {
137
139
  return currentIndex < nextIndex ? "right" : "left";
@@ -158,7 +160,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
158
160
  var left = tmpArr.indexOf(nextIndex);
159
161
  return left - tmpCurrentIndex < 0 ? "left" : "right";
160
162
  });
161
- _defineProperty(_assertThisInitialized(_this), "slideToValue", function(nextIndex) {
163
+ _defineProperty(_this, "slideToValue", function(nextIndex) {
162
164
  var selectedIndex = _this.state.selectedIndex;
163
165
  var direction = selectedIndex < nextIndex ? "right" : "left";
164
166
  var diff = Math.abs(selectedIndex - nextIndex);
@@ -167,7 +169,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
167
169
  diff--;
168
170
  }
169
171
  });
170
- _defineProperty(_assertThisInitialized(_this), "transformItem", function(direction) {
172
+ _defineProperty(_this, "transformItem", function(direction) {
171
173
  var bounded = _this.asProps.bounded;
172
174
  var _this$state = _this.state, items = _this$state.items, selectedIndex = _this$state.selectedIndex;
173
175
  var maxIndexIndicator = items.length - 1;
@@ -210,12 +212,12 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
210
212
  return;
211
213
  }
212
214
  });
213
- _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(direction) {
215
+ _defineProperty(_this, "bindHandlerClick", function(direction) {
214
216
  return function() {
215
217
  _this.transformItem(direction);
216
218
  };
217
219
  });
218
- _defineProperty(_assertThisInitialized(_this), "bindHandlerClickIndicator", function(value) {
220
+ _defineProperty(_this, "bindHandlerClickIndicator", function(value) {
219
221
  return function() {
220
222
  var _this$state2 = _this.state, selectedIndex = _this$state2.selectedIndex, items = _this$state2.items;
221
223
  if (!_this.isControlled && value !== selectedIndex) {
@@ -225,10 +227,10 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
225
227
  _this.handlers.index(value);
226
228
  };
227
229
  });
228
- _defineProperty(_assertThisInitialized(_this), "handlerTouchStart", function(e) {
230
+ _defineProperty(_this, "handlerTouchStart", function(e) {
229
231
  _this._touchStartCoord = e.changedTouches[0].clientX;
230
232
  });
231
- _defineProperty(_assertThisInitialized(_this), "handlerTouchEnd", function(e) {
233
+ _defineProperty(_this, "handlerTouchEnd", function(e) {
232
234
  var touchEndCoord = e.changedTouches[0].clientX;
233
235
  var delta = touchEndCoord - _this._touchStartCoord;
234
236
  if (delta > 50) {
@@ -237,7 +239,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
237
239
  _this.transformItem("right");
238
240
  }
239
241
  });
240
- _defineProperty(_assertThisInitialized(_this), "handleToggleZoomModal", function() {
242
+ _defineProperty(_this, "handleToggleZoomModal", function() {
241
243
  _this.setState(function(prevState) {
242
244
  return {
243
245
  isOpenZoom: !prevState.isOpenZoom
@@ -248,7 +250,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
248
250
  }
249
251
  });
250
252
  });
251
- _defineProperty(_assertThisInitialized(_this), "bindHandlerKeydownControl", function(direction) {
253
+ _defineProperty(_this, "bindHandlerKeydownControl", function(direction) {
252
254
  return function(e) {
253
255
  if (e.key === "Enter" || e.key === " ") {
254
256
  e.preventDefault();
@@ -260,21 +262,22 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
260
262
  _this.state = {
261
263
  items: [],
262
264
  isOpenZoom: false,
263
- selectedIndex: (_ref20 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref20 !== void 0 ? _ref20 : 0
265
+ selectedIndex: (_ref18 = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : props.defaultIndex) !== null && _ref18 !== void 0 ? _ref18 : 0
264
266
  };
265
267
  return _this;
266
268
  }
267
- _createClass(CarouselRoot2, [{
269
+ _inherits(CarouselRoot2, _Component);
270
+ return _createClass(CarouselRoot2, [{
268
271
  key: "uncontrolledProps",
269
272
  value: function uncontrolledProps() {
270
273
  var _this2 = this;
271
274
  return {
272
275
  index: [null, function(_index) {
273
276
  var _this2$refCarousel$cu;
274
- (_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0 ? void 0 : _this2$refCarousel$cu.blur();
277
+ (_this2$refCarousel$cu = _this2.refCarousel.current) === null || _this2$refCarousel$cu === void 0 || _this2$refCarousel$cu.blur();
275
278
  setTimeout(function() {
276
279
  var _this2$refCarousel$cu2;
277
- (_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0 ? void 0 : _this2$refCarousel$cu2.focus();
280
+ (_this2$refCarousel$cu2 = _this2.refCarousel.current) === null || _this2$refCarousel$cu2 === void 0 || _this2$refCarousel$cu2.focus();
278
281
  }, 0);
279
282
  }]
280
283
  };
@@ -320,7 +323,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
320
323
  }
321
324
  }, {
322
325
  key: "getItemProps",
323
- value: function getItemProps(props, index) {
326
+ value: function getItemProps(_props, index) {
324
327
  var zoom = this.asProps.zoom;
325
328
  var isCurrent = this.isSelected(index);
326
329
  return {
@@ -344,10 +347,10 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
344
347
  disabled = selectedIndex === 0;
345
348
  }
346
349
  return {
347
- onClick: this.bindHandlerClick("left"),
348
- onKeyDown: this.bindHandlerKeydownControl("left"),
350
+ "onClick": this.bindHandlerClick("left"),
351
+ "onKeyDown": this.bindHandlerKeydownControl("left"),
349
352
  disabled,
350
- label: getI18nText("prev"),
353
+ "label": getI18nText("prev"),
351
354
  "aria-controls": "igc-".concat(uid, "-carousel")
352
355
  };
353
356
  }
@@ -361,10 +364,10 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
361
364
  disabled = selectedIndex === items.length - 1;
362
365
  }
363
366
  return {
364
- onClick: this.bindHandlerClick("right"),
365
- onKeyDown: this.bindHandlerKeydownControl("right"),
367
+ "onClick": this.bindHandlerClick("right"),
368
+ "onKeyDown": this.bindHandlerKeydownControl("right"),
366
369
  disabled,
367
- label: getI18nText("next"),
370
+ "label": getI18nText("next"),
368
371
  "aria-controls": "igc-".concat(uid, "-carousel")
369
372
  };
370
373
  }
@@ -375,15 +378,15 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
375
378
  var items = this.state.items;
376
379
  var getI18nText = this.asProps.getI18nText;
377
380
  return {
378
- items: items.map(function(item, key) {
381
+ "items": items.map(function(_item, key) {
379
382
  return {
380
383
  active: _this4.isSelected(key),
381
384
  onClick: _this4.bindHandlerClickIndicator(key),
382
385
  key
383
386
  };
384
387
  }),
385
- role: "tablist",
386
- tabIndex: 0,
388
+ "role": "tablist",
389
+ "tabIndex": 0,
387
390
  "aria-label": getI18nText("slides")
388
391
  };
389
392
  }
@@ -393,7 +396,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
393
396
  var isCurrent = this.isSelected(index);
394
397
  var getI18nText = this.asProps.getI18nText;
395
398
  return {
396
- role: "tab",
399
+ "role": "tab",
397
400
  "aria-selected": isCurrent,
398
401
  "aria-controls": "igc-".concat(this.asProps.uid, "-carousel-item-").concat(index),
399
402
  "aria-label": getI18nText("slide", {
@@ -434,21 +437,21 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
434
437
  }, {
435
438
  key: "renderModal",
436
439
  value: function renderModal(isSmall, ComponentItems) {
437
- var _ref = this.asProps, _ref10, _this5 = this;
440
+ var _ref = this.asProps, _ref0, _this5 = this;
438
441
  var SModalContainer = Box;
439
442
  var SModalBox = Box;
440
443
  var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, uid = _this$asProps3.uid, duration = _this$asProps3.duration, zoomWidth = _this$asProps3.zoomWidth;
441
444
  var isOpenZoom = this.state.isOpenZoom;
442
- return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(Modal, _ref10.cn("Modal", {
445
+ return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(Modal, _ref0.cn("Modal", {
443
446
  "visible": isOpenZoom,
444
447
  "onClose": this.handleToggleZoomModal,
445
448
  "ghost": true,
446
449
  "closable": !isSmall
447
- }), /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
450
+ }), /* @__PURE__ */ React.createElement(Flex, _ref0.cn("Flex", {
448
451
  "direction": isSmall ? "column" : "row"
449
452
  }), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Prev, {
450
453
  inverted: true
451
- }), /* @__PURE__ */ React.createElement(SModalBox, _ref10.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref10.cn("SModalContainer", _objectSpread({}, assignProps({
454
+ }), /* @__PURE__ */ React.createElement(SModalBox, _ref0.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref0.cn("SModalContainer", _objectSpread({}, assignProps({
452
455
  "aria-live": "polite",
453
456
  "use:duration": "".concat(duration, "ms"),
454
457
  "ref": this.refModalContainer,
@@ -465,7 +468,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
465
468
  zoomOut: true,
466
469
  transform: _this5.isSelected(i) ? _this5.getTransform() : void 0
467
470
  }));
468
- }))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref10.cn("Flex", {
471
+ }))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref0.cn("Flex", {
469
472
  "justifyContent": "center",
470
473
  "mt": 2
471
474
  }), /* @__PURE__ */ React.createElement(Carousel.Prev, {
@@ -481,12 +484,12 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
481
484
  }, {
482
485
  key: "render",
483
486
  value: function render() {
484
- var _ref2 = this.asProps, _ref11, _this6 = this;
487
+ var _ref2 = this.asProps, _ref1, _this6 = this;
485
488
  var SCarousel = Box;
486
489
  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"], ariaRoledescription = _this$asProps4["aria-roledescription"], indicators = _this$asProps4.indicators;
487
490
  var ComponentItems = findAllComponents(Children, ["Carousel.Item"]);
488
491
  var Controls = findAllComponents(Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
489
- return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref11.cn("SCarousel", _objectSpread({}, assignProps({
492
+ return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref1.cn("SCarousel", _objectSpread({}, assignProps({
490
493
  "role": "region",
491
494
  "roledescription": "carousel",
492
495
  "onKeyDown": this.handlerKeyDown,
@@ -495,9 +498,9 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
495
498
  "ref": this.refCarousel,
496
499
  "id": "igc-".concat(uid, "-carousel"),
497
500
  "aria-roledescription": ariaRoledescription
498
- }, _ref2))), Controls.length === 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, _ref11.cn("Flex", {}), /* @__PURE__ */ React.createElement(Carousel.Prev, null), /* @__PURE__ */ React.createElement(Carousel.ContentBox, null, /* @__PURE__ */ React.createElement(Carousel.Container, {
501
+ }, _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, {
499
502
  "aria-label": ariaLabel
500
- }, /* @__PURE__ */ React.createElement(Children, _ref11.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() {
503
+ }, /* @__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() {
501
504
  return ComponentItems.map(function(item, index) {
502
505
  return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({}, item.props, {
503
506
  key: item.key,
@@ -508,12 +511,11 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
508
511
  onClick: _this6.bindHandlerClickIndicator(index)
509
512
  }));
510
513
  });
511
- })) : /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})), hasZoom && /* @__PURE__ */ React.createElement(BreakPoints, _ref11.cn("BreakPoints", {}), /* @__PURE__ */ React.createElement(BreakPoints.Context.Consumer, null, function(mediaIndex) {
514
+ })) : /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {})), hasZoom && /* @__PURE__ */ React.createElement(BreakPoints, _ref1.cn("BreakPoints", {}), /* @__PURE__ */ React.createElement(BreakPoints.Context.Consumer, null, function(mediaIndex) {
512
515
  return _this6.renderModal(isSmallScreen(mediaIndex), ComponentItems);
513
516
  })));
514
517
  }
515
518
  }]);
516
- return CarouselRoot2;
517
519
  }(Component);
518
520
  _defineProperty(CarouselRoot, "displayName", "Carousel");
519
521
  _defineProperty(CarouselRoot, "defaultProps", {
@@ -528,41 +530,42 @@ _defineProperty(CarouselRoot, "defaultProps", {
528
530
  _defineProperty(CarouselRoot, "style", style);
529
531
  _defineProperty(CarouselRoot, "enhance", enhance);
530
532
  var Container = function Container2(props) {
531
- var _ref3 = arguments[0], _ref12;
533
+ var _ref3 = arguments[0], _ref10;
532
534
  var SContainer = Box;
533
535
  var styles = props.styles, duration = props.duration;
534
- return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref12.cn("SContainer", _objectSpread({}, assignProps({
536
+ return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref10.cn("SContainer", _objectSpread({}, assignProps({
535
537
  "use:duration": "".concat(duration, "ms"),
536
538
  "aria-live": "polite"
537
539
  }, _ref3))));
538
540
  };
539
541
  var ContentBox = function ContentBox2(props) {
540
- var _ref4 = arguments[0], _ref13;
542
+ var _ref4 = arguments[0], _ref11;
541
543
  var SContentBox = Box;
542
544
  var styles = props.styles;
543
- return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref13.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
545
+ return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref11.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
544
546
  };
545
547
  var Item = /* @__PURE__ */ function(_Component2) {
546
- _inherits(Item2, _Component2);
547
- var _super2 = _createSuper(Item2);
548
548
  function Item2() {
549
549
  var _this7;
550
550
  _classCallCheck(this, Item2);
551
551
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
552
552
  args[_key] = arguments[_key];
553
553
  }
554
- _this7 = _super2.call.apply(_super2, [this].concat(args));
555
- _defineProperty(_assertThisInitialized(_this7), "refItem", /* @__PURE__ */ React.createRef());
554
+ _this7 = _callSuper(this, Item2, [].concat(args));
555
+ _defineProperty(_this7, "refItem", /* @__PURE__ */ React.createRef());
556
556
  return _this7;
557
557
  }
558
- _createClass(Item2, [{
558
+ _inherits(Item2, _Component2);
559
+ return _createClass(Item2, [{
559
560
  key: "componentDidMount",
560
561
  value: function componentDidMount() {
561
562
  var _this$props = this.props, toggleItem = _this$props.toggleItem, transform = _this$props.transform;
562
563
  var refItem = this.refItem.current;
563
- toggleItem && refItem && toggleItem({
564
- node: refItem
565
- });
564
+ if (toggleItem && refItem) {
565
+ toggleItem({
566
+ node: refItem
567
+ });
568
+ }
566
569
  if (transform && refItem) {
567
570
  refItem.style.transform = "translateX(".concat(transform, "%)");
568
571
  }
@@ -572,9 +575,11 @@ var Item = /* @__PURE__ */ function(_Component2) {
572
575
  value: function componentWillUnmount() {
573
576
  var toggleItem = this.props.toggleItem;
574
577
  var refItem = this.refItem.current;
575
- toggleItem && refItem && toggleItem({
576
- node: refItem
577
- }, true);
578
+ if (toggleItem && refItem) {
579
+ toggleItem({
580
+ node: refItem
581
+ }, true);
582
+ }
578
583
  }
579
584
  }, {
580
585
  key: "componentDidUpdate",
@@ -588,10 +593,10 @@ var Item = /* @__PURE__ */ function(_Component2) {
588
593
  }, {
589
594
  key: "render",
590
595
  value: function render() {
591
- var _ref5 = this.asProps, _ref14;
596
+ var _ref5 = this.asProps, _ref12;
592
597
  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
598
  var SItem = Box;
594
- return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref14.cn("SItem", _objectSpread({}, assignProps({
599
+ return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref12.cn("SItem", _objectSpread({}, assignProps({
595
600
  "ref": this.refItem,
596
601
  "role": "tabpanel",
597
602
  "data-carousel": "igc-".concat(uid, "-carousel"),
@@ -603,16 +608,15 @@ var Item = /* @__PURE__ */ function(_Component2) {
603
608
  }, _ref5))));
604
609
  }
605
610
  }]);
606
- return Item2;
607
611
  }(Component);
608
612
  var Prev = function Prev2(props) {
609
- var _ref6 = arguments[0], _ref15;
613
+ var _ref6 = arguments[0], _ref13;
610
614
  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;
611
615
  var SPrev = Box;
612
616
  var SPrevButton = Button;
613
- return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SPrev, _ref15.cn("SPrev", _objectSpread({}, assignProps({
617
+ return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SPrev, _ref13.cn("SPrev", _objectSpread({}, assignProps({
614
618
  "top": top
615
- }, _ref6))), children ? /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref15.cn("SPrevButton", {
619
+ }, _ref6))), children ? /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref13.cn("SPrevButton", {
616
620
  "addonLeft": ChevronLeft,
617
621
  "aria-label": label,
618
622
  "theme": inverted ? "invert" : "muted",
@@ -622,13 +626,13 @@ var Prev = function Prev2(props) {
622
626
  })));
623
627
  };
624
628
  var Next = function Next2(props) {
625
- var _ref7 = arguments[0], _ref16;
629
+ var _ref7 = arguments[0], _ref14;
626
630
  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;
627
631
  var SNext = Box;
628
632
  var SNextButton = Button;
629
- return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SNext, _ref16.cn("SNext", _objectSpread({}, assignProps({
633
+ return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SNext, _ref14.cn("SNext", _objectSpread({}, assignProps({
630
634
  "top": top
631
- }, _ref7))), children ? /* @__PURE__ */ React.createElement(Children, _ref16.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref16.cn("SNextButton", {
635
+ }, _ref7))), children ? /* @__PURE__ */ React.createElement(Children, _ref14.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref14.cn("SNextButton", {
632
636
  "addonLeft": ChevronRight,
633
637
  "aria-label": label,
634
638
  "theme": inverted ? "invert" : "muted",
@@ -637,15 +641,15 @@ var Next = function Next2(props) {
637
641
  "innerOutline": true
638
642
  })));
639
643
  };
640
- var Indicators = function Indicators2(_ref21) {
641
- var _ref8 = arguments[0], _ref18;
642
- var items = _ref21.items, styles = _ref21.styles, Children = _ref21.Children, inverted = _ref21.inverted;
644
+ var Indicators = function Indicators2(_ref19) {
645
+ var _ref8 = arguments[0], _ref16;
646
+ var items = _ref19.items, styles = _ref19.styles, Children = _ref19.Children, inverted = _ref19.inverted;
643
647
  var SIndicators = Box;
644
648
  if (Children.origin) {
645
- var _ref17;
646
- return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref17.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
649
+ var _ref15;
650
+ return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref15.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})));
647
651
  }
648
- return _ref18 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref18.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
652
+ return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref16.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
649
653
  return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({
650
654
  key: index
651
655
  }, item, {
@@ -653,11 +657,11 @@ var Indicators = function Indicators2(_ref21) {
653
657
  }));
654
658
  }));
655
659
  };
656
- var Indicator = function Indicator2(_ref22) {
657
- var _ref9 = arguments[0], _ref19;
658
- var styles = _ref22.styles, Children = _ref22.Children;
660
+ var Indicator = function Indicator2(_ref20) {
661
+ var _ref9 = arguments[0], _ref17;
662
+ var styles = _ref20.styles, Children = _ref20.Children;
659
663
  var SIndicator = Box;
660
- return _ref19 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref19.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref19.cn("Children", {})));
664
+ return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref17.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
661
665
  };
662
666
  var Carousel = createComponent(CarouselRoot, {
663
667
  Container,
package/lib/esm/translations/__intergalactic-dynamic-locales.mjs CHANGED
@@ -6,12 +6,12 @@ import it from "./it.json.mjs";
6
6
  import ja from "./ja.json.mjs";
7
7
  import ko from "./ko.json.mjs";
8
8
  import nl from "./nl.json.mjs";
9
+ import pl from "./pl.json.mjs";
9
10
  import pt from "./pt.json.mjs";
11
+ import sv from "./sv.json.mjs";
10
12
  import tr from "./tr.json.mjs";
11
13
  import vi from "./vi.json.mjs";
12
14
  import zh from "./zh.json.mjs";
13
- import pl from "./pl.json.mjs";
14
- import sv from "./sv.json.mjs";
15
15
  var localizedMessages = {
16
16
  de,
17
17
  en,
package/lib/types/Carousel.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import CarouselType from './Carousel.types';
1
+ import type CarouselType from './Carousel.types';
2
2
  declare const Carousel: typeof CarouselType;
3
3
  export default Carousel;
package/lib/types/Carousel.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { PropGetterFn, UnknownProperties, Intergalactic, IRootComponentProps } from '@semcore/core';
2
- import { BoxProps } from '@semcore/flex-box';
1
+ import type { PropGetterFn, UnknownProperties, Intergalactic, IRootComponentProps } from '@semcore/core';
2
+ import type { BoxProps } from '@semcore/flex-box';
3
3
  /** @deprecated */
4
4
  export interface ICarouselProps extends CarouselProps, UnknownProperties {
5
5
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/carousel",
3
3
  "description": "Semrush Carousel Component",
4
- "version": "16.1.1",
4
+ "version": "16.1.2-prerelease.3",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,14 +14,14 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/icon": "16.2.0",
18
- "@semcore/button": "16.0.1",
19
- "@semcore/modal": "16.1.1",
20
- "@semcore/flex-box": "16.0.1",
21
- "@semcore/breakpoints": "16.0.1"
17
+ "@semcore/icon": "16.2.1-prerelease.3",
18
+ "@semcore/button": "16.0.2-prerelease.3",
19
+ "@semcore/modal": "16.1.2-prerelease.3",
20
+ "@semcore/flex-box": "16.0.2-prerelease.3",
21
+ "@semcore/breakpoints": "16.0.2-prerelease.3"
22
22
  },
23
23
  "peerDependencies": {
24
- "@semcore/base-components": "^16.0.0"
24
+ "@semcore/base-components": "^16.0.2-prerelease.3"
25
25
  },
26
26
  "repository": {
27
27
  "type": "git",
@@ -29,8 +29,8 @@
29
29
  "directory": "semcore/carousel"
30
30
  },
31
31
  "devDependencies": {
32
- "@semcore/testing-utils": "1.0.0",
33
- "@types/react": "18.0.21"
32
+ "@semcore/core": "16.0.0",
33
+ "@semcore/testing-utils": "1.0.0"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"