@semcore/carousel 3.48.0 → 16.0.0-prerelease.11

package/lib/esm/index.mjs

@@ -1,4 +1,4 @@
-import { default as o } from "./Carousel.mjs";
+import { default as default2 } from "./Carousel.mjs";
 export {
-  o as default
+  default2 as default
 };

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -1,33 +1,33 @@
-import r from "./de.json.mjs";
-import o from "./en.json.mjs";
-import m from "./es.json.mjs";
-import t from "./fr.json.mjs";
-import i from "./it.json.mjs";
-import p from "./ja.json.mjs";
-import f from "./ko.json.mjs";
-import e from "./nl.json.mjs";
-import s from "./pt.json.mjs";
-import a from "./tr.json.mjs";
-import l from "./vi.json.mjs";
-import v from "./zh.json.mjs";
-import d from "./pl.json.mjs";
-import n from "./sv.json.mjs";
-var B = {
-  de: r,
-  en: o,
-  es: m,
-  fr: t,
-  it: i,
-  ja: p,
-  ko: f,
-  nl: e,
-  pt: s,
-  tr: a,
-  vi: l,
-  zh: v,
-  pl: d,
-  sv: n
+import de from "./de.json.mjs";
+import en from "./en.json.mjs";
+import es from "./es.json.mjs";
+import fr from "./fr.json.mjs";
+import it from "./it.json.mjs";
+import ja from "./ja.json.mjs";
+import ko from "./ko.json.mjs";
+import nl from "./nl.json.mjs";
+import pt from "./pt.json.mjs";
+import tr from "./tr.json.mjs";
+import vi from "./vi.json.mjs";
+import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
+var localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 export {
-  B as localizedMessages
+  localizedMessages
 };

package/lib/esm/translations/de.json.mjs

@@ -1,13 +1,17 @@
-const e = "Nächste Folie", s = "Vorherige Folie", o = "Folien", i = "Folie {slideNumber}", l = {
-  next: e,
-  prev: s,
-  slides: o,
-  slide: i
+const next = "Nächste Folie";
+const prev = "Vorherige Folie";
+const slides = "Folien";
+const slide = "Folie {slideNumber}";
+const de = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  l as default,
-  e as next,
-  s as prev,
-  i as slide,
-  o as slides
+  de as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/en.json.mjs

@@ -1,13 +1,17 @@
-const e = "Next slide", s = "Previous slide", d = "Slides", i = "Slide {slideNumber}", l = {
-  next: e,
-  prev: s,
-  slides: d,
-  slide: i
+const next = "Next slide";
+const prev = "Previous slide";
+const slides = "Slides";
+const slide = "Slide {slideNumber}";
+const en = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  l as default,
-  e as next,
-  s as prev,
-  i as slide,
-  d as slides
+  en as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/es.json.mjs

@@ -1,13 +1,17 @@
-const i = "Próxima diapositiva", s = "Diapositiva anterior", e = "Diapositivas", t = "Diapositiva {slideNumber}", a = {
-  next: i,
-  prev: s,
-  slides: e,
-  slide: t
+const next = "Próxima diapositiva";
+const prev = "Diapositiva anterior";
+const slides = "Diapositivas";
+const slide = "Diapositiva {slideNumber}";
+const es = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  a as default,
-  i as next,
-  s as prev,
-  t as slide,
-  e as slides
+  es as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/fr.json.mjs

@@ -1,13 +1,17 @@
-const e = "Diapositive suivante", s = "Diapositive précédente", i = "Diapositives", t = "Diapositive {slideNumber}", o = {
-  next: e,
-  prev: s,
-  slides: i,
-  slide: t
+const next = "Diapositive suivante";
+const prev = "Diapositive précédente";
+const slides = "Diapositives";
+const slide = "Diapositive {slideNumber}";
+const fr = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  o as default,
-  e as next,
-  s as prev,
-  t as slide,
-  i as slides
+  fr as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/it.json.mjs

@@ -1,13 +1,17 @@
-const e = "Slide successiva", s = "Slide precedente", d = "Slide", i = "Slide {slideNumber}", t = {
-  next: e,
-  prev: s,
-  slides: d,
-  slide: i
+const next = "Slide successiva";
+const prev = "Slide precedente";
+const slides = "Slide";
+const slide = "Slide {slideNumber}";
+const it = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  t as default,
-  e as next,
-  s as prev,
-  i as slide,
-  d as slides
+  it as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/ja.json.mjs

@@ -1,13 +1,17 @@
-const s = "次のスライド", e = "前のスライド", t = "スライド", n = "スライド{slideNumber}", d = {
-  next: s,
-  prev: e,
-  slides: t,
-  slide: n
+const next = "次のスライド";
+const prev = "前のスライド";
+const slides = "スライド";
+const slide = "スライド{slideNumber}";
+const ja = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  d as default,
-  s as next,
-  e as prev,
-  n as slide,
-  t as slides
+  ja as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/ko.json.mjs

@@ -1,13 +1,17 @@
-const s = "다음 슬라이드", e = "이전 슬라이드", t = "슬라이드", n = "슬라이드 {slideNumber}", o = {
-  next: s,
-  prev: e,
-  slides: t,
-  slide: n
+const next = "다음 슬라이드";
+const prev = "이전 슬라이드";
+const slides = "슬라이드";
+const slide = "슬라이드 {slideNumber}";
+const ko = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  o as default,
-  s as next,
-  e as prev,
-  n as slide,
-  t as slides
+  ko as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/nl.json.mjs

@@ -1,13 +1,17 @@
-const e = "Volgende dia", s = "Vorige dia", i = "Dia's", d = "Dia {slideNumber}", n = {
-  next: e,
-  prev: s,
-  slides: i,
-  slide: d
+const next = "Volgende dia";
+const prev = "Vorige dia";
+const slides = "Dia's";
+const slide = "Dia {slideNumber}";
+const nl = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  n as default,
-  e as next,
-  s as prev,
-  d as slide,
-  i as slides
+  nl as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/pl.json.mjs

@@ -1,13 +1,17 @@
-const s = "Następny slajd", e = "Poprzedni slajd", d = "Slajdy", l = "Slajd {slideNumber}", t = {
-  next: s,
-  prev: e,
-  slides: d,
-  slide: l
+const next = "Następny slajd";
+const prev = "Poprzedni slajd";
+const slides = "Slajdy";
+const slide = "Slajd {slideNumber}";
+const pl = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  t as default,
-  s as next,
-  e as prev,
-  l as slide,
-  d as slides
+  pl as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/pt.json.mjs

@@ -1,13 +1,17 @@
-const e = "Próximo slide", s = "Slide anterior", i = "Slides", t = "Slide {slideNumber}", d = {
-  next: e,
-  prev: s,
-  slides: i,
-  slide: t
+const next = "Próximo slide";
+const prev = "Slide anterior";
+const slides = "Slides";
+const slide = "Slide {slideNumber}";
+const pt = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  d as default,
-  e as next,
-  s as prev,
-  t as slide,
-  i as slides
+  pt as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/sv.json.mjs

@@ -1,13 +1,17 @@
-const e = "Nästa bild", s = "Föregående bild", d = "Bilder", l = "Bild {slideNumber}", t = {
-  next: e,
-  prev: s,
-  slides: d,
-  slide: l
+const next = "Nästa bild";
+const prev = "Föregående bild";
+const slides = "Bilder";
+const slide = "Bild {slideNumber}";
+const sv = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  t as default,
-  e as next,
-  s as prev,
-  l as slide,
-  d as slides
+  sv as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/tr.json.mjs

@@ -1,13 +1,17 @@
-const s = "Sonraki slayt", t = "Önceki slayt", e = "Slaytlar", l = "Slayt {slideNumber}", n = {
-  next: s,
-  prev: t,
-  slides: e,
-  slide: l
+const next = "Sonraki slayt";
+const prev = "Önceki slayt";
+const slides = "Slaytlar";
+const slide = "Slayt {slideNumber}";
+const tr = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  n as default,
-  s as next,
-  t as prev,
-  l as slide,
-  e as slides
+  tr as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/vi.json.mjs

@@ -1,13 +1,17 @@
-const e = "Slide tiếp theo", s = "Slide trước", t = "Slide", i = "Slide {slideNumber}", d = {
-  next: e,
-  prev: s,
-  slides: t,
-  slide: i
+const next = "Slide tiếp theo";
+const prev = "Slide trước";
+const slides = "Slide";
+const slide = "Slide {slideNumber}";
+const vi = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  d as default,
-  e as next,
-  s as prev,
-  i as slide,
-  t as slides
+  vi as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/lib/esm/translations/zh.json.mjs

@@ -1,13 +1,17 @@
-const s = "下一张幻灯片", e = "上一张幻灯片", t = "幻灯片", n = "幻灯片 {slideNumber}", d = {
-  next: s,
-  prev: e,
-  slides: t,
-  slide: n
+const next = "下一张幻灯片";
+const prev = "上一张幻灯片";
+const slides = "幻灯片";
+const slide = "幻灯片 {slideNumber}";
+const zh = {
+  next,
+  prev,
+  slides,
+  slide
 };
 export {
-  d as default,
-  s as next,
-  e as prev,
-  n as slide,
-  t as slides
+  zh as default,
+  next,
+  prev,
+  slide,
+  slides
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/carousel",
   "description": "Semrush Carousel Component",
-  "version": "3.48.0",
+  "version": "16.0.0-prerelease.11",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,17 +14,14 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "5.41.1",
-    "@semcore/icon": "4.60.1",
-    "@semcore/utils": "4.48.1",
-    "@semcore/button": "5.43.0",
-    "@semcore/modal": "4.55.0",
-    "@semcore/breakpoints": "1.41.1"
+    "@semcore/icon": "16.0.0-prerelease.11",
+    "@semcore/button": "16.0.0-prerelease.11",
+    "@semcore/modal": "16.0.0-prerelease.11",
+    "@semcore/flex-box": "16.0.0-prerelease.11",
+    "@semcore/breakpoints": "16.0.0-prerelease.11"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
-    "react": "16.8 - 18",
-    "react-dom": "16.8 - 18"
+    "@semcore/base-components": "^16.0.0-prerelease.11"
   },
   "repository": {
     "type": "git",
@@ -32,7 +29,6 @@
     "directory": "semcore/carousel"
   },
   "devDependencies": {
-    "@semcore/flex-box": "*",
     "@semcore/testing-utils": "1.0.0",
     "@types/react": "18.0.21"
   },

package/src/Carousel.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import Button from '@semcore/button';
 import Modal from '@semcore/modal';
 import { Box, Flex } from '@semcore/flex-box';
 import ChevronRight from '@semcore/icon/ChevronRight/l';
 import ChevronLeft from '@semcore/icon/ChevronLeft/l';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
-import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
+import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
+import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-import logger from '@semcore/utils/lib/logger';
+import logger from '@semcore/core/lib/utils/logger';
 import style from './style/carousel.shadow.css';
 import CarouselType, {
   CarouselProps,
@@ -21,9 +21,9 @@ import CarouselType, {
   CarouselIndicatorProps,
 } from './Carousel.types';
 import { BoxProps } from '@semcore/flex-box';
-import { findAllComponents } from '@semcore/utils/lib/findComponent';
+import { findAllComponents } from '@semcore/core/lib/utils/findComponent';
 import { createBreakpoints } from '@semcore/breakpoints';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 
 const MAP_TRANSFORM: Record<string, 'left' | 'right'> = {
   ArrowLeft: 'left',
@@ -33,7 +33,7 @@ const MAP_TRANSFORM: Record<string, 'left' | 'right'> = {
 const enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)] as const;
 const media = ['(min-width: 481px)', '(max-width: 480px)'];
 const BreakPoints = createBreakpoints(media);
-const isSmallScreen = (index: number) => index === 1;
+const isSmallScreen = (index?: number) => index === 1;
 
 class CarouselRoot extends Component<
   CarouselProps,
@@ -406,6 +406,7 @@ class CarouselRoot extends Component<
         key,
       })),
       role: 'tablist',
+      tabIndex: 0,
       'aria-label': getI18nText('slides'),
     };
   }
@@ -696,6 +697,7 @@ const Prev = (props: CarouselButtonProps) => {
           theme={inverted ? 'invert' : 'muted'}
           use={'tertiary'}
           size={'l'}
+          innerOutline
         />
       )}
     </SPrev>,
@@ -718,6 +720,7 @@ const Next = (props: CarouselButtonProps) => {
           theme={inverted ? 'invert' : 'muted'}
           use={'tertiary'}
           size={'l'}
+          innerOutline
         />
       )}
     </SNext>,
@@ -735,13 +738,12 @@ const Indicators = ({ items, styles, Children, inverted }: CarouselIndicatorsPro
   }
   return sstyled(styles)(
     <SIndicators render={Box}>
-      {items?.map((item, index) => (
+      {items?.map((item: CarouselItem, index: number) => (
         <Carousel.Indicator key={index} {...item} inverted={inverted} />
       ))}
     </SIndicators>,
   );
 };
-Indicators.enhance = [keyboardFocusEnhance()];
 
 const Indicator = ({ styles, Children }: CarouselIndicatorProps) => {
   const SIndicator = Root;

package/src/style/carousel.shadow.css

@@ -54,23 +54,11 @@ SItem[zoomOut] {
 SIndicators {
   display: flex;
   justify-content: center;
-  margin-top: var(--intergalactic-spacing-4x, 16px);
+  margin: var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;
   outline: none;
   position: relative;
 }
 
-SIndicators[keyboardFocused]: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 {
   margin: 0 calc(0.5 * var(--intergalactic-spacing-3x, 12px));
   cursor: pointer;
@@ -110,24 +98,6 @@ SNext {
   }
 }
 
-SPrevButton, SNextButton {
-  &:focus-visible {
-    box-shadow: none;
-    &: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 {
   margin-right: var(--intergalactic-spacing-2x, 8px);
 }