@treely/strapi-slices 5.3.0 → 5.3.1

package/dist/slices/TextCarousel/styles.d.ts

@@ -4,7 +4,7 @@ export declare const CarouselContainer: import("@emotion/styled").StyledComponen
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 interface CarouselInnerContainerProps {
-    numberofitems: number;
+    numberOfItems: number;
 }
 export declare const CarouselInnerContainer: import("@emotion/styled").StyledComponent<{
     slot?: string | undefined;
@@ -273,10 +273,7 @@ export declare const CarouselInnerContainer: import("@emotion/styled").StyledCom
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & CarouselInnerContainerProps, {}, {}>;
-interface CardContainerProps {
-    numberofitems: number;
-}
-export declare const CardContainer: import("@emotion/styled").StyledComponent<(import("@chakra-ui/system/dist/system.types").MergeWithAs<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, Omit<import("@chakra-ui/system/dist/system.types").ChakraProps, never>, import("@chakra-ui/system/dist/system.types").As> & {
+export declare const CardContainer: import("@emotion/styled").StyledComponent<import("@chakra-ui/system/dist/system.types").MergeWithAs<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, Omit<import("@chakra-ui/system/dist/system.types").ChakraProps, never>, import("@chakra-ui/system/dist/system.types").As> & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & CardContainerProps, {}, {}>;
+}, {}, {}>;
 export {};

package/dist/strapi-slices.cjs.development.js

@@ -1987,18 +1987,15 @@ var TextCardGrid = function TextCardGrid(_ref) {
 };
 
 var _templateObject$5, _templateObject2$2, _templateObject3$1;
-var CarouselContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: var(--boemly-space-6);\n  padding: var(--boemly-space-8) 0;\n\n  @media screen and (max-width: ", ") {\n    margin-top: var(--boemly-space-4);\n    width: var(--boemly-size-full);\n  }\n\n  width: var(--boemly-size-full);\n\n  overflow-x: hidden;\n\n  @media screen and (max-width: ", ") {\n    overflow-x: scroll;\n  }\n"])), BREAKPOINT_MD, BREAKPOINT_MD);
-var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: calc(\n    (var(--boemly-sizes-sm) + var(--boemly-space-16)) *\n      ", " +\n      var(--boemly-space-16)\n  );\n  min-width: var(--boemly-sizes-full);\n\n  @media screen and (max-width: ", ") {\n    justify-content: flex-start;\n    width: calc(\n      (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *\n        ", " +\n        var(--boemly-space-6)\n    );\n  }\n"])), function (_ref) {
-  var numberofitems = _ref.numberofitems;
-  return numberofitems;
+var CarouselContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: var(--boemly-space-6);\n  padding: var(--boemly-space-8) 0;\n\n  @media screen and (max-width: ", ") {\n    margin-top: var(--boemly-space-4);\n    width: var(--boemly-sizes-full);\n  }\n\n  width: var(--boemly-sizes-full);\n\n  overflow-x: hidden;\n\n  @media screen and (max-width: ", ") {\n    overflow-x: scroll;\n  }\n"])), BREAKPOINT_MD, BREAKPOINT_MD);
+var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--boemly-space-6);\n  justify-content: center;\n\n  width: calc(\n    (var(--boemly-sizes-sm) + var(--boemly-space-6)) *\n      ", " +\n      var(--boemly-space-6)\n  );\n  min-width: var(--boemly-sizes-full);\n\n  @media screen and (max-width: ", ") {\n    justify-content: flex-start;\n    width: calc(\n      (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *\n        ", " +\n        var(--boemly-space-6)\n    );\n  }\n"])), function (_ref) {
+  var numberOfItems = _ref.numberOfItems;
+  return numberOfItems;
 }, BREAKPOINT_MD, function (_ref2) {
-  var numberofitems = _ref2.numberofitems;
-  return numberofitems;
+  var numberOfItems = _ref2.numberOfItems;
+  return numberOfItems;
 });
-var CardContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n\n  margin-right: var(--boemly-space-6);\n\n  &:first-of-type {\n    margin-left: var(--boemly-space-6);\n  }\n\n  @media screen and (max-width: ", ") {\n    width: var(--boemly-sizes-2xs);\n\n    margin-right: var(--boemly-space-4);\n\n    &:first-of-type {\n      margin-left: var(--boemly-space-6);\n    }\n  }\n"])), function (_ref3) {
-  var numberofitems = _ref3.numberofitems;
-  return numberofitems === 3 ? 'var(--boemly-sizes-xl)' : 'var(--boemly-sizes-sm)';
-}, BREAKPOINT_MD);
+var CardContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--boemly-sizes-sm);\n\n  @media screen and (max-width: ", ") {\n    width: var(--boemly-sizes-2xs);\n\n    margin-right: var(--boemly-space-4);\n\n    &:first-of-type {\n      margin-left: var(--boemly-space-6);\n    }\n  }\n"])), BREAKPOINT_MD);
 
 var messagesDe$f = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen'
@@ -2254,24 +2251,42 @@ var ContextProvider = function ContextProvider(_ref) {
   }, children));
 };
 
+var ITEM_GAP = 24;
+var MAX_OFFSET_RIGHT = 55;
 var TextCarousel = function TextCarousel(_ref) {
   var slice = _ref.slice;
+  var containerRef = React.useRef(null);
   var _useToken = boemly.useToken('colors', ['primary.50']),
     primary50 = _useToken[0];
   var _useMeasure = reactUse.useMeasure(),
-    slideRef = _useMeasure[0],
-    slideWidth = _useMeasure[1].width;
+    itemRef = _useMeasure[0],
+    itemWidth = _useMeasure[1].width;
   var _useContext = React.useContext(IntlContext),
     formatMessage = _useContext.formatMessage;
-  var containerRef = React.useRef(null);
   var _useWindowSize = reactUse.useWindowSize(),
     windowWidth = _useWindowSize.width;
   var _useState = React.useState(0),
     sliderIndex = _useState[0],
     setSliderIndex = _useState[1];
-  var allowScroll = windowWidth / 2 / slideWidth < slice.slides.length;
-  var canMoveRight = sliderIndex < slice.slides.length - 1;
-  var canMoveLeft = sliderIndex !== 0;
+  var numberOfItems = React.useMemo(function () {
+    return slice.slides.length;
+  }, [slice.slides.length]);
+  var sliderItemsWidth = React.useMemo(function () {
+    return numberOfItems * (itemWidth + ITEM_GAP) - ITEM_GAP;
+  }, [itemWidth, numberOfItems]);
+  var offsetLeft = React.useMemo(function () {
+    return sliderIndex * (itemWidth + ITEM_GAP) * -1;
+  }, [sliderIndex, itemWidth]);
+  var allowScroll = React.useMemo(function () {
+    return sliderItemsWidth + ITEM_GAP * 2 > windowWidth;
+  }, [sliderItemsWidth, windowWidth]);
+  var canMoveRight = React.useMemo(function () {
+    var offsetRight = windowWidth - (sliderItemsWidth + offsetLeft);
+    return offsetRight < MAX_OFFSET_RIGHT;
+  }, [itemWidth, sliderIndex, sliderItemsWidth, windowWidth]);
+  var canMoveLeft = React.useMemo(function () {
+    return sliderIndex !== 0;
+  }, [sliderIndex]);
   return React__default.default.createElement(boemly.DefaultSectionContainer, {
     backgroundColor: primary50,
     title: slice.title
@@ -2298,9 +2313,9 @@ var TextCarousel = function TextCarousel(_ref) {
     position: "relative",
     width: "full"
   }, React__default.default.createElement(CarouselInnerContainer, {
-    numberofitems: slice.slides.length,
+    numberOfItems: slice.slides.length,
     animate: {
-      x: slideWidth * -sliderIndex
+      x: offsetLeft
     },
     transition: {
       duration: 0.3,
@@ -2313,8 +2328,7 @@ var TextCarousel = function TextCarousel(_ref) {
       icon = _ref2.icon;
     return React__default.default.createElement(CardContainer, {
       key: id,
-      ref: slideRef,
-      numberofitems: slice.slides.length
+      ref: itemRef
     }, React__default.default.createElement(boemly.TextCardWithIcon, {
       title: title,
       text: text,