@semcore/carousel 3.49.2 → 16.0.0-prerelease.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/Carousel.js +34 -53
  3. package/lib/cjs/Carousel.js.map +1 -1
  4. package/lib/cjs/style/carousel.shadow.css +2 -32
  5. package/lib/es6/Carousel.js +34 -51
  6. package/lib/es6/Carousel.js.map +1 -1
  7. package/lib/es6/style/carousel.shadow.css +2 -32
  8. package/lib/esm/Carousel.mjs +44 -62
  9. package/lib/esm/style/carousel.shadow.css +2 -32
  10. package/package.json +7 -11
  11. package/src/Carousel.tsx +13 -35
  12. package/src/style/carousel.shadow.css +2 -32
package/lib/esm/Carousel.mjs CHANGED
@@ -7,51 +7,48 @@ import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitial
7
7
  import _inherits from "@babel/runtime/helpers/esm/inherits";
8
8
  import _createSuper from "@babel/runtime/helpers/esm/createSuper";
9
9
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
10
- import { sstyled } from "@semcore/utils/lib/core/index";
11
- import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
10
+ import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
12
11
  import React from "react";
13
12
  import Button from "@semcore/button";
14
13
  import Modal from "@semcore/modal";
15
14
  import { Flex, Box } from "@semcore/flex-box";
16
15
  import ChevronRight from "@semcore/icon/ChevronRight/l";
17
16
  import ChevronLeft from "@semcore/icon/ChevronLeft/l";
18
- import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
19
- import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
17
+ import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
18
+ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
20
19
  import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
21
- import logger from "@semcore/utils/lib/logger";
22
- import { findAllComponents } from "@semcore/utils/lib/findComponent";
20
+ import logger from "@semcore/core/lib/utils/logger";
21
+ import { findAllComponents } from "@semcore/core/lib/utils/findComponent";
23
22
  import { createBreakpoints } from "@semcore/breakpoints";
24
- import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
25
23
  /*!__reshadow-styles__:"./style/carousel.shadow.css"*/
26
24
  var style = (
27
25
  /*__reshadow_css_start__*/
28
26
  (sstyled.insert(
29
27
  /*__inner_css_start__*/
30
- '.___SCarousel_33mp3_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_33mp3_gg_{display:flex;transition:transform var(--duration_33mp3) ease-in-out}.___SContentBox_33mp3_gg_,.___SModalBox_33mp3_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_33mp3_gg_:has(.___SItem_33mp3_gg_.__keyboardFocused_33mp3_gg_):after,.___SModalBox_33mp3_gg_:has(.___SItem_33mp3_gg_.__keyboardFocused_33mp3_gg_):after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px}.___SModalContainer_33mp3_gg_{display:flex;transition:transform var(--duration_33mp3) ease-in-out}.___SItem_33mp3_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_33mp3);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_33mp3_gg_.__zoomIn_33mp3_gg_{cursor:zoom-in}.___SItem_33mp3_gg_.__zoomOut_33mp3_gg_{cursor:zoom-out}.___SIndicators_33mp3_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_33mp3_gg_.__keyboardFocused_33mp3_gg_:after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px);top:0;left:3px}.___SIndicator_33mp3_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_33mp3_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_33mp3_gg_.__active_33mp3_gg_{opacity:1}.___SIndicator_33mp3_gg_.__inverted_33mp3_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_33mp3_gg_,.___SPrev_33mp3_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_33mp3_gg_ .___SNextButton_33mp3_gg_ span:has(>svg:only-child),.___SNext_33mp3_gg_ .___SPrevButton_33mp3_gg_ span:has(>svg:only-child),.___SPrev_33mp3_gg_ .___SNextButton_33mp3_gg_ span:has(>svg:only-child),.___SPrev_33mp3_gg_ .___SPrevButton_33mp3_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SNextButton_33mp3_gg_:focus-visible,.___SPrevButton_33mp3_gg_:focus-visible{box-shadow:none}.___SNextButton_33mp3_gg_:focus-visible:after,.___SPrevButton_33mp3_gg_:focus-visible:after{content:"";display:block;position:absolute;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1;width:calc(100% - 3px*2);height:calc(100% - 3px*2);top:3px;left:3px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPrev_33mp3_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_33mp3_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_33mp3_gg_.__disabled_33mp3_gg_,.___SPrev_33mp3_gg_.__disabled_33mp3_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_33mp3_gg_{transition:none}}',
28
+ '.___SCarousel_onno2_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_onno2_gg_{display:flex;transition:transform var(--duration_onno2) ease-in-out}.___SContentBox_onno2_gg_,.___SModalBox_onno2_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_onno2_gg_:has(.___SItem_onno2_gg_:focus-visible):after,.___SModalBox_onno2_gg_:has(.___SItem_onno2_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_onno2_gg_{display:flex;transition:transform var(--duration_onno2) ease-in-out}.___SItem_onno2_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_onno2);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_onno2_gg_.__zoomIn_onno2_gg_{cursor:zoom-in}.___SItem_onno2_gg_.__zoomOut_onno2_gg_{cursor:zoom-out}.___SIndicators_onno2_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;outline:0;position:relative}.___SIndicator_onno2_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_onno2_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_onno2_gg_.__active_onno2_gg_{opacity:1}.___SIndicator_onno2_gg_.__inverted_onno2_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_onno2_gg_,.___SPrev_onno2_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_onno2_gg_ .___SNextButton_onno2_gg_ span:has(>svg:only-child),.___SNext_onno2_gg_ .___SPrevButton_onno2_gg_ span:has(>svg:only-child),.___SPrev_onno2_gg_ .___SNextButton_onno2_gg_ span:has(>svg:only-child),.___SPrev_onno2_gg_ .___SPrevButton_onno2_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_onno2_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_onno2_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_onno2_gg_.__disabled_onno2_gg_,.___SPrev_onno2_gg_.__disabled_onno2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_onno2_gg_{transition:none}}',
31
29
  /*__inner_css_end__*/
32
- "33mp3_gg_"
30
+ "onno2_gg_"
33
31
  ), /*__reshadow_css_end__*/
34
32
  {
35
- "__SCarousel": "___SCarousel_33mp3_gg_",
36
- "__SContainer": "___SContainer_33mp3_gg_",
37
- "--duration": "--duration_33mp3",
38
- "__SModalContainer": "___SModalContainer_33mp3_gg_",
39
- "__SItem": "___SItem_33mp3_gg_",
40
- "--transform": "--transform_33mp3",
41
- "_zoomIn": "__zoomIn_33mp3_gg_",
42
- "_zoomOut": "__zoomOut_33mp3_gg_",
43
- "__SIndicators": "___SIndicators_33mp3_gg_",
44
- "_keyboardFocused": "__keyboardFocused_33mp3_gg_",
45
- "__SIndicator": "___SIndicator_33mp3_gg_",
46
- "_active": "__active_33mp3_gg_",
47
- "_inverted": "__inverted_33mp3_gg_",
48
- "__SPrev": "___SPrev_33mp3_gg_",
49
- "__SNext": "___SNext_33mp3_gg_",
50
- "_disabled": "__disabled_33mp3_gg_",
51
- "__SContentBox": "___SContentBox_33mp3_gg_",
52
- "__SModalBox": "___SModalBox_33mp3_gg_",
53
- "__SPrevButton": "___SPrevButton_33mp3_gg_",
54
- "__SNextButton": "___SNextButton_33mp3_gg_"
33
+ "__SCarousel": "___SCarousel_onno2_gg_",
34
+ "__SContainer": "___SContainer_onno2_gg_",
35
+ "--duration": "--duration_onno2",
36
+ "__SModalContainer": "___SModalContainer_onno2_gg_",
37
+ "__SItem": "___SItem_onno2_gg_",
38
+ "--transform": "--transform_onno2",
39
+ "_zoomIn": "__zoomIn_onno2_gg_",
40
+ "_zoomOut": "__zoomOut_onno2_gg_",
41
+ "__SIndicators": "___SIndicators_onno2_gg_",
42
+ "__SIndicator": "___SIndicator_onno2_gg_",
43
+ "_active": "__active_onno2_gg_",
44
+ "_inverted": "__inverted_onno2_gg_",
45
+ "__SPrev": "___SPrev_onno2_gg_",
46
+ "__SNext": "___SNext_onno2_gg_",
47
+ "_disabled": "__disabled_onno2_gg_",
48
+ "__SContentBox": "___SContentBox_onno2_gg_",
49
+ "__SModalBox": "___SModalBox_onno2_gg_",
50
+ "__SPrevButton": "___SPrevButton_onno2_gg_",
51
+ "__SNextButton": "___SNextButton_onno2_gg_"
55
52
  })
56
53
  );
57
54
  var MAP_TRANSFORM = {
@@ -246,7 +243,9 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
246
243
  isOpenZoom: !prevState.isOpenZoom
247
244
  };
248
245
  }, function() {
249
- _this.state.isOpenZoom && _this.transformContainer();
246
+ if (_this.state.isOpenZoom) {
247
+ _this.transformContainer();
248
+ }
250
249
  });
251
250
  });
252
251
  _defineProperty(_assertThisInitialized(_this), "bindHandlerKeydownControl", function(direction) {
@@ -384,6 +383,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
384
383
  };
385
384
  }),
386
385
  role: "tablist",
386
+ tabIndex: 0,
387
387
  "aria-label": getI18nText("slides")
388
388
  };
389
389
  }
@@ -439,7 +439,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
439
439
  var SModalBox = Box;
440
440
  var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, uid = _this$asProps3.uid, duration = _this$asProps3.duration, zoomWidth = _this$asProps3.zoomWidth;
441
441
  var isOpenZoom = this.state.isOpenZoom;
442
- return _ref10 = sstyled$1(styles), /* @__PURE__ */ React.createElement(Modal, _ref10.cn("Modal", {
442
+ return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(Modal, _ref10.cn("Modal", {
443
443
  "visible": isOpenZoom,
444
444
  "onClose": this.handleToggleZoomModal,
445
445
  "ghost": true,
@@ -486,7 +486,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
486
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"], ariaRoledescription = _this$asProps4["aria-roledescription"], indicators = _this$asProps4.indicators;
487
487
  var ComponentItems = findAllComponents(Children, ["Carousel.Item"]);
488
488
  var Controls = findAllComponents(Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
489
- return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref11.cn("SCarousel", _objectSpread({}, assignProps({
489
+ return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref11.cn("SCarousel", _objectSpread({}, assignProps({
490
490
  "role": "region",
491
491
  "roledescription": "carousel",
492
492
  "onKeyDown": this.handlerKeyDown,
@@ -531,7 +531,7 @@ var Container = function Container2(props) {
531
531
  var _ref3 = arguments[0], _ref12;
532
532
  var SContainer = Box;
533
533
  var styles = props.styles, duration = props.duration;
534
- return _ref12 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainer, _ref12.cn("SContainer", _objectSpread({}, assignProps({
534
+ return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref12.cn("SContainer", _objectSpread({}, assignProps({
535
535
  "use:duration": "".concat(duration, "ms"),
536
536
  "aria-live": "polite"
537
537
  }, _ref3))));
@@ -540,7 +540,7 @@ var ContentBox = function ContentBox2(props) {
540
540
  var _ref4 = arguments[0], _ref13;
541
541
  var SContentBox = Box;
542
542
  var styles = props.styles;
543
- return _ref13 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref13.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
543
+ return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref13.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
544
544
  };
545
545
  var Item = /* @__PURE__ */ function(_Component2) {
546
546
  _inherits(Item2, _Component2);
@@ -553,7 +553,6 @@ var Item = /* @__PURE__ */ function(_Component2) {
553
553
  }
554
554
  _this7 = _super2.call.apply(_super2, [this].concat(args));
555
555
  _defineProperty(_assertThisInitialized(_this7), "refItem", /* @__PURE__ */ React.createRef());
556
- _defineProperty(_assertThisInitialized(_this7), "keepFocusTimeout", void 0);
557
556
  return _this7;
558
557
  }
559
558
  _createClass(Item2, [{
@@ -576,32 +575,15 @@ var Item = /* @__PURE__ */ function(_Component2) {
576
575
  toggleItem && refItem && toggleItem({
577
576
  node: refItem
578
577
  }, true);
579
- clearTimeout(this.keepFocusTimeout);
580
578
  }
581
579
  }, {
582
580
  key: "componentDidUpdate",
583
581
  value: function componentDidUpdate(prevProps) {
584
- var _this8 = this;
585
- clearTimeout(this.keepFocusTimeout);
586
582
  var transform = this.props.transform;
587
583
  var refItem = this.refItem.current;
588
584
  if (prevProps.transform !== transform && refItem) {
589
585
  refItem.style.transform = "translateX(".concat(transform, "%)");
590
586
  }
591
- if (this.props.current) {
592
- this.keepFocusTimeout = setTimeout(function() {
593
- var _document$activeEleme;
594
- if (document.activeElement !== refItem && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.dataset.carousel) === (refItem === null || refItem === void 0 ? void 0 : refItem.dataset.carousel)) {
595
- refItem === null || refItem === void 0 ? void 0 : refItem.focus();
596
- }
597
- }, 100);
598
- }
599
- if (prevProps.isOpenZoom === true && this.props.isOpenZoom === false && this.props.current && !this.props.zoomOut) {
600
- this.keepFocusTimeout = setTimeout(function() {
601
- var _this8$refItem$curren;
602
- (_this8$refItem$curren = _this8.refItem.current) === null || _this8$refItem$curren === void 0 ? void 0 : _this8$refItem$curren.focus();
603
- }, 200);
604
- }
605
587
  }
606
588
  }, {
607
589
  key: "render",
@@ -609,7 +591,7 @@ var Item = /* @__PURE__ */ function(_Component2) {
609
591
  var _ref5 = this.asProps, _ref14;
610
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;
611
593
  var SItem = Box;
612
- return _ref14 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SItem, _ref14.cn("SItem", _objectSpread({}, assignProps({
594
+ return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref14.cn("SItem", _objectSpread({}, assignProps({
613
595
  "ref": this.refItem,
614
596
  "role": "tabpanel",
615
597
  "data-carousel": "igc-".concat(uid, "-carousel"),
@@ -623,20 +605,20 @@ var Item = /* @__PURE__ */ function(_Component2) {
623
605
  }]);
624
606
  return Item2;
625
607
  }(Component);
626
- _defineProperty(Item, "enhance", [keyboardFocusEnhance(false)]);
627
608
  var Prev = function Prev2(props) {
628
609
  var _ref6 = arguments[0], _ref15;
629
610
  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;
630
611
  var SPrev = Box;
631
612
  var SPrevButton = Button;
632
- return _ref15 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPrev, _ref15.cn("SPrev", _objectSpread({}, assignProps({
613
+ return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SPrev, _ref15.cn("SPrev", _objectSpread({}, assignProps({
633
614
  "top": top
634
615
  }, _ref6))), children ? /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPrevButton, _ref15.cn("SPrevButton", {
635
616
  "addonLeft": ChevronLeft,
636
617
  "aria-label": label,
637
618
  "theme": inverted ? "invert" : "muted",
638
619
  "use": "tertiary",
639
- "size": "l"
620
+ "size": "l",
621
+ "innerOutline": true
640
622
  })));
641
623
  };
642
624
  var Next = function Next2(props) {
@@ -644,14 +626,15 @@ var Next = function Next2(props) {
644
626
  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;
645
627
  var SNext = Box;
646
628
  var SNextButton = Button;
647
- return _ref16 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SNext, _ref16.cn("SNext", _objectSpread({}, assignProps({
629
+ return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SNext, _ref16.cn("SNext", _objectSpread({}, assignProps({
648
630
  "top": top
649
631
  }, _ref7))), children ? /* @__PURE__ */ React.createElement(Children, _ref16.cn("Children", {})) : /* @__PURE__ */ React.createElement(SNextButton, _ref16.cn("SNextButton", {
650
632
  "addonLeft": ChevronRight,
651
633
  "aria-label": label,
652
634
  "theme": inverted ? "invert" : "muted",
653
635
  "use": "tertiary",
654
- "size": "l"
636
+ "size": "l",
637
+ "innerOutline": true
655
638
  })));
656
639
  };
657
640
  var Indicators = function Indicators2(_ref21) {
@@ -660,9 +643,9 @@ var Indicators = function Indicators2(_ref21) {
660
643
  var SIndicators = Box;
661
644
  if (Children.origin) {
662
645
  var _ref17;
663
- return _ref17 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref17.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
646
+ return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref17.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
664
647
  }
665
- return _ref18 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref18.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
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) {
666
649
  return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({
667
650
  key: index
668
651
  }, item, {
@@ -670,12 +653,11 @@ var Indicators = function Indicators2(_ref21) {
670
653
  }));
671
654
  }));
672
655
  };
673
- Indicators.enhance = [keyboardFocusEnhance()];
674
656
  var Indicator = function Indicator2(_ref22) {
675
657
  var _ref9 = arguments[0], _ref19;
676
658
  var styles = _ref22.styles, Children = _ref22.Children;
677
659
  var SIndicator = Box;
678
- return _ref19 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref19.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref19.cn("Children", {})));
660
+ return _ref19 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref19.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref19.cn("Children", {})));
679
661
  };
680
662
  var Carousel = createComponent(CarouselRoot, {
681
663
  Container,
package/lib/esm/style/carousel.shadow.css CHANGED
@@ -14,7 +14,7 @@ SContentBox, SModalBox {
14
14
  position: relative;
15
15
  overflow: hidden;
16
16
  border-radius: var(--intergalactic-surface-rounded, 6px);
17
- &:has(SItem[keyboardFocused]) {
17
+ &:has(SItem:focus-visible) {
18
18
  &:after {
19
19
  content: '';
20
20
  display: block;
@@ -54,23 +54,11 @@ SItem[zoomOut] {
54
54
  SIndicators {
55
55
  display: flex;
56
56
  justify-content: center;
57
- margin-top: var(--intergalactic-spacing-4x, 16px);
57
+ margin: var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;
58
58
  outline: none;
59
59
  position: relative;
60
60
  }
61
61
 
62
- SIndicators[keyboardFocused]:after {
63
- content: '';
64
- display: block;
65
- position: absolute;
66
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
67
- z-index: 1;
68
- width: calc(100% - 3px * 2);
69
- height: calc(100% - 3px);
70
- top: 0;
71
- left: 3px;
72
- }
73
-
74
62
  SIndicator {
75
63
  margin: 0 calc(0.5 * var(--intergalactic-spacing-3x, 12px));
76
64
  cursor: pointer;
@@ -110,24 +98,6 @@ SNext {
110
98
  }
111
99
  }
112
100
 
113
- SPrevButton, SNextButton {
114
- &:focus-visible {
115
- box-shadow: none;
116
- &:after {
117
- content: '';
118
- display: block;
119
- position: absolute;
120
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
121
- z-index: 1;
122
- width: calc(100% - 3px * 2);
123
- height: calc(100% - 3px * 2);
124
- top: 3px;
125
- left: 3px;
126
- border-radius: var(--intergalactic-control-rounded, 6px);
127
- }
128
- }
129
- }
130
-
131
101
  SPrev {
132
102
  margin-right: var(--intergalactic-spacing-2x, 8px);
133
103
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/carousel",
3
3
  "description": "Semrush Carousel Component",
4
- "version": "3.49.2",
4
+ "version": "16.0.0-prerelease.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,17 +14,14 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/flex-box": "5.41.4",
18
- "@semcore/icon": "4.62.1",
19
- "@semcore/utils": "4.48.5",
20
- "@semcore/button": "5.43.3",
21
- "@semcore/modal": "4.56.2",
22
- "@semcore/breakpoints": "1.41.4"
17
+ "@semcore/icon": "16.0.0-prerelease.0",
18
+ "@semcore/button": "16.0.0-prerelease.0",
19
+ "@semcore/modal": "16.0.0-prerelease.0",
20
+ "@semcore/flex-box": "16.0.0-prerelease.0",
21
+ "@semcore/breakpoints": "16.0.0-prerelease.0"
23
22
  },
24
23
  "peerDependencies": {
25
- "@semcore/core": "^2.17.5",
26
- "react": "16.8 - 18",
27
- "react-dom": "16.8 - 18"
24
+ "@semcore/base-components": "^16.0.0-prerelease.0"
28
25
  },
29
26
  "repository": {
30
27
  "type": "git",
@@ -32,7 +29,6 @@
32
29
  "directory": "semcore/carousel"
33
30
  },
34
31
  "devDependencies": {
35
- "@semcore/flex-box": "*",
36
32
  "@semcore/testing-utils": "1.0.0",
37
33
  "@types/react": "18.0.21"
38
34
  },
package/src/Carousel.tsx CHANGED
@@ -1,14 +1,14 @@
1
1
  import React from 'react';
2
- import createComponent, { Component, sstyled, Root } from '@semcore/core';
2
+ import { createComponent, Component, sstyled, Root } from '@semcore/core';
3
3
  import Button from '@semcore/button';
4
4
  import Modal from '@semcore/modal';
5
5
  import { Box, Flex } from '@semcore/flex-box';
6
6
  import ChevronRight from '@semcore/icon/ChevronRight/l';
7
7
  import ChevronLeft from '@semcore/icon/ChevronLeft/l';
8
- import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
9
- import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
8
+ import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
9
+ import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
10
10
  import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
11
- import logger from '@semcore/utils/lib/logger';
11
+ import logger from '@semcore/core/lib/utils/logger';
12
12
  import style from './style/carousel.shadow.css';
13
13
  import CarouselType, {
14
14
  CarouselProps,
@@ -21,9 +21,8 @@ import CarouselType, {
21
21
  CarouselIndicatorProps,
22
22
  } from './Carousel.types';
23
23
  import { BoxProps } from '@semcore/flex-box';
24
- import { findAllComponents } from '@semcore/utils/lib/findComponent';
24
+ import { findAllComponents } from '@semcore/core/lib/utils/findComponent';
25
25
  import { createBreakpoints } from '@semcore/breakpoints';
26
- import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
27
26
 
28
27
  const MAP_TRANSFORM: Record<string, 'left' | 'right'> = {
29
28
  ArrowLeft: 'left',
@@ -33,7 +32,7 @@ const MAP_TRANSFORM: Record<string, 'left' | 'right'> = {
33
32
  const enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)] as const;
34
33
  const media = ['(min-width: 481px)', '(max-width: 480px)'];
35
34
  const BreakPoints = createBreakpoints(media);
36
- const isSmallScreen = (index: number) => index === 1;
35
+ const isSmallScreen = (index?: number) => index === 1;
37
36
 
38
37
  class CarouselRoot extends Component<
39
38
  CarouselProps,
@@ -350,7 +349,9 @@ class CarouselRoot extends Component<
350
349
  };
351
350
  },
352
351
  () => {
353
- this.state.isOpenZoom && this.transformContainer();
352
+ if (this.state.isOpenZoom) {
353
+ this.transformContainer();
354
+ }
354
355
  },
355
356
  );
356
357
  };
@@ -406,6 +407,7 @@ class CarouselRoot extends Component<
406
407
  key,
407
408
  })),
408
409
  role: 'tablist',
410
+ tabIndex: 0,
409
411
  'aria-label': getI18nText('slides'),
410
412
  };
411
413
  }
@@ -607,8 +609,6 @@ const ContentBox = (props: BoxProps) => {
607
609
 
608
610
  class Item extends Component<CarouselItemProps> {
609
611
  refItem = React.createRef<HTMLElement>();
610
- keepFocusTimeout: NodeJS.Timeout | undefined;
611
- static enhance = [keyboardFocusEnhance(false)];
612
612
 
613
613
  componentDidMount() {
614
614
  const { toggleItem, transform } = this.props;
@@ -626,38 +626,15 @@ class Item extends Component<CarouselItemProps> {
626
626
  const refItem = this.refItem.current;
627
627
 
628
628
  toggleItem && refItem && toggleItem({ node: refItem }, true);
629
- clearTimeout(this.keepFocusTimeout);
630
629
  }
631
630
 
632
631
  componentDidUpdate(prevProps: CarouselItemProps) {
633
- clearTimeout(this.keepFocusTimeout);
634
-
635
632
  const transform = this.props.transform;
636
633
  const refItem = this.refItem.current;
637
634
 
638
635
  if (prevProps.transform !== transform && refItem) {
639
636
  refItem.style.transform = `translateX(${transform}%)`;
640
637
  }
641
- if (this.props.current) {
642
- this.keepFocusTimeout = setTimeout(() => {
643
- if (
644
- document.activeElement !== refItem &&
645
- (document.activeElement as HTMLElement)?.dataset.carousel === refItem?.dataset.carousel
646
- ) {
647
- refItem?.focus();
648
- }
649
- }, 100);
650
- }
651
- if (
652
- prevProps.isOpenZoom === true &&
653
- this.props.isOpenZoom === false &&
654
- this.props.current &&
655
- !this.props.zoomOut
656
- ) {
657
- this.keepFocusTimeout = setTimeout(() => {
658
- this.refItem.current?.focus();
659
- }, 200);
660
- }
661
638
  }
662
639
 
663
640
  render() {
@@ -696,6 +673,7 @@ const Prev = (props: CarouselButtonProps) => {
696
673
  theme={inverted ? 'invert' : 'muted'}
697
674
  use={'tertiary'}
698
675
  size={'l'}
676
+ innerOutline
699
677
  />
700
678
  )}
701
679
  </SPrev>,
@@ -718,6 +696,7 @@ const Next = (props: CarouselButtonProps) => {
718
696
  theme={inverted ? 'invert' : 'muted'}
719
697
  use={'tertiary'}
720
698
  size={'l'}
699
+ innerOutline
721
700
  />
722
701
  )}
723
702
  </SNext>,
@@ -735,13 +714,12 @@ const Indicators = ({ items, styles, Children, inverted }: CarouselIndicatorsPro
735
714
  }
736
715
  return sstyled(styles)(
737
716
  <SIndicators render={Box}>
738
- {items?.map((item, index) => (
717
+ {items?.map((item: CarouselItem, index: number) => (
739
718
  <Carousel.Indicator key={index} {...item} inverted={inverted} />
740
719
  ))}
741
720
  </SIndicators>,
742
721
  );
743
722
  };
744
- Indicators.enhance = [keyboardFocusEnhance()];
745
723
 
746
724
  const Indicator = ({ styles, Children }: CarouselIndicatorProps) => {
747
725
  const SIndicator = Root;
package/src/style/carousel.shadow.css CHANGED
@@ -14,7 +14,7 @@ SContentBox, SModalBox {
14
14
  position: relative;
15
15
  overflow: hidden;
16
16
  border-radius: var(--intergalactic-surface-rounded, 6px);
17
- &:has(SItem[keyboardFocused]) {
17
+ &:has(SItem:focus-visible) {
18
18
  &:after {
19
19
  content: '';
20
20
  display: block;
@@ -54,23 +54,11 @@ SItem[zoomOut] {
54
54
  SIndicators {
55
55
  display: flex;
56
56
  justify-content: center;
57
- margin-top: var(--intergalactic-spacing-4x, 16px);
57
+ margin: var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;
58
58
  outline: none;
59
59
  position: relative;
60
60
  }
61
61
 
62
- SIndicators[keyboardFocused]:after {
63
- content: '';
64
- display: block;
65
- position: absolute;
66
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
67
- z-index: 1;
68
- width: calc(100% - 3px * 2);
69
- height: calc(100% - 3px);
70
- top: 0;
71
- left: 3px;
72
- }
73
-
74
62
  SIndicator {
75
63
  margin: 0 calc(0.5 * var(--intergalactic-spacing-3x, 12px));
76
64
  cursor: pointer;
@@ -110,24 +98,6 @@ SNext {
110
98
  }
111
99
  }
112
100
 
113
- SPrevButton, SNextButton {
114
- &:focus-visible {
115
- box-shadow: none;
116
- &:after {
117
- content: '';
118
- display: block;
119
- position: absolute;
120
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
121
- z-index: 1;
122
- width: calc(100% - 3px * 2);
123
- height: calc(100% - 3px * 2);
124
- top: 3px;
125
- left: 3px;
126
- border-radius: var(--intergalactic-control-rounded, 6px);
127
- }
128
- }
129
- }
130
-
131
101
  SPrev {
132
102
  margin-right: var(--intergalactic-spacing-2x, 8px);
133
103
  }