@treely/strapi-slices 7.1.1 → 7.1.3

package/README.md

@@ -39,10 +39,13 @@ 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
 cd ../path/to/your/project
+rm -r node_modules
+rm -r .next
+npm install
 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

@@ -3541,7 +3541,7 @@ var ImageContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateO
   return aspectRatio;
 });
 
-var ALLOWED_RATIOS = [2 / 3, 1 / 1, 3 / 2];
+var ALLOWED_RATIOS = [2 / 3, 1 / 1, 3 / 2, 2 / 1, 3 / 1, 4 / 1, 5 / 1]; // width / height
 var getClosestRatio = function getClosestRatio(width, height) {
   var ratio = width / height;
   var minDiff = Math.abs(ratio - ALLOWED_RATIOS[0]);
@@ -5384,50 +5384,51 @@ var Comparison = function Comparison(_ref) {
 };
 
 var _templateObject, _templateObject2;
-var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: ", ";\n  gap: var(--boemly-space-6);\n\n  @media screen and (max-width: ", ") {\n    width: calc(\n      ", " *\n        (var(--boemly-sizes-16) + var(--boemly-space-6))\n    );\n    justify-content: ", ";\n  }\n"])), function (props) {
+var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: ", ";\n  gap: var(--boemly-space-24);\n  padding-right: var(--boemly-space-24);\n  padding-left: var(--boemly-space-24);\n\n  @media screen and (max-width: ", ") {\n    width: calc(\n      ", " *\n        (var(--boemly-sizes-16) + var(--boemly-space-6))\n    );\n    justify-content: ", ";\n  }\n"])), function (props) {
   return props.logoCount < 5 ? 'center' : 'flex-start';
 }, BREAKPOINT_MD, function (props) {
   return props.logoCount;
 }, function (props) {
   return props.logoCount < 5 ? 'center' : 'flex-start';
 });
-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 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-24);\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,
-          width: isMobile ? '16' : '36',
           flexShrink: 0,
           transform: "translate3d(0, 0, 0)"
         }, React__default.default.createElement(boemly.Flex, {
@@ -5437,17 +5438,15 @@ var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
           alignItems: "center"
         }, 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) + ")",
-          width: isMobile ? '16' : '36',
-          borderRadius: "xl"
+          height: isMobile ? '16' : '36',
+          width: "calc(var(--boemly-sizes-10)\n                      * " + getClosestRatio(logo.img.data.attributes.width, logo.img.data.attributes.height) + ")"
         }, 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',
-            borderRadius: 'var(--boemly-radii-xl)'
+            objectFit: logo.objectFit || 'contain',
+            filter: 'grayscale(100%)'
           }
         }))));
       }));
@@ -5462,7 +5461,6 @@ var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
     }, logosToRender.map(function (logo, index) {
       return React__default.default.createElement(boemly.Box, {
         key: logo.id + "-" + index,
-        width: isMobile ? '16' : '36',
         flexShrink: 0,
         transform: "translate3d(0, 0, 0)"
       }, React__default.default.createElement(boemly.Flex, {
@@ -5472,17 +5470,15 @@ var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
         alignItems: "center"
       }, 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) + ")",
-        width: isMobile ? '16' : '36',
-        borderRadius: "xl"
+        height: isMobile ? '16' : '36',
+        width: "calc(var(--boemly-sizes-10) * " + getClosestRatio(logo.img.data.attributes.width, logo.img.data.attributes.height) + ")"
       }, 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',
-          borderRadius: 'var(--boemly-radii-xl)'
+          objectFit: logo.objectFit || 'contain',
+          filter: 'grayscale(100%)'
         }
       }))));
     })));
@@ -5500,6 +5496,22 @@ var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
     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;