@scrippsproduct/networks-ui-library 1.0.18-dev.0 → 1.0.18-dev.1

package/dist/components/Carousel/Carousel.js

@@ -1,16 +1,16 @@
-import { jsx as s, Fragment as ee, jsxs as G } from "react/jsx-runtime";
-import { useRef as c, useState as v, useEffect as H, useCallback as f } from "react";
-import re from "./CarouselUtils.class.js";
-import { CarouselSlide as te } from "../CarouselSlide/CarouselSlide.js";
-import { chunkArray as ne, classes as E } from "../../utils/helpers.js";
-import { c as i } from "../../Carousel.module-DOrBKQEQ.mjs";
-import { C as le } from "../../chevron-left-DmvQntvu.mjs";
-import { C as oe } from "../../chevron-right-CaAz6ISN.mjs";
-const x = window.matchMedia("(width <= 600px)"), L = window.matchMedia("(width <= 800px"), R = window.matchMedia("(width <= 1024px"), I = window.matchMedia("(width <= 1280px");
-function pe({
-  id: C,
-  slides: $,
-  options: P = {
+import { jsx as o, Fragment as X, jsxs as K } from "react/jsx-runtime";
+import { useRef as s, useState as P, useEffect as B, useCallback as d } from "react";
+import Y from "./CarouselUtils.class.js";
+import { CarouselSlide as Z } from "../CarouselSlide/CarouselSlide.js";
+import { chunkArray as ee, classes as _ } from "../../utils/helpers.js";
+import { c as a } from "../../Carousel.module-DOrBKQEQ.mjs";
+import { C as re } from "../../chevron-left-DmvQntvu.mjs";
+import { C as te } from "../../chevron-right-CaAz6ISN.mjs";
+const b = window.matchMedia("(width <= 600px)"), z = window.matchMedia("(width <= 800px"), E = window.matchMedia("(width <= 1024px"), L = window.matchMedia("(width <= 1280px");
+function de({
+  id: g,
+  slides: x,
+  options: I = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 48,
@@ -31,189 +31,157 @@ function pe({
     wrapAround: !0
   }
 }) {
-  console.log(`Carousel component with id: ${C} initialized`);
-  const w = c(`carousel-${C}`), T = c(null), u = c(null), N = c(null), g = c($), M = c(null), y = c(null), r = c(null), e = c(P), o = c(P), U = c(P.showPagination), k = c("-50%"), [O, F] = v([]), [t, d] = v(null), [D, W] = v([]), [V, q] = v(0);
-  H(() => {
-    const n = () => {
-      x.matches ? (d({
-        ...o.current,
-        showControls: !1,
-        showPagination: !1,
-        cellsPerSlide: 1,
-        cellsPosition: o.current.wrapAround ? "center" : "flex-start",
-        gutterSize: 10
-      }), e.current = {
-        ...o.current,
+  console.log(`Carousel component with id: ${g} initialized`);
+  const p = s(`carousel-${g}`), R = s(null), i = s(null), $ = s(null), m = s(x), T = s(null), S = s(null), r = s(null), e = s(I), l = s(I), N = s("-50%"), [M, G] = P([]), [k, H] = P([]), [D, U] = P(0);
+  B(() => {
+    const t = () => {
+      b.matches ? e.current = {
+        ...l.current,
         showControls: !1,
         showPagination: !1,
         cellsPerSlide: 1,
-        cellsPosition: o.current.wrapAround ? "center" : "flex-start",
+        cellsPosition: l.current.wrapAround ? "center" : "flex-start",
         gutterSize: 10
-      }) : L.matches ? o.current.cellsPerSlide !== 1 ? (d({
-        ...o.current,
+      } : z.matches ? l.current.cellsPerSlide !== 1 ? e.current = {
+        ...l.current,
         cellsPerSlide: 2,
         showControls: !1,
         gutterSize: 10
-      }), e.current = {
-        ...o.current,
-        cellsPerSlide: 2,
-        showControls: !1,
-        gutterSize: 10
-      }) : (d({
-        ...o.current,
+      } : e.current = {
+        ...l.current,
         showControls: !1,
         gutterSize: 10
-      }), e.current = {
-        ...o.current,
-        showControls: !1,
-        gutterSize: 10
-      }) : R.matches ? o.current.cellsPerSlide !== 1 && o.current.cellsPerSlide !== 2 ? (d({
-        ...o.current,
-        cellsPerSlide: 3,
-        showControls: !1,
-        gutterSize: 10
-      }), e.current = {
-        ...o.current,
+      } : E.matches ? l.current.cellsPerSlide !== 1 && l.current.cellsPerSlide !== 2 ? e.current = {
+        ...l.current,
         cellsPerSlide: 3,
         showControls: !1,
         gutterSize: 10
-      }) : (d({
-        ...o.current,
+      } : e.current = {
+        ...l.current,
         showControls: !1,
         gutterSize: 10
-      }), e.current = {
-        ...o.current,
-        showControls: !1,
-        gutterSize: 10
-      }) : I.matches ? o.current.showPagination ? (d({
-        ...o.current,
+      } : L.matches ? l.current.showPagination ? e.current = {
+        ...l.current,
         showControls: !1
-      }), e.current = {
-        ...o.current,
-        showControls: !1
-      }) : (d({
-        ...o.current
-      }), e.current = {
-        ...o.current
-      }) : (d({
-        ...o.current
-      }), e.current = {
-        ...o.current
-      });
+      } : e.current = {
+        ...l.current
+      } : e.current = {
+        ...l.current
+      };
     };
-    n();
-    const l = () => {
-      q((h) => h + 1), n();
+    t();
+    const n = () => {
+      U((u) => u + 1), t();
     };
-    return x.addEventListener("change", l), L.addEventListener("change", l), R.addEventListener("change", l), I.addEventListener("change", l), () => {
-      x.removeEventListener("change", l), L.removeEventListener("change", l), R.removeEventListener("change", l), I.removeEventListener("change", l);
+    return b.addEventListener("change", n), z.addEventListener("change", n), E.addEventListener("change", n), L.addEventListener("change", n), () => {
+      b.removeEventListener("change", n), z.removeEventListener("change", n), E.removeEventListener("change", n), L.removeEventListener("change", n);
     };
   }, []);
-  const j = f((n, l) => {
-    const h = ne(l, n);
-    W([...h]);
-    let p = [];
-    for (let a = 0; a <= h.length - 1; a++) {
-      p[a] = {}, p[a].ariaLabel = `${a + 1} of ${h.length}`, p[a].layout = h[a][0].layout, p[a].cells = [];
-      for (let S = 0; S <= h[a].length - 1; S++)
-        p[a].cells[S] = {
-          props: h[a][S].props
+  const O = d((t, n) => {
+    const u = ee(n, t);
+    H([...u]);
+    let h = [];
+    for (let c = 0; c <= u.length - 1; c++) {
+      h[c] = {}, h[c].ariaLabel = `${c + 1} of ${u.length}`, h[c].layout = u[c][0].layout, h[c].cells = [];
+      for (let w = 0; w <= u[c].length - 1; w++)
+        h[c].cells[w] = {
+          props: u[c][w].props
         };
     }
-    const _ = [...p], b = [...p], Y = _.slice(-1), Z = _.slice(0);
-    return b.push(Z[0]), b.unshift(Y[0]), e.current.wrapAround && n.length > l ? b : _;
-  }, []), m = f(() => {
+    const C = [...h], A = [...h], J = C.slice(-1), Q = C.slice(0);
+    return A.push(Q[0]), A.unshift(J[0]), e.current.wrapAround && t.length > n ? A : C;
+  }, []), f = d(() => {
     e.current.autoplay && r.current.clearTimer();
-  }, []), J = f((n) => {
-    m();
-    const l = n.key;
-    l === "ArrowLeft" ? (n.preventDefault(), r.current.determineScrollAction(-1)) : l === "ArrowRight" && (n.preventDefault(), r.current.determineScrollAction(1));
-  }, [m]), Q = f(() => {
-    m(), u.current.addEventListener("scrollend", () => {
+  }, []), F = d((t) => {
+    f();
+    const n = t.key;
+    n === "ArrowLeft" ? (t.preventDefault(), r.current.determineScrollAction(-1)) : n === "ArrowRight" && (t.preventDefault(), r.current.determineScrollAction(1));
+  }, [f]), W = d(() => {
+    f(), i.current.addEventListener("scrollend", () => {
       r.current.handleScrollEnd();
     }, { once: !0 });
-  }, [m]), A = f(() => {
-    m(), u.current.addEventListener("scrollend", () => {
-      r.current.handleScrollEnd(), u.current.addEventListener("scroll", A, { once: !0 });
+  }, [f]), v = d(() => {
+    f(), i.current.addEventListener("scrollend", () => {
+      r.current.handleScrollEnd(), i.current.addEventListener("scroll", v, { once: !0 });
     }, { once: !0 });
-  }, [m]), X = () => {
+  }, [f]), q = () => {
     r.current && e.current.autoplay && r.current.clearTimer();
-  }, z = f(() => {
+  }, y = d(() => {
     //! make sure class is only instantiated once because of reacts
     //! "strict" mode double do hocus pocus
-    var n, l;
-    r.current !== null && V > 0 && ((l = (n = r.current).clearTimer) == null || l.call(n), r.current = null), r.current = new re({
-      carouselEl: T.current,
-      scrollerEl: u.current,
-      paginationEl: N.current,
-      slides: g.current,
+    var t, n;
+    r.current !== null && D > 0 && ((n = (t = r.current).clearTimer) == null || n.call(t), r.current = null), r.current = new Y({
+      carouselEl: R.current,
+      scrollerEl: i.current,
+      paginationEl: $.current,
+      slides: m.current,
       navBtnEls: {
-        next: M.current,
-        previous: y.current
+        next: T.current,
+        previous: S.current
       },
-      id: w.current,
+      id: p.current,
       options: {
         autoplay: e.current.autoplay,
-        wrapAround: e.current.wrapAround && g.current.length > e.current.cellsPerSlide,
+        wrapAround: e.current.wrapAround && m.current.length > e.current.cellsPerSlide,
         showPagination: e.current.showPagination,
         delay: e.current.autoplayDelay,
         slideGutterSize: e.current.gutterSize,
         slideAspectRatio: e.current.slideAspectRatio,
-        showControls: e.current.showControls && g.current.length > e.current.cellsPerSlide,
+        showControls: e.current.showControls && m.current.length > e.current.cellsPerSlide,
         cellsPerSlide: e.current.cellsPerSlide
       }
     });
-  }, [V]), K = f(() => {
-    u.current.addEventListener("scroll", A, { once: !0 });
-  }, [A]), B = f(() => {
-    if (F(j(g.current, e.current.cellsPerSlide)), g.current.length > e.current.cellsPerSlide) {
-      let n = setInterval(() => {
-        u.current !== null && (y.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(n), K(), z());
+  }, [D]), V = d(() => {
+    i.current.addEventListener("scroll", v, { once: !0 });
+  }, [v]), j = d(() => {
+    if (G(O(m.current, e.current.cellsPerSlide)), m.current.length > e.current.cellsPerSlide) {
+      let t = setInterval(() => {
+        i.current !== null && (S.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(t), V(), y());
       }, 100);
     } else {
-      let n = setInterval(() => {
-        u.current !== null && (clearInterval(n), z());
+      let t = setInterval(() => {
+        i.current !== null && (clearInterval(t), y());
       }, 100);
     }
-  }, [j, K, z]);
-  return H(() => {
-    if (t !== null) {
-      if (t.showControls) {
-        let n = 0;
-        t.showPagination && (n = n + 25), t.showScrollbar && (n = n + 6), k.current = `calc(-50% - ${n}px)`;
+  }, [O, V, y]);
+  return B(() => {
+    if (e.current !== null) {
+      if (e.current.showControls) {
+        let t = 0;
+        e.current.showPagination && (t = t + 25), e.current.showScrollbar && (t = t + 6), N.current = `calc(-50% - ${t}px)`;
       }
-      B();
+      j();
     }
     return () => {
-      X();
+      q();
     };
-  }, [B, t]), /* @__PURE__ */ s(ee, { children: t !== null && /* @__PURE__ */ G(
+  }, [j, e]), /* @__PURE__ */ o(X, { children: e.current !== null && /* @__PURE__ */ K(
     "div",
     {
-      className: i.carousel,
-      id: w.current,
-      ref: T,
+      className: a.carousel,
+      id: p.current,
+      ref: R,
       tabIndex: -1,
       role: "region",
       "aria-roledescription": "carousel",
-      "aria-label": t.title,
-      onKeyDown: J,
+      "aria-label": e.current.title,
+      onKeyDown: F,
       style: {
-        "--_carousel-gutters": t.wrapAround ? `${t.gutterSize <= 25 ? t.gutterSize : 25}%` : `0 ${t.gutterSize <= 25 ? t.gutterSize : 25}%`,
-        "--_slide-aspect-ratio": t.slideAspectRatio,
-        "--_cell-aspect-ratio": t.cellAspectRatio,
-        "--_slide-cell-size": `${100 / t.cellsPerSlide}%`,
-        "--_cells-position": t.cellsPosition,
-        "--_control-btns-offset-x": `${t.controlButtonsOffset}rem`,
-        "--_slide-gap": `${t.slideGap}rem`,
-        "--_controls-transform": k.current
+        "--_carousel-gutters": e.current.wrapAround ? `${e.current.gutterSize <= 25 ? e.current.gutterSize : 25}%` : `0 ${e.current.gutterSize <= 25 ? e.current.gutterSize : 25}%`,
+        "--_slide-aspect-ratio": e.current.slideAspectRatio,
+        "--_cell-aspect-ratio": e.current.cellAspectRatio,
+        "--_slide-cell-size": `${100 / e.current.cellsPerSlide}%`,
+        "--_cells-position": e.current.cellsPosition,
+        "--_control-btns-offset-x": `${e.current.controlButtonsOffset}rem`,
+        "--_slide-gap": `${e.current.slideGap}rem`,
+        "--_controls-transform": N.current
       },
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "ol",
           {
-            className: i.carousel__scroller,
-            ref: u,
+            className: a.carousel__scroller,
+            ref: i,
             role: "group",
             "aria-label": "Items Scroller",
             "aria-live": "Polite",
@@ -224,29 +192,29 @@ function pe({
             onMouseLeave: () => {
               e.current.autoplay && r.current !== null && r.current.startTimer();
             },
-            onTouchStart: Q,
-            "data-scrollbar": t.showScrollbar,
-            children: O.length > 0 && O.map((n, l) => /* @__PURE__ */ s(
-              te,
+            onTouchStart: W,
+            "data-scrollbar": e.current.showScrollbar,
+            children: M.length > 0 && M.map((t, n) => /* @__PURE__ */ o(
+              Z,
               {
-                slide: n,
-                index: l,
-                currentIndex: t.wrapAround ? 1 : 0,
-                variableHeight: t.variableHeight
+                slide: t,
+                index: n,
+                currentIndex: e.current.wrapAround ? 1 : 0,
+                variableHeight: e.current.variableHeight
               },
-              `carousel${C}-slide${l}`
+              `carousel${g}-slide${n}`
             ))
           }
         ),
-        t.showControls && $.length > e.current.cellsPerSlide && /* @__PURE__ */ G("div", { className: i["carousel-controls"], children: [
-          /* @__PURE__ */ s(
+        e.current.showControls && x.length > e.current.cellsPerSlide && /* @__PURE__ */ K("div", { className: a["carousel-controls"], children: [
+          /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              ref: y,
+              ref: S,
               title: "Previous Item",
-              className: E([i["carousel-controls__btn"], i["carousel-controls__previous"], "carousel-controls__previous"]),
-              "aria-controls": w.current,
+              className: _([a["carousel-controls__btn"], a["carousel-controls__previous"], "carousel-controls__previous"]),
+              "aria-controls": p.current,
               "aria-label": "Previous Item",
               onClick: () => {
                 r.current.determineScrollAction(-1);
@@ -257,17 +225,17 @@ function pe({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ s("i", { "aria-hidden": "true", children: /* @__PURE__ */ s(le, { width: t.controlArrowSize, height: t.controlArrowSize }) })
+              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(re, { width: e.current.controlArrowSize, height: e.current.controlArrowSize }) })
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              ref: M,
+              ref: T,
               title: "Next Item",
-              className: E([i["carousel-controls__btn"], i["carousel-controls__next"], "carousel-controls__next"]),
-              "aria-controls": w.current,
+              className: _([a["carousel-controls__btn"], a["carousel-controls__next"], "carousel-controls__next"]),
+              "aria-controls": p.current,
               "aria-label": "Next Item",
               onClick: () => {
                 r.current.determineScrollAction(1);
@@ -278,27 +246,27 @@ function pe({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ s("i", { "aria-hidden": "true", children: /* @__PURE__ */ s(oe, { width: t.controlArrowSize, height: t.controlArrowSize }) })
+              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(te, { width: e.current.controlArrowSize, height: e.current.controlArrowSize }) })
             }
           )
         ] }),
-        U.current && D.length > 1 && /* @__PURE__ */ s("div", { className: [i["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ s("ol", { className: i["carousel-nav__list"], ref: N, children: D.map((n, l) => /* @__PURE__ */ s(
+        e.current.showPagination && k.length > 1 && /* @__PURE__ */ o("div", { className: [a["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ o("ol", { className: a["carousel-nav__list"], ref: $, children: k.map((t, n) => /* @__PURE__ */ o(
           "li",
           {
-            className: E([i["carousel-nav__item"], "carousel-nav__item"]),
-            "data-current": l === 0 ? "true" : "false",
+            className: _([a["carousel-nav__item"], "carousel-nav__item"]),
+            "data-current": n === 0 ? "true" : "false",
             onClick: () => {
-              r.current.navigateToIndex(l);
+              r.current.navigateToIndex(n);
             },
-            title: `Navigate to slide ${l + 1}`
+            title: `Navigate to slide ${n + 1}`
           },
-          `carousel${w}-nav-${l}`
+          `carousel${p}-nav-${n}`
         )) }) })
       ]
     }
   ) });
 }
 export {
-  pe as Carousel,
-  pe as default
+  de as Carousel,
+  de as default
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.18-dev.0",
+  "version": "1.0.18-dev.1",
   "name": "@scrippsproduct/networks-ui-library",
   "description": "React Component Library for use in Scripps Networks external applications",
   "author": {