@scrippsproduct/networks-ui-library 2.0.3-dev.0 → 2.0.4-dev.0

package/dist/components/Carousel/Carousel.js

@@ -1,13 +1,13 @@
 import { jsx as l, Fragment as Y, jsxs as j } from "react/jsx-runtime";
-import { useRef as i, useState as m, useEffect as B, useCallback as u, Suspense as Z } from "react";
-import { chunkArray as ee, classes as A } from "../../utils/helpers.js";
+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 { c as a } from "../../Carousel.module-BsPaZX5L.mjs";
+import { c as i } from "../../Carousel.module-BsPaZX5L.mjs";
 import { C as le } from "../../chevron-left-D0UjbrKw.mjs";
 import { C as ce } from "../../chevron-right-0ZF3LruR.mjs";
-const _ = window.matchMedia("(width <= 600px)"), P = window.matchMedia("(width <= 800px"), b = window.matchMedia("(width <= 1024px"), z = window.matchMedia("(width <= 1280px");
+const A = window.matchMedia("(width <= 600px)"), P = window.matchMedia("(width <= 800px"), b = window.matchMedia("(width <= 1024px"), z = window.matchMedia("(width <= 1280px");
 function me({
   id: E,
   cells: L,
@@ -32,10 +32,10 @@ function me({
     wrapAround: !0
   }
 }) {
-  const f = i(`carousel-${E}`), x = i(null), c = i(null), R = i(null), p = i([...L]), T = i(null), g = i(null), r = i(null), e = i(I), o = i(I), $ = i("-50%"), [N, G] = m([]), [M, H] = m([]), [k, U] = m(0), [F, D] = m(!1);
+  const f = a(`carousel-${E}`), x = a(null), c = a(null), R = a(null), p = a([...L]), T = a(null), w = a(null), r = a(null), e = a(I), o = a(I), $ = a("-50%"), [N, G] = m([]), [M, H] = m([]), [k, U] = m(0), [F, D] = m(!1);
   B(() => {
     const n = () => {
-      _.matches ? e.current = {
+      A.matches ? e.current = {
         ...o.current,
         showControls: !1,
         showPagination: !1,
@@ -73,24 +73,24 @@ function me({
     const t = () => {
       U((s) => s + 1), n();
     };
-    return _.addEventListener("change", t), P.addEventListener("change", t), b.addEventListener("change", t), z.addEventListener("change", t), () => {
-      _.removeEventListener("change", t), P.removeEventListener("change", t), b.removeEventListener("change", t), z.removeEventListener("change", t);
+    return A.addEventListener("change", t), P.addEventListener("change", t), b.addEventListener("change", t), z.addEventListener("change", t), () => {
+      A.removeEventListener("change", t), P.removeEventListener("change", t), b.removeEventListener("change", t), z.removeEventListener("change", t);
     };
   }, []);
   const O = u((n, t) => {
     const s = ee(t, n);
     H([...s]);
-    let v = [];
+    let y = [];
     for (let h = 0; h <= s.length - 1; h++)
-      v[h] = {
+      y[h] = {
         ariaLabel: `${h + 1} of ${s.length}`,
         layout: s[h][0].layout || "",
         cells: [
           ...s[h]
         ]
       };
-    const y = [...v], C = [...v], Q = y.slice(-1), X = y.slice(0);
-    return C.push(X[0]), C.unshift(Q[0]), e.current.wrapAround && n.length > t ? C : y;
+    const _ = [...y], C = [...y], Q = _.slice(-1), X = _.slice(0);
+    return C.push(X[0]), C.unshift(Q[0]), e.current.wrapAround && n.length > t ? C : _;
   }, []), d = u(() => {
     e.current.autoplay && r.current && r.current.clearTimer();
   }, []), W = u((n) => {
@@ -101,13 +101,13 @@ function me({
     d(), c.current !== null && c.current.addEventListener("scrollend", () => {
       r.current && r.current.handleScrollEnd();
     }, { once: !0 });
-  }, [d]), w = u(() => {
+  }, [d]), S = u(() => {
     d(), c.current !== null && c.current.addEventListener("scrollend", () => {
-      r.current && r.current.handleScrollEnd(), c.current && c.current.addEventListener("scroll", w, { once: !0 });
+      r.current && r.current.handleScrollEnd(), c.current && c.current.addEventListener("scroll", S, { once: !0 });
     }, { once: !0 });
   }, [d]), J = () => {
     r.current && e.current.autoplay && r.current.clearTimer();
-  }, S = u(() => {
+  }, v = u(() => {
     //! make sure class is only instantiated once because of reacts
     //! "strict" mode double do hocus pocus
     var n, t;
@@ -118,7 +118,7 @@ function me({
       cells: p.current,
       navBtnEls: {
         next: T.current,
-        previous: g.current
+        previous: w.current
       },
       id: f.current,
       options: {
@@ -133,21 +133,21 @@ function me({
       }
     }), D(!0);
   }, [k]), V = u(() => {
-    c.current && c.current.addEventListener("scroll", w, { once: !0 });
-  }, [w]), K = u(() => {
+    c.current && c.current.addEventListener("scroll", S, { once: !0 });
+  }, [S]), K = u(() => {
     const n = O(p.current, e.current.cellsPerSlide ?? 1);
     G(n);
     const t = n.length;
     if (p.current.length > (e.current.cellsPerSlide ?? 1)) {
       let s = setInterval(() => {
-        c.current !== null && c.current.children.length >= t && (g.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(s), V(), S());
+        c.current !== null && c.current.children.length >= t && (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 >= t && (clearInterval(s), S());
+        c.current !== null && c.current.children.length >= t && (clearInterval(s), v());
       }, 100);
     }
-  }, [O, V, S]);
+  }, [O, V, v]);
   return B(() => {
     if (e.current !== null) {
       if (e.current.showControls) {
@@ -164,7 +164,7 @@ function me({
     {
       "aria-label": e.current.title,
       "aria-roledescription": "carousel",
-      className: a.carousel,
+      className: i.carousel,
       id: f.current,
       ref: x,
       role: "region",
@@ -186,7 +186,7 @@ function me({
           {
             "aria-label": "Items Scroller",
             "aria-live": "polite",
-            className: a.carousel__scroller,
+            className: i.carousel__scroller,
             "data-scrollbar": e.current.showScrollbar,
             ref: c,
             role: "group",
@@ -205,9 +205,10 @@ function me({
                 fallback: /* @__PURE__ */ l(
                   "li",
                   {
+                    className: g([i["carousel__loading-slide"], "carousel__loading-slide"]),
                     role: "presentation",
-                    style: { aspectRatio: e.current.slideAspectRatio, width: "100%" },
-                    children: /* @__PURE__ */ l(ne, { spinnerSize: "2rem" })
+                    style: { aspectRatio: "var(--_slide-aspect-ratio)", width: "100%" },
+                    children: /* @__PURE__ */ l(ne, {})
                   }
                 ),
                 children: N.length > 0 && N.map((n, t) => /* @__PURE__ */ l(
@@ -224,18 +225,18 @@ function me({
             )
           }
         ),
-        e.current.showControls && L.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ j("div", { className: a["carousel-controls"], children: [
+        e.current.showControls && L.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ j("div", { className: i["carousel-controls"], children: [
           /* @__PURE__ */ l(
             "button",
             {
               "aria-controls": f.current,
               "aria-label": "Previous Item",
-              className: A([
-                a["carousel-controls__btn"],
-                a["carousel-controls__previous"],
+              className: g([
+                i["carousel-controls__btn"],
+                i["carousel-controls__previous"],
                 "carousel-controls__previous"
               ]),
-              ref: g,
+              ref: w,
               title: "Previous Item",
               type: "button",
               onClick: () => {
@@ -255,7 +256,7 @@ function me({
             {
               "aria-controls": f.current,
               "aria-label": "Next Item",
-              className: A([a["carousel-controls__btn"], a["carousel-controls__next"], "carousel-controls__next"]),
+              className: g([i["carousel-controls__btn"], i["carousel-controls__next"], "carousel-controls__next"]),
               ref: T,
               title: "Next Item",
               type: "button",
@@ -272,10 +273,10 @@ function me({
             }
           )
         ] }),
-        e.current.showPagination && M.length > 1 && /* @__PURE__ */ l("div", { className: [a["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ l("ol", { className: a["carousel-nav__list"], ref: R, children: M.map((n, t) => /* @__PURE__ */ l(
+        e.current.showPagination && M.length > 1 && /* @__PURE__ */ l("div", { className: [i["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ l("ol", { className: i["carousel-nav__list"], ref: R, children: M.map((n, t) => /* @__PURE__ */ l(
           "li",
           {
-            className: A([a["carousel-nav__item"], "carousel-nav__item"]),
+            className: g([i["carousel-nav__item"], "carousel-nav__item"]),
             "data-current": t === 0 ? "true" : "false",
             title: `Navigate to slide ${t + 1}`,
             onClick: () => {

package/package.json

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