@treely/strapi-slices 7.1.0 → 7.1.2

package/README.md

@@ -39,9 +39,12 @@ npm run build
 npm pack
 ```
 
-Go to the project which uses the strapi-slices package and install the package there:
+Go to the project which uses the strapi-slices package and remove the `node_modules` and the `.next` folder before installing the package there:
 
 ```bash
+rm -r node_modules
+rm -r .next
+npm install
 cd ../path/to/your/project
 npm install ../path/to/strapi-slices-package.tgz
 ```

package/dist/slices/CarouselMarqueeBanner/CarouselMarqueeBanner.d.ts

@@ -3,10 +3,7 @@ import StrapiImage from '../../models/strapi/StrapiImage';
 export interface CarouselMarqueeBannerProps {
     slice: {
         title?: string;
-        logos: {
-            id: number;
-            img: StrapiImage;
-        }[];
+        logos: StrapiImage[];
     };
 }
 export declare const CarouselMarqueeBanner: React.FC<CarouselMarqueeBannerProps>;

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

@@ -5393,35 +5393,39 @@ var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.m
 });
 var LogoGrid = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--boemly-space-6);\n\n  @media screen and (max-width: ", ") {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-gap: var(--boemly-space-6);\n  }\n"])), BREAKPOINT_MD);
 
-var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
+// Separate component containing the actual logic
+var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
   var slice = _ref.slice;
+  var _useToken = boemly.useToken('colors', ['primary.50']),
+    primary50 = _useToken[0];
   var _useWindowSize = reactUse.useWindowSize(),
     windowWidth = _useWindowSize.width;
-  var shouldDuplicateLogos = slice.logos.length < 5;
+  var hasEnoughLogosForLoop = slice.logos.length >= 5;
   var LOOP_ARRAY_LENGTH = windowWidth > 2000 ? 5 : 4;
   // Duplicate Logos to create a full loop
-  var logosToRender = shouldDuplicateLogos ? slice.logos : Array.from({
+  var logosToRender = hasEnoughLogosForLoop ? Array.from({
     length: LOOP_ARRAY_LENGTH
   }, function () {
     return slice.logos;
-  }).flat();
+  }).flat() : slice.logos;
   var _useMediaQuery = boemly.useMediaQuery(BREAKPOINT_MD_QUERY),
     isMobile = _useMediaQuery[0];
+  // Carousel setup
   var _useEmblaCarousel = useEmblaCarousel__default.default({
-      loop: shouldDuplicateLogos ? false : true,
+      loop: hasEnoughLogosForLoop,
       align: 'start',
       containScroll: 'trimSnaps',
       dragFree: true
-    }, shouldDuplicateLogos ? [] : [AutoScroll__default.default({
+    }, hasEnoughLogosForLoop ? [AutoScroll__default.default({
       playOnInit: true,
       speed: isMobile ? 0.5 : 1,
       stopOnInteraction: false,
       stopOnMouseEnter: false,
       stopOnFocusIn: false
-    })]),
+    })] : []),
     emblaRef = _useEmblaCarousel[0];
   var renderLogos = function renderLogos() {
-    if (slice.logos.length < 5) {
+    if (!hasEnoughLogosForLoop) {
       return React__default.default.createElement(LogoGrid, null, slice.logos.map(function (logo, index) {
         return React__default.default.createElement(boemly.Box, {
           key: logo.id + "-" + index,
@@ -5436,15 +5440,15 @@ var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
         }, React__default.default.createElement(boemly.Box, {
           position: "relative",
           maxHeight: "xl",
-          height: "calc(" + (isMobile ? 'var(--boemly-sizes-16)' : 'var(--boemly-sizes-36)') + " / " + getClosestRatio(logo.img.img.data.attributes.width, logo.img.img.data.attributes.height) + ")",
+          height: "calc(" + (isMobile ? 'var(--boemly-sizes-16)' : 'var(--boemly-sizes-36)') + " / " + getClosestRatio(logo.img.data.attributes.width, logo.img.data.attributes.height) + ")",
           width: isMobile ? '16' : '36',
           borderRadius: "xl"
         }, React__default.default.createElement(Image__default.default, {
-          src: strapiMediaUrl(logo.img.img, 'large'),
-          alt: logo.img.alt,
+          src: strapiMediaUrl(logo.img, 'large'),
+          alt: logo.alt,
           fill: true,
           style: {
-            objectFit: logo.img.objectFit || 'contain',
+            objectFit: logo.objectFit || 'contain',
             borderRadius: 'var(--boemly-radii-xl)'
           }
         }))));
@@ -5471,40 +5475,49 @@ var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
       }, React__default.default.createElement(boemly.Box, {
         position: "relative",
         maxHeight: "xl",
-        height: "calc(" + (isMobile ? 'var(--boemly-sizes-16)' : 'var(--boemly-sizes-36)') + " / " + getClosestRatio(logo.img.img.data.attributes.width, logo.img.img.data.attributes.height) + ")",
+        height: "calc(" + (isMobile ? 'var(--boemly-sizes-16)' : 'var(--boemly-sizes-36)') + " / " + getClosestRatio(logo.img.data.attributes.width, logo.img.data.attributes.height) + ")",
         width: isMobile ? '16' : '36',
         borderRadius: "xl"
       }, React__default.default.createElement(Image__default.default, {
-        src: strapiMediaUrl(logo.img.img, 'large'),
-        alt: logo.img.alt,
+        src: strapiMediaUrl(logo.img, 'large'),
+        alt: logo.alt,
         fill: true,
         style: {
-          objectFit: logo.img.objectFit || 'contain',
+          objectFit: logo.objectFit || 'contain',
           borderRadius: 'var(--boemly-radii-xl)'
         }
       }))));
     })));
   };
-  return React__default.default.createElement(boemly.DefaultSectionContainer, null, React__default.default.createElement(boemly.Box, {
-    maxWidth: "full",
-    margin: "auto",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "2xs",
-    backgroundColor: "gray.50",
-    padding: "42px 0 56px"
-  }, slice.title ? React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Flex, {
+  return React__default.default.createElement(boemly.DefaultSectionContainer, {
+    backgroundColor: primary50
+  }, React__default.default.createElement(React__default.default.Fragment, null, slice.title ? React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Flex, {
     alignItems: "center",
     flexDirection: "column"
   }, React__default.default.createElement(boemly.Heading, {
     size: "md",
     fontWeight: "500"
   }, slice.title)), React__default.default.createElement(boemly.Spacer, {
-    height: "12"
+    height: "12",
+    minHeight: "12"
   })) : null, renderLogos()));
 };
+// Lazy-rendering the child component after client-side hydration
+var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref2) {
+  var slice = _ref2.slice;
+  var _useState = React.useState(false),
+    showChild = _useState[0],
+    setShowChild = _useState[1];
+  React.useEffect(function () {
+    setShowChild(true); // Hydrate the component after the client-side is ready
+  }, []);
+  if (!showChild) {
+    return React__default.default.createElement("div", null);
+  }
+  return React__default.default.createElement(CarouselMarqueeBannerContent, {
+    slice: slice
+  });
+};
 
 var Timeline = function Timeline(_ref) {
   var slice = _ref.slice;