ublo-lib 1.16.0 → 1.16.1

package/es/common/components/carousel.js

@@ -4,99 +4,10 @@ import { useUbloContext } from "ublo/with-ublo";
 import * as Icons from "dt-design-system/es/icons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const TARGETS = "section[data-class]";
 const UNDRAGGABLE_TAGS = "img, a, button";
-const euclideanModulo = (a, b) => {
-  const m = a % b;
-  return m < 0 ? b < 0 ? m - b : m + b : m;
-};
-const preventDrag = element => element.setAttribute("draggable", false);
-const enableDrag = element => element.removeAttribute("draggable");
-const show = section => {
-  const propertiesToRemove = ["opacity", "pointer-events", "touch-action"];
-  propertiesToRemove.forEach(property => section.style.removeProperty(property));
-};
-function useInterval(callback, delay, current, dragging) {
-  const savedCallback = React.useRef();
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-  React.useEffect(() => {
-    function tick() {
-      savedCallback.current();
-    }
-    if (!dragging && delay !== null && delay !== 0) {
-      const interval = setInterval(tick, delay);
-      return () => clearInterval(interval);
-    }
-  }, [current, delay, dragging]);
-}
-const Dots = ({
-  count,
-  current,
-  setCurrent
-}) => {
-  const length = [...new Array(count)];
-  return _jsx("div", {
-    className: "carousel__dots",
-    children: length.map((_, i) => {
-      const updateCurrent = e => {
-        e.stopPropagation();
-        setCurrent(i);
-      };
-      const classes = classNames("carousel__dot", {
-        "carousel__dot--current": i === current
-      });
-      return _jsx("button", {
-        className: classes,
-        onClick: updateCurrent,
-        "aria-label": i
-      }, i);
-    })
-  });
-};
-const Thumbnails = ({
-  carouselRef,
-  count,
-  current,
-  setCurrent,
-  targets
-}) => {
-  const [thumbnails, setThumbnails] = React.useState([]);
-  React.useEffect(() => {
-    const carousel = carouselRef.current;
-    if (carousel) {
-      const sections = carousel.querySelectorAll(targets);
-      if (sections.length) {
-        const images = Array.from(sections).reduce((acc, section) => {
-          const image = section.querySelector("img");
-          if (!image?.src) return acc;
-          return [...acc, image.src];
-        }, []);
-        setThumbnails(images);
-      }
-    }
-  }, [carouselRef, count, targets]);
-  if (!count || !thumbnails.length) return null;
-  return _jsx("div", {
-    className: "carousel__thumbnails",
-    children: thumbnails.map((thumbnail, i) => {
-      const updateCurrent = e => {
-        e.stopPropagation();
-        setCurrent(i);
-      };
-      const classes = classNames("carousel__thumbnail", {
-        "carousel__thumbnail--current": i === current
-      });
-      return _jsx("input", {
-        type: "image",
-        className: classes,
-        src: thumbnail,
-        onClick: updateCurrent
-      }, i);
-    })
-  });
-};
-const Carousel = ({
+export default React.memo(Carousel);
+function Carousel({
   delay = 4000,
   fade = false,
   controls,
@@ -106,18 +17,18 @@ const Carousel = ({
   allowDragOnDesktop,
   children,
   onChange
-}) => {
+}) {
   const carouselRef = React.useRef();
   const {
     cmsMode
   } = useUbloContext();
-  const [count, setCount] = React.useState(0);
+  const [sections, setSections] = React.useState([]);
   const [current, setCurrent] = React.useState(0);
   const [touchStartPosition, setTouchStartPosition] = React.useState();
   const [dragging, setDragging] = React.useState(0);
   const editing = cmsMode === "editing";
   const draggingAllowed = !editing && allowDragOnDesktop;
-  const targets = "section[data-class]";
+  const count = sections.length;
   const showNextArrow = current < count - 1;
   const showPrevArrow = current !== 0;
   const next = React.useCallback(e => {
@@ -219,30 +130,37 @@ const Carousel = ({
     if (startX > endX && current < count - 1) next();
     setTouchStartPosition(undefined);
   };
-  const updateSectionCount = React.useCallback(() => {
+  const getSections = React.useCallback(() => {
     const carousel = carouselRef.current;
-    const sections = carousel.querySelectorAll(targets);
-    setCount(sections?.length || 0);
-  }, [targets]);
+    const sections = carousel.querySelectorAll(TARGETS);
+    const visibleSections = Array.from(sections).filter(section => {
+      return window.getComputedStyle(section).display !== "none";
+    });
+    return visibleSections;
+  }, []);
+  const updateSections = React.useCallback(() => {
+    const sections = getSections();
+    setSections(sections);
+  }, [getSections]);
   React.useEffect(() => {
     const zone = carouselRef.current?.querySelector(".cms");
     if (zone) {
-      zone.addEventListener("ublo-section-created", updateSectionCount);
-      zone.addEventListener("ublo-section-pasted", updateSectionCount);
-      zone.addEventListener("ublo-section-removed", updateSectionCount);
+      zone.addEventListener("ublo-section-created", updateSections);
+      zone.addEventListener("ublo-section-pasted", updateSections);
+      zone.addEventListener("ublo-section-removed", updateSections);
       return () => {
-        zone.removeEventListener("ublo-section-removed", updateSectionCount);
-        zone.removeEventListener("ublo-section-pasted", updateSectionCount);
-        zone.removeEventListener("ublo-section-created", updateSectionCount);
+        zone.removeEventListener("ublo-section-removed", updateSections);
+        zone.removeEventListener("ublo-section-pasted", updateSections);
+        zone.removeEventListener("ublo-section-created", updateSections);
       };
     }
-  }, [updateSectionCount]);
+  }, [updateSections]);
   React.useEffect(() => {
     const carousel = carouselRef.current;
     const inner = carousel.firstElementChild;
-    const sections = Array.from(carousel.querySelectorAll(targets));
+    const sections = getSections();
     const undraggableElements = Array.from(carousel.querySelectorAll(UNDRAGGABLE_TAGS));
-    setCount(sections.length);
+    setSections(sections);
     if (!editing) {
       sections.forEach((section, index) => {
         const anchors = Array.from(section.querySelectorAll("a"));
@@ -280,7 +198,7 @@ const Carousel = ({
       });
       if (fade) inner.style.removeProperty("transform");
     }
-  }, [count, current, editing, fade, targets]);
+  }, [current, editing, fade, getSections]);
   const onUndraggableElementClick = React.useCallback(e => {
     e.preventDefault();
     e.stopPropagation();
@@ -339,14 +257,107 @@ const Carousel = ({
     }), dots && _jsx(Dots, {
       count: count,
       current: current,
-      setCurrent: setCurrent
+      setCurrent: setCurrent,
+      sections: sections
     }), thumbnails && count > 1 && _jsx(Thumbnails, {
       carouselRef: carouselRef,
       count: count,
       current: current,
       setCurrent: setCurrent,
-      targets: targets
+      sections: sections
     })]
   });
-};
-export default React.memo(Carousel);
+}
+function Dots({
+  count,
+  current,
+  setCurrent
+}) {
+  const length = [...new Array(count)];
+  return _jsx("div", {
+    className: "carousel__dots",
+    children: length.map((_, i) => {
+      const updateCurrent = e => {
+        e.stopPropagation();
+        setCurrent(i);
+      };
+      const classes = classNames("carousel__dot", {
+        "carousel__dot--current": i === current
+      });
+      return _jsx("button", {
+        className: classes,
+        onClick: updateCurrent,
+        "aria-label": i
+      }, i);
+    })
+  });
+}
+function Thumbnails({
+  carouselRef,
+  current,
+  setCurrent,
+  sections
+}) {
+  const [thumbnails, setThumbnails] = React.useState([]);
+  React.useEffect(() => {
+    const carousel = carouselRef.current;
+    if (carousel) {
+      if (sections.length) {
+        const images = Array.from(sections).reduce((acc, section) => {
+          const image = section.querySelector("img");
+          if (!image?.src) return acc;
+          return [...acc, image.src];
+        }, []);
+        setThumbnails(images);
+      }
+    }
+  }, [carouselRef, sections]);
+  if (!thumbnails.length) return null;
+  return _jsx("div", {
+    className: "carousel__thumbnails",
+    children: thumbnails.map((thumbnail, i) => {
+      const updateCurrent = e => {
+        e.stopPropagation();
+        setCurrent(i);
+      };
+      const classes = classNames("carousel__thumbnail", {
+        "carousel__thumbnail--current": i === current
+      });
+      return _jsx("input", {
+        type: "image",
+        className: classes,
+        src: thumbnail,
+        onClick: updateCurrent
+      }, i);
+    })
+  });
+}
+function euclideanModulo(a, b) {
+  const m = a % b;
+  return m < 0 ? b < 0 ? m - b : m + b : m;
+}
+function preventDrag(element) {
+  element.setAttribute("draggable", false);
+}
+function enableDrag(element) {
+  element.removeAttribute("draggable");
+}
+function show(section) {
+  const propertiesToRemove = ["opacity", "pointer-events", "touch-action"];
+  propertiesToRemove.forEach(property => section.style.removeProperty(property));
+}
+function useInterval(callback, delay, current, dragging) {
+  const savedCallback = React.useRef();
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  React.useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (!dragging && delay !== null && delay !== 0) {
+      const interval = setInterval(tick, delay);
+      return () => clearInterval(interval);
+    }
+  }, [current, delay, dragging]);
+}

package/es/common/components/instant-search/links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/links.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAGrC,aAAK,KAAK,GAAG;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,iBAAiB,GAClB,EAAE,KAAK,sBAoEP"}
+{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/links.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAGrC,aAAK,KAAK,GAAG;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,iBAAiB,GAClB,EAAE,KAAK,sBAmEP"}

package/es/common/components/instant-search/links.js

@@ -25,8 +25,6 @@ export default function Links({ icon, linksTitle, links, pageTitleAsTitle, loadi
                             const linkTitle = Utils.getHighlight(titleProperty, link.highlight) ||
                                 link.document[titleProperty];
                             const linkText = Utils.getHighlight("text", link.highlight, true) || text;
-                            return (
-                            // @ts-ignore
-                            _jsxs(Link, { href: decodedPath, className: css.link, onClick: sendPlausibleGoal(decodedPath), onMouseDown: createRipple, children: [_jsx(Icon, { className: css.linkIcon }), _jsxs("div", { className: css.linkContent, children: [parentTitle && (_jsx("div", { className: css.linkParent, dangerouslySetInnerHTML: { __html: parentTitle } })), _jsx("div", { className: css.linkTitle, dangerouslySetInnerHTML: { __html: linkTitle } }), linkText && (_jsx("div", { className: css.linkText, dangerouslySetInnerHTML: { __html: linkText } }))] })] }, id));
+                            return (_jsxs(Link, { href: decodedPath, className: css.link, onClick: sendPlausibleGoal(decodedPath), onMouseDown: createRipple, children: [_jsx(Icon, { className: css.linkIcon }), _jsxs("div", { className: css.linkContent, children: [parentTitle && (_jsx("div", { className: css.linkParent, dangerouslySetInnerHTML: { __html: parentTitle } })), _jsx("div", { className: css.linkTitle, dangerouslySetInnerHTML: { __html: linkTitle } }), linkText && (_jsx("div", { className: css.linkText, dangerouslySetInnerHTML: { __html: linkText } }))] })] }, id));
                         })] })] }));
 }

package/es/common/components/instant-search/products.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"products.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/products.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAGrC,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,mBAAmB,GACpB,EAAE,KAAK,eA6HP"}
+{"version":3,"file":"products.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/products.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAGrC,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,mBAAmB,GACpB,EAAE,KAAK,eA4HP"}

package/es/common/components/instant-search/products.js

@@ -37,8 +37,6 @@ export default function Products({ lang, products, weekNumber, loading, sendPlau
                     const productText = Utils.getHighlight("text", product.highlight) || text;
                     const showPrice = price !== undefined && weekNumber !== null;
                     const imagePlaceholderStategy = imagePlaceholder ? "blur" : "empty";
-                    return (
-                    // @ts-ignore
-                    _jsxs(Link, { className: css.product, href: decodedPath, onClick: sendPlausibleGoal(decodedPath), onMouseDown: createRipple, children: [_jsx(Image, { className: css.productImage, src: image, alt: title, width: 220, height: 180, placeholder: imagePlaceholderStategy, blurDataURL: imagePlaceholder }), _jsxs("div", { className: css.productContent, children: [parentTitle && (_jsx("div", { className: css.productParent, dangerouslySetInnerHTML: { __html: parentTitle } })), _jsx("div", { className: css.productPageTitle, dangerouslySetInnerHTML: { __html: productPageTitle } }), _jsx("div", { className: css.productTitle, dangerouslySetInnerHTML: { __html: productTitle } }), _jsx("div", { className: css.productTime, dangerouslySetInnerHTML: { __html: productTime } }), _jsx("div", { className: css.productText, dangerouslySetInnerHTML: { __html: productText } }), showPrice && (_jsx("div", { className: css.productPrice, dangerouslySetInnerHTML: { __html: price } }))] })] }, id));
+                    return (_jsxs(Link, { className: css.product, href: decodedPath, onClick: sendPlausibleGoal(decodedPath), onMouseDown: createRipple, children: [_jsx(Image, { className: css.productImage, src: image, alt: title, width: 220, height: 180, placeholder: imagePlaceholderStategy, blurDataURL: imagePlaceholder }), _jsxs("div", { className: css.productContent, children: [parentTitle && (_jsx("div", { className: css.productParent, dangerouslySetInnerHTML: { __html: parentTitle } })), _jsx("div", { className: css.productPageTitle, dangerouslySetInnerHTML: { __html: productPageTitle } }), _jsx("div", { className: css.productTitle, dangerouslySetInnerHTML: { __html: productTitle } }), _jsx("div", { className: css.productTime, dangerouslySetInnerHTML: { __html: productTime } }), _jsx("div", { className: css.productText, dangerouslySetInnerHTML: { __html: productText } }), showPrice && (_jsx("div", { className: css.productPrice, dangerouslySetInnerHTML: { __html: price } }))] })] }, id));
                 }), !noProduct && !isOtherResultsEmpty && (_jsx("div", { className: css.otherProducts, children: _jsxs(Button, { className: css.otherProductsButton, onClick: scrollToOtherResults, children: [message(lang, "showOtherResults"), _jsx(Icons.ArrowDown, {})] }) }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "peerDependencies": {
     "dt-design-system": "^2.9.0",
     "leaflet": "^1.9.1",