ublo-lib 1.24.3 → 1.25.0

package/es/common/components/tabbed-zones.js

@@ -1,50 +1,103 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import classNames from "classnames";
 import Zone from "ublo/zone";
-const defaultTabs = [{ subs: null }, { subs: 2 }];
-export default function TabbedZones({ current = 0, currentSub = 0, tabs = defaultTabs, zonesProps = {}, }) {
-    const [currentTab, setCurrentTab] = React.useState(current);
-    const [currentSubTab, setCurrentSubTab] = React.useState(currentSub);
-    return (_jsxs("div", { className: "tabbed-zones", children: [_jsx("div", { className: "tabbed-zones__tabs", children: tabs.map((_, i) => {
-                    const updateCurrentTab = () => {
-                        setCurrentTab(i);
-                        setCurrentSubTab(0);
-                    };
-                    const classes = classNames("tabbed-zones__tab", `tabbed-zones__tab--${i}`, {
-                        "tabbed-zones__tab--current": i === currentTab,
-                    });
-                    return (_jsx("div", { className: classes, onClick: updateCurrentTab, children: _jsx(Zone, { id: `tabbed-zones-tab-${i}`, section: "rich-text", maxSections: "1", tooltip: "Zone d'edition: Titre onglet" }) }, i));
-                }) }), tabs.map((tab, i) => {
-                if (!tab.subs)
-                    return null;
-                const length = [...new Array(tab.subs)];
-                const classes = classNames("tabbed-zones__sub-tabs", `tabbed-zones__sub-tabs--${i}`, {
-                    "tabbed-zones__sub-tabs--current": i === currentTab,
-                });
-                return (_jsx("div", { className: classes, children: length.map((_, j) => {
-                        const updateCurrentTab = () => setCurrentSubTab(j);
-                        const classes = classNames("tabbed-zones__sub-tab", `tabbed-zones__sub-tab--${i}-${j}`, {
-                            "tabbed-zones__sub-tab--current": i === currentTab && j === currentSubTab,
-                        });
-                        return (_jsx("div", { className: classes, onClick: updateCurrentTab, children: _jsx(Zone, { id: `tabbed-zones-sub-tab-${i}-${j}`, section: "rich-text", maxSections: "1", tooltip: "Zone d'edition: Titre onglet", ...zonesProps }) }, j));
-                    }) }, i));
-            }), _jsxs("div", { className: "tabbed-zones__zones", children: [tabs.map((tab, i) => {
-                        const classes = classNames("tabbed-zones__zone", `tabbed-zones__zone--${i}`, {
-                            "tabbed-zones__zone--current": i === currentTab,
-                        });
-                        if (tab.subs)
-                            return null;
-                        return (_jsx("div", { className: classes, children: _jsx(Zone, { id: `tabbed-zone-${i}`, tooltip: "Zone d'edition : Contenu onglet", ...zonesProps }) }, i));
-                    }), tabs.map((tab, i) => {
-                        if (!tab.subs)
-                            return null;
-                        const length = [...new Array(tab.subs)];
-                        return length.map((_, j) => {
-                            const classes = classNames("tabbed-zones__zone", `tabbed-zones__zone--${i}-${j}`, {
-                                "tabbed-zones__zone--current": i === currentTab && j === currentSubTab,
-                            });
-                            return (_jsx("div", { className: classes, children: _jsx(Zone, { id: `tabbed-zone-offers-${i}-${j}`, className: "tabbed-zone-offers", tooltip: "Zone d'edition : Contenu et blocs produit", ...zonesProps }) }, j));
-                        });
-                    })] })] }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultTabs = [{
+  subs: null
+}, {
+  subs: 2
+}];
+export default function TabbedZones({
+  current = 0,
+  currentSub = 0,
+  tabs = defaultTabs,
+  zonesProps = {}
+}) {
+  const [currentTab, setCurrentTab] = React.useState(current);
+  const [currentSubTab, setCurrentSubTab] = React.useState(currentSub);
+  return _jsxs("div", {
+    className: "tabbed-zones",
+    children: [_jsx("div", {
+      className: "tabbed-zones__tabs",
+      children: tabs.map((_, i) => {
+        const updateCurrentTab = () => {
+          setCurrentTab(i);
+          setCurrentSubTab(0);
+        };
+        const classes = classNames("tabbed-zones__tab", `tabbed-zones__tab--${i}`, {
+          "tabbed-zones__tab--current": i === currentTab
+        });
+        return _jsx("div", {
+          className: classes,
+          onClick: updateCurrentTab,
+          children: _jsx(Zone, {
+            id: `tabbed-zones-tab-${i}`,
+            section: "rich-text",
+            maxSections: "1",
+            tooltip: "Zone d'edition: Titre onglet"
+          })
+        }, i);
+      })
+    }), tabs.map((tab, i) => {
+      if (!tab.subs) return null;
+      const length = [...new Array(tab.subs)];
+      const classes = classNames("tabbed-zones__sub-tabs", `tabbed-zones__sub-tabs--${i}`, {
+        "tabbed-zones__sub-tabs--current": i === currentTab
+      });
+      return _jsx("div", {
+        className: classes,
+        children: length.map((_, j) => {
+          const updateCurrentTab = () => setCurrentSubTab(j);
+          const classes = classNames("tabbed-zones__sub-tab", `tabbed-zones__sub-tab--${i}-${j}`, {
+            "tabbed-zones__sub-tab--current": i === currentTab && j === currentSubTab
+          });
+          return _jsx("div", {
+            className: classes,
+            onClick: updateCurrentTab,
+            children: _jsx(Zone, {
+              id: `tabbed-zones-sub-tab-${i}-${j}`,
+              section: "rich-text",
+              maxSections: "1",
+              tooltip: "Zone d'edition: Titre onglet",
+              ...zonesProps
+            })
+          }, j);
+        })
+      }, i);
+    }), _jsxs("div", {
+      className: "tabbed-zones__zones",
+      children: [tabs.map((tab, i) => {
+        const classes = classNames("tabbed-zones__zone", `tabbed-zones__zone--${i}`, {
+          "tabbed-zones__zone--current": i === currentTab
+        });
+        if (tab.subs) return null;
+        return _jsx("div", {
+          className: classes,
+          children: _jsx(Zone, {
+            id: `tabbed-zone-${i}`,
+            tooltip: "Zone d'edition : Contenu onglet",
+            ...zonesProps
+          })
+        }, i);
+      }), tabs.map((tab, i) => {
+        if (!tab.subs) return null;
+        const length = [...new Array(tab.subs)];
+        return length.map((_, j) => {
+          const classes = classNames("tabbed-zones__zone", `tabbed-zones__zone--${i}-${j}`, {
+            "tabbed-zones__zone--current": i === currentTab && j === currentSubTab
+          });
+          return _jsx("div", {
+            className: classes,
+            children: _jsx(Zone, {
+              id: `tabbed-zone-offers-${i}-${j}`,
+              className: "tabbed-zone-offers",
+              tooltip: "Zone d'edition : Contenu et blocs produit",
+              ...zonesProps
+            })
+          }, j);
+        });
+      })]
+    })]
+  });
+}

package/es/common/hooks/use-faq.js

@@ -1,40 +1,41 @@
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
-const buildClass = (className) => `${className}--opened`;
+const buildClass = className => `${className}--opened`;
 const useFaq = (selector = ".faq-block", refresh) => {
-    const [blocks, setBlocks] = React.useState([]);
-    const { cmsMode } = useUbloContext();
-    const clicked = React.useCallback((clickedBlock, blocks) => () => {
-        if (cmsMode)
-            return;
-        const openedClass = buildClass(clickedBlock.classList[0]);
-        blocks.forEach((block) => {
-            const { classList } = block;
-            block !== clickedBlock || block.classList.contains(openedClass)
-                ? classList.remove(openedClass)
-                : classList.add(openedClass);
-        });
-    }, [cmsMode]);
-    const init = React.useCallback((block, blocks) => {
-        block.clicked = clicked(block, blocks);
-        block.addEventListener("click", block.clicked);
-    }, [clicked]);
-    const cleanup = React.useCallback((block) => {
-        block.removeEventListener("click", block.clicked);
-        const openedClass = buildClass(block.classList[0]);
-        block.classList.remove(openedClass);
-    }, []);
-    React.useEffect(() => {
-        if (cmsMode === undefined) {
-            setTimeout(() => {
-                const blocks = Array.from(document.querySelectorAll(selector));
-                setBlocks(blocks);
-            });
-        }
-    }, [cmsMode, selector, refresh]);
-    React.useEffect(() => {
-        blocks.forEach((block) => init(block, blocks));
-        return () => blocks.forEach(cleanup);
-    }, [blocks, cleanup, init]);
+  const [blocks, setBlocks] = React.useState([]);
+  const {
+    cmsMode
+  } = useUbloContext();
+  const clicked = React.useCallback((clickedBlock, blocks) => () => {
+    if (cmsMode) return;
+    const openedClass = buildClass(clickedBlock.classList[0]);
+    blocks.forEach(block => {
+      const {
+        classList
+      } = block;
+      block !== clickedBlock || block.classList.contains(openedClass) ? classList.remove(openedClass) : classList.add(openedClass);
+    });
+  }, [cmsMode]);
+  const init = React.useCallback((block, blocks) => {
+    block.clicked = clicked(block, blocks);
+    block.addEventListener("click", block.clicked);
+  }, [clicked]);
+  const cleanup = React.useCallback(block => {
+    block.removeEventListener("click", block.clicked);
+    const openedClass = buildClass(block.classList[0]);
+    block.classList.remove(openedClass);
+  }, []);
+  React.useEffect(() => {
+    if (cmsMode === undefined) {
+      setTimeout(() => {
+        const blocks = Array.from(document.querySelectorAll(selector));
+        setBlocks(blocks);
+      });
+    }
+  }, [cmsMode, selector, refresh]);
+  React.useEffect(() => {
+    blocks.forEach(block => init(block, blocks));
+    return () => blocks.forEach(cleanup);
+  }, [blocks, cleanup, init]);
 };
-export default useFaq;
+export default useFaq;

package/es/common/hooks/use-in-view.js

@@ -1,86 +1,86 @@
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
 const options = {
-    rootMargin: "0px",
-    threshold: ratio(100),
+  rootMargin: "0px",
+  threshold: ratio(100)
 };
 export default function useInView(ref, cmsMode, selector, repeat = true, intersectionValue = 0.2) {
-    const { lang, path } = useUbloContext();
-    const [compatible, setCompatible] = React.useState(false);
-    const callback = React.useCallback((entries) => {
-        entries.forEach((entry) => {
-            const { intersectionRatio, target } = entry;
-            if (!target || !target.classList[0])
-                return;
-            const inViewClass = buildClass(target.classList[0]);
-            if (intersectionRatio !== 0) {
-                if (repeat) {
-                    intersectionRatio <= intersectionValue
-                        ? target.classList.remove(inViewClass)
-                        : target.classList.add(inViewClass);
-                }
-                else {
-                    if (intersectionRatio >= intersectionValue) {
-                        target.classList.add(inViewClass);
-                    }
-                }
+  const {
+    lang,
+    path
+  } = useUbloContext();
+  const [compatible, setCompatible] = React.useState(false);
+  const callback = React.useCallback(entries => {
+    entries.forEach(entry => {
+      const {
+        intersectionRatio,
+        target
+      } = entry;
+      if (!target || !target.classList[0]) return;
+      const inViewClass = buildClass(target.classList[0]);
+      if (intersectionRatio !== 0) {
+        if (repeat) {
+          intersectionRatio <= intersectionValue ? target.classList.remove(inViewClass) : target.classList.add(inViewClass);
+        } else {
+          if (intersectionRatio >= intersectionValue) {
+            target.classList.add(inViewClass);
+          }
+        }
+      }
+    });
+  }, [intersectionValue, repeat]);
+  React.useEffect(() => {
+    setCompatible(typeof IntersectionObserver !== "undefined");
+    const container = ref.current;
+    const targets = selector !== undefined ? Array.from(container.querySelectorAll(selector)) : [container];
+    if (container) {
+      if (!cmsMode) {
+        if (!compatible) {
+          targets.forEach(target => {
+            const firstClassName = target.classList[0];
+            if (firstClassName) {
+              const inViewClassName = buildClass(firstClassName);
+              target.classList.add(inViewClassName);
+            }
+            target.setAttribute("data-in-view", "");
+          });
+        } else {
+          targets.forEach(target => {
+            const firstClassName = target.classList[0];
+            if (firstClassName) {
+              const inViewClassName = buildClass(firstClassName);
+              target.classList.remove(inViewClassName);
             }
-        });
-    }, [intersectionValue, repeat]);
-    React.useEffect(() => {
-        setCompatible(typeof IntersectionObserver !== "undefined");
-        const container = ref.current;
-        const targets = selector !== undefined
-            ? Array.from(container.querySelectorAll(selector))
-            : [container];
-        if (container) {
-            if (!cmsMode) {
-                if (!compatible) {
-                    targets.forEach((target) => {
-                        const firstClassName = target.classList[0];
-                        if (firstClassName) {
-                            const inViewClassName = buildClass(firstClassName);
-                            target.classList.add(inViewClassName);
-                        }
-                        target.setAttribute("data-in-view", "");
-                    });
-                }
-                else {
-                    targets.forEach((target) => {
-                        const firstClassName = target.classList[0];
-                        if (firstClassName) {
-                            const inViewClassName = buildClass(firstClassName);
-                            target.classList.remove(inViewClassName);
-                        }
-                        target.removeAttribute("data-in-view");
-                    });
-                    const observer = new IntersectionObserver(callback, options);
-                    const observe = () => {
-                        targets.forEach((target) => observer?.observe(target));
-                    };
-                    const unobserve = () => targets.forEach((target) => {
-                        if (!target)
-                            return;
-                        const firstClassName = target.classList[0];
-                        if (firstClassName) {
-                            const inViewClassName = buildClass(firstClassName);
-                            target.classList.remove(inViewClassName);
-                        }
-                        target.removeAttribute("data-in-view");
-                        observer.disconnect();
-                    });
-                    observe();
-                    return () => {
-                        unobserve();
-                    };
-                }
+            target.removeAttribute("data-in-view");
+          });
+          const observer = new IntersectionObserver(callback, options);
+          const observe = () => {
+            targets.forEach(target => observer?.observe(target));
+          };
+          const unobserve = () => targets.forEach(target => {
+            if (!target) return;
+            const firstClassName = target.classList[0];
+            if (firstClassName) {
+              const inViewClassName = buildClass(firstClassName);
+              target.classList.remove(inViewClassName);
             }
+            target.removeAttribute("data-in-view");
+            observer.disconnect();
+          });
+          observe();
+          return () => {
+            unobserve();
+          };
         }
-    }, [callback, cmsMode, compatible, lang, path, ref, selector]);
+      }
+    }
+  }, [callback, cmsMode, compatible, lang, path, ref, selector]);
 }
 function ratio(steps) {
-    return Array.from({ length: steps + 1 }).map((_, i) => i / steps);
+  return Array.from({
+    length: steps + 1
+  }).map((_, i) => i / steps);
 }
 function buildClass(className) {
-    return `${className}--in-view`;
-}
+  return `${className}--in-view`;
+}

package/es/common/hooks/use-scroll-direction.js

@@ -1,36 +1,41 @@
 import { useState, useEffect } from "react";
 const SCROLL_UP = "up";
 const SCROLL_DOWN = "down";
-const useScrollDirection = ({ initialDirection, thresholdPixels, off, } = {}) => {
-    const [scrollDir, setScrollDir] = useState(initialDirection);
-    useEffect(() => {
-        const threshold = thresholdPixels || 0;
-        let lastScrollY = window.pageYOffset;
-        let ticking = false;
-        const updateScrollDir = () => {
-            const scrollY = window.pageYOffset;
-            if (Math.abs(scrollY - lastScrollY) < threshold) {
-                ticking = false;
-                return;
-            }
-            setScrollDir(scrollY > lastScrollY ? SCROLL_DOWN : SCROLL_UP);
-            lastScrollY = scrollY > 0 ? scrollY : 0;
-            ticking = false;
-        };
-        const onScroll = () => {
-            if (!ticking) {
-                window.requestAnimationFrame(updateScrollDir);
-                ticking = true;
-            }
-        };
-        if (!off) {
-            window.addEventListener("scroll", onScroll);
-        }
-        else {
-            setScrollDir(initialDirection);
-        }
-        return () => window.removeEventListener("scroll", onScroll);
-    }, [initialDirection, thresholdPixels, off]);
-    return { scrollDir };
+const useScrollDirection = ({
+  initialDirection,
+  thresholdPixels,
+  off
+} = {}) => {
+  const [scrollDir, setScrollDir] = useState(initialDirection);
+  useEffect(() => {
+    const threshold = thresholdPixels || 0;
+    let lastScrollY = window.pageYOffset;
+    let ticking = false;
+    const updateScrollDir = () => {
+      const scrollY = window.pageYOffset;
+      if (Math.abs(scrollY - lastScrollY) < threshold) {
+        ticking = false;
+        return;
+      }
+      setScrollDir(scrollY > lastScrollY ? SCROLL_DOWN : SCROLL_UP);
+      lastScrollY = scrollY > 0 ? scrollY : 0;
+      ticking = false;
+    };
+    const onScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateScrollDir);
+        ticking = true;
+      }
+    };
+    if (!off) {
+      window.addEventListener("scroll", onScroll);
+    } else {
+      setScrollDir(initialDirection);
+    }
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [initialDirection, thresholdPixels, off]);
+  return {
+    scrollDir
+  };
 };
-export default useScrollDirection;
+export default useScrollDirection;

package/es/common/hooks/use-stay.js

@@ -1,16 +1,19 @@
 import * as React from "react";
 const useStay = () => {
-    const [stay, setStay] = React.useState();
-    React.useEffect(() => {
-        const params = new URLSearchParams(document.location.search);
-        const from = params.get("from");
-        const to = params.get("to");
-        if (from && to) {
-            window.sessionStorage.setItem("stay", JSON.stringify({ from, to }));
-        }
-        const storedStay = window.sessionStorage.getItem("stay");
-        setStay(storedStay ? JSON.parse(storedStay) : undefined);
-    }, []);
-    return [stay, setStay];
+  const [stay, setStay] = React.useState();
+  React.useEffect(() => {
+    const params = new URLSearchParams(document.location.search);
+    const from = params.get("from");
+    const to = params.get("to");
+    if (from && to) {
+      window.sessionStorage.setItem("stay", JSON.stringify({
+        from,
+        to
+      }));
+    }
+    const storedStay = window.sessionStorage.getItem("stay");
+    setStay(storedStay ? JSON.parse(storedStay) : undefined);
+  }, []);
+  return [stay, setStay];
 };
-export default useStay;
+export default useStay;

package/es/common/hooks/use-sticky.js

@@ -1,40 +1,40 @@
 import * as React from "react";
 const eventsToBind = {
-    document: ["scroll"],
-    window: ["resize", "orientationchange"],
+  document: ["scroll"],
+  window: ["resize", "orientationchange"]
 };
 const useSticky = () => {
-    const ref = React.useRef(null);
-    const [sticky, setSticky] = React.useState(false);
-    const observe = React.useCallback(() => {
-        const container = ref.current;
-        if (container) {
-            const target = container;
-            const offset = target.getBoundingClientRect().top;
-            const stickyOffset = parseInt(getComputedStyle(target).top);
-            const stickyActive = offset <= stickyOffset;
-            setSticky((stickyActive && !sticky) || (stickyActive && sticky));
-        }
-    }, [sticky]);
-    const init = React.useCallback(() => {
-        Object.keys(eventsToBind).forEach((key) => {
-            const events = eventsToBind[key];
-            const target = window[key];
-            events.forEach((event) => target.addEventListener(event, observe));
-        });
-    }, [observe]);
-    const cleanup = React.useCallback(() => {
-        Object.keys(eventsToBind).forEach((key) => {
-            const events = eventsToBind[key];
-            const target = window[key];
-            events.forEach((event) => target.removeEventListener(event, observe));
-        });
-    }, [observe]);
-    React.useEffect(() => {
-        observe();
-        init();
-        return () => cleanup();
-    }, [cleanup, init, observe]);
-    return [ref, sticky];
+  const ref = React.useRef(null);
+  const [sticky, setSticky] = React.useState(false);
+  const observe = React.useCallback(() => {
+    const container = ref.current;
+    if (container) {
+      const target = container;
+      const offset = target.getBoundingClientRect().top;
+      const stickyOffset = parseInt(getComputedStyle(target).top);
+      const stickyActive = offset <= stickyOffset;
+      setSticky(stickyActive && !sticky || stickyActive && sticky);
+    }
+  }, [sticky]);
+  const init = React.useCallback(() => {
+    Object.keys(eventsToBind).forEach(key => {
+      const events = eventsToBind[key];
+      const target = window[key];
+      events.forEach(event => target.addEventListener(event, observe));
+    });
+  }, [observe]);
+  const cleanup = React.useCallback(() => {
+    Object.keys(eventsToBind).forEach(key => {
+      const events = eventsToBind[key];
+      const target = window[key];
+      events.forEach(event => target.removeEventListener(event, observe));
+    });
+  }, [observe]);
+  React.useEffect(() => {
+    observe();
+    init();
+    return () => cleanup();
+  }, [cleanup, init, observe]);
+  return [ref, sticky];
 };
-export default useSticky;
+export default useSticky;