@scrippsproduct/networks-ui-library 2.0.5 → 2.0.6-alpha.0

package/dist/components/Carousel/Carousel.js

@@ -1,17 +1,17 @@
-import { jsx as l, Fragment as Y, jsxs as j } from "react/jsx-runtime";
-import { useRef as a, useState as m, useEffect as B, useCallback as u, Suspense as Z } from "react";
-import { chunkArray as ee, classes as g } from "../../utils/helpers.js";
-import re from "./CarouselUtils.class.js";
-import { CarouselSlide as te } from "../CarouselSlide/CarouselSlide.js";
-import { Loading as ne } from "../Loading/Loading.js";
+import { jsx as l, Fragment as Z, jsxs as B } from "react/jsx-runtime";
+import { useRef as a, useState as m, useEffect as G, useCallback as u, Suspense as ee } from "react";
+import { chunkArray as re, classes as g } from "../../utils/helpers.js";
+import te from "./CarouselUtils.class.js";
+import { CarouselSlide as ne } from "../CarouselSlide/CarouselSlide.js";
+import { Loading as le } from "../Loading/Loading.js";
 import { c as i } from "../../Carousel.module-Nwf_zL9b.mjs";
-import { C as le } from "../../chevron-left-D0UjbrKw.mjs";
-import { C as ce } from "../../chevron-right-0ZF3LruR.mjs";
+import { C as ce } from "../../chevron-left-D0UjbrKw.mjs";
+import { C as oe } from "../../chevron-right-0ZF3LruR.mjs";
 const A = window.matchMedia("(width <= 600px)"), P = window.matchMedia("(width <= 800px"), b = window.matchMedia("(width <= 1024px"), z = window.matchMedia("(width <= 1280px");
-function me({
+function ge({
   id: E,
   cells: L,
-  options: I = {
+  options: x = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 48,
@@ -32,8 +32,8 @@ function me({
     wrapAround: !0
   }
 }) {
-  const f = a(`carousel-${E}`), x = a(null), c = a(null), R = a(null), p = a([...L]), $ = a(null), w = a(null), r = a(null), e = a(I), o = a(I), N = a("-50%"), [T, G] = m([]), [M, H] = m([]), [k, U] = m(0), [F, D] = m(!1);
-  B(() => {
+  const h = a(`carousel-${E}`), I = a(null), c = a(null), R = a(null), p = a([...L]), $ = a(null), w = a(null), r = a(null), e = a(x), o = a(x), N = a("-50%"), [T, H] = m([]), [M, U] = m([]), [k, q] = m(0), [F, D] = m(!1);
+  G(() => {
     const t = () => {
       A.matches ? e.current = {
         ...o.current,
@@ -71,33 +71,33 @@ function me({
     };
     t();
     const n = () => {
-      U((s) => s + 1), t();
+      q((s) => s + 1), t();
     };
     return A.addEventListener("change", n), P.addEventListener("change", n), b.addEventListener("change", n), z.addEventListener("change", n), () => {
       A.removeEventListener("change", n), P.removeEventListener("change", n), b.removeEventListener("change", n), z.removeEventListener("change", n);
     };
   }, []);
   const O = u((t, n) => {
-    const s = ee(n, t);
-    H([...s]);
+    const s = re(n, t);
+    U([...s]);
     let y = [];
-    for (let h = 0; h <= s.length - 1; h++)
-      y[h] = {
-        ariaLabel: `${h + 1} of ${s.length}`,
-        layout: s[h][0].layout || "",
+    for (let f = 0; f <= s.length - 1; f++)
+      y[f] = {
+        ariaLabel: `${f + 1} of ${s.length}`,
+        layout: s[f][0].layout || "",
         cells: [
-          ...s[h]
+          ...s[f]
         ]
       };
-    const _ = [...y], C = [...y], Q = _.slice(-1), X = _.slice(0);
-    return C.push(X[0]), C.unshift(Q[0]), e.current.wrapAround && t.length > n ? C : _;
+    const _ = [...y], C = [...y], X = _.slice(-1), Y = _.slice(0);
+    return C.push(Y[0]), C.unshift(X[0]), e.current.wrapAround && t.length > n ? C : _;
   }, []), d = u(() => {
     e.current.autoplay && r.current && r.current.clearTimer();
   }, []), W = u((t) => {
     d();
     const n = t.key;
     n === "ArrowLeft" ? (t.preventDefault(), r.current && r.current.determineScrollAction(-1)) : n === "ArrowRight" && (t.preventDefault(), r.current && r.current.determineScrollAction(1));
-  }, [d]), q = u(() => {
+  }, [d]), J = u(() => {
     d(), c.current !== null && c.current.addEventListener("scrollend", () => {
       r.current && r.current.handleScrollEnd();
     }, { once: !0 });
@@ -105,15 +105,15 @@ function me({
     d(), c.current !== null && c.current.addEventListener("scrollend", () => {
       r.current && r.current.handleScrollEnd(), c.current && c.current.addEventListener("scroll", S, { once: !0 });
     }, { once: !0 });
-  }, [d]), J = () => {
+  }, [d]), Q = () => {
     var t;
     (t = r.current) == null || t.destroy();
   }, v = u(() => {
     //! make sure class is only instantiated once because of reacts
     //! "strict" mode double do hocus pocus
     var t, n;
-    r.current !== null && k > 0 && ((n = (t = r.current).destroy) == null || n.call(t), r.current = null), D(!1), r.current = new re({
-      carouselEl: x.current,
+    r.current !== null && k > 0 && ((n = (t = r.current).destroy) == null || n.call(t), r.current = null), D(!1), r.current = new te({
+      carouselEl: I.current,
       scrollerEl: c.current,
       paginationEl: R.current,
       cells: p.current,
@@ -121,7 +121,7 @@ function me({
         next: $.current,
         previous: w.current
       },
-      id: f.current,
+      id: h.current,
       options: {
         autoplay: e.current.autoplay,
         wrapAround: e.current.wrapAround && p.current.length > (e.current.cellsPerSlide || 1),
@@ -135,39 +135,42 @@ function me({
     }), D(!0);
   }, [k]), V = u(() => {
     c.current && c.current.addEventListener("scroll", S, { once: !0 });
-  }, [S]), K = u(() => {
+  }, [S]), K = () => {
+    var t;
+    return ((t = c.current) == null ? void 0 : t.querySelectorAll("[data-index]").length) ?? 0;
+  }, j = u(() => {
     const t = O(p.current, e.current.cellsPerSlide ?? 1);
-    G(t);
+    H(t);
     const n = t.length;
     if (p.current.length > (e.current.cellsPerSlide ?? 1)) {
       let s = setInterval(() => {
-        c.current !== null && c.current.children.length >= n && (w.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(s), V(), v());
+        c.current !== null && K() >= n && (w.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(s), V(), v());
       }, 100);
     } else {
       let s = setInterval(() => {
-        c.current !== null && c.current.children.length >= n && (clearInterval(s), v());
+        c.current !== null && K() >= n && (clearInterval(s), v());
       }, 100);
     }
   }, [O, V, v]);
-  return B(() => {
+  return G(() => {
     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)`;
       }
-      K();
+      j();
     }
     return () => {
-      J();
+      Q();
     };
-  }, [K, e]), /* @__PURE__ */ l(Y, { children: e.current !== null && /* @__PURE__ */ j(
+  }, [j, e]), /* @__PURE__ */ l(Z, { children: e.current !== null && /* @__PURE__ */ B(
     "div",
     {
       "aria-label": e.current.title,
       "aria-roledescription": "carousel",
       className: i.carousel,
-      id: f.current,
-      ref: x,
+      id: h.current,
+      ref: I,
       role: "region",
       style: {
         "--_carousel-gutters": e.current.wrapAround ? `${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%` : `0 ${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%`,
@@ -199,9 +202,9 @@ function me({
             onMouseLeave: () => {
               e.current.autoplay && r.current !== null && r.current.startTimer();
             },
-            onTouchStart: q,
+            onTouchStart: J,
             children: /* @__PURE__ */ l(
-              Z,
+              ee,
               {
                 fallback: /* @__PURE__ */ l(
                   "li",
@@ -209,11 +212,11 @@ function me({
                     className: g([i["carousel__loading-slide"], "carousel__loading-slide"]),
                     role: "presentation",
                     style: { aspectRatio: "var(--_slide-aspect-ratio)", width: "100%" },
-                    children: /* @__PURE__ */ l(ne, {})
+                    children: /* @__PURE__ */ l(le, {})
                   }
                 ),
                 children: T.length > 0 && T.map((t, n) => /* @__PURE__ */ l(
-                  te,
+                  ne,
                   {
                     currentIndex: e.current.wrapAround ? 1 : 0,
                     index: n,
@@ -226,11 +229,11 @@ function me({
             )
           }
         ),
-        e.current.showControls && L.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ j("div", { className: i["carousel-controls"], children: [
+        e.current.showControls && L.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ B("div", { className: i["carousel-controls"], children: [
           /* @__PURE__ */ l(
             "button",
             {
-              "aria-controls": f.current,
+              "aria-controls": h.current,
               "aria-label": "Previous Item",
               className: g([
                 i["carousel-controls__btn"],
@@ -249,13 +252,13 @@ function me({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(le, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
+              children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(ce, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
             }
           ),
           /* @__PURE__ */ l(
             "button",
             {
-              "aria-controls": f.current,
+              "aria-controls": h.current,
               "aria-label": "Next Item",
               className: g([i["carousel-controls__btn"], i["carousel-controls__next"], "carousel-controls__next"]),
               ref: $,
@@ -270,7 +273,7 @@ function me({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(ce, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
+              children: /* @__PURE__ */ l("i", { "aria-hidden": "true", children: /* @__PURE__ */ l(oe, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
             }
           )
         ] }),
@@ -284,13 +287,13 @@ function me({
               r.current && r.current.navigateToIndex(n);
             }
           },
-          `carousel${f}-nav-${n}`
+          `carousel${h}-nav-${n}`
         )) }) })
       ]
     }
   ) });
 }
 export {
-  me as Carousel,
-  me as default
+  ge as Carousel,
+  ge as default
 };

package/dist/components/Carousel/CarouselUtils.class.js

@@ -7,25 +7,25 @@ var n = (r, t, e) => B(r, typeof t != "symbol" ? t + "" : t, e), L = (r, t, e) =
 var w = (r, t, e) => t.has(r) ? g("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e);
 var l = (r, t, e) => (L(r, t, "access private method"), e);
 if (typeof window < "u" && !("onscrollend" in window)) {
-  let e = function(o, i, p) {
+  let e = function(o, i, m) {
     let d = o[i];
     o[i] = function() {
       let a = Array.prototype.slice.apply(arguments, [0]);
-      d.apply(this, a), a.unshift(d), p.apply(this, a);
+      d.apply(this, a), a.unshift(d), m.apply(this, a);
     };
-  }, h = function(o, i, p, d) {
+  }, h = function(o, i, m, d) {
     if (i != "scroll" && i != "scrollend") return;
     let a = this, u = t.get(a);
     if (u === void 0) {
-      let m = 0;
+      let I = 0;
       u = { scrollListener: (O) => {
-        clearTimeout(m), m = setTimeout(() => {
-          r.size ? setTimeout(u.scrollListener, 100) : (a && a.dispatchEvent(new Event("scrollend")), m = 0);
+        clearTimeout(I), I = setTimeout(() => {
+          r.size ? setTimeout(u.scrollListener, 100) : (a && a.dispatchEvent(new Event("scrollend")), I = 0);
         }, 100);
       }, listeners: 0 }, o.apply(a, ["scroll", u.scrollListener, { passive: !0 }]), t.set(a, u);
     }
     u.listeners++;
-  }, c = function(o, i, p) {
+  }, c = function(o, i, m) {
     if (i != "scroll" && i != "scrollend") return;
     let d = this, a = t.get(d);
     a !== void 0 && (--a.listeners > 0 || (o.apply(d, ["scroll", a.scrollListener]), t.delete(d)));
@@ -41,7 +41,7 @@ if (typeof window < "u" && !("onscrollend" in window)) {
   let t = /* @__PURE__ */ new WeakMap();
   e(Element.prototype, "addEventListener", h), e(window, "addEventListener", h), e(document, "addEventListener", h), e(Element.prototype, "removeEventListener", c), e(window, "removeEventListener", c), e(document, "removeEventListener", c);
 }
-var s, E, b, x, y, f, v, S, I, A;
+var s, E, b, x, y, f, v, S, p, A;
 class C {
   constructor({
     carouselEl: t,
@@ -173,7 +173,7 @@ x = function() {
  */
 y = function() {
   var t, e;
-  this.options.wrapAround ? (this.scrollerEl.style.scrollBehavior = "auto", this.scrollerEl.scrollTo(0, 0), l(this, s, E).call(this, { scrollport: this.scrollerEl, element: this.scrollerEl.children[1] })) : this.options.showControls ? (this.navBtnEls && ((t = this.navBtnEls) != null && t.previous) && ((e = this.navBtnEls) == null || e.previous.setAttribute("disabled", "disabled")), l(this, s, v).call(this)) : l(this, s, I).call(this), this.totalSlideEls === 1 && this.slideEls[0].removeAttribute("inert");
+  this.options.wrapAround ? (this.scrollerEl.style.scrollBehavior = "auto", this.scrollerEl.scrollTo(0, 0), l(this, s, E).call(this, { scrollport: this.scrollerEl, element: this.scrollerEl.children[1] })) : this.options.showControls ? (this.navBtnEls && ((t = this.navBtnEls) != null && t.previous) && ((e = this.navBtnEls) == null || e.previous.setAttribute("disabled", "disabled")), l(this, s, v).call(this)) : l(this, s, p).call(this), this.totalSlideEls === 1 && l(this, s, p).call(this);
 }, /**
  * Scrolls the carousel in a specified direction by a specified distance
  * 
@@ -195,7 +195,7 @@ f = function(t, e = 1) {
  * when scroller is scrolled
  */
 v = function() {
-  l(this, s, I).call(this), this.showPagination && l(this, s, A).call(this), this.options.wrapAround || l(this, s, S).call(this);
+  l(this, s, p).call(this), this.showPagination && l(this, s, A).call(this), this.options.wrapAround || l(this, s, S).call(this);
 }, /**
  * Sets the control arrow buttons to disabled if the carousel is at the start or end
  */
@@ -204,7 +204,7 @@ S = function() {
 }, /**
  * Sets the inert attribute on all slides that are not the current slide
  */
-I = function() {
+p = function() {
   const t = this.options.wrapAround ? this.currentIndex + 1 : this.currentIndex;
   this.slideEls.length === 1 ? this.slideEls[0].removeAttribute("inert") : this.slideEls.forEach((e, h) => {
     e.toggleAttribute("inert", h !== t);

package/package.json

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