@scrippsproduct/networks-ui-library 2.0.4 → 2.0.5

package/dist/components/Carousel/Carousel.test.js

@@ -12,8 +12,10 @@ h.mock("./CarouselUtils.class", () => ({
   }))
 }));
 h.mock("../CarouselSlide", () => ({
-  CarouselSlide: ({ slide: l, index: e }) => /* @__PURE__ */ s("li", { "data-testid": `carousel-slide-${e}`, "data-index": e, children: l.ariaLabel }),
-  default: ({ slide: l, index: e }) => /* @__PURE__ */ s("li", { "data-testid": `carousel-slide-${e}`, "data-index": e, children: l.ariaLabel })
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  CarouselSlide: ({ slide: l, index: e }) => /* @__PURE__ */ s("li", { "data-index": e, "data-testid": `carousel-slide-${e}`, children: l.ariaLabel }),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: ({ slide: l, index: e }) => /* @__PURE__ */ s("li", { "data-index": e, "data-testid": `carousel-slide-${e}`, children: l.ariaLabel })
 }));
 h.mock("react-feather", () => ({
   ChevronLeft: () => /* @__PURE__ */ s("span", { "data-testid": "chevron-left", children: "Left" }),
@@ -21,6 +23,7 @@ h.mock("react-feather", () => ({
 }));
 h.mock("../../utils/helpers", () => ({
   classes: (l) => l.filter(Boolean).join(" "),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   chunkArray: (l, e) => {
     let t = [];
     for (let d = 0; d <= Math.floor(e.length / l); d++)
@@ -41,23 +44,23 @@ u("Carousel", () => {
     h.clearAllTimers();
   }), u("Basic Rendering", () => {
     r("should render carousel with basic props", () => {
-      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test-carousel", cells: l })), t = e.querySelector('[role="region"]');
+      const { container: e } = a(/* @__PURE__ */ s(n, { cells: l, id: "test-carousel" })), t = e.querySelector('[role="region"]');
       o(t).toBeInTheDocument();
     }), r("should render carousel with correct id", () => {
-      const { container: e } = a(/* @__PURE__ */ s(n, { id: "my-carousel", cells: l })), t = e.querySelector("#carousel-my-carousel");
+      const { container: e } = a(/* @__PURE__ */ s(n, { cells: l, id: "my-carousel" })), t = e.querySelector("#carousel-my-carousel");
       o(t).toBeInTheDocument();
     }), r("should render carousel with numeric id", () => {
-      const { container: e } = a(/* @__PURE__ */ s(n, { id: 123, cells: l })), t = e.querySelector("#carousel-123");
+      const { container: e } = a(/* @__PURE__ */ s(n, { cells: l, id: 123 })), t = e.querySelector("#carousel-123");
       o(t).toBeInTheDocument();
     }), r("should render with aria-roledescription", () => {
-      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l })), t = e.querySelector('[aria-roledescription="carousel"]');
+      const { container: e } = a(/* @__PURE__ */ s(n, { cells: l, id: "test" })), t = e.querySelector('[aria-roledescription="carousel"]');
       o(t).toBeInTheDocument();
     }), r("should render scroller element", () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      a(/* @__PURE__ */ s(n, { cells: l, id: "test" }));
       const e = i.getByRole("group", { name: "Items Scroller" });
       o(e).toBeInTheDocument();
     }), r("should render slides", async () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: l })), await c(() => {
+      a(/* @__PURE__ */ s(n, { cells: l, id: "test" })), await c(() => {
         const e = i.getAllByTestId(/carousel-slide-/);
         o(e.length).toBeGreaterThan(0);
       });
@@ -65,12 +68,12 @@ u("Carousel", () => {
   }), u("Options - Title", () => {
     r("should render with aria-label when title is provided", () => {
       const { container: e } = a(
-        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { title: "My Carousel" } })
+        /* @__PURE__ */ s(n, { cells: l, id: "test", options: { title: "My Carousel" } })
       ), t = e.querySelector('[aria-label="My Carousel"]');
       o(t).toBeInTheDocument();
     }), r("should handle empty title", () => {
       const { container: e } = a(
-        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { title: "" } })
+        /* @__PURE__ */ s(n, { cells: l, id: "test", options: { title: "" } })
       ), t = e.querySelector('[role="region"]');
       o(t).toBeInTheDocument();
     });
@@ -80,8 +83,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0 }
           }
         )
@@ -94,8 +97,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !1 }
           }
         )
@@ -107,8 +110,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: [l[0]],
+            id: "test",
             options: { showControls: !0, cellsPerSlide: 1 }
           }
         )
@@ -120,8 +123,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0, controlArrowSize: 64 }
           }
         )
@@ -136,8 +139,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showPagination: !0 }
           }
         )
@@ -151,8 +154,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showPagination: !1 }
           }
         )
@@ -163,8 +166,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: [l[0]],
+            id: "test",
             options: { showPagination: !0, cellsPerSlide: 1 }
           }
         )
@@ -175,8 +178,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showPagination: !0, cellsPerSlide: 1 }
           }
         )
@@ -190,14 +193,14 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showPagination: !0 }
           }
         )
       );
       await c(() => {
-        const t = e.querySelector('.carousel-nav__item[data-current="true"]');
+        const t = e.querySelector(".carousel-nav__item[data-current]");
         o(t).toBeInTheDocument();
       });
     });
@@ -207,8 +210,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showScrollbar: !0 }
           }
         )
@@ -216,7 +219,7 @@ u("Carousel", () => {
       const e = i.getByRole("group");
       o(e).toHaveAttribute("data-scrollbar", "true");
     }), r("should set scrollbar data attribute to false by default", () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      a(/* @__PURE__ */ s(n, { cells: l, id: "test" }));
       const e = i.getByRole("group");
       o(e).toHaveAttribute("data-scrollbar", "false");
     });
@@ -226,8 +229,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { cellsPerSlide: 2 }
           }
         )
@@ -240,8 +243,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { cellsPerSlide: 1 }
           }
         )
@@ -256,8 +259,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { wrapAround: !0, cellsPerSlide: 1 }
           }
         )
@@ -270,8 +273,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { wrapAround: !1, cellsPerSlide: 1 }
           }
         )
@@ -284,8 +287,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: [l[0]],
+            id: "test",
             options: { wrapAround: !0, cellsPerSlide: 1 }
           }
         )
@@ -300,8 +303,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { slideAspectRatio: "16/9" }
           }
         )
@@ -312,8 +315,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { cellAspectRatio: "1/1" }
           }
         )
@@ -324,8 +327,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { gutterSize: 15, wrapAround: !0 }
           }
         )
@@ -336,8 +339,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { slideGap: 2 }
           }
         )
@@ -348,8 +351,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { controlButtonsOffset: 20 }
           }
         )
@@ -359,21 +362,21 @@ u("Carousel", () => {
   }), u("Keyboard Navigation", () => {
     r("should handle ArrowRight key press", async () => {
       const { container: e } = a(
-        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { showControls: !0 } })
+        /* @__PURE__ */ s(n, { cells: l, id: "test", options: { showControls: !0 } })
       ), t = e.querySelector('[role="region"]');
       await c(() => {
         o(t).toBeInTheDocument();
       }), p.keyDown(t, { key: "ArrowRight" }), o(t).toBeInTheDocument();
     }), r("should handle ArrowLeft key press", async () => {
       const { container: e } = a(
-        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { showControls: !0 } })
+        /* @__PURE__ */ s(n, { cells: l, id: "test", options: { showControls: !0 } })
       ), t = e.querySelector('[role="region"]');
       await c(() => {
         o(t).toBeInTheDocument();
       }), p.keyDown(t, { key: "ArrowLeft" }), o(t).toBeInTheDocument();
     }), r("should not handle other keys", async () => {
       const { container: e } = a(
-        /* @__PURE__ */ s(n, { id: "test", cells: l })
+        /* @__PURE__ */ s(n, { cells: l, id: "test" })
       ), t = e.querySelector('[role="region"]');
       await c(() => {
         o(t).toBeInTheDocument();
@@ -385,8 +388,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { autoplay: !0 }
           }
         )
@@ -398,8 +401,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { autoplay: !0 }
           }
         )
@@ -411,8 +414,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0, autoplay: !0 }
           }
         )
@@ -425,8 +428,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0, autoplay: !0 }
           }
         )
@@ -437,7 +440,7 @@ u("Carousel", () => {
     });
   }), u("Touch Events", () => {
     r("should handle touch start on scroller", () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      a(/* @__PURE__ */ s(n, { cells: l, id: "test" }));
       const e = i.getByRole("group");
       p.touchStart(e), o(e).toBeInTheDocument();
     });
@@ -447,8 +450,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0 }
           }
         )
@@ -461,8 +464,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0 }
           }
         )
@@ -477,8 +480,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showPagination: !0 }
           }
         )
@@ -490,41 +493,41 @@ u("Carousel", () => {
     });
   }), u("Empty and Edge Cases", () => {
     r("should handle empty cells array", () => {
-      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: [] })), t = e.querySelector('[role="region"]');
+      const { container: e } = a(/* @__PURE__ */ s(n, { cells: [], id: "test" })), t = e.querySelector('[role="region"]');
       o(t).toBeInTheDocument();
     }), r("should handle single cell", async () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: [l[0]] })), await c(() => {
+      a(/* @__PURE__ */ s(n, { cells: [l[0]], id: "test" })), await c(() => {
         const e = i.getAllByTestId(/carousel-slide-/);
         o(e.length).toBe(1);
       });
     }), r("should handle cells without layout property", async () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: [
+      a(/* @__PURE__ */ s(n, { cells: [
         { id: 1, props: { title: "Cell 1" } },
         { id: 2, props: { title: "Cell 2" } }
-      ] })), await c(() => {
+      ], id: "test" })), await c(() => {
         const t = i.getAllByTestId(/carousel-slide-/);
         o(t.length).toBeGreaterThan(0);
       });
     }), r("should handle missing cell id", async () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: [
+      a(/* @__PURE__ */ s(n, { cells: [
         { props: { title: "Cell 1" }, layout: "default" },
         { props: { title: "Cell 2" }, layout: "default" }
-      ] })), await c(() => {
+      ], id: "test" })), await c(() => {
         const t = i.getByRole("region");
         o(t).toBeInTheDocument();
       });
     });
   }), u("Default Options", () => {
     r("should use default options when not provided", () => {
-      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l })), t = e.querySelector('[role="region"]');
+      const { container: e } = a(/* @__PURE__ */ s(n, { cells: l, id: "test" })), t = e.querySelector('[role="region"]');
       o(t).toBeInTheDocument();
     }), r("should merge custom options with defaults", async () => {
       a(
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0, slideGap: 3 }
           }
         )
@@ -536,18 +539,18 @@ u("Carousel", () => {
   }), u("Accessibility", () => {
     r("should have proper ARIA attributes", () => {
       const { container: e } = a(
-        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { title: "My Carousel" } })
+        /* @__PURE__ */ s(n, { cells: l, id: "test", options: { title: "My Carousel" } })
       ), t = e.querySelector('[role="region"]');
       o(t).toHaveAttribute("aria-roledescription", "carousel"), o(t).toHaveAttribute("aria-label", "My Carousel");
     }), r("should have tabIndex on carousel container", () => {
-      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l })), t = e.querySelector('[role="region"]');
+      const { container: e } = a(/* @__PURE__ */ s(n, { cells: l, id: "test" })), t = e.querySelector('[role="region"]');
       o(t).toHaveAttribute("tabIndex", "-1");
     }), r("should have tabIndex on scroller", () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      a(/* @__PURE__ */ s(n, { cells: l, id: "test" }));
       const e = i.getByRole("group");
       o(e).toHaveAttribute("tabIndex", "0");
     }), r("should have aria-live on scroller", () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      a(/* @__PURE__ */ s(n, { cells: l, id: "test" }));
       const e = i.getByRole("group");
       o(e).toHaveAttribute("aria-live", "polite");
     }), r("should have proper button labels", async () => {
@@ -555,8 +558,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0 }
           }
         )
@@ -569,8 +572,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0 }
           }
         )
@@ -583,8 +586,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { showControls: !0 }
           }
         )
@@ -598,25 +601,25 @@ u("Carousel", () => {
     });
   }), u("Responsive Behavior", () => {
     r("should render without errors on mount", () => {
-      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      const { container: e } = a(/* @__PURE__ */ s(n, { cells: l, id: "test" }));
       o(e).toBeTruthy();
     }), r("should handle window resize events", () => {
-      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      const { container: e } = a(/* @__PURE__ */ s(n, { cells: l, id: "test" }));
       window.dispatchEvent(new Event("resize"));
       const t = e.querySelector('[role="region"]');
       o(t).toBeInTheDocument();
     });
   }), u("Cleanup", () => {
     r("should cleanup on unmount", () => {
-      const { unmount: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      const { unmount: e } = a(/* @__PURE__ */ s(n, { cells: l, id: "test" }));
       o(() => e()).not.toThrow();
     }), r("should cleanup with autoplay enabled", () => {
       const { unmount: e } = a(
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { autoplay: !0 }
           }
         )
@@ -629,8 +632,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: { variableHeight: !0 }
           }
         )
@@ -639,7 +642,7 @@ u("Carousel", () => {
         o(e.length).toBeGreaterThan(0);
       });
     }), r("should default variableHeight to false", async () => {
-      a(/* @__PURE__ */ s(n, { id: "test", cells: l })), await c(() => {
+      a(/* @__PURE__ */ s(n, { cells: l, id: "test" })), await c(() => {
         const e = i.getAllByTestId(/carousel-slide-/);
         o(e.length).toBeGreaterThan(0);
       });
@@ -648,8 +651,8 @@ u("Carousel", () => {
     r("should handle multiple carousels on the same page", async () => {
       const { container: e } = a(
         /* @__PURE__ */ g(m, { children: [
-          /* @__PURE__ */ s(n, { id: "carousel-1", cells: l }),
-          /* @__PURE__ */ s(n, { id: "carousel-2", cells: l })
+          /* @__PURE__ */ s(n, { cells: l, id: "carousel-1" }),
+          /* @__PURE__ */ s(n, { cells: l, id: "carousel-2" })
         ] })
       );
       await c(() => {
@@ -663,8 +666,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: {
               showControls: !0,
               showPagination: !0,
@@ -687,8 +690,8 @@ u("Carousel", () => {
         /* @__PURE__ */ s(
           n,
           {
-            id: "test",
             cells: l,
+            id: "test",
             options: {
               autoplay: !0,
               autoplayDelay: 2e3,